feat: refont home page + login/access pages

SocialGouv · Nov 12, 2023 · 5a98169 · 5a98169
1 parent dcb2c79
commit 5a98169
Show file tree

Hide file tree

Showing 18 changed files with 547 additions and 591 deletions.
diff --git a/src/client/src/components/App/Footer/footer.scss b/src/client/src/components/App/Footer/footer.scss
@@ -21,6 +21,10 @@
             display: flex;
             flex-direction: row !important;
             padding: 1rem 4.25rem;
+            @media (max-width: 600px) {
+                padding: $spacing-1;
+            }
+
         }
         &__gouv-logo {
             background: #fff;
@@ -36,6 +40,9 @@
             font-size: $font-size-small !important;
             line-height: 1.25rem !important;
             font-family: $marianne;
+            @media (max-width: 600px) {
+                padding: $spacing-3;
+            }
             a {
                 color: $footer-link !important;
 

diff --git a/src/client/src/components/App/Header/Header.js b/src/client/src/components/App/Header/Header.js
@@ -54,13 +54,12 @@ const Header = ({ resetSearch, hasSharedButton = false }) => {
 
             {hasSharedButton && (
               <div className="header__mailto">
-                <Tooltip
-                  content="Partager FCE avec un agent"
-                  position={"bottom"}
-                >
-                  <a href="mailto:?subject=FCE - le portail de l'intelligence collective des agents publics&body=https://fce.fabrique.social.gouv.fr/">
-                    <MessageIcon />
-                  </a>
+                <Tooltip content="Partager FCE avec un agent" position={"left"}>
+                  <div className="icon-button-link">
+                    <a href="mailto:?subject=FCE - le portail de l'intelligence collective des agents publics&body=https://fce.fabrique.social.gouv.fr/">
+                      <MessageIcon size={"100%"} />
+                    </a>
+                  </div>
                 </Tooltip>
               </div>
             )}

diff --git a/src/client/src/components/App/Header/header.scss b/src/client/src/components/App/Header/header.scss
@@ -19,7 +19,6 @@
     &__items {
         display: flex;
         justify-content: space-between;
-        align-items: center;
         width: 100%;
         flex-wrap: wrap;
     }
@@ -40,10 +39,16 @@
             flex-direction: row !important;
             padding: auto;
         }
+        @media (max-width: 600px) {
+            min-height: 150px !important;
+        }
     }
     &__logo_marianne {
         width: 100%;
         height: 100%;
+        @media (max-width: 600px) {
+            width: 80% !important;
+        }
     }
 
     &__logo_FCE {
@@ -52,26 +57,45 @@
         align-items: center;
         &-repub {
             margin-right: 2.5rem;
+            @media (max-width: 600px) {
+                margin-right: 0 !important;
+            }
+        }
+        .logo-wrapper {
+            @media (max-width: 600px) {
+                margin-left: -$spacing-5 !important;
+            }
         }
     }
     &__mailto {
         display: flex;
         justify-content: flex-end;
-
-        a {
-            font-size: .875rem;
-            min-height: 2rem;
-            overflow: initial;
-            padding: 0.25rem 0.75rem;
-            color: $dark-blue;
-            border: none;
-            line-height: 1.5rem;
-            font-weight: 600;
-            transition: background-color 150ms ease-in;
-
-            // &:hover {
-            //     background-color: darken($deep-blue, 5%);
-            // }
+        align-items: center;
+        .icon-button-link {
+            a {
+                text-align: center;
+                height: 18px;
+                width: 18px;
+            }
+            &:hover {
+                background-color: #f5f5f5 !important;
+            }
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: inherit;
+            text-decoration: none;
+            background-color: transparent !important;
+            border: none !important;
+            width: 2rem;
+            height: 2rem;
+            text-align: center;
+            cursor: pointer;
+        }
+    }
+
+    &__titles {
+        @media (max-width: 600px) {
         }
     }
     &__title {
@@ -80,8 +104,11 @@
         font-weight: bold;
         color: $dark-grey !important;
         margin-left: $spacing-3;
+        @media (max-width: 600px) {
+            font-size: $font-size-base-small;
+        }
         @media print {
-            font-size: font-size-base;
+            font-size: $font-size-base;
             margin-left: 0;
         }
     }

diff --git a/src/client/src/components/App/_helpers.scss b/src/client/src/components/App/_helpers.scss
@@ -17,13 +17,17 @@
 .is-secondary {
     @extend .is-info;
 }
-
+button.is-disabled {
+    color: #929292 !important;
+    background-color: $white-smoke !important;
+
+}
 button.is-tertiary {
     color: $white;
-    background-color: $carolina-blue;
+    background-color: $dark-blue !important;
 
     &:hover {
         color: $white;
-        background-color: darken($carolina-blue, 5%);
+        background-color: darken($dark-blue, 5%);
     }
 }
diff --git a/src/client/src/components/App/_typography.scss b/src/client/src/components/App/_typography.scss
@@ -1,5 +1,5 @@
 body {
-    font-family: $roboto;
+    font-family: $marianne;
 }
 
 h1,
@@ -13,13 +13,13 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: $roboto;
+    font-family: $marianne;
     letter-spacing: normal;
     font-weight: bold;
 }
 
 button {
-    font-family: $roboto;
+    font-family: $marianne;
     font-weight: bold;
 }
 
@@ -81,3 +81,4 @@ button {
 .has-text-evolventa {
     font-family: Evolventa Pro, sans-serif;
 }
+
diff --git a/...client/src/components/DataSheets/Sections/SharedComponents/PrintSection/PrintSection.scss b/...client/src/components/DataSheets/Sections/SharedComponents/PrintSection/PrintSection.scss
@@ -2,7 +2,7 @@
 .data-sheet__print-section {
     .print-btn {
         background-color: white !important;
-        border: 1px solid #dddddd !important;
+        border: 1px solid $default-grey!important;
         width: 2.5rem;
         height: 2.5rem;
         cursor: pointer;

diff --git a/src/client/src/components/DataSheets/Sidebar/sidebar.scss b/src/client/src/components/DataSheets/Sidebar/sidebar.scss
@@ -127,7 +127,7 @@ $border-color: var(--border-color);
             color: inherit;
             text-decoration: none;
             background-color: white !important;
-            border: 1px solid #dddddd !important;
+            border: 1px solid $default-grey !important;
             width: 2.5rem;
             height: 2.5rem;
             cursor: pointer;
@@ -184,29 +184,6 @@ $border-color: var(--border-color);
         }
     }
 
-    &__establishment {
-        padding: $spacing-1 $spacing-4;
-        border: $border-grey-light;
-        background-color: $sidebar-establishment-bg;
-
-        &:last-child {
-            margin-bottom: $spacing-5;
-        }
-
-        &--current {
-            border: none;
-            border-left: 4px solid $secondary;
-            background-color: $white;
-
-            &.head-office {
-                border-bottom: $border-grey-light;
-            }
-        }
-    }
-
-    &__view-all-button {
-        @extend .sidebar__enterprise-button;
-        margin-top: 0;
-        margin-bottom: $spacing-5;
-    }
+
+
 }
diff --git a/src/client/src/components/HomePage/HomePage.js b/src/client/src/components/HomePage/HomePage.js
@@ -1,15 +1,15 @@
 import "./homePage.scss";
 
 import React, { useEffect, useState } from "react";
-import { Redirect } from "react-router";
 
-import Auth from "../../services/Auth";
+// import { Redirect } from "react-router";
+// import Auth from "../../services/Auth";
 import Http from "../../services/Http";
-import Search from "../Search/Search";
+// import Search from "../Search/Search";
 import { DailyUse, Footer, HowItWork, IconItems, Summary } from "./sections";
 
 const HomePage = () => {
-  const isLogged = Auth.isLogged();
+  // const isLogged = Auth.isLogged();
   const [users, setUsers] = useState();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -34,17 +34,17 @@ const HomePage = () => {
     getUsers();
   }, [setUsers, setIsLoading]);
 
-  if (isLogged)
-    return (
-      <Redirect
-        to={{
-          pathname: "/",
-        }}
-        component={Search}
-      />
-    );
+  // if (isLogged)
+  //   return (
+  //     <Redirect
+  //       to={{
+  //         pathname: "/",
+  //       }}
+  //       component={Search}
+  //     />
+  //   );
   return (
-    <div className="home-page">
+    <div className="home-page ">
       <Summary />
       <IconItems users={users} isLoading={isLoading} />
       <HowItWork />