Add an alert box above the header to advertise CML (#1543)

* Add an alert box above the header to advertise CML Not the most reusable implementation, but it does the job. * Update index.tsx * Update styles.module.css * Update index.tsx * Update index.tsx * Update index.tsx Co-authored-by: Ivan Shcheklein <[email protected]>
iterative · Jul 7, 2020 · 0c8484d · 0c8484d
1 parent f4b4a86
commit 0c8484d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
@@ -28,6 +28,13 @@ const LayoutHeader: React.FC<Required<ILayoutModifiable>> = ({ modifiers }) => {
         )}
       />
       <div className={styles.header}>
+        <div className={cn(styles.alert, collapsed && styles.collapsed)}>
+          <span role="img" aria-label="rocket">
+            🚀
+          </span>
+          Check out the newest tool,
+          <Link href="https://cml.dev">CML</Link>!
+        </div>
         <LayoutWidthContainer
           className={cn(styles.container, collapsed && styles.collapsed)}
           wide={includes(modifiers, LayoutModifiers.Wide)}

diff --git a/src/components/LayoutHeader/styles.module.css b/src/components/LayoutHeader/styles.module.css
@@ -59,3 +59,19 @@
   display: block;
   padding-top: 2px;
 }
+
+.alert {
+  height: 35px;
+  line-height: 35px;
+  font-size: 18px;
+  text-align: center;
+  width: 100%;
+  background-color: #dee;
+  transition: 0.5s all;
+  overflow: hidden;
+
+  &.collapsed {
+    height: 0;
+    transform: translateY(-100%);
+  }
+}