refactor(settings): update settings layout

2025-03-10 11:57:08 +00:00 · 2025-03-10 11:57:08 +00:00 · c1a9475a89
commit c1a9475a89
parent 745ba377d4
8 changed files with 325 additions and 355 deletions
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@ -1,87 +1,82 @@
 import AccountCircleIcon from '@mui/icons-material/AccountCircle'
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 import RouterIcon from '@mui/icons-material/Router'
-import { ListItem, useTheme } from '@mui/material'
-import List from '@mui/material/List'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-import ListSubheader from '@mui/material/ListSubheader'
+import { Button } from '@mui/material'
 import { useAppSelector } from '../../hooks/store'
-import { Link } from 'react-router-dom'
+import { NavLink, Outlet, To } from 'react-router-dom'
 import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
 import { Container } from '../../components/Container'
 import { Footer } from '../../components/Footer/Footer'
 import ExtensionIcon from '@mui/icons-material/Extension'
 import { LoginMethod } from '../../store/auth/types'
+import styles from './style.module.scss'
+import { ReactNode } from 'react'

-export const SettingsPage = () => {
-  const theme = useTheme()
-  const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
-  const listItem = (label: string, disabled = false) => {
+const Item = (to: To, icon: ReactNode, label: string) => {
  return (
-      <>
-        <ListItemText
-          primary={label}
+    <NavLink to={to}>
+      {({ isActive }) => (
+        <Button
+          fullWidth
          sx={{
-            color: theme.palette.text.primary
-          }}
-        />
-
-        {!disabled && (
-          <ArrowForwardIosIcon
-            style={{
-              color: theme.palette.action.active,
-              marginRight: -10
-            }}
-          />
-        )}
-      </>
-    )
+            transition: 'ease 0.3s',
+            justifyContent: 'start',
+            gap: '10px',
+            background: 'rgba(76,130,163,0)',
+            color: '#434343',
+            fontWeight: 600,
+            opacity: 0.75,
+            textTransform: 'none',
+            ...(isActive
+              ? {
+                  background: '#447592',
+                  color: 'white'
                }
+              : {}),
+            '&:hover': {
+              opacity: 0.85,
+              gap: '15px',
+              background: '#5e8eab',
+              color: 'white'
+            }
+          }}
+          variant={'text'}
+        >
+          {icon}
+          {label}
+        </Button>
+      )}
+    </NavLink>
+  )
+}
+
+export const SettingsLayout = () => {
+  const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)

  return (
    <>
      <Container>
-        <List
-          sx={{
-            width: '100%',
-            bgcolor: 'background.paper'
-          }}
-          subheader={
-            <ListSubheader
-              sx={{
-                fontSize: '1.5rem',
-                borderBottom: '0.5px solid',
-                paddingBottom: 2,
-                paddingTop: 2,
-                zIndex: 2
-              }}
-            >
-              Settings
-            </ListSubheader>
-          }
-        >
-          <ListItem component={Link} to={getProfileSettingsRoute(usersPubkey!)}>
-            <ListItemIcon>
-              <AccountCircleIcon />
-            </ListItemIcon>
-            {listItem('Profile')}
-          </ListItem>
-          <ListItem component={Link} to={appPrivateRoutes.relays}>
-            <ListItemIcon>
-              <RouterIcon />
-            </ListItemIcon>
-            {listItem('Relays')}
-          </ListItem>
-          {loginMethod === LoginMethod.nostrLogin && (
-            <ListItem component={Link} to={appPrivateRoutes.nostrLogin}>
-              <ListItemIcon>
-                <ExtensionIcon />
-              </ListItemIcon>
-              {listItem('Nostr Login')}
-            </ListItem>
+        <h2 className={styles.title}>Settings</h2>
+        <div className={styles.main}>
+          <div>
+            <aside className={styles.aside}>
+              {Item(
+                getProfileSettingsRoute(usersPubkey!),
+                <AccountCircleIcon />,
+                'Profile'
              )}
-        </List>
+              {Item(appPrivateRoutes.relays, <RouterIcon />, 'Relays')}
+              {loginMethod === LoginMethod.nostrLogin &&
+                Item(
+                  appPrivateRoutes.nostrLogin,
+                  <ExtensionIcon />,
+                  'Nostr Login'
+                )}
+            </aside>
+          </div>
+          <div className={styles.content}>
+            <Outlet />
+          </div>
+        </div>
      </Container>
      <Footer />
    </>
--- a/src/pages/settings/nostrLogin/index.tsx
+++ b/src/pages/settings/nostrLogin/index.tsx
@ -3,11 +3,9 @@ import {
  ListItemButton,
  ListItemIcon,
  ListItemText,
-  ListSubheader,
  useTheme
 } from '@mui/material'
 import { launch as launchNostrLoginDialog } from 'nostr-login'
-import { Container } from '../../../components/Container'
 import PeopleIcon from '@mui/icons-material/People'
 import ImportExportIcon from '@mui/icons-material/ImportExport'
 import { useAppSelector } from '../../../hooks/store'
@ -20,26 +18,7 @@ export const NostrLoginPage = () => {
  )

  return (
-    <Container>
-      <List
-        sx={{
-          width: '100%',
-          bgcolor: 'background.paper'
-        }}
-        subheader={
-          <ListSubheader
-            sx={{
-              fontSize: '1.5rem',
-              borderBottom: '0.5px solid',
-              paddingBottom: 2,
-              paddingTop: 2,
-              zIndex: 2
-            }}
-          >
-            Nostr Settings
-          </ListSubheader>
-        }
-      >
+    <List>
      <ListItemButton
        onClick={() => {
          launchNostrLoginDialog('switch-account')
@ -73,6 +52,5 @@ export const NostrLoginPage = () => {
        </ListItemButton>
      )}
    </List>
-    </Container>
  )
 }
--- a/src/pages/settings/profile/index.tsx
+++ b/src/pages/settings/profile/index.tsx
@ -12,7 +12,6 @@ import {
  InputProps,
  List,
  ListItem,
-  ListSubheader,
  TextField,
  Tooltip
 } from '@mui/material'
@ -28,8 +27,6 @@ import { useAppDispatch, useAppSelector } from '../../../hooks/store'

 import { getRoboHashPicture, unixNow } from '../../../utils'

-import { Container } from '../../../components/Container'
-import { Footer } from '../../../components/Footer/Footer'
 import { LoadingSpinner } from '../../../components/LoadingSpinner'

 import { setUserProfile as updateUserProfile } from '../../../store/actions'
@ -256,26 +253,7 @@ export const ProfileSettingsPage = () => {
  return (
    <>
      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-      <Container className={styles.container}>
-        <List
-          sx={{
-            bgcolor: 'background.paper',
-            marginTop: 2
-          }}
-          subheader={
-            <ListSubheader
-              sx={{
-                paddingBottom: 1,
-                paddingTop: 1,
-                fontSize: '1.5rem',
-                zIndex: 2
-              }}
-              className={styles.subHeader}
-            >
-              Profile Settings
-            </ListSubheader>
-          }
-        >
+      <List>
        {userProfile && (
          <div>
            <ListItem
@ -372,15 +350,14 @@ export const ProfileSettingsPage = () => {
      </List>
      {isUsersOwnProfile && (
        <LoadingButton
+          sx={{ maxWidth: '300px', alignSelf: 'center', width: '100%' }}
          loading={savingProfileMetadata}
          variant="contained"
          onClick={handleSaveMetadata}
        >
-            SAVE
+          PUBLISH CHANGES
        </LoadingButton>
      )}
-      </Container>
-      <Footer />
    </>
  )
 }
--- a/src/pages/settings/profile/style.module.scss
+++ b/src/pages/settings/profile/style.module.scss
@ -1,9 +1,3 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-}
-
 .textField {
  width: 100%;
 }
--- a/src/pages/settings/relays/index.tsx
+++ b/src/pages/settings/relays/index.tsx
@ -12,7 +12,6 @@ import ListItemText from '@mui/material/ListItemText'
 import Switch from '@mui/material/Switch'
 import { useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
-import { Container } from '../../../components/Container'
 import {
  useAppDispatch,
  useAppSelector,
@ -32,7 +31,6 @@ import {
  timeout
 } from '../../../utils'
 import styles from './style.module.scss'
-import { Footer } from '../../../components/Footer/Footer'
 import {
  getRelayListForUser,
  NDKRelayList,
@ -246,7 +244,7 @@ export const RelaysPage = () => {
  }

  return (
-    <Container className={styles.container}>
+    <>
      <Box className={styles.relayAddContainer}>
        <TextField
          label="Add new relay"
@ -291,8 +289,7 @@ export const RelaysPage = () => {
          ))}
        </Box>
      )}
-      <Footer />
-    </Container>
+    </>
  )
 }

--- a/src/pages/settings/relays/style.module.scss
+++ b/src/pages/settings/relays/style.module.scss
@ -1,25 +1,22 @@
@import '../../../styles/colors.scss';

-.container {
-  color: $text-color;
-
-  .relayURItextfield {
+.relayURItextfield {
  width: 100%;
-  }
+}

-  .relayAddContainer {
+.relayAddContainer {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  align-items: start;
-  }
+}

-  .sectionIcon {
+.sectionIcon {
  font-size: 30px;
-  }
+}

-  .sectionTitle {
+.sectionTitle {
  margin-top: 35px;
  margin-bottom: 10px;
  display: flex;
@ -28,15 +25,15 @@
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
-  }
+}

-  .relaysContainer {
+.relaysContainer {
  display: flex;
  flex-direction: column;
  gap: 15px;
-  }
+}

-  .relay {
+.relay {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;

@ -103,5 +100,4 @@
  .connectionStatusUnknown {
    background-color: $input-text-color;
  }
-  }
 }
--- a/src/pages/settings/style.module.scss
+++ b/src/pages/settings/style.module.scss
@ -0,0 +1,43 @@
+.title {
+    margin: 0 0 15px 0;
+}
+
+.main {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 0.4fr 1.6fr;
+    position: relative;
+    grid-gap: 25px;
+
+    >* {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        grid-gap: 25px;
+    }
+}
+
+.aside {
+    width: 100%;
+    background: white;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    grid-gap: 15px;
+
+    position: sticky;
+    top: 15px;
+}
+
+.content {
+    width: 100%;
+    background: white;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    grid-gap: 15px;
+}
--- a/src/routes/util.tsx
+++ b/src/routes/util.tsx
@ -7,7 +7,7 @@ import { ProfilePage } from '../pages/profile'
 import { NostrLoginPage } from '../pages/settings/nostrLogin'
 import { ProfileSettingsPage } from '../pages/settings/profile'
 import { RelaysPage } from '../pages/settings/relays'
-import { SettingsPage } from '../pages/settings/Settings'
+import { SettingsLayout } from '../pages/settings/Settings'
 import { SignPage } from '../pages/sign'
 import { VerifyPage } from '../pages/verify'
 import { PrivateRoute } from './PrivateRoute'
@ -96,32 +96,22 @@ export const privateRoutes = [
    path: appPrivateRoutes.settings,
    element: (
      <PrivateRoute>
-        <SettingsPage />
+        <SettingsLayout />
      </PrivateRoute>
-    )
-  },
+    ),
+    children: [
      {
        path: appPrivateRoutes.profileSettings,
-    element: (
-      <PrivateRoute>
-        <ProfileSettingsPage />
-      </PrivateRoute>
-    )
+        element: <ProfileSettingsPage />
      },
      {
        path: appPrivateRoutes.relays,
-    element: (
-      <PrivateRoute>
-        <RelaysPage />
-      </PrivateRoute>
-    )
+        element: <RelaysPage />
      },
      {
        path: appPrivateRoutes.nostrLogin,
-    element: (
-      <PrivateRoute>
-        <NostrLoginPage />
-      </PrivateRoute>
-    )
+        element: <NostrLoginPage />
+      }
+    ]
  }
 ]