sixseconds-modules 1.6.163 → 1.6.164

package/dist/index.es.js

@@ -11,18 +11,18 @@
   }
 })();
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Box, Typography, Dialog, Stack as Stack$1, Button as Button$1, IconButton, Grid, Avatar, Chip, Link, Divider, ClickAwayListener, useMediaQuery, MenuItem, AppBar, Container, Badge, FormLabel, TextField, InputAdornment, styled as styled$1 } from "@mui/material";
 import * as React from "react";
 import React__default, { useRef, useEffect, useState, useCallback, useMemo, useLayoutEffect, createContext, forwardRef, createElement, useContext, Component } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
 import MenuIcon from "@mui/icons-material/Menu";
+import { Box, Typography, Dialog, Stack as Stack$1, Button as Button$1, IconButton, Grid, Avatar, Chip, Link, Divider, ClickAwayListener, useMediaQuery, MenuItem, AppBar, Container, Badge, FormLabel, TextField, InputAdornment, styled as styled$1 } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import toast from "react-hot-toast";
 import { styled } from "@mui/material/styles";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import CheckIcon from "@mui/icons-material/Check";
 import ExitToAppTwoToneIcon from "@mui/icons-material/ExitToAppTwoTone";
-import CloseIcon from "@mui/icons-material/Close";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LinkedIn from "@mui/icons-material/LinkedIn";
 import PublicIcon from "@mui/icons-material/Public";
