More style fixes

domhhv · Feb 8, 2024 · 7607158 · 7607158
1 parent 06b27fa
commit 7607158
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 14 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -16,6 +16,12 @@ const StyledAppContainerDiv = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   flexGrow: 1,
+  [theme.getColorSchemeSelector('light')]: {
+    backgroundColor: theme.palette.neutral[100],
+  },
+  [theme.getColorSchemeSelector('dark')]: {
+    backgroundColor: theme.palette.neutral[800],
+  },
 });
 
 const App = () => {

diff --git a/src/components/calendar/styled.ts b/src/components/calendar/styled.ts
@@ -13,12 +13,6 @@ export const StyledCalendarBackgroundDiv = styled('div')(({ theme }) => ({
   height: '100%',
   padding: theme.spacing(2),
   flex: '1 1 0%',
-  [theme.getColorSchemeSelector('light')]: {
-    backgroundColor: theme.palette.neutral[100],
-  },
-  [theme.getColorSchemeSelector('dark')]: {
-    backgroundColor: theme.palette.neutral[800],
-  },
 }));
 
 export const StyledCalendarContainerDiv = styled('div')(({ theme }) => ({

diff --git a/src/components/user/AccountPage.tsx b/src/components/user/AccountPage.tsx
@@ -3,7 +3,7 @@ import DoNotDisturbAltRoundedIcon from '@mui/icons-material/DoNotDisturbAltRound
 import { Button, Box, Typography, CircularProgress, Alert } from '@mui/joy';
 import React, { type FormEventHandler } from 'react';
 
-import { StyledAccountPageContainer } from './styled';
+import { StyledAccountForm, StyledAccountPageContainer } from './styled';
 import { useAccount } from './useAccount';
 
 const AccountPage = () => {
@@ -48,11 +48,11 @@ const AccountPage = () => {
   };
 
   return (
-    <Box p={2} width="90%" m="0 auto">
+    <StyledAccountPageContainer>
       <Typography gutterBottom level="h4">
-        Account
+        Your Account Info
       </Typography>
-      <form onSubmit={handleSubmit}>
+      <StyledAccountForm onSubmit={handleSubmit}>
         <Box mb={2}>
           <FloatingLabelInput
             value={email}
@@ -71,11 +71,11 @@ const AccountPage = () => {
         </Box>
         <Box mt={2}>
           <Button fullWidth type="submit" loading={loading}>
-            Submit
+            Save
           </Button>
         </Box>
-      </form>
-    </Box>
+      </StyledAccountForm>
+    </StyledAccountPageContainer>
   );
 };
 

diff --git a/src/components/user/AuthModalButton.tsx b/src/components/user/AuthModalButton.tsx
@@ -102,7 +102,7 @@ const AuthModalButton = () => {
                 borderRadius: 'xl',
                 bgcolor: 'background.level1',
                 [`& .${tabClasses.root}[aria-selected="true"]`]: {
-                  boxShadow: 'sm',
+                  boxShadow: 'none',
                   bgcolor: 'background.surface',
                 },
               }}

diff --git a/src/components/user/styled.ts b/src/components/user/styled.ts
@@ -29,6 +29,7 @@ export const StyledAccountPageContainer = styled(Box)({
   width: '90%',
   margin: '0 auto',
   display: 'flex',
+  flexDirection: 'column',
   height: 'calc(100vh - 52px)',
   alignItems: 'center',
   justifyContent: 'center',
@@ -46,3 +47,7 @@ export const StyleLogOutIconButton = styled(IconButton)(({ theme }) => ({
     backgroundColor: theme.palette.primary[900],
   },
 }));
+
+export const StyledAccountForm = styled('form')({
+  width: 400,
+});