From e3ca3ab9088e9a45d6d01c35811450c8c3f762dc Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Mon, 29 Jul 2024 17:12:47 +0200
Subject: [PATCH] fix: popup forms designs

---
 src/layouts/modal/index.tsx         |  4 +-
 src/layouts/modal/style.module.scss |  7 ++++
 src/pages/login/index.tsx           | 25 ++++++++++-
 src/pages/nostr/index.tsx           | 64 ++++++++++++++++++-----------
 src/pages/nostr/style.module.scss   |  6 ---
 src/pages/register/index.tsx        | 34 ++++++++++++++-
 src/styles/form.module.scss         |  3 ++
 7 files changed, 111 insertions(+), 32 deletions(-)
 delete mode 100644 src/pages/nostr/style.module.scss
 create mode 100644 src/styles/form.module.scss

diff --git a/src/layouts/modal/index.tsx b/src/layouts/modal/index.tsx
index ca4b064..e13c8d9 100644
--- a/src/layouts/modal/index.tsx
+++ b/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>
diff --git a/src/layouts/modal/style.module.scss b/src/layouts/modal/style.module.scss
index 02e91c1..8d47320 100644
--- a/src/layouts/modal/style.module.scss
+++ b/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);
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 103e5a1..f31e0a5 100644
--- a/src/pages/login/index.tsx
+++ b/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>
+    </>
+  )
 }
diff --git a/src/pages/nostr/index.tsx b/src/pages/nostr/index.tsx
index b4ff73e..60cb7f9 100644
--- a/src/pages/nostr/index.tsx
+++ b/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>
     </>
   )
 }
diff --git a/src/pages/nostr/style.module.scss b/src/pages/nostr/style.module.scss
deleted file mode 100644
index 8e1a311..0000000
--- a/src/pages/nostr/style.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../styles/colors.scss';
-
-.loginPage {
-  color: $text-color;
-  margin-top: 20px;
-}
diff --git a/src/pages/register/index.tsx b/src/pages/register/index.tsx
index 7af51db..c760edc 100644
--- a/src/pages/register/index.tsx
+++ b/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>
+    </>
+  )
 }
diff --git a/src/styles/form.module.scss b/src/styles/form.module.scss
new file mode 100644
index 0000000..59d7c2c
--- /dev/null
+++ b/src/styles/form.module.scss
@@ -0,0 +1,3 @@
+.label {
+  font-size: 16px;
+}