@@ -12876,7 +12876,7 @@ const DangerDialog = ({
       fullWidth: false,
       PaperProps: {
         sx: {
-          maxWidth: "400px",
+          minWidth: "400px",
           borderRadius: "12px",
           boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)"
         }
@@ -12885,7 +12885,7 @@ const DangerDialog = ({
       open,
       "aria-labelledby": "draggable-dialog-title",
       children: /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
-        /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 2, alignItems: "center", sx: { textAlign: "center", mb: 2 }, children: [
+        /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 2, alignItems: "flex-start", sx: { textAlign: "start", mb: 2 }, children: [
           /* @__PURE__ */ jsx(ExitToAppTwoToneIcon, { sx: { color: "#d32f2f", fontSize: "48px" } }),
           /* @__PURE__ */ jsx(
             Typography,
@@ -12935,6 +12935,7 @@ const DangerDialog = ({
               sx: {
                 background: "#d32f2f",
                 color: "#fff",
+                width: "100%",
                 textTransform: "capitalize",
                 borderRadius: "8px",
                 fontSize: "14px",
@@ -13307,7 +13308,7 @@ const ProfileStyled = styled("div")(() => ({
     fontSize: "16px",
     color: "#5f6368",
     fontWeight: "400",
-    margin: "3px 3px",
+    // margin: "3px 3px",
     fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .recant": {
@@ -13342,184 +13343,215 @@ const ProfileStyled = styled("div")(() => ({
   }
 }));
 function ViewProfileDialog({ userData, setInitialState, isOpen }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Dialog,
     {
-      fullWidth: false,
-      sx: { "& .MuiPaper-root": { maxWidth: "800px", borderRadius: "12px" } },
+      fullWidth: true,
+      maxWidth: "md",
+      PaperProps: {
+        sx: {
+          borderRadius: "16px",
+          boxShadow: "0px 12px 32px rgba(0,0,0,0.12)"
+        }
+      },
       onClose: () => handleCloseUtil(setInitialState),
       open: isOpen,
-      "aria-labelledby": "draggable-dialog-title",
-      children: [
-        /* @__PURE__ */ jsxs(ProfileStyled, { children: [
-          /* @__PURE__ */ jsx(Box, { sx: { textAlign: "right", padding: "16px 16px 0px 0px" }, children: /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              onClick: () => setInitialState((p) => ({ ...p, toggles: { ...p.toggles, viewProfile: false } })),
-              disableRipple: false,
-              sx: {
-                background: "#f1f3f4",
-                color: "#5f6368",
-                "&:hover": { background: "#e0e0e0", color: "#1a1c1e" }
-              },
-              children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Box, { sx: { p: 4 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 4, children: [
-            /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 5, children: [
-              /* @__PURE__ */ jsx(Box, { sx: { textAlign: "center", mb: 3 }, children: /* @__PURE__ */ jsx(
-                Avatar,
-                {
-                  src: userData?.userprofile,
-                  sx: {
-                    width: "160px",
-                    height: "160px",
-                    border: "4px solid #0073b1",
-                    boxShadow: "0px 4px 12px rgba(0,0,0,0.1)",
-                    display: "inline-flex"
-                  }
+      children: /* @__PURE__ */ jsxs(ProfileStyled, { children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end", p: 1.5 }, children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: () => setInitialState((p) => ({ ...p, toggles: { ...p.toggles, viewProfile: false } })),
+            sx: {
+              background: "#f5f5f5",
+              color: "#5f6368",
+              "&:hover": { background: "#eee", color: "#111" }
+            },
+            children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { sx: { px: { xs: 3, sm: 5, md: 6 }, pb: { xs: 5, sm: 6 }, mt: 3 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: { xs: 4, md: 6 }, children: [
+          /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, md: 5, lg: 4, children: [
+            /* @__PURE__ */ jsx(Box, { sx: { textAlign: "center", mb: 4 }, children: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                src: userData?.userprofile,
+                sx: {
+                  width: { xs: 130, sm: 150, md: 170 },
+                  height: { xs: 130, sm: 150, md: 170 },
+                  border: "4px solid #0073b1",
+                  boxShadow: "0px 8px 24px rgba(0, 115, 177, 0.15)",
+                  display: "inline-flex"
                 }
-              ) }),
-              /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 1.5, sx: { fontSize: "14px", color: "#5f6368" }, children: [
-                  Boolean(userData?.certification?.length) && /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 1, children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", fontSize: "14px" }, children: "Certifications" }),
-                    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: userData?.certification?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { variant: "outlined", sx: { borderRadius: "6px" }, label: `${itm}` }, idx)) })
-                  ] }),
-                  Boolean(userData?.country) && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", minWidth: "80px" }, children: "Location:" }),
-                    /* @__PURE__ */ jsx(Typography, { children: userData?.country })
-                  ] }),
-                  Boolean(userData?.languages?.length) && /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", mb: 0.5 }, children: "Languages" }),
-                    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: userData?.languages?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: `${itm}` }, idx)) })
-                  ] }),
-                  Boolean(userData?.areaOfWork?.length) && /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", mb: 0.5 }, children: "Areas Of Work" }),
-                    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: userData?.areaOfWork?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: `${itm}` }, idx)) })
-                  ] })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Stack$1, { spacing: 3.5, sx: { ml: 2 }, children: [
+              /* @__PURE__ */ jsxs(Stack$1, { spacing: 2.5, children: [
+                Boolean(userData?.certification?.length) && /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      sx: {
+                        fontWeight: 700,
+                        color: "#1a1c1e",
+                        mb: 1.5,
+                        fontSize: "14px",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px"
+                      },
+                      children: "Certifications"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: userData?.certification?.map((itm, idx) => /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      variant: "outlined",
+                      sx: { borderRadius: "6px", height: "30px", fontWeight: 500, borderColor: "#e0e0e0" },
+                      label: itm
+                    },
+                    idx
+                  )) })
                 ] }),
-                /* @__PURE__ */ jsxs(Stack$1, { direction: "row", spacing: 1.5, alignItems: "center", sx: { marginTop: 3 }, children: [
+                Boolean(userData?.country) && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
                   /* @__PURE__ */ jsx(
-                    Button$1,
+                    Typography,
                     {
-                      href: `https://cert.6seconds.org/cert-directory?id=${userData?.certId}`,
-                      LinkComponent: Link,
-                      target: "_blank",
-                      variant: "contained",
-                      disableElevation: true,
                       sx: {
-                        background: "#0073b1",
-                        borderRadius: "8px",
-                        minWidth: "auto",
-                        p: 1.2,
-                        "&:hover": {
-                          backgroundColor: "#005a8b"
-                        }
+                        fontWeight: 700,
+                        color: "#1a1c1e",
+                        fontSize: "14px",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px"
                       },
-                      children: /* @__PURE__ */ jsx(ContentCopyIcon, { fontSize: "small" })
+                      children: "Location"
                     }
                   ),
+                  /* @__PURE__ */ jsx(Typography, { sx: { color: "#5f6368", fontSize: "15px" }, children: userData?.country })
+                ] }),
+                Boolean(userData?.languages?.length) && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
                   /* @__PURE__ */ jsx(
-                    Button$1,
+                    Typography,
                     {
-                      variant: "contained",
                       sx: {
-                        backgroundColor: "#0073b1",
-                        borderRadius: "8px",
-                        minWidth: "auto",
-                        p: 1.2,
-                        "&:hover": {
-                          backgroundColor: "#005a8b"
-                        }
+                        fontWeight: 700,
+                        color: "#1a1c1e",
+                        mb: 1,
+                        fontSize: "14px",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px"
                       },
-                      disableElevation: true,
-                      LinkComponent: Link,
-                      href: userData?.linkedInUrl || "#",
-                      target: "_blank",
-                      children: /* @__PURE__ */ jsx(LinkedIn, { fontSize: "small" })
+                      children: "Languages"
                     }
                   ),
+                  /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: userData?.languages?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", sx: { borderRadius: "4px" }, label: itm }, idx)) })
+                ] }),
+                Boolean(userData?.areaOfWork?.length) && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
                   /* @__PURE__ */ jsx(
-                    Button$1,
+                    Typography,
                     {
-                      variant: "contained",
-                      disableElevation: true,
-                      href: `https://${userData?.certProfileUrl}`,
-                      LinkComponent: Link,
-                      target: "_blank",
                       sx: {
-                        background: "#0073b1",
-                        borderRadius: "8px",
-                        minWidth: "auto",
-                        p: 1.2,
-                        "&:hover": {
-                          backgroundColor: "#005a8b"
-                        }
+                        fontWeight: 700,
+                        color: "#1a1c1e",
+                        mb: 1,
+                        fontSize: "14px",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px"
                       },
-                      children: /* @__PURE__ */ jsx(PublicIcon, { fontSize: "small" })
+                      children: "Areas Of Work"
                     }
-                  )
+                  ),
+                  /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: userData?.areaOfWork?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", sx: { borderRadius: "4px" }, label: itm }, idx)) })
                 ] })
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx(Stack$1, { direction: "row", spacing: 1.5, justifyContent: { xs: "center", md: "center" }, children: [
+                {
+                  icon: /* @__PURE__ */ jsx(ContentCopyIcon, { sx: { fontSize: "18px" } }),
+                  href: `https://cert.6seconds.org/cert-directory?id=${userData?.certId}`
+                },
+                { icon: /* @__PURE__ */ jsx(LinkedIn, { sx: { fontSize: "20px" } }), href: userData?.linkedInUrl },
+                { icon: /* @__PURE__ */ jsx(PublicIcon, { sx: { fontSize: "18px" } }), href: `https://${userData?.certProfileUrl}` }
+              ].map((btn, i) => /* @__PURE__ */ jsx(
+                Button$1,
+                {
+                  href: btn.href || "#",
+                  LinkComponent: Link,
+                  target: "_blank",
+                  variant: "contained",
+                  disableElevation: true,
+                  sx: {
+                    minWidth: "42px",
+                    width: "42px",
+                    height: "42px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "#0073b1",
+                    borderRadius: "10px",
+                    transition: "all 0.2s ease",
+                    "&:hover": { background: "#005a8b", transform: "translateY(-2px)" }
+                  },
+                  children: btn.icon
+                },
+                i
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 7, lg: 8, children: /* @__PURE__ */ jsxs(Stack$1, { spacing: 4, children: [
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "h3",
+                  sx: {
+                    fontSize: { xs: "28px", sm: "36px" },
+                    fontWeight: "800",
+                    color: "#1a1c1e",
+                    mb: 2,
+                    fontFamily: "'IBM Plex Sans', sans-serif"
+                  },
+                  children: userData?.fullName
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "#555", fontSize: "16px", lineHeight: "1.8", textAlign: "justify" }, children: userData?.bio })
             ] }),
-            /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 7, children: [
-              /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 2, sx: { color: "#5f6368", fontSize: "14px", lineHeight: "1.6" }, children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "h3",
-                    sx: {
-                      fontSize: "28px",
-                      fontWeight: "700",
-                      color: "#1a1c1e",
-                      fontFamily: "'IBM Plex Sans', sans-serif"
-                    },
-                    children: userData?.fullName
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "15px" }, children: userData?.bio }),
-                /* @__PURE__ */ jsxs(Box, { children: [
-                  Boolean(userData?.title) && /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
-                    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { fontWeight: 600, color: "#1a1c1e" }, children: [
-                      "Title:",
-                      " "
-                    ] }),
-                    userData?.title
-                  ] }),
-                  Boolean(userData?.company) && /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
-                    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { fontWeight: 600, color: "#1a1c1e" }, children: [
-                      "Company:",
-                      " "
-                    ] }),
-                    userData?.company
+            /* @__PURE__ */ jsx(
+              Stack$1,
+              {
+                spacing: 1.5,
+                sx: { p: 2.5, background: "#f9fafb", borderRadius: "12px", border: "1px solid #f1f3f4" },
+                children: [
+                  { label: "Title", value: userData?.title },
+                  { label: "Company", value: userData?.company },
+                  { label: "Email", value: userData?.email }
+                ].filter((item) => Boolean(item.value)).map((item, i) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1.5 }, children: [
+                  /* @__PURE__ */ jsxs(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", minWidth: "80px", fontSize: "15px" }, children: [
+                    item.label,
+                    ":"
                   ] }),
-                  Boolean(userData?.email) && /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { fontWeight: 600, color: "#1a1c1e" }, children: [
-                      "Email:",
-                      " "
-                    ] }),
-                    userData?.email
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    sx: { mt: 2 },
-                    dangerouslySetInnerHTML: {
-                      __html: userData?.certBio || ""
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
-                /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontSize: "16px", fontWeight: "500" }, children: "Description" })
-              ] }),
-              /* @__PURE__ */ jsx(Stack$1, { direction: "row", alignItems: "center", flexWrap: "wrap", spacing: 0.5, useFlexGap: true, children: userData?.certOfferToHelp })
+                  /* @__PURE__ */ jsx(Typography, { sx: { color: "#5f6368", fontSize: "15px" }, children: item.value })
+                ] }, i))
+              }
+            ),
+            userData?.certBio && /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  color: "#555",
+                  fontSize: "15.5px",
+                  lineHeight: "1.8",
+                  textAlign: "justify",
+                  "& p": { m: 0, mb: 2 }
+                },
+                dangerouslySetInnerHTML: { __html: userData.certBio }
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, { sx: { my: 1 } }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontSize: "18px", fontWeight: "700", mb: 1.5, color: "#1a1c1e" }, children: "Description" }),
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "#5f6368", fontSize: "15.5px", lineHeight: "1.7" }, children: userData?.certOfferToHelp })
             ] })
           ] }) })
