Merge pull request #7 from InseeFr/dev-fix-css

WIP: fix: Css for footer and AccessUrl button
InseeFr · Feb 24, 2023 · 2d36034 · 2d36034
2 parents 51b17b6 + 5262dc7
commit 2d36034
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 41 deletions.
diff --git a/.k8s/deployment.yaml b/.k8s/deployment.yaml
@@ -14,4 +14,4 @@ spec:
     spec:
       containers:
         - name: dc-ui
-          image: inseefr/coleman-my-surveys:0.2.10-rc
+          image: inseefr/coleman-my-surveys:0.2.11-rc
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coleman-my-surveys",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",

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
@@ -1,15 +1,15 @@
-import { Chip, Grid, Grow, Paper, Typography, Tooltip } from "@mui/material";
-import { isFuture, isPast } from "date-fns";
-import { getSurveyStatus } from "../../../../core/functions";
-import { surveyDictionary } from "i18n";
-import { ItemIcon } from "./itemIcon";
+import { Chip, Grid, Grow, Paper, Tooltip, Typography } from "@mui/material";
 import {
-  VALINT_QUESTIONING,
-  VALPAP_QUESTIONING,
-  PARTIELINT_QUESTIONING,
   HC_QUESTIONING,
+  PARTIELINT_QUESTIONING,
   REFUSAL_QUESTIONING,
+  VALINT_QUESTIONING,
+  VALPAP_QUESTIONING,
 } from "core/constants";
+import { isFuture, isPast } from "date-fns";
+import { surveyDictionary } from "i18n";
+import { getSurveyStatus } from "../../../../core/functions";
+import { ItemIcon } from "./itemIcon";
 
 export const SurveyItem = ({ survey, index }) => {
   const {
@@ -83,9 +83,9 @@ export const SurveyItem = ({ survey, index }) => {
           <Grid item xs={12} sm container>
             <Grid
               item
-              xs={3}
-              md={2}
+              xs={12}
               sm={2}
+              md={2}
               container
               direction="column"
               justifyContent="center"
@@ -105,7 +105,7 @@ export const SurveyItem = ({ survey, index }) => {
                 />
               </Tooltip>
             </Grid>
-            <Grid item xs={5} container direction="column" spacing={2}>
+            <Grid item xs={12} sm={5} container direction="column" spacing={2}>
               <Grid item xs>
                 <Typography gutterBottom variant="subtitle1" component="div">
                   {surveyWording}
@@ -114,26 +114,31 @@ export const SurveyItem = ({ survey, index }) => {
                   <b>{surveyDictionary.suIdentifier}</b>
                   {identificationCode}
                 </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  {getMessageDisplay()}
-                </Typography>
               </Grid>
             </Grid>
             <Grid
               item
-              xs={4}
+              xs={12}
+              sm={4}
+              spacing={1}
               container
               direction="column"
-              sx={{ textAlign: "right" }}
               justifyContent="center"
+              alignItems="end"
             >
               <Grid item>
                 <ItemIcon
                   status={getSurveyStatus(openingDate, closingDate, returnDate).status}
                   questioningStatus={questioningStatus}
+                  surveyWording={surveyWording}
                   accessUrl={accessUrl}
                 />
               </Grid>
+              <Grid item>
+                <Typography variant="body2" color="text.secondary">
+                  {getMessageDisplay()}
+                </Typography>
+              </Grid>
             </Grid>
           </Grid>
         </Grid>

diff --git a/src/ui/components/SurveyList/item/itemIcon.css b/src/ui/components/SurveyList/item/itemIcon.css
@@ -0,0 +1,5 @@
+a.go-to-questionnaire:hover,
+a.go-to-questionnaire:focus {
+  background-color: var(--theme-menu-background-hover);
+  color: var(--theme-menu-link-hover);
+}
diff --git a/src/ui/components/SurveyList/item/itemIcon.jsx b/src/ui/components/SurveyList/item/itemIcon.jsx
@@ -1,17 +1,18 @@
+import { ContentPasteGo } from "@mui/icons-material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import CloseIcon from "@mui/icons-material/Close";
 import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import { ContentPasteGo } from "@mui/icons-material";
+import { Button, Typography } from "@mui/material";
 import {
-  VALINT_QUESTIONING,
-  VALPAP_QUESTIONING,
   HC_QUESTIONING,
   REFUSAL_QUESTIONING,
+  VALINT_QUESTIONING,
+  VALPAP_QUESTIONING,
 } from "core/constants";
 import { surveyDictionary } from "i18n";
-import { Button, Typography } from "@mui/material";
+import "./itemIcon.css";
 
-export const ItemIcon = ({ status, questioningStatus, accessUrl }) => {
+export const ItemIcon = ({ status, surveyWording, questioningStatus, accessUrl }) => {
   const getLogoType = () => {
     if (status === surveyDictionary.surveyIncoming) {
       return <HourglassEmptyIcon />;
@@ -29,8 +30,9 @@ export const ItemIcon = ({ status, questioningStatus, accessUrl }) => {
     if (status === surveyDictionary.surveyOpen || status === surveyDictionary.surveyClosing) {
       return (
         <Button
-          aria-label={surveyDictionary.accessSurvey}
+          aria-label={`${surveyDictionary.accessSurvey} ${surveyWording}`}
           sx={{ textTransform: "none" }}
+          className="go-to-questionnaire"
           variant="contained"
           href={accessUrl}
           target="_blank"

diff --git a/src/ui/components/UserAccount/userAccount.css b/src/ui/components/UserAccount/userAccount.css
@@ -1,9 +1,7 @@
-.user-account button:hover {
-  background-color: var(--theme-menu-background-hover);
-  color: var(--theme-menu-link-hover);
-}
-
-.MuiDialog-root button:hover {
+.user-account button:hover,
+.MuiDialog-root button:hover,
+.user-account button:focus,
+.MuiDialog-root button:focus {
   background-color: var(--theme-menu-background-hover);
   color: var(--theme-menu-link-hover);
 }
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;
 }