buttons

src/app/auth/pages/SignupPage.tsx

@@ -1,12 +1,14 @@
 import { useNavigate, useParams } from 'react-router-dom'
 import { useEffect, useRef, useState, FormEvent, useCallback, Ref } from 'react'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
-import TextInput from '../../../components/TextInput.tsx'
-import PrimaryButton from '../../../components/PrimaryButton.tsx'
-import PrimaryLinkButton from '../../../components/PrimaryLinkButton.tsx'
+import TextInput from '../../../components/inputs/TextInput.tsx'
+import Button from '../../../components/buttons/Button.tsx'
+import AnchorButton from '../../../components/buttons/AnchorButton.tsx'
 import { invalid, valid, Validation } from '../../../utils/validation.ts'
 import { AuthService } from '../authService.ts'
-import SecondaryNavButton from '../../../components/SecondaryNavButton.tsx'
+import LinkButton from '../../../components/buttons/LinkButton.tsx'
+import NavBar from '../../../components/NavBar.tsx'
+import NavButton from '../../../components/buttons/NavButton.tsx'
 
 const SignupCodeKey = 'signupCode'
 
@@ -82,7 +84,13 @@ export default function SignupPage({ authService }: SignupPageProps) {
   }
 
   return (
-    <SingleColumnLayout>
+    <SingleColumnLayout
+      navbar={
+        <NavBar>
+          <NavButton to={'/'}>home</NavButton>
+        </NavBar>
+      }
+    >
       <main className="w-full mx-auto p-4">
         <div className="mt-12">
           <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
@@ -102,14 +110,16 @@ export default function SignupPage({ authService }: SignupPageProps) {
               type="password"
               ref={passwordInputRef}
             />
-            <PrimaryButton
+            <Button
               className="mt-4"
               disabled={isSubmitting || !!usernameError || !!passwordError}
               type="submit"
             >
               {isSubmitting ? 'wait...' : 'give me an account pls'}
-            </PrimaryButton>
-            <SecondaryNavButton to={'/login'}>login instead?</SecondaryNavButton>
+            </Button>
+            <LinkButton secondary to={'/login'}>
+              login instead?
+            </LinkButton>
           </form>
         </div>
       </main>
@@ -130,9 +140,9 @@ export default function SignupPage({ authService }: SignupPageProps) {
             If you <span className="italic">do</span> want to create an account, you should know who
             to contact
           </p>
-          <PrimaryLinkButton className={`mt-4`} href="https://en.wikipedia.org/wiki/Special:Random">
+          <AnchorButton className={`mt-4`} href="https://en.wikipedia.org/wiki/Special:Random">
             I'm sorry I'll go somewhere else :(
-          </PrimaryLinkButton>
+          </AnchorButton>
         </div>
       </dialog>
     </SingleColumnLayout>