From c47e1581d496120b12141925cf6156c425a7ee7b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 May 2024 18:53:10 +0800
Subject: [PATCH 1/2] Fix colour on the username message during sign up

---
 packages/web/components/templates/auth/EmailSignup.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx
index 678a41054..8fa43db10 100644
--- a/packages/web/components/templates/auth/EmailSignup.tsx
+++ b/packages/web/components/templates/auth/EmailSignup.tsx
@@ -18,9 +18,8 @@ const SignUpForm = (): JSX.Element => {
   const [password, setPassword] = useState<string | undefined>()
   const [fullname, setFullname] = useState<string | undefined>()
   const [username, setUsername] = useState<string | undefined>()
-  const [debouncedUsername, setDebouncedUsername] = useState<
-    string | undefined
-  >()
+  const [debouncedUsername, setDebouncedUsername] =
+    useState<string | undefined>()
 
   const { isUsernameValid, usernameErrorMessage } = useValidateUsernameQuery({
     username: debouncedUsername ?? '',
@@ -122,7 +121,6 @@ const SignUpForm = (): JSX.Element => {
             m: 0,
             pl: '$2',
             alignSelf: 'flex-start',
-            color: '$omnivoreGray',
           }}
         >
           Username is available.

From 543ecd0d9108407cf68f510a6043bb2ff59f43b4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 May 2024 19:17:47 +0800
Subject: [PATCH 2/2] Fix colours on ConfirmProfile and update naming

---
 ...rofileModal.tsx => ConfirmProfileForm.tsx} | 208 +++++++++---------
 packages/web/pages/confirm-profile.tsx        |   4 +-
 2 files changed, 112 insertions(+), 100 deletions(-)
 rename packages/web/components/templates/{ConfirmProfileModal.tsx => ConfirmProfileForm.tsx} (54%)

diff --git a/packages/web/components/templates/ConfirmProfileModal.tsx b/packages/web/components/templates/ConfirmProfileForm.tsx
similarity index 54%
rename from packages/web/components/templates/ConfirmProfileModal.tsx
rename to packages/web/components/templates/ConfirmProfileForm.tsx
index 0c8e4387f..4b3c4170c 100644
--- a/packages/web/components/templates/ConfirmProfileModal.tsx
+++ b/packages/web/components/templates/ConfirmProfileForm.tsx
@@ -1,16 +1,19 @@
 import { ModalRoot, ModalContent } from '../elements/ModalPrimitives'
-import { HStack, VStack } from '../elements/LayoutPrimitives'
+import { HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
 import { Button } from '../elements/Button'
 import { StyledText } from '../elements/StyledText'
 import { useCallback, useState } from 'react'
-import { BorderedFormInput, FormInput } from '../elements/FormElements'
-import { BorderedTextArea } from '../elements/StyledTextArea'
-import { TermAndConditionsFooter } from '../templates/LoginForm'
+import {
+  BorderedFormInput,
+  FormInput,
+  FormLabel,
+} from '../elements/FormElements'
+import { TermAndConditionsFooter } from './LoginForm'
 import { fetchEndpoint } from '../../lib/appConfig'
 import { useValidateUsernameQuery } from '../../lib/networking/queries/useValidateUsernameQuery'
 import { logoutMutation } from '../../lib/networking/mutations/logoutMutation'
 
-export function ConfirmProfileModal(): JSX.Element {
+export function ConfirmProfileForm(): JSX.Element {
   const [name, setName] = useState('')
   const [username, setUsername] = useState('')
   const [debouncedUsername, setDebouncedUsername] = useState('')
@@ -83,99 +86,108 @@ export function ConfirmProfileModal(): JSX.Element {
   }, [bio, name, username])
 
   return (
-    <ModalRoot defaultOpen>
-      <ModalContent
-        onPointerDownOutside={(event) => {
-          event.preventDefault()
+    <form
+      onSubmit={(event) => {
+        event.preventDefault()
+        submitProfile()
+      }}
+    >
+      <VStack
+        alignment="center"
+        css={{
+          padding: '16px',
+          minWidth: '340px',
+          width: '70vw',
+          maxWidth: '576px',
+          borderRadius: '8px',
+          background: '#343434',
+          border: '1px solid #6A6968',
+          boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
         }}
-        css={{ overflow: 'auto', maxWidth: '30em' }}
       >
-        <form
-          onSubmit={(event) => {
-            event.preventDefault()
-            submitProfile()
-          }}
-        >
-          <VStack
-            alignment="center"
-            css={{
-              px: '$2',
-              gap: '$2',
-            }}
-          >
-            <StyledText style="subHeadline">Create Your Profile</StyledText>
+        <StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
+          Create profile
+        </StyledText>
 
-            <VStack css={{ width: '100%' }}>
-              <HStack
+        <VStack
+          css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
+        >
+          <VStack css={{ width: '100%', gap: '5px' }}>
+            <FormLabel className="required" css={{ color: '#D9D9D9' }}>
+              Username
+            </FormLabel>
+            <BorderedFormInput
+              autoFocus={true}
+              type="text"
+              name="username"
+              value={username}
+              placeholder="Username"
+              onChange={handleUsernameChange}
+              css={{
+                backgroundColor: '#2A2A2A',
+                color: 'white',
+                border: 'unset',
+              }}
+              required
+            />
+            {username.length > 0 && usernameErrorMessage && (
+              <StyledText
+                style="caption"
                 css={{
-                  width: '100%',
-                  borderRadius: '8px',
-                  border: '1px solid #3D3D3D',
-                  boxShadow: '#B1B1B1 9px 9px 9px -9px',
-                  p: '$2',
+                  m: 0,
+                  pl: '$2',
+                  color: '$error',
+                  alignSelf: 'flex-start',
                 }}
               >
-                <StyledText css={{ m: 0, p: 0 }}>@</StyledText>
-                <FormInput
-                  type="text"
-                  value={username}
-                  placeholder="Username"
-                  onChange={handleUsernameChange}
-                />
-              </HStack>
-              {username.length > 0 && usernameErrorMessage && (
-                <StyledText
-                  style="caption"
-                  css={{
-                    m: 0,
-                    pl: '$2',
-                    color: '$error',
-                    alignSelf: 'flex-start',
-                  }}
-                >
-                  {usernameErrorMessage}
-                </StyledText>
-              )}
-              {isUsernameValid && (
-                <StyledText
-                  style="caption"
-                  css={{
-                    m: 0,
-                    pl: '$2',
-                    alignSelf: 'flex-start',
-                    color: '$omnivoreGray',
-                  }}
-                >
-                  Username is available.
-                </StyledText>
-              )}
-            </VStack>
+                {usernameErrorMessage}
+              </StyledText>
+            )}
+            {isUsernameValid && (
+              <StyledText
+                style="caption"
+                css={{
+                  m: 0,
+                  pl: '$2',
+                  alignSelf: 'flex-start',
+                }}
+              >
+                Username is available.
+              </StyledText>
+            )}
+          </VStack>
+
+          <VStack css={{ width: '100%', gap: '5px' }}>
+            <FormLabel className="required" css={{ color: '#D9D9D9' }}>
+              Name
+            </FormLabel>
             <BorderedFormInput
               type="text"
               value={name}
               placeholder="Name"
               onChange={handleNameChange}
+              css={{
+                backgroundColor: '#2A2A2A',
+                color: 'white',
+                border: 'unset',
+              }}
               maxLength={30}
             />
-            <BorderedTextArea
-              css={{
-                mt: '$2',
-                width: '100%',
-                minHeight: '$6',
-              }}
-              placeholder={'Bio (optional)'}
-              value={bio}
-              onChange={handleBioChange}
-              maxLength={400}
-            />
-            {errorMessage && (
-              <StyledText style="error">{errorMessage}</StyledText>
-            )}
-            <Button style="ctaDarkYellow" css={{ width: '50%', my: '$2' }}>
-              Sign Up
-            </Button>
+          </VStack>
+          {errorMessage && (
+            <StyledText style="error">{errorMessage}</StyledText>
+          )}
+          <HStack
+            alignment="center"
+            distribution="end"
+            css={{
+              gap: '10px',
+              width: '100%',
+              height: '80px',
+            }}
+          >
             <Button
-              style="ghost"
+              style="cancelAuth"
               onClick={async (e) => {
                 e.preventDefault()
                 window.localStorage.removeItem('authVerified')
@@ -188,20 +200,20 @@ export function ConfirmProfileModal(): JSX.Element {
                 window.location.href = '/'
               }}
             >
-              <StyledText
-                css={{
-                  color: '$omnivoreRed',
-                  textDecoration: 'underline',
-                  cursor: 'pointer',
-                }}
-              >
-                Cancel
-              </StyledText>
+              Cancel
             </Button>
-            <TermAndConditionsFooter />
-          </VStack>
-        </form>
-      </ModalContent>
-    </ModalRoot>
+            <Button
+              style="ctaBlue"
+              css={{
+                padding: '10px 50px',
+              }}
+            >
+              Sign Up
+            </Button>
+          </HStack>
+          <TermAndConditionsFooter />
+        </VStack>
+      </VStack>
+    </form>
   )
 }
diff --git a/packages/web/pages/confirm-profile.tsx b/packages/web/pages/confirm-profile.tsx
index 19f1237b7..ed20a6ca3 100644
--- a/packages/web/pages/confirm-profile.tsx
+++ b/packages/web/pages/confirm-profile.tsx
@@ -1,13 +1,13 @@
 import { PageMetaData } from '../components/patterns/PageMetaData'
 import { ProfileLayout } from '../components/templates/ProfileLayout'
-import { ConfirmProfileModal } from '../components/templates/ConfirmProfileModal'
+import { ConfirmProfileForm } from '../components/templates/ConfirmProfileForm'
 
 export default function ConfirmProfilePage(): JSX.Element {
   return (
     <>
       <PageMetaData title="Create Profile - Omnivore" path="/confirm-profile" />
       <ProfileLayout>
-        <ConfirmProfileModal />
+        <ConfirmProfileForm />
       </ProfileLayout>
       <div data-testid="confirm-profile-page-tag" />
     </>