From 148ea81aa9414b65ade00b0474dcb3ff3bb4c6ff Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 13 Feb 2024 16:03:25 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(app-desk)=20box=20default=20direct?=
 =?UTF-8?q?ion=20column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change the default direction of the Box component to column
to have a behavior closer to a normal div.
---
 .../apps/desk/src/app/InnerLayout.tsx         |  5 ++---
 src/frontend/apps/desk/src/app/page.tsx       |  2 +-
 src/frontend/apps/desk/src/components/Box.tsx |  1 +
 .../apps/desk/src/features/header/Header.tsx  | 19 +++++++++++++------
 .../apps/desk/src/features/menu/Menu.tsx      |  1 -
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/frontend/apps/desk/src/app/InnerLayout.tsx b/src/frontend/apps/desk/src/app/InnerLayout.tsx
index 262f7aa..c8fb990 100644
--- a/src/frontend/apps/desk/src/app/InnerLayout.tsx
+++ b/src/frontend/apps/desk/src/app/InnerLayout.tsx
@@ -7,12 +7,11 @@ export default function InnerLayout({
   children: React.ReactNode;
 }) {
   return (
-    <Box as="main" $direction="column" $height="100vh" $css="overflow:hidden;">
+    <Box as="main" $height="100vh" $css="overflow:hidden;">
       <Header />
-      <Box $css="flex: 1;">
+      <Box $css="flex: 1;" $direction="row">
         <Menu />
         <Box
-          $direction="column"
           $height={`calc(100vh - ${HEADER_HEIGHT})`}
           $width="100%"
           $css="overflow: auto;"
diff --git a/src/frontend/apps/desk/src/app/page.tsx b/src/frontend/apps/desk/src/app/page.tsx
index 8481a1a..7c25f61 100644
--- a/src/frontend/apps/desk/src/app/page.tsx
+++ b/src/frontend/apps/desk/src/app/page.tsx
@@ -9,7 +9,7 @@ export default function Home() {
   const { t } = useTranslation();
 
   return (
-    <Box $direction="column" className="p-b">
+    <Box className="p-b">
       <h1>{t('Hello Desk !')}</h1>
       <Teams />
     </Box>
diff --git a/src/frontend/apps/desk/src/components/Box.tsx b/src/frontend/apps/desk/src/components/Box.tsx
index 21181a9..30733bc 100644
--- a/src/frontend/apps/desk/src/components/Box.tsx
+++ b/src/frontend/apps/desk/src/components/Box.tsx
@@ -21,6 +21,7 @@ export interface BoxProps {
 
 export const Box = styled('div')<BoxProps>`
   display: flex;
+  flex-direction: column;
   ${({ $align }) => $align && `align-items: ${$align};`}
   ${({ $background }) => $background && `background: ${$background};`}
   ${({ $color }) => $color && `color: ${$color};`}
diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
index 5e5eb69..0c84049 100644
--- a/src/frontend/apps/desk/src/features/header/Header.tsx
+++ b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -42,16 +42,21 @@ export const Header = () => {
   return (
     <StyledHeader>
       <RedStripe />
-      <Box className="ml-bx mr-bx" $align="center" $justify="space-between">
-        <Box $direction="column">
+      <Box
+        className="ml-bx mr-bx"
+        $align="center"
+        $justify="space-between"
+        $direction="row"
+      >
+        <Box>
           <Image priority src={IconMarianne} alt={t('Marianne Logo')} />
-          <Box $align="center" $gap="6rem">
+          <Box $align="center" $gap="6rem" $direction="row">
             <Image
               priority
               src={IconGouv}
               alt={t('Freedom Equality Fraternity Logo')}
             />
-            <Box $align="center" $gap="1rem">
+            <Box $align="center" $gap="1rem" $direction="row">
               <Image priority src={IconDesk} alt={t('Desk Logo')} />
               <Text className="m-0" as="h2">
                 {t('Desk')}
@@ -68,18 +73,20 @@ export const Header = () => {
           `}
           $gap="5rem"
           $justify="flex-end"
+          $direction="row"
         >
-          <Box $align="center">
+          <Box $align="center" $direction="row">
             <Button
               aria-label={t('Access to FAQ')}
               icon={<Image priority src={IconFAQ} alt={t('FAQ Icon')} />}
               className="m-s c__button-no-bg p-0"
+              color="tertiary"
             >
               {t('FAQ')}
             </Button>
             <LanguagePicker />
           </Box>
-          <Box>
+          <Box $direction="row">
             <Box $direction="row" $align="center" $gap="1rem">
               <Text $weight="bold">John Doe</Text>
               <Image
diff --git a/src/frontend/apps/desk/src/features/menu/Menu.tsx b/src/frontend/apps/desk/src/features/menu/Menu.tsx
index 2126abe..c606a41 100644
--- a/src/frontend/apps/desk/src/features/menu/Menu.tsx
+++ b/src/frontend/apps/desk/src/features/menu/Menu.tsx
@@ -23,7 +23,6 @@ export const Menu = () => {
       $height="100%"
       $width="3.75rem"
       $justify="space-between"
-      $direction="column"
     >
       <Box className="pt-b" $direction="column" $gap="0.8rem">
         <MenuItem Icon={IconSearch} label={t('Search')} href="/" />