fix: popup forms designs

src/layouts/modal/index.tsx

@@ -100,7 +100,9 @@ export const Modal = () => {
               )
             })}
           </ul>
-          <Outlet />
+          <div className={styles.tabContent}>
+            <Outlet />
+          </div>
         </main>
 
         <footer className={styles.footer}>Welcome to SIGit!</footer>

src/layouts/modal/style.module.scss

@@ -59,6 +59,13 @@ $default-modal-padding: 15px 25px;
   }
 }
 
+.tabContent {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+  padding-inline: 10px;
+}
+
 .footer {
   padding: 15px;
   border-top: solid 1px rgba(0, 0, 0, 0.1);

src/pages/login/index.tsx

@@ -1,3 +1,26 @@
+import { Button, TextField } from '@mui/material'
+
 export const Login = () => {
-  return <>Login</>
+  return (
+    <>
+      <TextField
+        label="Email"
+        placeholder="Your email address"
+        fullWidth
+        margin="dense"
+        autoComplete="username"
+      />
+      <TextField
+        label="Password"
+        placeholder="Your password"
+        fullWidth
+        margin="dense"
+        autoComplete="current-password"
+      />
+
+      <Button variant="contained" fullWidth>
+        Login
+      </Button>
+    </>
+  )
 }

src/pages/nostr/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, TextField } from '@mui/material'
+import { Button, Divider, TextField } from '@mui/material'
 import { getPublicKey, nip19 } from 'nostr-tools'
 import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
@@ -19,10 +19,11 @@ import {
 import { LoginMethods } from '../../store/auth/types'
 import { Dispatch } from '../../store/store'
 import { npubToHex, queryNip05 } from '../../utils'
-import styles from './style.module.scss'
 import { hexToBytes } from '@noble/hashes/utils'
 import { NIP05_REGEX } from '../../constants'
 
+import formStyles from '../../styles/form.module.scss'
+
 export const Nostr = () => {
   const [searchParams] = useSearchParams()
 
@@ -355,28 +356,45 @@ export const Nostr = () => {
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
 
-      <Box>
-        <div className={styles.loginPage}>
-          <TextField
-            onKeyDown={handleInputKeyDown}
-            label="nip05 login / nip46 bunker string"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            sx={{ width: '100%', mt: 2 }}
-          />
-          {isNostrExtensionAvailable && (
-            <Button onClick={loginWithExtension} variant="text">
-              Login with extension
-            </Button>
-          )}
+      {isNostrExtensionAvailable && (
+        <>
+          <label className={formStyles.label} htmlFor="extension-login">
+            Login by using a browser extension
+          </label>
+          <Button
+            id="extension-login"
+            onClick={loginWithExtension}
+            variant="contained"
+          >
+            Extension Login
+          </Button>
+          <Divider
+            sx={{
+              fontSize: '16px'
+            }}
+          >
+            or
+          </Divider>
+        </>
+      )}
+      <TextField
+        onKeyDown={handleInputKeyDown}
+        label="nip05 login / nip46 bunker string"
+        helperText="Private key (Not recommended)"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        fullWidth
+        margin="dense"
+      />
 
-          <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-            <Button disabled={!inputValue} onClick={login} variant="contained">
-              Login
-            </Button>
-          </Box>
-        </div>
-      </Box>
+      <Button
+        disabled={!inputValue}
+        onClick={login}
+        variant="contained"
+        fullWidth
+      >
+        Login
+      </Button>
     </>
   )
 }

src/pages/nostr/style.module.scss

@@ -1,6 +0,0 @@
-@import '../../styles/colors.scss';
-
-.loginPage {
-  color: $text-color;
-  margin-top: 20px;
-}

src/pages/register/index.tsx

@@ -1,3 +1,35 @@
+import { Button, TextField } from '@mui/material'
+
 export const Register = () => {
-  return <>Register</>
+  return (
+    <>
+      <TextField
+        label="Email"
+        placeholder="Your email address"
+        fullWidth
+        margin="dense"
+        autoComplete="username"
+      />
+      <TextField
+        label="Password"
+        placeholder="Your password"
+        fullWidth
+        margin="dense"
+        type="password"
+        autoComplete="new-password"
+      />
+      <TextField
+        label="Confirm password"
+        placeholder="Re-type your password"
+        fullWidth
+        margin="dense"
+        type="password"
+        autoComplete="new-password"
+      />
+
+      <Button variant="contained" fullWidth>
+        Register
+      </Button>
+    </>
+  )
 }

src/styles/form.module.scss

@@ -0,0 +1,3 @@
+.label {
+  font-size: 16px;
+}