Update header with beta info + tweak for small screens

RolnickLab · Jan 31, 2024 · c5a322a · c5a322a
1 parent bff5178
commit c5a322a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/ui/src/components/header/header.module.scss b/ui/src/components/header/header.module.scss
@@ -8,7 +8,8 @@
   height: 64px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 32px;
   padding: 0 100px;
   background-color: $color-generic-white;
   border-bottom: 1px solid $color-neutral-100;
@@ -22,12 +23,18 @@
   vertical-align: middle;
 }
 
-.infoPages {
+.rightContent {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  flex: 1;
   gap: 4px;
 }
 
+.infoPages {
+  display: contents;
+}
+
 @media only screen and (max-width: $medium-screen-breakpoint) {
   .header {
     padding: 0 32px;
@@ -37,5 +44,10 @@
 @media only screen and (max-width: $small-screen-breakpoint) {
   .header {
     padding: 0 16px;
+    gap: 16px;
+  }
+
+  .infoPages {
+    display: none;
   }
 }
diff --git a/ui/src/components/header/header.tsx b/ui/src/components/header/header.tsx
@@ -8,6 +8,7 @@ import { STRING, translate } from 'utils/language'
 import { usePageTitle } from 'utils/usePageTitle'
 import { useUser } from 'utils/user/userContext'
 import ami from './ami.png'
+import { BetaInfo } from './beta-info/beta-info'
 import styles from './header.module.scss'
 import { UserInfoDialog } from './user-info-dialog/user-info-dialog'
 
@@ -31,10 +32,13 @@ export const Header = () => {
           className={styles.logo}
         />
       </Link>
-      <div className={styles.infoPages}>
-        {pages.map((page) => (
-          <InfoDialog key={page.id} name={page.name} slug={page.slug} />
-        ))}
+      <BetaInfo />
+      <div className={styles.rightContent}>
+        <div className={styles.infoPages}>
+          {pages.map((page) => (
+            <InfoDialog key={page.id} name={page.name} slug={page.slug} />
+          ))}
+        </div>
         <Button
           label={translate(STRING.SIGN_UP)}
           theme={ButtonTheme.Plain}