From c5a322abbeadb1ec674406fa0c1d6ba5251d7755 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 31 Jan 2024 21:38:30 +0100
Subject: [PATCH] Update header with beta info + tweak for small screens

---
 ui/src/components/header/header.module.scss | 16 ++++++++++++++--
 ui/src/components/header/header.tsx         | 12 ++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/header/header.module.scss b/ui/src/components/header/header.module.scss
index f4c9c3a5d..915474f18 100644
--- 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
index f3f31d9eb..6d01a9a6f 100644
--- 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}