fix: update popup design

src/layouts/modal/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Modal as ModalMui, Typography } from '@mui/material'
+import { Button, IconButton, Modal as ModalMui } from '@mui/material'
 import {
   Link,
   matchPath,
@@ -28,7 +28,19 @@ export const Modal = () => {
   const tabs = [
     { to: appPublicRoutes.login, title: 'Login', label: 'Login' },
     { to: appPublicRoutes.register, title: 'Register', label: 'Register' },
-    { to: appPublicRoutes.nostr, title: 'Login', label: <>Ostrich</> }
+    {
+      to: appPublicRoutes.nostr,
+      title: 'Login',
+      sx: { padding: '10px' },
+      label: (
+        <img
+          src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
+          width="25"
+          alt="nostr logo"
+          height="25"
+        />
+      )
+    }
   ]
   const routeMatch = useRouteMatch(tabs.map((t) => t.to))
   const activeTab = routeMatch?.pattern?.path
@@ -37,24 +49,46 @@ export const Modal = () => {
   }
 
   return (
-    <ModalMui
+    <ModalMui open={true} onClose={handleClose} aria-labelledby="modal-title">
-      open={true}
+      <div className={styles.modal}>
-      onClose={handleClose}
+        <header className={styles.header}>
-      aria-labelledby="modal-title"
+          <h2 className={styles.title} id="modal-title">
-      aria-describedby="modal-description"
-    >
-      <Box className={styles.modal}>
-        <Typography id="modal-title" variant="h2">
             {tabs.find((t) => activeTab === t.to)?.title}
-        </Typography>
+          </h2>
+          <IconButton
+            onClick={handleClose}
+            sx={{
+              fontSize: '18px',
+              color: 'rgba(0, 0, 0, 0.5)'
+            }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="-96 0 512 512"
+              width="1em"
+              height="1em"
+              fill="currentColor"
+            >
+              {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
+              <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path>
+            </svg>
+          </IconButton>
+        </header>
 
-        <Box component={'ul'}>
+        <main className={styles.body}>
+          <ul>
             {tabs.map((t) => {
               return (
+                <li>
                   <Button
                     component={Link}
                     to={t.to}
                     key={t.to}
+                    sx={{
+                      width: '100%',
+                      height: '100%',
+                      ...(t?.sx ? t.sx : {})
+                    }}
                     variant={
                       activeTab === t.to || t.to === appPublicRoutes.nostr
                         ? 'contained'
@@ -63,16 +97,15 @@ export const Modal = () => {
                   >
                     {t.label}
                   </Button>
+                </li>
               )
             })}
-        </Box>
+          </ul>
-
           <Outlet />
+        </main>
 
-        <Typography id="modal-description" variant="h4">
+        <footer className={styles.footer}>Welcome to SIGit!</footer>
-          Welcome to Sigit
+      </div>
-        </Typography>
-      </Box>
     </ModalMui>
   )
 }

src/layouts/modal/style.module.scss

@@ -1,10 +1,12 @@
 @import '../../styles/colors.scss';
 
+$default-modal-padding: 15px 25px;
+
 .modal {
   position: absolute;
-  top: 50%;
+  top: 0;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, 0);
 
   background-color: $overlay-background-color;
 
@@ -12,4 +14,56 @@
   max-width: 500px;
   display: flex;
   flex-direction: column;
+
+  border-radius: 4px;
+}
+
+.header {
+  display: flex;
+  grid-gap: 10px;
+  justify-content: space-between;
+  padding: $default-modal-padding;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+  padding: $default-modal-padding;
+
+  > ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    grid-gap: 10px;
+
+    > li {
+      flex-grow: 1;
+
+      &:last-child {
+        max-width: 65px;
+        padding: 0 0 0 10px;
+        border-left: solid 1px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
+
+.footer {
+  padding: 15px;
+  border-top: solid 1px rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  font-weight: 400;
+  font-size: 16px;
 }

src/theme/index.ts

@@ -27,7 +27,7 @@ export const theme = extendTheme({
       styleOverrides: {
         root: {
           insetBlock: '25px',
-          insetInline: '20px'
+          insetInline: '10px'
         }
       }
     },
@@ -74,6 +74,18 @@ export const theme = extendTheme({
       defaultProps: {
         fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
       }
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          padding: '8px 15px',
+          borderRadius: '4px',
+          ':hover': {
+            background: 'var(--primary-light)',
+            color: 'white'
+          }
+        }
+      }
     }
   },
   breakpoints: {