Merge pull request #780 from MAIF/feat/lightmode

feat: light mode
MAIF · Apr 9, 2024 · fbec62b · fbec62b
2 parents bbba988 + 698df79
commit fbec62b
Show file tree

Hide file tree

Showing 30 changed files with 371 additions and 167 deletions.
diff --git a/izanami-frontend/src/App.tsx b/izanami-frontend/src/App.tsx
@@ -30,7 +30,7 @@ import { Login } from "./pages/login";
 import Keys from "./pages/keys";
 import { isAuthenticated } from "./utils/authUtils";
 import "./App.css";
-import { Configuration, TUser } from "./utils/types";
+import { TUser } from "./utils/types";
 import { TIzanamiContext, IzanamiContext } from "./securityContext";
 import { Topbar } from "./Topbar";
 import { Users } from "./pages/users";
@@ -55,12 +55,9 @@ import { GlobalContexts } from "./pages/globalContexts";
 import { QueryBuilder } from "./pages/queryBuilder";
 import { GlobalContextIcon } from "./utils/icons";
 import { WasmScripts } from "./pages/wasmScripts";
-import {
-  differenceInDays,
-  differenceInMonths,
-  differenceInSeconds,
-} from "date-fns";
+import { differenceInMonths } from "date-fns";
 import { JsonViewer } from "@textea/json-viewer";
