[#20] modified css and structure to look like mock

linagora · Dec 16, 2024 · 9314911 · 9314911
1 parent f0610c8
commit 9314911
Show file tree

Hide file tree

Showing 27 changed files with 228 additions and 280 deletions.
diff --git a/src/App.css b/src/App.css
@@ -2,9 +2,14 @@
   text-align: center;
 }
 .main {
-  margin-top: 75px;
-  text-align: center;
+  margin-left: 250px;
+}
+
+.breadcrumbs {
+  padding-top: 1vw;
+  padding-left: 2vw;
 }
+
 @media (max-width: 500px) {
   .main {
     margin-top: 100px;

diff --git a/src/components/NavBar.css b/src/components/NavBar.css
@@ -1,30 +1,38 @@
 .navbar {
-  position: fixed;
-  top: 0;
-  width: 100vw;
-  color: gray;
   z-index: 1100;
 }
 
+.navbar .MuiDrawer-paper {
+  width: 250px;
+  background-color: rgb(92, 93, 111);
+  color: rgb(209, 211, 223);
+}
+
 .navbar img {
-  margin-right: 2vw;
+  margin-top: 35px;
+  margin-bottom: 90px;
+  width: 200px;
+  border-radius: 2px;
 }
 
-.navbar p {
+.navbarOptions p {
   cursor: pointer;
 }
 
 .navbarOptions {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
   overflow-wrap: break-word;
   justify-content: space-between;
+  flex-direction: column;
+  height: 45vh;
+  align-content: center;
 }
 
 .menuBurger {
   position: fixed;
-  right: 2vw;
+  bottom: 10px;
+  left: 10px;
 }
 
 .menu {

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,16 +1,15 @@
 import MenuIcon from "@mui/icons-material/Menu";
 import {
-  AppBar,
   Button,
   ButtonGroup,
   Divider,
+  Drawer,
   IconButton,
   Menu,
   MenuItem,
-  Toolbar,
   Typography,
 } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { push } from "redux-first-history";
 import { useAppDispatch } from "../app/hooks";
@@ -25,124 +24,99 @@ function Navbar({ partial }: { partial?: number }) {
     i18n.changeLanguage(language);
     console.debug(`Language changed to ${language}`);
   };
+
   return (
-    <AppBar color="secondary" className="navbar">
-      <Toolbar>
+    <Drawer className="navbar" variant="permanent" anchor="left">
+      <div className="navbarOptions">
         <Typography>
           <img
             src={require("../static/llng-logo-32.png")}
             alt="LemonLogo"
             style={{ backgroundColor: "white" }}
           />
         </Typography>
-        <Divider />
         {!partial && (
-          <div className="navbarOptions">
+          <>
             <Typography
               variant="h6"
               component="div"
-              onClick={() => dispatch(push(""))}
+              onClick={() => dispatch(push("/manager.html"))}
               style={{ cursor: "pointer", marginRight: "15px" }}
-              sx={{ flexGrow: 1 }}
             >
               {t("Configuration")}
             </Typography>
             <Typography
               variant="h6"
               component="div"
               style={{ cursor: "pointer", marginRight: "15px" }}
-              sx={{ flexGrow: 1 }}
             >
               {t("sessions")}
             </Typography>
             <Typography
               variant="h6"
               component="div"
               style={{ cursor: "pointer", marginRight: "15px" }}
-              sx={{ flexGrow: 1 }}
             >
               {t("notifications")}
             </Typography>
             <Typography
               variant="h6"
               component="div"
               style={{ cursor: "pointer", marginRight: "15px" }}
-              sx={{ flexGrow: 1 }}
             >
               {t("secondFactors")}
             </Typography>
-          </div>
+          </>
         )}
-
-        <IconButton
-          size="large"
-          edge="end"
-          className="menuBurger"
-          aria-label="menu burger"
-          aria-controls="menu-appbar"
-          aria-haspopup="true"
-          onClick={() => setMenuOpen(true)}
-          color="inherit"
-        >
-          <MenuIcon />
-        </IconButton>
-        <Menu
-          id="menu-appbar"
-          anchorOrigin={{
-            vertical: "top",
-            horizontal: "right",
-          }}
-          keepMounted
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "right",
-          }}
-          open={menuOpen}
-          onClose={() => setMenuOpen(false)}
-        >
-          <MenuItem
-            onClick={() => {
-              (window as any).menulinks.map(
-                (el: { title: string; target: string }) => {
-                  if (el.title === "backtoportal") {
-                    window.location.href = el.target;
-                  }
-                }
-              );
-            }}
-          >
-            {t("backtoportal")}
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              (window as any).menulinks.map(
-                (el: { title: string; target: string }) => {
-                  if (el.title === "logout") {
-                    window.location.href = el.target;
-                  }
-                }
-              );
-            }}
+      </div>
+      <IconButton
+        size="large"
+        edge="end"
+        className="menuBurger"
+        aria-label="menu burger"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={() => setMenuOpen(true)}
+        color="inherit"
+      >
+        <MenuIcon />
+      </IconButton>
+      <Menu
+        id="menu-appbar"
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        open={menuOpen}
+        onClose={() => setMenuOpen(false)}
+      >
+        <MenuItem onClick={() => console.debug("portal")}>
+          {t("backtoportal")}
+        </MenuItem>
+        <MenuItem onClick={() => console.debug("logout")}>
+          {t("logout")}
+        </MenuItem>
+        <Divider />
+        <MenuItem>
+          <ButtonGroup
+            variant="text"
+            color="secondary"
+            aria-label="Basic button group"
           >
-            {t("logout")}
-          </MenuItem>
-          <Divider />
-          <MenuItem>
-            <ButtonGroup
-              variant="text"
-              color="secondary"
-              aria-label="Basic button group"
-            >
-              <Button onClick={() => handleLanguageChange("fr")}>🇫🇷</Button>
-              <Button onClick={() => handleLanguageChange("en")}>🇬🇧</Button>
-              <Button onClick={() => handleLanguageChange("es")}>🇪🇸</Button>
-            </ButtonGroup>
-          </MenuItem>
-          <Divider />
-          <MenuItem>{t("version")} 0.0.1</MenuItem>
-        </Menu>
-      </Toolbar>
-    </AppBar>
+            <Button onClick={() => handleLanguageChange("fr")}>🇫🇷</Button>
+            <Button onClick={() => handleLanguageChange("en")}>🇬🇧</Button>
+            <Button onClick={() => handleLanguageChange("es")}>🇪🇸</Button>
+          </ButtonGroup>
+        </MenuItem>
+        <Divider />
+        <MenuItem>{t("version")} 0.0.1</MenuItem>
+      </Menu>
+    </Drawer>
   );
 }
 

