styles: design and Svg update

src/app/page.tsx

@@ -2,5 +2,5 @@ import Image from "next/image";
 import styles from "./page.module.scss";
 
 export default function Home() {
-  return <main className={styles.main}>fdhdhfh</main>;
+  return <main className={styles.main}>Demo page</main>;
 }

src/components/wrapper/dashboardWrapper.tsx

@@ -19,9 +19,23 @@ import Typography from "@mui/material/Typography";
 import { useState } from "react";
 import { UTILITY_CONSTANT } from "@/utilities/utilityConstant";
 import styles from "./DashboardWrapper.module.scss";
+import styled from "@emotion/styled";
 
 const drawerWidth = 260;
 
+const CssList = styled(List)({
+  width: "100%",
+  paddingBlock: "24px",
+  "& .MuiListItem-root": {
+    "& .MuiButtonBase-root": {
+      borderRadius: "15px",
+      "& .MuiListItemIcon-root": {
+        minWidth: "34px",
+      },
+    },
+  },
+});
+
 interface Props {
   window?: () => Window;
   children: React.ReactNode;
@@ -58,7 +72,7 @@ export default function DashboardWrapper(props: Props) {
         />
       </Toolbar>
       {/* <Divider /> */}
-      <List sx={{ padding: "0", paddingInline: "18px" }}>
+      <CssList sx={{ padding: "0", paddingInline: "18px" }}>
         {["Project Table"].map((text, index) => (
           <ListItem key={text} disablePadding>
             <ListItemButton>
@@ -69,7 +83,7 @@ export default function DashboardWrapper(props: Props) {
             </ListItemButton>
           </ListItem>
         ))}
-      </List>
+      </CssList>
     </>
   );
 

src/utilities/svgConstant.tsx

@@ -1,4 +1,9 @@
 import exp from "constants";
+import { JSX } from "react";
+
+function createSvgIcon(arg0: JSX.Element, arg1: string) {
+  throw new Error("Function not implemented.");
+}
 
 export const EYE_SLASH = () => {
   return (
@@ -15,3 +20,71 @@ export const EYE_SLASH = () => {
     </>
   );
 };
+
+export const BUILDING = createSvgIcon(
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 22H23"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19.78 22.01V17.55"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19.8 10.89C18.58 10.89 17.6 11.87 17.6 13.09V15.36C17.6 16.58 18.58 17.56 19.8 17.56C21.02 17.56 22 16.58 22 15.36V13.09C22 11.87 21.02 10.89 19.8 10.89Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2.09998 22V6.03003C2.09998 4.02003 3.10003 3.01001 5.09003 3.01001H11.32C13.31 3.01001 14.3 4.02003 14.3 6.03003V22"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.79999 8.25H10.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.79999 12H10.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.25 22V18.25"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>,
+  "Building"
+);