+import { AtomicDesign } from "./pages/atomicDesign";
 
 function Wrapper({
   element,
@@ -92,6 +89,42 @@ function redirectToLoginIfNotAuthenticated({
   }
 }
 
+let mode = window.localStorage.getItem("izanami-dark-light-mode");
+
+function setupLightMode() {
+  if (!mode) {
+    mode = "dark";
+    window.localStorage.setItem("izanami-dark-light-mode", mode);
+  }
+  applyLightMode();
+}
+
+function applyLightMode() {
+  let el = document.getElementById("lightMode");
+
+  if (el) {
+    if (mode === "dark") {
+      el.classList.remove("fa-moon");
+      el.classList.remove("fa-lightbulb");
+      el.classList.add("fa-moon");
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      el.classList.remove("fa-moon");
+      el.classList.remove("fa-lightbulb");
+      el.classList.add("fa-lightbulb");
+      window.document.body.classList.remove("white-mode");
+      window.document.body.classList.remove("dark-mode");
+      window.document.body.classList.add("white-mode");
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  }
+}
+function switchLightMode() {
+  mode = mode === "dark" ? "light" : "dark";
+  window.localStorage.setItem("izanami-dark-light-mode", mode);
+  applyLightMode();
+}
+
 const router = createBrowserRouter([
   {
     path: "/login",
@@ -129,6 +162,10 @@ const router = createBrowserRouter([
         path: "/home",
         element: <Wrapper element={HomePage} />,
       },
+      {
+        path: "/atomicDesign",
+        element: <Wrapper element={AtomicDesign} />,
+      },
       {
         path: "/users",
         element: <Wrapper element={Users} />,
@@ -390,6 +427,16 @@ function Layout() {
             </button>
           </div>
           <ul className="navbar-nav ms-auto">
+            <li
+              onClick={() => switchLightMode()}
+              className="me-2 d-flex align-items-center"
+            >
+              <i
+                id="lightMode"
+                className="fa fa-lightbulb"
+                style={{ color: "var(--color_level2)", cursor: "pointer" }}
+              />
+            </li>
             <li className="nav-item dropdown userManagement me-2">
               <a
                 className="nav-link"
@@ -578,6 +625,7 @@ export class App extends Component {
 
   componentDidUpdate(): void {
     this.fetchIntegrationsIfNeeded();
+    setupLightMode();
   }
 
   render() {

diff --git a/izanami-frontend/src/components/FeatureContexts.tsx b/izanami-frontend/src/components/FeatureContexts.tsx
@@ -268,7 +268,7 @@ function FeatureContextTree(props: {
                   const { createSubContextCallback } =
                     React.useContext(LocalContext);
                   return (
-                    <div className="sub_container anim__popUp">
+                    <div className="sub_container anim__popUp mt-2">
                       <h4>Add subcontext</h4>
                       <Form
                         schema={{

diff --git a/izanami-frontend/src/components/FeatureForm.tsx b/izanami-frontend/src/components/FeatureForm.tsx
@@ -1060,7 +1060,6 @@ export function V2FeatureForm(props: {
               style={{
                 position: "sticky",
                 bottom: "0px",
-                backgroundColor: "#42423f",
                 zIndex: "1",
                 width: "170px",
                 borderRadius: "10px",

diff --git a/izanami-frontend/src/components/FeatureTable.tsx b/izanami-frontend/src/components/FeatureTable.tsx
@@ -622,10 +622,7 @@ export function FeatureTable(props: {
       },
       customForm: (datum: TFeature, cancel: () => void) => {
         return (
-          <div
-            className="anim__rightToLeft"
-            style={{ backgroundColor: "#42423f" }}
-          >
+          <div className="anim__rightToLeft">
             <h4>Duplicate feature</h4>
             <FeatureForm
               defaultValue={datum}
@@ -655,10 +652,7 @@ export function FeatureTable(props: {
       },
       customForm: (datum: TFeature, cancel: () => void) => {
         return (
-          <div
-            className="anim__rightToLeft"
-            style={{ backgroundColor: "#42423f" }}
-          >
+          <div className="anim__rightToLeft">
             <h4>Transfer to another project</h4>
             <TransferForm
               project={datum.project!}

diff --git a/izanami-frontend/src/components/GenericTable.tsx b/izanami-frontend/src/components/GenericTable.tsx
@@ -337,7 +337,7 @@ export function GenericTable<T extends RowData>(props: TProps<T>) {
             </tr>
           ))}
         </thead>
-        <tbody style={{ backgroundColor: "#494948" }}>
+        <tbody>
           <>
             {table.getRowModel().rows.length > 0 ? (
               table.getRowModel().rows.map((row) => (
@@ -391,10 +391,7 @@ export function GenericTable<T extends RowData>(props: TProps<T>) {
                         idAccessor(row.original!)
                       )}`}
                     >
-                      <td
-                        colSpan={completeColumns.length}
-                        style={{ backgroundColor: "#373736" }}
-                      >
+                      <td colSpan={completeColumns.length}>
                         <div className="sub_container">
                           {renderActionForm(
                             extractAction(row),

diff --git a/izanami-frontend/src/components/InvitationForm.tsx b/izanami-frontend/src/components/InvitationForm.tsx
@@ -16,7 +16,7 @@ export function InvitationForm(props: {
   const [level, setLevel] = useState<TLevel | undefined>();
   const { loadOptions } = props;
   return (
-    <div className="d-flex flex-column sub_container anim__rightToLeft">
+    <div className="d-flex flex-column sub_container anim__rightToLeft mb-2">
       <h4>Invite new users</h4>
       <label>
         Users to invite

diff --git a/izanami-frontend/src/components/OverloadCreationForm.tsx b/izanami-frontend/src/components/OverloadCreationForm.tsx
@@ -56,8 +56,7 @@ export function OverloadCreationForm(props: {
       <FormProvider {...methods}>
         <form
           onSubmit={handleSubmit((data) => submit(data))}
-          className="d-flex flex-column anim__rightToLeft p-3"
-          style={{ backgroundColor: "#42423f" }}
+          className="d-flex flex-column anim__rightToLeft p-3 sub_container"
         >
           <label>
             Name

diff --git a/izanami-frontend/src/components/RightSelector.tsx b/izanami-frontend/src/components/RightSelector.tsx
@@ -343,7 +343,7 @@ export function RightSelector(props: {
                       dispatch({ type: EventType.DeleteTenant, name });
                     }}
                   />
-                  <div className="project-selector">
+                  <div className="sub_container sub_container-bglighter project-selector">
                     <label>Project rights for {name}</label>
                     <div className="my-2">
                       <ProjectSelector
@@ -353,7 +353,7 @@ export function RightSelector(props: {
                       />
                     </div>
                   </div>
-                  <div className="key-selector">
+                  <div className="sub_container sub_container-bglighter key-selector">
                     <label>Keys rights for {name}</label>
                     <div className="my-2">
                       <KeySelector

diff --git a/izanami-frontend/src/index.scss b/izanami-frontend/src/index.scss
@@ -1,6 +1,6 @@
 h1,
 h2 {
-  color: $colorGris;
+  color: var(--color_level1);
 }
 
 .navbar {
@@ -17,7 +17,7 @@ h2 {
 main a:link,
 main a,
 main a:visited {
-  color: #fff;
+  color: var(--color_level1);
 }
 
 main a:active,
@@ -30,10 +30,11 @@ main a:focus {
 }
 
 .breadcrumb .active a {
-  color: $colorGris;
+  color: var(--color_level1);
 }
-.breadcrumb svg .icon_context {
-  fill: $colorGris !important;
+.breadcrumb svg .icon_context,
+.izanami-tree-node svg .icon_context {
+  fill: var(--color_level1) !important;
 }
 
 .breadcrumb .breadcrumb-item a {
@@ -44,14 +45,6 @@ main a:focus {
   }
 }
 
-#root table td {
-  color: #b5b3b3;
-}
-
-#root table th {
-  color: #fff;
-}
-
 #root .modal {
   width: 100%;
 }
@@ -71,28 +64,28 @@ main a:focus {
 
 input,
 textarea {
-  color: $colorGris !important;
-  border-color: $fondBody !important;
+  color: $color-dark-1 !important;
+  border-color: $color-dark-6 !important;
   border-radius: 4px;
   border: none;
 }
 
 input:not([role="combobox"]):not([type="checkbox"]),
 textarea {
   /* buggy on react-select */
-  background-color: $fondNavbar;
+  background-color: var(--bg-color_level3);
 }
 
-.card {
-  background-color: #494948;
+::placeholder {
+  color: var(--color_level3) !important;
 }
 
 #root .mrf-content_switch_button_on {
   background-color: $primaryColor;
 }
 
 #root .mrf-content_switch_button_off {
-  background-color: $colorGris;
+  background-color: $color-dark-1;
 }
 
 .MuiOutlinedInput-notchedOutline {
@@ -128,26 +121,26 @@ thead th {
 .mrf-btn.mrf-btn_blue {
   color: #fff;
   border: 1px solid;
-  border-color: $colorBleue;
+  border-color: var(--color-blue);
   &:hover,
   &.active,
   &.active:hover {
     color: #fff;
     border: 1px solid;
-    border-color: $colorBleue;
-    background-color: $colorBleue;
+    border-color: var(--color-blue);
+    background-color: var(--color-blue);
   }
 }
 
 .mrf-btn.mrf-btn_red {
   color: #fff;
   border: 1px solid;
-  border-color: $colorRouge;
+  border-color: var(--color-red);
   &:hover {
     color: #fff;
     border: 1px solid;
-    border-color: $colorRouge;
-    background-color: $colorRouge;
+    border-color: var(--color-red);
+    background-color: var(--color-red);
   }
 }
 
@@ -166,7 +159,7 @@ thead th {
 .key-selector {
   margin-top: 24px;
   margin-bottom: 24px;
-  background-color: #49494873;
+  // background-color: #49494873;
   border-radius: 10px;
   padding: 10px;
   margin-left: 30px;
@@ -194,11 +187,11 @@ thead th {
 }
 
 .activation-status {
-  font-weight: bold;
+  // font-weight: bold;
 }
 
 .enabled-status {
-  color: $primaryColor;
+  // color: $primaryColor;
 }
 
 .current-context-overload {
@@ -242,14 +235,14 @@ thead th {
   height: 22px;
   border-radius: 20px;
   display: flex;
-  background-color: $colorGris;
-  border: 1px solid $colorGris;
+  background-color: $color-dark-1;
+  border: 1px solid $color-dark-1;
   justify-content: flex-start;
 }
 
 .izanami-checkbox:not(:checked)::before {
   content: "";
-  background-color: $colorGris;
+  background-color: $color-dark-1;
   border-radius: 20px;
   cursor: pointer;
   width: 20px;
@@ -267,7 +260,7 @@ fieldset {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  // border: 1px solid $colorGris;
+  // border: 1px solid $color-dark-1;
   padding: 4px;
   margin: 4px;
 }