-        ] }),
-        " "
-      ]
+        ] }) })
+      ] })
     }
   );
 }
@@ -13555,65 +13587,103 @@ function ChangePasswordDialog({ isOpen, email, t: t2, setInitialState }) {
   return /* @__PURE__ */ jsx(
     Dialog,
     {
-      fullWidth: false,
-      sx: { "& .MuiPaper-root": { maxWidth: "600px", borderRadius: "12px" } },
+      fullWidth: true,
+      maxWidth: "sm",
+      PaperProps: {
+        sx: {
+          borderRadius: "16px",
+          boxShadow: "0px 12px 32px rgba(0,0,0,0.12)"
+        }
+      },
       onClose: () => handleCloseUtil(setInitialState),
       open: isOpen,
-      "aria-labelledby": "draggable-dialog-title",
-      children: /* @__PURE__ */ jsx("form", { onSubmit: formik.handleSubmit, children: /* @__PURE__ */ jsx(ChangePasswordStyled, { children: /* @__PURE__ */ jsxs(Box, { sx: { pr: { xs: 0, lg: 8 }, p: 2 }, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { display: "flex", alignItems: "center", fontWeight: 600, color: "#1a1c1e" }, children: "Change Password" }),
-        /* @__PURE__ */ jsx(
-          Box,
+      children: /* @__PURE__ */ jsx("form", { onSubmit: formik.handleSubmit, children: /* @__PURE__ */ jsxs(ChangePasswordStyled, { children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end", p: 1.5 }, children: /* @__PURE__ */ jsx(
+          IconButton,
           {
+            onClick: () => handleCloseUtil(setInitialState),
             sx: {
-              p: 3,
-              border: "1px solid #e0e0e0",
-              borderRadius: "12px",
-              mt: 2,
-              boxShadow: "0px 2px 4px rgba(0,0,0,0.05)"
+              background: "#f5f5f5",
+              color: "#5f6368",
+              "&:hover": { background: "#eee", color: "#111" }
             },
-            children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-              /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 6, children: [
-                /* @__PURE__ */ jsx(
-                  LabeledInput,
-                  {
-                    type: "password",
-                    label: t2("New password"),
-                    fullWidth: true,
-                    size: "small",
-                    ...formik.getFieldProps("newPassword")
-                  }
-                ),
-                /* @__PURE__ */ jsx(ErrorMessage, { formik, fieldName: "newPassword" })
-              ] }),
-              /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 6, children: [
-                /* @__PURE__ */ jsx(
-                  LabeledInput,
+            children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Box, { sx: { px: { xs: 3, sm: 5 }, pb: { xs: 4, sm: 5 } }, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "h5",
+              sx: {
+                fontWeight: 700,
+                color: "#1a1c1e",
+                mb: 3,
+                fontFamily: "'IBM Plex Sans', sans-serif",
+                textAlign: "start"
+              },
+              children: t2("Change Password")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                p: { xs: 2.5, sm: 4 },
+                background: "#fff",
+                border: "1px solid #f1f3f4",
+                borderRadius: "12px",
+                boxShadow: "0px 4px 12px rgba(0,0,0,0.03)"
+              },
+              children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
+                /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+                  /* @__PURE__ */ jsx(
+                    LabeledInput,
+                    {
+                      type: "password",
+                      label: t2("New password"),
+                      fullWidth: true,
+                      ...formik.getFieldProps("newPassword")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ErrorMessage, { formik, fieldName: "newPassword" })
+                ] }),
+                /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+                  /* @__PURE__ */ jsx(
+                    LabeledInput,
+                    {
+                      type: "password",
+                      fullWidth: true,
+                      label: t2("Confirm new password"),
+                      ...formik.getFieldProps("passwordConfirmation")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ErrorMessage, { formik, fieldName: "passwordConfirmation" })
+                ] }),
+                /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, mt: 2, children: /* @__PURE__ */ jsx(
+                  Button,
                   {
-                    type: "password",
-                    label: t2("Confirm new password"),
+                    isLoading: formik.isSubmitting,
                     fullWidth: true,
-                    size: "small",
-                    ...formik.getFieldProps("passwordConfirmation")
+                    type: "submit",
+                    disabled: formik.isSubmitting,
+                    btnTitle: t2("Update Password"),
+                    sx: {
+                      py: 1.5,
+                      fontSize: "16px",
+                      fontWeight: 600,
+                      borderRadius: "8px",
+                      background: "#0073b1",
+                      color: "white",
+                      "&:hover": { background: "#005a8b" }
+                    }
                   }
-                ),
-                /* @__PURE__ */ jsx(ErrorMessage, { formik, fieldName: "passwordConfirmation" })
-              ] }),
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, lg: 12, children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  isLoading: formik.isSubmitting,
-                  className: "invite",
-                  sx: { width: "auto !important" },
-                  type: "submit",
-                  disabled: formik.isSubmitting,
-                  btnTitle: t2("Change Password")
-                }
-              ) })
-            ] })
-          }
-        )
-      ] }) }) })
+                ) })
+              ] })
+            }
+          )
+        ] })
+      ] }) })
     }
   );
 }
