Fix UI Changes (#470)

Be-Secure · Nov 30, 2023 · bde7bb6 · bde7bb6
1 parent 7c70b3d
commit bde7bb6
Show file tree

Hide file tree

Showing 22 changed files with 313 additions and 280 deletions.
diff --git a/src/assets/theme/components/container.tsx b/src/assets/theme/components/container.tsx
@@ -1,7 +1,5 @@
 import breakpoints from "../base/breakpoints";
 
-import pxToRem from "../functions/pxToRem";
-
 const {
   values: { sm, md, lg, xl, xxl },
 } = breakpoints;
@@ -13,8 +11,8 @@ const XL = `@media (min-width: ${xl}px)`;
 const XXL = `@media (min-width: ${xxl}px)`;
 
 const sharedClasses = {
-  paddingRight: `${pxToRem(24)} !important`,
-  paddingLeft: `${pxToRem(24)} !important`,
+  paddingRight: 0,
+  paddingLeft: 0,
   marginRight: "auto !important",
   marginLeft: "auto !important",
   width: "100% !important",

diff --git a/src/assets/theme/components/table/tableCell.tsx b/src/assets/theme/components/table/tableCell.tsx
@@ -9,8 +9,8 @@ const { light } = colors;
 export default {
   styleOverrides: {
     root: {
-      padding: `${pxToRem(12)} ${pxToRem(16)}`,
-      borderBottom: `${borderWidth[1]} solid ${light.main}`,
+      padding: `${pxToRem(4)} ${pxToRem(10)}`,
+      borderBottom: `${borderWidth[1]} solid ${light.main}`
     },
   },
 };
diff --git a/src/dataStore.ts b/src/dataStore.ts
@@ -1,12 +1,12 @@
 export const osspoiMaster =
-  "https://raw.githubusercontent.com/Be-Secure/besecure-osspoi-datastore/main/OSSP-Master.json";
+  "https://raw.githubusercontent.com/Be-Secure/besecure-assets-store/main/projects/project-metadata.json";
 export const version_details =
-  "https://raw.githubusercontent.com/Be-Secure/besecure-osspoi-datastore/main/version_details/";
+  "https://raw.githubusercontent.com/Be-Secure/besecure-assets-store/main/projects/project-version/";
 export const assessment_datastore =
   "https://raw.githubusercontent.com/Be-Secure/besecure-assessment-datastore/main";
 export const vulnerabilityOffInterest =
-  "https://raw.githubusercontent.com/Be-Secure/besecure-ossvoi-datastore/main/vulnerability-of-interest.json";
+  "https://raw.githubusercontent.com/Be-Secure/besecure-assets-store/main/vulnerabilities/vulnerability-metadata.json";
 export const modelOfInterestData =
-  "https://raw.githubusercontent.com/Be-Secure/besecure-osmoi-datastore/main/model_of_interest.json";
+  "https://raw.githubusercontent.com/Be-Secure/besecure-assets-store/main/models/model-metadata.json";
 export const besecureMlAssessmentDataStore = "https://raw.githubusercontent.com/Be-Secure/besecure-ml-assessment-datastore/main/models";
 export const vulnerabilities = "https://raw.githubusercontent.com/Be-Secure/besecure-ml-assessment-datastore/main/models/timeseries-anomaly-detection/vulnerabilities/timeseries-anomaly-detection-vulnerabilities-detailed-report.json";
diff --git a/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx b/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx
@@ -61,6 +61,7 @@ function DefaultNavbarDropdown({
           textTransform="capitalize"
           color={light ? "white" : "dark"}
           sx={{ fontWeight: "100%", ml: 1, mr: 0.25 }}
+          style={{ fontSize: "0.975rem" }}
         >
           {name}
         </MKTypography>

diff --git a/src/examples/Navbars/DefaultNavbar/index.tsx b/src/examples/Navbars/DefaultNavbar/index.tsx
@@ -32,7 +32,7 @@ function DefaultNavbar({
   light,
   sticky,
   relative,
-  center,
+  center
 }: any) {
   const [dropdown, setDropdown]: any = useState("");
   const [dropdownEl, setDropdownEl]: any = useState("");
@@ -89,6 +89,7 @@ function DefaultNavbar({
         }}
         onMouseLeave={() => collapse && setDropdown(null)}
         light={light}
+
       />
     )
   );
@@ -163,16 +164,16 @@ function DefaultNavbar({
                           px={2}
                           sx={({
                             palette: { grey, dark },
-                            borders: { borderRadius },
+                            borders: { borderRadius }
                           }: any) => ({
                             borderRadius: borderRadius.md,
                             cursor: "pointer",
                             transition: "all 300ms linear",
 
                             "&:hover": {
                               backgroundColor: grey[200],
-                              color: dark.main,
-                            },
+                              color: dark.main
+                            }
                           })}
                         >
                           {item.name}
@@ -189,7 +190,7 @@ function DefaultNavbar({
                         top: "50%",
                         left: "-4px",
                         transform: "translateY(-45%)",
-                        height: "90%",
+                        height: "90%"
                       }}
                     />
                   )}
@@ -206,12 +207,12 @@ function DefaultNavbar({
             component: MuiLink,
             href: item.href,
             target: "_blank",
-            rel: "noreferrer",
+            rel: "noreferrer"
           };
 
           const routeComponent = {
             component: Link,
-            to: item.route,
+            to: item.route
           };
 
           return (
@@ -230,7 +231,7 @@ function DefaultNavbar({
               px={2}
               sx={({
                 palette: { grey, dark },
-                borders: { borderRadius },
+                borders: { borderRadius }
               }: any) => ({
                 borderRadius: borderRadius.md,
                 cursor: "pointer",
@@ -241,9 +242,9 @@ function DefaultNavbar({
                   color: dark.main,
 
                   "& *": {
-                    color: dark.main,
-                  },
-                },
+                    color: dark.main
+                  }
+                }
               })}
               onMouseEnter={({ currentTarget }: any) => {
                 if (item.dropdown) {
@@ -280,7 +281,7 @@ function DefaultNavbar({
                   sx={{
                     fontWeight: "normal",
                     verticalAlign: "middle",
-                    mr: -0.5,
+                    mr: -0.5
                   }}
                 >
                   keyboard_arrow_right
@@ -309,9 +310,9 @@ function DefaultNavbar({
           name: "arrow",
           enabled: true,
           options: {
-            element: arrowRef,
-          },
-        },
+            element: arrowRef
+          }
+        }
       ]}
       onMouseEnter={() => setDropdown(dropdownEl)}
       onMouseLeave={() => {
@@ -322,13 +323,7 @@ function DefaultNavbar({
       }}
     >
       {({ TransitionProps }) => (
-        <Grow
-          {...TransitionProps}
-          //   sx={{
-          //     transformOrigin: "left top",
-          //     background: ({ palette: { white } }: any) => white.main,
-          //   }}
-        >
+        <Grow {...TransitionProps}>
           <MKBox borderRadius="lg">
             <MKTypography variant="h1" color="white">
               <Icon ref={setArrowRef} sx={{ mt: -3 }}>
@@ -358,12 +353,12 @@ function DefaultNavbar({
                   component: MuiLink,
                   href: item.href,
                   target: "_blank",
-                  rel: "noreferrer",
+                  rel: "noreferrer"
                 };
 
                 const routeComponent = {
                   component: Link,
-                  to: item.route,
+                  to: item.route
                 };
 
                 return (
@@ -382,7 +377,7 @@ function DefaultNavbar({
                     px={2}
                     sx={({
                       palette: { grey, dark },
-                      borders: { borderRadius },
+                      borders: { borderRadius }
                     }: any) => ({
                       borderRadius: borderRadius.md,
                       cursor: "pointer",
@@ -393,9 +388,9 @@ function DefaultNavbar({
                         color: dark.main,
 
                         "& *": {
-                          color: dark.main,
-                        },
-                      },
+                          color: dark.main
+                        }
+                      }
                     })}
                   >
                     {item.description ? (
@@ -420,7 +415,7 @@ function DefaultNavbar({
                         sx={{
                           fontWeight: "normal",
                           verticalAlign: "middle",
-                          mr: -0.5,
+                          mr: -0.5
                         }}
                       >
                         keyboard_arrow_right
@@ -455,9 +450,7 @@ function DefaultNavbar({
       }}
     >
       {({ TransitionProps }) => (
-        <Grow
-          {...TransitionProps}
-        >
+        <Grow {...TransitionProps}>
           <MKBox ml={2.5} mt={-2.5} borderRadius="lg">
             <MKBox shadow="lg" borderRadius="lg" py={1.5} px={1} mt={2}>
               {renderNestedRoutes}
@@ -469,27 +462,29 @@ function DefaultNavbar({
   );
 
   return (
-    <Container sx={sticky ? { position: "sticky", top: 0, zIndex: 10 } : null}>
+    <Container
+      maxWidth={false}
+      style={{ padding: 0, minWidth: "100%" }}
+      sx={sticky ? { position: "sticky", top: 0, zIndex: 10 } : null}
+    >
       <MKBox
         py={1}
         px={{ xs: 4, sm: transparent ? 2 : 3, lg: transparent ? 0 : 2 }}
-        my={relative ? 0 : 2}
-        mx={relative ? 0 : 3}
-        width={relative ? "100%" : "calc(100% - 48px)"}
+        width="100%"
         borderRadius="xl"
         shadow={transparent ? "none" : "md"}
         color={light ? "white" : "dark"}
         position={relative ? "relative" : "absolute"}
-        left={0}
         zIndex={3}
         sx={({
           palette: { transparent: transparentColor, white },
-          functions: { rgba },
+          functions: { rgba }
         }: any) => ({
+          margin: 0,
           backgroundColor: transparent
             ? transparentColor.main
             : rgba(white.main, 0.8),
-          backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`,
+          backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`
         })}
       >
         <MKBox
@@ -500,14 +495,15 @@ function DefaultNavbar({
           <MKBox
             component={Link}
             to="/"
-            lineHeight={1}
+            lineHeight={2}
             py={transparent ? 1.5 : 0.75}
             pl={relative || transparent ? 0 : { xs: 0, lg: 1 }}
           >
             <MKTypography
               variant="button"
               fontWeight="bold"
               color={light ? "white" : "dark"}
+              style={{ fontSize: "0.975rem" }}
             >
               {brand}
             </MKTypography>
@@ -520,7 +516,7 @@ function DefaultNavbar({
           >
             {renderNavbarItems}
           </MKBox>
-          <MKBox
+          {/* <MKBox
             display={{ xs: "inline-block", lg: "none" }}
             lineHeight={0}
             py={1.5}
@@ -530,9 +526,9 @@ function DefaultNavbar({
             onClick={openMobileNavbar}
           >
             <Icon>{mobileNavbar ? "close" : "menu"}</Icon>
-          </MKBox>
+          </MKBox> */}
         </MKBox>
-        <MKBox
+        {/* <MKBox
           bgColor={transparent ? "white" : "transparent"}
           shadow={transparent ? "lg" : "none"}
           borderRadius="xl"
@@ -541,7 +537,7 @@ function DefaultNavbar({
           {mobileView && (
             <DefaultNavbarMobile routes={routes} open={mobileNavbar} />
           )}
-        </MKBox>
+        </MKBox> */}
       </MKBox>
       {dropdownMenu}
       {nestedDropdownMenu}
@@ -557,7 +553,7 @@ DefaultNavbar.defaultProps = {
   action: false,
   sticky: false,
   relative: false,
-  center: false,
+  center: false
 };
 
 export default DefaultNavbar;
diff --git a/src/layouts/pages/projectOfInterest/PoiTable/PoiListHead.tsx b/src/layouts/pages/projectOfInterest/PoiTable/PoiListHead.tsx
@@ -31,13 +31,15 @@ UserListHead.propTypes = {
   numSelected: PropTypes.number,
   onRequestSort: PropTypes.func,
   onSelectAllClick: PropTypes.func,
+  requestFromOtherComponent: PropTypes.bool
 };
 
 export default function UserListHead({
   order,
   orderBy,
   headLabel,
   onRequestSort,
+  requestFromOtherComponent,
 }: any) {
   const createSortHandler = (property: any) => (event: any) => {
     onRequestSort(event, property);
@@ -58,6 +60,7 @@ export default function UserListHead({
               active={orderBy === headCell.id}
               direction={orderBy === headCell.id ? order : "asc"}
               onClick={createSortHandler(headCell.id)}
+              style={{position: "relative", minWidth: (requestFromOtherComponent) ? '' : "134px"}}
             >
               {headCell.label}
               {orderBy === headCell.id ? (

diff --git a/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx b/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx
@@ -60,7 +60,7 @@ export default function ProjectDisplay() {
   const [filterName, setFilterName] = useState("");
   const [order, setOrder] = useState("asc");
   const [orderBy, setOrderBy] = useState("id");
-  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const [rowsPerPage, setRowsPerPage] = useState(15);
   let getUSERLIST = [];
   if (projectOfInterestData.getPoiData("Project_of_interest")) {
     getUSERLIST = projectOfInterestData.getPoiData("Project_of_interest");
@@ -218,7 +218,7 @@ export default function ProjectDisplay() {
                 margin: "auto",
               },
             }}
-            rowsPerPageOptions={[5, 10, 25]}
+            rowsPerPageOptions={[15, 30, 45]}
             component="div"
             count={getUSERLIST.length}
             rowsPerPage={rowsPerPage}