From 5262dc7721d7807d918b1670bfeaa8a9e18b2d06 Mon Sep 17 00:00:00 2001
From: Caouissin Laurent <XBELTV@ad.insee.intra>
Date: Wed, 18 Jan 2023 15:23:22 +0100
Subject: [PATCH] [UI] - Improve style for footer

---
 src/App.css                                    |  6 +++---
 src/ui/components/SurveyList/item/index.jsx    |  2 +-
 src/ui/components/SurveyList/item/itemIcon.jsx |  1 +
 src/ui/router/index.jsx                        |  4 ++--
 src/ui/shared/Footer/footer.css                | 11 ++++++-----
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/App.css b/src/App.css
index e00f029..f92746a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,16 +11,16 @@
   --theme-menu-link-hover: #514930;
   --theme-menu-separator: #414c5c;
 
-  --theme-footer-link: #514930;
+  --theme-footer-link: white;
 
   --theme-gray-gradient: linear-gradient(180deg, #ffffffd7, #dbdbdb);
 
   box-sizing: border-box;
-  background-color: white;
+  background-color: #efefef;
 }
 
 body {
-  background-color: white;
+  background-color: #efefef;
 }
 
 .main-content {
diff --git a/src/ui/components/SurveyList/item/index.jsx b/src/ui/components/SurveyList/item/index.jsx
index 174bda5..b3908f5 100644
--- a/src/ui/components/SurveyList/item/index.jsx
+++ b/src/ui/components/SurveyList/item/index.jsx
@@ -123,8 +123,8 @@ export const SurveyItem = ({ survey, index }) => {
               spacing={1}
               container
               direction="column"
-              sx={{ textAlign: "right" }}
               justifyContent="center"
+              alignItems="end"
             >
               <Grid item>
                 <ItemIcon
diff --git a/src/ui/components/SurveyList/item/itemIcon.jsx b/src/ui/components/SurveyList/item/itemIcon.jsx
index 046cdd9..e003777 100644
--- a/src/ui/components/SurveyList/item/itemIcon.jsx
+++ b/src/ui/components/SurveyList/item/itemIcon.jsx
@@ -10,6 +10,7 @@ import {
   VALPAP_QUESTIONING,
 } from "core/constants";
 import { surveyDictionary } from "i18n";
+import "./itemIcon.css";
 
 export const ItemIcon = ({ status, surveyWording, questioningStatus, accessUrl }) => {
   const getLogoType = () => {
diff --git a/src/ui/router/index.jsx b/src/ui/router/index.jsx
index a0a1559..faebc74 100644
--- a/src/ui/router/index.jsx
+++ b/src/ui/router/index.jsx
@@ -21,13 +21,13 @@ export const Router = () => {
                 <div className="main-content">
                   <Header />
                   <Menu />
-                  <Box sx={{ display: "flex", flexDirection: "column" }}>
+                  <Box>
                     <div className="main-body">
                       <Outlet />
                     </div>
-                    <Footer />
                   </Box>
                 </div>
+                <Footer />
               </UserAccountProvider>
             </ProtectedRoute>
           }
diff --git a/src/ui/shared/Footer/footer.css b/src/ui/shared/Footer/footer.css
index 0f3cf6d..6fadbcc 100644
--- a/src/ui/shared/Footer/footer.css
+++ b/src/ui/shared/Footer/footer.css
@@ -1,16 +1,16 @@
 .footer {
-  border-radius: 3px;
-  background-image: var(--theme-gray-gradient);
+  margin-top: 2em;
+  background-color: var(--theme-menu-background);
 }
 
 .footer ul {
   display: flex;
   flex-wrap: wrap;
+  margin: 0;
+  padding: 5em 0 5em 0;
   justify-content: space-around;
   align-items: stretch;
   list-style: none;
-  /* margin: 0.3em; */
-  padding: 0.2em;
 }
 
 .footer ul li {
@@ -24,9 +24,10 @@
   border: none;
 }
 
+.footer ul li,
 .footer ul li a {
   align-self: center;
   text-align: center;
   color: var(--theme-footer-link);
-  font-size: 0.85em;
+  font-size: 1em;
 }