@@ -14346,7 +14416,7 @@ const SubHeaderStyled = styled(AppBar)(() => ({
       padding: "8px 0",
       listStyle: "none",
       "& li": {
-        padding: "12px 16px",
+        padding: "2px 16px",
         borderBottom: "1px solid #f1f3f4",
         cursor: "pointer",
         transition: "background 0.2s ease",
@@ -14423,8 +14493,8 @@ const UserProfile = ({ t: t2, userData, setInitialState, extraMenuOptions, route
               {
                 src: userData?.userprofile,
                 sx: {
-                  width: "48px",
-                  height: "48px",
+                  width: "65px",
+                  height: "65px",
                   border: "2px solid #fff",
                   boxShadow: "0px 2px 4px rgba(0,0,0,0.1)"
                 },
@@ -14462,16 +14532,16 @@ const UserProfile = ({ t: t2, userData, setInitialState, extraMenuOptions, route
         extraMenuOptions.isViewProfile && /* @__PURE__ */ jsx(
           Box,
           {
-            component: "li",
-            onClick: () => setInitialState((p) => ({ ...p, toggles: { ...p.toggles, viewProfile: true } })),
             sx: {
               px: 2,
               py: 1.5,
               cursor: "pointer",
               "&:hover": { background: "#f8f9fa", color: "#0073b1" }
             },
+            component: "li",
+            onClick: () => setInitialState((p) => ({ ...p, toggles: { ...p.toggles, viewProfile: true } })),
             children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", gap: 1.5, alignItems: "center", children: [
-              /* @__PURE__ */ jsx(SVG.CheckedPerson, { style: { width: "18px", height: "18px", color: "inherit" } }),
+              /* @__PURE__ */ jsx(SVG.CheckedPerson, { style: { width: "25px", height: "25px", color: "inherit" } }),
               /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: "400", m: 0 }, children: t2("View Profile") })
             ] })
           }
@@ -14488,7 +14558,7 @@ const UserProfile = ({ t: t2, userData, setInitialState, extraMenuOptions, route
               "&:hover": { background: "#f8f9fa", color: "#0073b1" }
             },
             children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", gap: 1.5, alignItems: "center", children: [
-              /* @__PURE__ */ jsx(SVG.UserEdit, { style: { width: "18px", height: "18px", color: "inherit" } }),
+              /* @__PURE__ */ jsx(SVG.UserEdit, { style: { width: "25px", height: "25px", color: "inherit" } }),
               /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: "400", m: 0 }, children: t2("Edit Profile") })
             ] })
           }
