refactor: Reuse page height and top padding in layout (#35)

* refactor: reuse page height and top padding in layout * refactor(join-us): use `Title` * fix: uniform `Title` font size
compsci-adl · Jan 21, 2024 · 125dec0 · 125dec0
1 parent 7f2b0e2
commit 125dec0
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 124 deletions.
diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx
@@ -108,9 +108,9 @@ export default function ForgotPasswordPage() {
     });
 
     return (
-        <section className="mb-16 mt-64 w-[25rem]">
+        <section className="flex justify-center">
             <FancyRectangle colour="purple" offset="8" filled={true}>
-                <div className="z-0 w-fit border-4 border-black bg-white px-12 py-12 text-black">
+                <div className="z-0 w-[24rem] border-4 border-black bg-white px-8 py-8 text-black md:w-[32rem] md:px-12 md:py-12">
                     <h3 className="text-3xl font-bold">Forgot Your Password?</h3>
                     <p className="mb-8 text-xl">{STEP_INSTRUCTIONS[step]}</p>
                     {step === 1 && (
@@ -120,7 +120,7 @@ export default function ForgotPasswordPage() {
                                 control={sendCodeForm.control}
                                 name="email"
                             />
-                            <Button colour="orange" width="w-[25rem]" type="submit">
+                            <Button colour="orange" width="w-[19rem] md:w-[25rem]" type="submit">
                                 Send Code
                             </Button>
                         </form>
@@ -145,14 +145,14 @@ export default function ForgotPasswordPage() {
                                 control={resetPasswordForm.control}
                                 name="code"
                             />
-                            <Button colour="orange" width="w-[25rem]" type="submit">
+                            <Button colour="orange" width="w-[19rem] md:w-[25rem]" type="submit">
                                 Reset Password
                             </Button>
                         </form>
                     )}
 
                     {step === 3 && (
-                        <Button href="/" colour="orange" width="w-[25rem]">
+                        <Button href="/" colour="orange" width="w-[19rem] md:w-[25rem]">
                             Return to Home Page
                         </Button>
                     )}

diff --git a/src/app/(account)/join-us/page.tsx b/src/app/(account)/join-us/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import FancyRectangle from '@/components/FancyRectangle';
+import Title from '@/components/Title';
 import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
 import Link from 'next/link';
 import { useEffect } from 'react';
@@ -23,58 +24,50 @@ export default function JoinUsPage() {
     }, [isSignedIn]);
 
     return (
-        <div className="relative top-32 z-10 h-fit w-responsive bg-grey text-white">
-            <main className="mx-4 flex flex-col items-center px-4 py-8 md:mx-10">
-                <section>
-                    <FancyRectangle colour="purple" offset="8" filled={false}>
-                        <div className="w-fit bg-purple px-8 py-2">
-                            <h1 className="text-5xl font-bold text-grey md:text-7xl">Join Us</h1>
-                        </div>
-                    </FancyRectangle>
-                    <div className="relative z-10 mt-16 flex flex-col text-2xl font-black md:flex-row lg:text-3xl">
-                        <h3>New Members are</h3>
-                        <div className="mt-2 w-fit bg-purple px-2 md:ml-2 md:mt-0">
-                            <h3 className=" text-grey">Always Welcome</h3>
-                        </div>
+        <main className="mx-4 flex flex-col items-center gap-8 px-4 md:mx-10 md:gap-16">
+            <Title colour="purple">Join Us</Title>
+            <section>
+                <div className="relative z-10 flex flex-col text-2xl font-black md:flex-row lg:text-3xl">
+                    <h3>New Members are</h3>
+                    <div className="mt-2 w-fit bg-purple px-2 md:ml-2 md:mt-0">
+                        <h3 className=" text-grey">Always Welcome</h3>
                     </div>
-                    <div className="mt-8 border-2 border-white px-4 py-4">
-                        <p>
-                            <span className="text-yellow">Membership costs $10</span> for the full
-                            year. You can pay for membership online here at our website.
-                            Alternatively, you can pay at a club event or contact one of the{' '}
-                            <Link href="/about" className="underline">
-                                committee members
-                            </Link>
-                            .
-                        </p>
-                        <p className="mt-4">
-                            Create an <span className="text-orange">account below</span> to start
-                            the registration process.
-                        </p>
-                    </div>
-                </section>
-                <div className="h-16"></div>
-                <section>
-                    <FancyRectangle colour="purple" offset="8" filled={true}>
-                        <div className="z-0 w-full border-4 border-black bg-white px-12 py-12 text-black">
-                            <h3 className="text-3xl font-bold">{heading.title}</h3>
-                            <p className="text-xl">{heading.description}</p>
+                </div>
+                <div className="mt-8 border-2 border-white px-4 py-4">
+                    <p>
+                        <span className="text-yellow">Membership costs $10</span> for the full year.
+                        You can pay for membership online here at our website. Alternatively, you
+                        can pay at a club event or contact one of the{' '}
+                        <Link href="/about" className="underline">
+                            committee members
+                        </Link>
+                        .
+                    </p>
+                    <p className="mt-4">
+                        Create an <span className="text-orange">account below</span> to start the
+                        registration process.
+                    </p>
+                </div>
+            </section>
+            <section>
+                <FancyRectangle colour="purple" offset="8" filled={true}>
+                    <div className="z-0 w-full border-4 border-black bg-white px-12 py-12 text-black">
+                        <h3 className="text-3xl font-bold">{heading.title}</h3>
+                        <p className="text-xl">{heading.description}</p>
 
-                            <SignedOut>
-                                <StepOne />
-                            </SignedOut>
-                            <SignedIn>
-                                <ProgressBar step={step} />
-                                {
-                                    // eslint-disable-next-line react/jsx-key
-                                    [<StepTwo />, <StepThree />, <StepFour />][step - 2]
-                                }
-                            </SignedIn>
-                        </div>
-                    </FancyRectangle>
-                </section>
-                <div className="h-32"></div>
-            </main>
-        </div>
+                        <SignedOut>
+                            <StepOne />
+                        </SignedOut>
+                        <SignedIn>
+                            <ProgressBar step={step} />
+                            {
+                                // eslint-disable-next-line react/jsx-key
+                                [<StepTwo />, <StepThree />, <StepFour />][step - 2]
+                            }
+                        </SignedIn>
+                    </div>
+                </FancyRectangle>
+            </section>
+        </main>
     );
 }
diff --git a/src/app/(account)/sign-in/page.tsx b/src/app/(account)/sign-in/page.tsx
@@ -17,7 +17,7 @@ const signInSchema = z.object({
     password: z.string().min(1, { message: 'Please enter your password' }),
 });
 
-export default function SignInForm() {
+export default function SignInPage() {
     const { isLoaded, signIn, setActive } = useSignIn();
 
     const form = useForm<z.infer<typeof signInSchema>>({
@@ -75,7 +75,7 @@ export default function SignInForm() {
     };
 
     return (
-        <section className="mb-16 mr-2 mt-40">
+        <section className="flex justify-center">
             <FancyRectangle colour="purple" offset="8" filled={true}>
                 <div className="z-0 w-[24rem] border-4 border-black bg-white px-8 py-8 text-black md:w-[32rem] md:px-12 md:py-12">
                     {/* Heading */}
@@ -109,7 +109,7 @@ export default function SignInForm() {
                         >
                             Forgot password?
                         </Link>
-                        <Button type="submit" colour="orange" width="w-[19rem] md:w-[25.5rem]">
+                        <Button type="submit" colour="orange" width="w-[19rem] md:w-[25rem]">
                             Sign In
                         </Button>
                     </form>

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -3,12 +3,12 @@ import Title from '@/components/Title';
 import Image from 'next/image';
 import ImageCarousel from './ImageCarousel';
 
-export default function Home() {
+export default function HomePage() {
     return (
-        <div className="relative top-8 z-10 h-fit w-responsive bg-grey text-white">
-            <main className="mx-4 px-4 py-8 md:mx-10">
+        <div className="relative">
+            <main className="mx-4 md:mx-10">
                 {/* Hero Section */}
-                <section className="mb-8 flex pt-24 font-black md:pt-32 lg:pt-48">
+                <section className="mb-8 flex font-black">
                     <div className="grid grid-cols-1 lg:grid-cols-2">
                         {/* Left side */}
                         <div>
@@ -27,9 +27,7 @@ export default function Home() {
                                 <h1 className="text-5xl md:text-8xl">SOCIALISE,</h1>
                                 <div className="h-2"></div>
 
-                                <Title className="text-5xl md:text-8xl" colour="yellow">
-                                    Code.
-                                </Title>
+                                <Title colour="yellow">Code.</Title>
                                 <div className="h-4 md:h-8"></div>
                                 <FancyRectangle
                                     colour="orange"
@@ -278,7 +276,7 @@ export default function Home() {
                                 <span className="relative bg-white px-4 py-2 text-2xl font-black text-black lg:text-3xl">
                                     Thinking about <span className="text-orange"> Joining?</span>
                                 </span>
-                                <p className="border-2 border-white bg-grey px-4 py-2 text-lg text-white lg:text-xl">
+                                <p className="border-2 border-white bg-grey px-4 py-2 text-lg lg:text-xl">
                                     New members are always welcome!
                                 </p>
                             </div>

diff --git a/src/app/contact/Form.tsx b/src/app/contact/Form.tsx
@@ -28,7 +28,7 @@ export default function Form({ className }: { className?: string }) {
                 className="absolute right-[100px] top-[-48px] hidden md:block"
             />
             <form
-                className="grid h-full grid-cols-2 grid-rows-[auto_auto_minmax(12rem,_1fr)_auto] gap-4 rounded-xl bg-[#FFF] p-3 md:gap-8 md:p-6"
+                className="grid h-full grid-cols-2 grid-rows-[auto_auto_minmax(12rem,_1fr)_auto] gap-4 rounded-xl bg-[#FFF] p-3 text-black md:gap-8 md:p-6"
                 onSubmit={handleSubmit}
             >
                 <h2 className="col-span-2 border-b-2 border-black pb-1 text-2xl font-bold md:border-b-4 md:pb-2 md:text-4xl">

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -5,21 +5,16 @@ import Sponsorship from './Sponsorship';
 
 export default function ContactPage() {
     return (
-        <div className="mx-auto min-h-screen w-responsive pt-32 md:pt-40">
-            <div className="h-full bg-[url('/images/rectangleGrid.svg')] bg-repeat-y md:bg-[length:90%_90%] md:bg-center md:bg-no-repeat">
-                <div className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-10">
-                    <Title
-                        colour="yellow"
-                        className="grid-flow-dense justify-self-center text-5xl md:col-span-2 md:text-7xl"
-                    >
-                        Contact
-                    </Title>
-                    <div className="space-y-8 md:space-y-20">
-                        <Contact />
-                        <Sponsorship />
-                    </div>
-                    <Form className="md:row-span-2" />
+        <div className="h-full bg-[url('/images/rectangleGrid.svg')] bg-repeat-y md:bg-[length:90%_90%] md:bg-center md:bg-no-repeat">
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-10">
+                <div className="grid-flow-dense justify-self-center md:col-span-2">
+                    <Title colour="yellow">Contact</Title>
                 </div>
+                <div className="space-y-8 md:space-y-20">
+                    <Contact />
+                    <Sponsorship />
+                </div>
+                <Form className="md:row-span-2" />
             </div>
         </div>
     );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -44,12 +44,12 @@ export default function RootLayout({ children }: RootLayoutProps) {
             }}
         >
             <html lang="en" className={archivo.className}>
-                <body className="overflow-x-hidden bg-grey">
-                    <div id="root" className="flex flex-col items-center">
-                        <Header />
+                <body className="overflow-x-hidden bg-grey text-white">
+                    <Header />
+                    <div className="mx-auto min-h-screen w-responsive pt-32 md:pt-40">
                         {children}
-                        <Footer />
                     </div>
+                    <Footer />
                 </body>
             </html>
         </ClerkProvider>

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,28 +1,22 @@
-import Footer from '@/components/Footer';
-import Header from '@/components/Header';
 import Link from 'next/link';
 
 export default function NotFound() {
     return (
-        <>
-            <Header />
-            <main className="relative z-10 mb-64 mt-32 flex h-auto w-responsive flex-col items-center justify-center text-white">
-                <section className="flex w-full flex-col items-center justify-start gap-6 pt-[10em] max-md:pb-12 md:pt-[16em]">
-                    <h1 className="lg:text-primary-heading text-left text-5xl font-bold md:text-6xl">
-                        404
-                    </h1>
-                    <h2 className="lg:text-secondary-heading text-left text-5xl font-bold md:text-6xl">
-                        Not found
-                    </h2>
-                    <Link
-                        className="px-5 py-2 text-xl font-bold lg:px-6 lg:py-3 lg:text-2xl"
-                        href="/"
-                    >
-                        Go home
-                    </Link>
-                </section>
-            </main>
-            <Footer />
-        </>
+        <main className="flex flex-col items-center justify-center">
+            <section className="flex w-full flex-col items-center justify-start gap-6 pt-[10em] max-md:pb-12 md:pt-[16em]">
+                <h1 className="lg:text-primary-heading text-left text-5xl font-bold md:text-6xl">
+                    404
+                </h1>
+                <h2 className="lg:text-secondary-heading text-left text-5xl font-bold md:text-6xl">
+                    Not found
+                </h2>
+                <Link
+                    className="px-5 py-2 text-xl font-bold underline lg:px-6 lg:py-3 lg:text-2xl"
+                    href="/"
+                >
+                    Go home
+                </Link>
+            </section>
+        </main>
     );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -4,8 +4,8 @@ import Link from './Link';
 export default function Footer() {
     return (
         <footer className="relative z-20 pt-8 md:pt-12">
-            <div className="relative bottom-4 mx-8 flex w-responsive flex-col border-t-2 border-white py-4 transition-all duration-500 md:mx-20 md:flex-row md:items-center md:justify-between md:pb-8 lg:mx-32">
-                <div className="order-2 mb-4 text-center text-white md:order-1 md:mb-0 md:text-left">
+            <div className="relative bottom-4 mx-8 flex flex-col border-t-2 border-white py-4 transition-all duration-500 md:mx-20 md:flex-row md:items-center md:justify-between md:pb-8 lg:mx-32">
+                <div className="order-2 mb-4 text-center md:order-1 md:mb-0 md:text-left">
                     <p>&copy; 2024 The University of Adelaide Computer Science Club.</p>
                 </div>
                 {/* Social Media Links */}

diff --git a/src/components/Link.tsx b/src/components/Link.tsx
@@ -19,7 +19,7 @@ export default function Link({ name, link, icon: Icon, borderColour }: LinkProps
                 className="h-fit w-fit border-2 border-black bg-white p-1.5 transition-colors duration-300 hover:bg-orange hover:text-white"
                 aria-label={name}
             >
-                <Icon />
+                <Icon className="text-black" />
             </a>
         </FancyRectangle>
     );

diff --git a/src/components/Paragraph.tsx b/src/components/Paragraph.tsx
@@ -1,8 +1,6 @@
-/** Paragraph with rounded corner & grey background & white text */
+/** Paragraph with round corner border */
 export default function Paragraph({ children }: { children: React.ReactNode }) {
     return (
-        <div className="rounded-xl border-2 bg-grey p-3 text-lg text-white md:p-6 md:text-xl">
-            {children}
-        </div>
+        <div className="rounded-xl border-2 bg-grey p-3 text-lg md:p-6 md:text-xl">{children}</div>
     );
 }
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
@@ -2,19 +2,16 @@ import FancyRectangle from '@/components/FancyRectangle';
 import { BG_COLOURS, type Colour } from '@/constants/colours';
 
 interface TitleProps {
-    className?: string;
     children: string;
     colour: Colour;
 }
 
-export default function Title({ className, children, colour }: TitleProps) {
+export default function Title({ children, colour }: TitleProps) {
     return (
-        <div className={className}>
-            <FancyRectangle colour={colour} offset="8" filled={false}>
-                <div className={`w-fit px-2 ${BG_COLOURS[colour]}`}>
-                    <h1 className="font-bold text-grey">{children}</h1>
-                </div>
-            </FancyRectangle>
-        </div>
+        <FancyRectangle colour={colour} offset="8" filled={false}>
+            <div className={`w-fit p-2 ${BG_COLOURS[colour]}`}>
+                <h1 className="text-5xl font-bold text-grey md:text-8xl">{children}</h1>
+            </div>
+        </FancyRectangle>
     );
 }