[UI] - Improve style for footer

InseeFr · Jan 18, 2023 · 5262dc7 · 5262dc7
1 parent 45ea7cd
commit 5262dc7
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 }