@@ -14505,7 +14575,7 @@ const UserProfile = ({ t: t2, userData, setInitialState, extraMenuOptions, route
               "&:hover": { background: "#f8f9fa", color: "#0073b1" }
             },
             children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", gap: 1.5, alignItems: "center", children: [
-              /* @__PURE__ */ jsx(SVG.CheckedPerson, { style: { width: "18px", height: "18px", color: "inherit" } }),
+              /* @__PURE__ */ jsx(SVG.CheckedPerson, { style: { width: "25px", height: "25px", color: "inherit" } }),
               /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: "400", m: 0 }, children: t2("Change Password") })
             ] })
           }
@@ -14526,7 +14596,7 @@ const UserProfile = ({ t: t2, userData, setInitialState, extraMenuOptions, route
               borderTop: "1px solid #f1f3f4"
             },
             children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", gap: 1.5, alignItems: "center", children: [
-              /* @__PURE__ */ jsx(SVG.Logout, { style: { width: "18px", height: "18px", color: "inherit" } }),
+              /* @__PURE__ */ jsx(SVG.Logout, { style: { width: "25px", height: "25px", color: "inherit" } }),
               /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: "400", m: 0 }, children: t2("Logout") })
             ] })
           }
@@ -14858,13 +14928,13 @@ function LabeledInput({
         className: "textInput",
         sx: {
           "& .MuiInputBase-root": {
-            borderRadius: "8px",
+            borderRadius: "20px",
             height: "36px"
           },
           "& input:disabled": {
             borderRadius: "20px"
           },
-          borderRadius: "8px",
+          borderRadius: "20px",
           fontFamily: "Inter, sans-serif",
           "& input:-webkit-autofill": {
             WebkitBoxShadow: "0 0 0 100px white inset",
@@ -15183,9 +15253,21 @@ const App = () => {
           appName: APP_NAMES.sso,
           appAccess: [
             {
-              name: "Tools",
-              icon: "",
-              link: "https://tools.6seconds.org",
+              name: "Cards sdf dfsfwk",
+              icon: "https://cert-6seconds.s3.us-west-2.amazonaws.com/uploads/dashboard/cardshome.svg",
+              link: "https://cards.6seconds.org",
+              type: "app"
+            },
+            {
+              name: "ASDfwoj vds Home",
+              icon: "https://cert-6seconds.s3.us-west-2.amazonaws.com/uploads/dashboard/cardshome.svg",
+              link: "https://cards.6seconds.org",
+              type: "app"
+            },
+            {
+              name: "Cards Homeasdf",
+              icon: "https://cert-6seconds.s3.us-west-2.amazonaws.com/uploads/dashboard/cardshome.svg",
+              link: "https://cards.6seconds.org",
               type: "app"
             },
             {
@@ -15195,15 +15277,21 @@ const App = () => {
               type: "app"
             },
             {
-              name: "Settings",
-              icon: "/app-icons/Settings.svg",
-              link: "/settings.svg",
+              name: "Cards ",
+              icon: "https://cert-6seconds.s3.us-west-2.amazonaws.com/uploads/dashboard/cardshome.svg",
+              link: "https://cards.6seconds.org",
               type: "app"
             },
             {
-              name: "Translations",
-              icon: "/translate.svg",
-              link: "/translations",
+              name: "Cards Home",
+              icon: "https://cert-6seconds.s3.us-west-2.amazonaws.com/uploads/dashboard/cardshome.svg",
+              link: "https://cards.6seconds.org",
+              type: "app"
+            },
+            {
+              name: "Cards Home",
+              icon: "https://cert-6seconds.s3.us-west-2.amazonaws.com/uploads/dashboard/cardshome.svg",
+              link: "https://cards.6seconds.org",
               type: "app"
             }
           ],
@@ -15244,56 +15332,7 @@ const App = () => {
         isNotification: true,
         totallyEndCustomComponent: "asdfsdf",
         extraMenuOptions: {
-          components: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", spacing: 1, alignItems: "center", sx: { cursor: "pointer" }, children: [
-              /* @__PURE__ */ jsx(SVG.CheckedPerson, {}),
-              /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "h4",
-                  sx: {
-                    color: "#1A1919",
-                    fontSize: "16px",
-                    fontWeight: "400",
-                    m: 0
-                  },
-                  children: "extraMenuOptions"
-                }
-              ) })
-            ] }) }),
-            /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", spacing: 1, alignItems: "center", sx: { cursor: "pointer" }, children: [
-              /* @__PURE__ */ jsx(SVG.CheckedPerson, {}),
-              /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "h4",
-                  sx: {
-                    color: "#1A1919",
-                    fontSize: "16px",
-                    fontWeight: "400",
-                    m: 0
-                  },
-                  children: "extraMenuOptions"
-                }
-              ) })
-            ] }) }),
-            /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", spacing: 1, alignItems: "center", sx: { cursor: "pointer" }, children: [
-              /* @__PURE__ */ jsx(SVG.CheckedPerson, {}),
-              /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "h4",
-                  sx: {
-                    color: "#1A1919",
-                    fontSize: "16px",
-                    fontWeight: "400",
-                    m: 0
-                  },
-                  children: "extraMenuOptions"
-                }
-              ) })
-            ] }) })
-          ] }),
+          components: /* @__PURE__ */ jsx(Fragment, {}),
           isViewProfile: true,
           isChangePassword: true,
           isEditProfile: true