diff --git a/src/components/SaveButton.css b/src/components/SaveButton.css
@@ -8,6 +8,7 @@
   border-radius: 50%;
   bottom: 2%;
   right: 2%;
+  z-index: 2000;
 }
 
 .notif {

diff --git a/src/components/SaveButton.tsx b/src/components/SaveButton.tsx
@@ -20,7 +20,6 @@ export default function SaveButton({ partial }: { partial?: boolean }) {
     <div>
       <Fab
         className="saveButton"
-        style={{ position: "fixed", bottom: "2%", left: "2%" }}
         color="primary"
         onClick={async () => {
           let stateOk = true;

diff --git a/src/components/applicationsComponents/AppPage.css b/src/components/applicationsComponents/AppPage.css
@@ -75,7 +75,6 @@ textarea {
   justify-content: space-between;
   background-color: rgb(37, 63, 63);
   padding: 2%;
-  border-radius: 15px;
   color: #acacac;
   display: flex;
   justify-content: space-around;

diff --git a/src/components/applicationsComponents/CasApp.tsx b/src/components/applicationsComponents/CasApp.tsx
@@ -49,7 +49,9 @@ export function CasApp({ name }: { name: string }) {
   const dispatch = useAppDispatch();
   return (
     <div>
-      <strong className="title">{name}</strong>
+      <div className="top">
+        <strong className="title">{name}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${optionSelected === "basic" ? "selected" : ""}`}

diff --git a/src/components/applicationsComponents/NativeApp.tsx b/src/components/applicationsComponents/NativeApp.tsx
@@ -405,7 +405,9 @@ export function NativeApp({ name }: { name: string }) {
   const dispatch = useAppDispatch();
   return (
     <div>
-      <strong className="title">{name}</strong>
+      <div className="top">
+        <strong className="title">{name}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${optionSelected === "basic" ? "selected" : ""}`}

diff --git a/src/components/applicationsComponents/OIDCApp.tsx b/src/components/applicationsComponents/OIDCApp.tsx
@@ -33,7 +33,9 @@ export function OIDCApp({ name }: { name: string }) {
   const dispatch = useAppDispatch();
   return (
     <div>
-      <strong className="title">{name}</strong>
+      <div className="top">
+        <strong className="title">{name}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${

diff --git a/src/components/applicationsComponents/SAMLApp.tsx b/src/components/applicationsComponents/SAMLApp.tsx
@@ -42,7 +42,9 @@ export function SAMLApp({
   const [optionSelected, setOptionSelected] = useState("basic");
   return (
     <div>
-      <strong className="title">{name}</strong>
+      <div className="top">
+        <strong className="title">{name}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${optionSelected === "basic" ? "selected" : ""}`}

diff --git a/src/components/issuersComponents/CasIssuer.tsx b/src/components/issuersComponents/CasIssuer.tsx
@@ -31,7 +31,9 @@ export function CasIssuer() {
   const [option, setOption] = useState("basic");
   return (
     <div>
-      <strong className="title">{t("casServiceMetadata")}</strong>
+      <div className="top">
+        <strong className="title">{t("casServiceMetadata")}</strong>{" "}
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${option === "basic" ? "selected" : ""}`}

diff --git a/src/components/issuersComponents/GetIssuer.tsx b/src/components/issuersComponents/GetIssuer.tsx
@@ -20,8 +20,9 @@ export function GetIssuer() {
 
   return (
     <div>
-      <strong className="title">{t("issuerDBGetParameters")}</strong>
-
+      <div className="top">
+        <strong className="title">{t("issuerDBGetParameters")}</strong>
+      </div>
       <div className="appDesc">
         <div className="box">
           <table>

diff --git a/src/components/issuersComponents/OIDCIssuer.tsx b/src/components/issuersComponents/OIDCIssuer.tsx
@@ -34,7 +34,9 @@ export function OIDCIssuer() {
 
   return (
     <div>
-      <strong className="title">{t("OIDCServiceMetaData")}</strong>
+      <div className="top">
+        <strong className="title">{t("OIDCServiceMetaData")}</strong>
+      </div>
       <div className="optionNavbar">
         <label
           className={`option ${option === "basic" ? "selected" : ""}`}

diff --git a/src/components/issuersComponents/OIDIssuer.tsx b/src/components/issuersComponents/OIDIssuer.tsx
@@ -18,7 +18,9 @@ export function OIDIssuer() {
   const dispatch = useAppDispatch();
   return (
     <div>
-      <strong className="title">{t("issuerDBOIDParameters")}</strong>
+      <div className="top">
+        <strong className="title">{t("issuerDBOIDParameters")}</strong>
+      </div>
       <div className="appDesc">
         <div className="box">
           <table>