add new sign in and create account pages

nym-wallet/src/components/Nav.tsx

@@ -79,24 +79,41 @@ export const Nav = () => {
       <List>
         {routesSchema.map((r, i) => (
           <ListItem button component={Link} to={r.route} key={i}>
-            <ListItemIcon>{r.Icon}</ListItemIcon>
-            <ListItemText primary={r.label} />
+            <ListItemIcon
+              sx={{
+                color:
+                  location.pathname === r.route
+                    ? 'primary.main'
+                    : 'common.white',
+              }}
+            >
+              {r.Icon}
+            </ListItemIcon>
+            <ListItemText
+              sx={{
+                color:
+                  location.pathname === r.route
+                    ? 'primary.main'
+                    : 'common.white',
+              }}
+              primary={r.label}
+            />
           </ListItem>
         ))}
         {clientDetails?.client_address === ADMIN_ADDRESS && (
           <ListItem button onClick={handleShowAdmin}>
-            <ListItemIcon>
+            <ListItemIcon sx={{ color: 'common.white' }}>
               <Settings />
             </ListItemIcon>
-            <ListItemText primary="Admin" />
+            <ListItemText primary="Admin" sx={{ color: 'common.white' }} />
           </ListItem>
         )}
 
         <ListItem button onClick={logOut}>
-          <ListItemIcon data-testid="log-out">
+          <ListItemIcon data-testid="log-out" sx={{ color: 'common.white' }}>
             <ExitToApp />
           </ListItemIcon>
-          <ListItemText primary="Log out" />
+          <ListItemText primary="Log out" sx={{ color: 'common.white' }} />
         </ListItem>
       </List>
     </div>

nym-wallet/src/context/main.tsx

@@ -24,7 +24,7 @@ export const ClientContextProvider = ({
 }) => {
   const [clientDetails, setClientDetails] = useState<TClientDetails>()
   const [showAdmin, setShowAdmin] = useState(false)
-  const [mode, setMode] = useState<'light' | 'dark'>('dark')
+  const [mode, setMode] = useState<'light' | 'dark'>('light')
 
   const history = useHistory()
   const getBalance = useGetBalance()

nym-wallet/src/routes/sign-in/create-account.tsx

@@ -46,17 +46,30 @@ export const CreateAccountContent: React.FC<{ showSignIn: () => void }> = ({
   return (
     <Stack spacing={4} alignItems="center">
       <img src={logo} width={80} />
-      <Typography variant="h4">Congratulations</Typography>
-      <Typography variant="h6">Account setup complete!</Typography>
+      <Typography sx={{ color: 'common.white' }} variant="h4">
+        Congratulations
+      </Typography>
+      <Typography sx={{ color: 'common.white' }} variant="h6">
+        Account setup complete!
+      </Typography>
       <Alert severity="info" variant="outlined">
-        <Box sx={{ textAlign: 'center' }} data-testid="mnemonic-warning">
+        <Box
+          sx={{ textAlign: 'center', color: 'info.light' }}
+          data-testid="mnemonic-warning"
+        >
           Please store your mnemonic in a safe place. You'll need it to access
           your account!
         </Box>
       </Alert>
-      <Card variant="outlined" sx={{ bgcolor: 'transparent', p: 2 }}>
-        <CardHeader title="Mnemonic" />
-        <CardContent data-testid="mnemonic-phrase">
+      <Card
+        variant="outlined"
+        sx={{ bgcolor: 'transparent', p: 2, borderColor: 'common.white' }}
+      >
+        <CardHeader sx={{ color: 'common.white' }} title="Mnemonic" />
+        <CardContent
+          sx={{ color: 'common.white' }}
+          data-testid="mnemonic-phrase"
+        >
           {accountDetails?.mnemonic}
         </CardContent>
         <CardActions sx={{ justifyContent: 'flex-end' }}>
@@ -64,8 +77,10 @@ export const CreateAccountContent: React.FC<{ showSignIn: () => void }> = ({
         </CardActions>
       </Card>
       <Box sx={{ textAlign: 'center' }}>
-        <Typography variant="body2">Account address:</Typography>
-        <Typography data-testid="wallet-address">
+        <Typography sx={{ color: 'common.white' }} variant="body2">
+          Account address:
+        </Typography>
+        <Typography sx={{ color: 'common.white' }} data-testid="wallet-address">
           {accountDetails?.client_address}
         </Typography>
       </Box>

nym-wallet/src/routes/sign-in/index.tsx

@@ -13,6 +13,7 @@ export const SignIn = () => {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
+        bgcolor: (theme) => theme.palette.nym.background.dark,
       }}
     >
       <Box

nym-wallet/src/routes/sign-in/sign-in.tsx

@@ -12,6 +12,7 @@ import {
 import logo from '../../images/logo-background.svg'
 import { signInWithMnemonic } from '../../requests'
 import { ClientContext } from '../../context/main'
+import { styled } from '@mui/styles'
 
 export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
   showCreateAccount,
@@ -41,10 +42,12 @@ export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
   return (
     <Stack spacing={3} alignItems="center" sx={{ width: '100%' }}>
       <img src={logo} style={{ width: 80 }} />
-      <Typography>Enter Mnemonic and sign in</Typography>
+      <Typography sx={{ color: 'common.white' }}>
+        Enter Mnemonic and sign in
+      </Typography>
       <Grid container direction="column" spacing={1}>
         <Grid item>
-          <TextField
+          <StyledInput
             value={mnemonic}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               setMnemonic(e.target.value)
@@ -60,7 +63,6 @@ export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
             autoComplete="mnemonic"
             autoFocus
             disabled={isLoading}
-            sx={{ color: 'red' }}
           />
         </Grid>
         <Grid item>
@@ -79,14 +81,21 @@ export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
         </Grid>
         {inputError && (
           <Grid item sx={{ mt: 1 }}>
-            <Alert severity="error" variant="outlined" data-testid="error">
+            <Alert
+              severity="error"
+              variant="outlined"
+              data-testid="error"
+              sx={{ color: 'error.light' }}
+            >
               {inputError}
             </Alert>
           </Grid>
         )}
       </Grid>
       <div>
-        <Typography component="span">Don't have an account?</Typography>{' '}
+        <Typography sx={{ color: 'common.white' }} component="span">
+          Don't have an account?
+        </Typography>{' '}
         <Link href="#" onClick={showCreateAccount}>
           Create one now
         </Link>
@@ -94,3 +103,25 @@ export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
     </Stack>
   )
 }
+
+const StyledInput = styled((props) => <TextField {...props} />)(
+  ({ theme }) => ({
+    '& input': {
+      color: theme.palette.nym.text.light,
+    },
+    '& label': {
+      color: theme.palette.nym.text.light,
+    },
+    '& label.Mui-focused': {
+      color: theme.palette.primary.main,
+    },
+    '& .MuiOutlinedInput-root': {
+      '& fieldset': {
+        borderColor: theme.palette.common.white,
+      },
+      '&:hover fieldset': {
+        borderColor: theme.palette.primary.main,
+      },
+    },
+  }),
+)

nym-wallet/src/theme/mui-theme.d.ts

@@ -34,9 +34,9 @@ declare module '@mui/material/styles' {
    */
   interface NymPalette {
     highlight: string
+    background: { light: string; dark: string }
     text: {
-      nav: string
-      footer: string
+      light: string
     }
   }
 

nym-wallet/src/theme/theme.tsx

@@ -21,10 +21,9 @@ import {
 const nymPalette: NymPalette = {
   /** emphasises important elements */
   highlight: '#FB6E4E',
+  background: { light: '#FAFAFA', dark: '#121726' },
   text: {
-    nav: '#F2F2F2',
-    /** footer text colour */
-    footer: '#666B77',
+    light: '#F2F2F2',
   },
 }
 
@@ -65,7 +64,7 @@ const lightMode: NymPaletteVariant = {
 }
 
 /**
- * Nym palette specific to the Network Explorer
+ * Nym palette specific to the Nym Wallet
  *
  * IMPORTANT: do not export this constant, always use the MUI `useTheme` hook to get the correct
  * colours for dark/light mode.