chore: Improve mobile responsiveness

src/app/(account)/forgot-password/page.tsx

@@ -126,9 +126,9 @@ export default function ForgotPasswordPage() {
     });
 
     return (
-        <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">
+        <section className="w-full max-w-lg">
+            <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                <div className="z-0 w-full border-4 border-black bg-white p-8 text-black md:p-12">
                     <h3 className="text-3xl font-bold">Forgot Your Password?</h3>
                     <p className="mb-8 text-xl">{STEP_INSTRUCTIONS[step]}</p>
                     {step === 1 && (

src/app/(account)/join/page.tsx

@@ -28,7 +28,7 @@ export default function JoinPage() {
     }, [isSignedIn]);
 
     return (
-        <main className="mx-4 flex flex-col items-center gap-8 px-4 md:mx-10 md:gap-16">
+        <main className="flex flex-col items-center gap-8 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">
@@ -53,11 +53,11 @@ export default function JoinPage() {
                     </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">
+            <section className="w-full max-w-lg">
+                <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                    <div className="z-0 w-full border-4 border-black bg-white p-8 text-black md:p-12">
                         <h3 className="text-3xl font-bold">{heading.title}</h3>
-                        <p className="text-xl">{heading.description}</p>
+                        <p className="mb-8 text-xl">{heading.description}</p>
 
                         <SignedOut>
                             <StepOne />

src/app/(account)/join/steps/StepFour.tsx

@@ -53,11 +53,17 @@ export default function StepFour() {
                     type="checkbox"
                 />
             </div>
-            <div className="mt-8 flex justify-center space-x-4">
-                <Button onClick={prevStep} colour="orange">
+            <div className="grid grid-cols-2 gap-4">
+                <Button onClick={prevStep} colour="orange" width="w-full" size="small">
                     Back
                 </Button>
-                <Button onClick={handleSignUp} colour="purple" loading={createMember.isMutating}>
+                <Button
+                    onClick={handleSignUp}
+                    colour="purple"
+                    width="w-full"
+                    size="small"
+                    loading={createMember.isMutating}
+                >
                     Sign up
                 </Button>
             </div>

src/app/(account)/join/steps/StepOne.tsx

@@ -153,8 +153,9 @@ export default function StepOne() {
 
     return (
         <div>
-            <Button onClick={handleGoogleSignUp} colour="white" width="w-[19rem] md:w-[25.5rem]">
-                <FcGoogle className="mr-2 inline-block text-xl" /> Continue with Google
+            <Button onClick={handleGoogleSignUp} colour="white" width="w-full" size="small">
+                <FcGoogle className="mb-0.5 mr-2 inline-block text-xl" />
+                Continue with Google
             </Button>
 
             <div className="my-6 mt-10 flex items-center justify-center">
@@ -173,11 +174,12 @@ export default function StepOne() {
                     control={form.control}
                     name="password"
                 />
-                <div className="mt-8 flex justify-center space-x-4">
+                <div className="mt-8">
                     <Button
                         colour="orange"
-                        width="w-[19rem] md:w-[25.5rem]"
+                        width="w-full"
                         type="submit"
+                        size="small"
                         loading={emailJoinLoading}
                     >
                         Continue

src/app/(account)/join/steps/StepThree.tsx

@@ -102,11 +102,11 @@ export default function StepThree() {
                     />
                 </>
             )}
-            <div className="mt-8 flex justify-center space-x-4">
-                <Button onClick={prevStep} colour="orange">
+            <div className="grid grid-cols-2 gap-4">
+                <Button onClick={prevStep} colour="orange" width="w-full" size="small">
                     Back
                 </Button>
-                <Button type="submit" colour="orange">
+                <Button type="submit" colour="orange" width="w-full" size="small">
                     Continue
                 </Button>
             </div>

src/app/(account)/join/steps/StepTwo.tsx

@@ -70,11 +70,9 @@ export default function StepTwo() {
             {form.watch('studentStatus') === 'At The University of Adelaide' && (
                 <ControlledField label="Student ID" control={form.control} name="studentId" />
             )}
-            <div className="mb-4 mt-8 flex w-full">
-                <Button colour="orange" width="w-[19rem] md:w-[25.5rem]" type="submit">
-                    Continue
-                </Button>
-            </div>
+            <Button colour="orange" width="w-full" size="small" type="submit">
+                Continue
+            </Button>
         </form>
     );
 }

src/app/(account)/settings/Settings.tsx

@@ -34,7 +34,7 @@ export default function Settings({ settingData }: { settingData: SettingData })
                     refresh();
                 }}
             />
-            <div className="flex w-full">
+            <div className="flex w-full md:col-span-2">
                 <Tab settingData={settingData} />
             </div>
         </>

src/app/(account)/settings/Sidebar.tsx

@@ -29,15 +29,18 @@ interface SidebarProps {
 
 export default function Sidebar({ currentTab, onTabChange }: SidebarProps) {
     return (
-        <div className="flex w-48 flex-col space-y-4 border-r-2 border-grey">
-            {TAB_NAMES.map((tab, i) => (
-                <SidebarTab
-                    currentTab={currentTab}
-                    onTabChange={onTabChange}
-                    tabName={tab}
-                    key={i}
-                />
-            ))}
+        <div className="flex flex-col md:flex-row md:justify-between">
+            <div className="flex flex-col gap-y-4">
+                {TAB_NAMES.map((tab, i) => (
+                    <SidebarTab
+                        currentTab={currentTab}
+                        onTabChange={onTabChange}
+                        tabName={tab}
+                        key={i}
+                    />
+                ))}
+            </div>
+            <div className="my-4 border-b-2 border-grey md:my-0 md:mr-4 md:border-r-2"></div>
         </div>
     );
 }

src/app/(account)/settings/page.tsx

@@ -21,13 +21,13 @@ export default async function SettingsPage() {
     const membershipPayment = await verifyMembershipPayment(user.id);
 
     return (
-        <div className="flex flex-col">
+        <main className="flex flex-col items-center gap-8 md:gap-16">
             <div className="flex justify-center">
                 <Title colour="purple">Settings</Title>
             </div>
-            <section className="mt-12 flex justify-center">
-                <FancyRectangle colour="purple" offset="8" filled>
-                    <div className="z-0 flex w-fit gap-8 border-4 border-black bg-white px-8 py-8 text-black md:w-[48rem] md:px-12 md:py-12">
+            <section className="w-full max-w-lg">
+                <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                    <div className="z-0 grid w-full border-4 border-black bg-white p-8 text-black md:grid-cols-3 md:p-12">
                         {exists ? (
                             <Settings settingData={{ membershipPayment }} />
                         ) : (
@@ -42,6 +42,6 @@ export default async function SettingsPage() {
                     </div>
                 </FancyRectangle>
             </section>
-        </div>
+        </main>
     );
 }

src/app/(account)/settings/tabs/MembershipSettings.tsx

@@ -56,6 +56,8 @@ export default function MembershipSettings({
                         type="submit"
                         colour="orange"
                         onClick={handlePayment}
+                        width="w-full"
+                        size="small"
                         loading={pay.isMutating}
                     >
                         Pay Online

src/app/(account)/signin/page.tsx

@@ -91,61 +91,65 @@ export default function SignInPage() {
     };
 
     return (
-        <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 */}
-                    <h3 className="text-3xl font-bold">Sign In</h3>
-                    <p className="mb-8 text-xl">Sign into your account</p>
-
-                    <Button
-                        onClick={handleGoogleSignIn}
-                        colour="white"
-                        width="w-[19rem] md:w-[25.5rem]"
-                    >
-                        <FcGoogle className="mr-2 inline-block text-xl" /> Continue with Google
-                    </Button>
-
-                    <div className="my-6 mt-10 flex items-center justify-center">
-                        <div className="w-full border-t border-grey"></div>
-                        <p className="mx-4 text-grey">or</p>
-                        <div className="w-full border-t border-grey"></div>
-                    </div>
-                    <form onSubmit={handleSignIn}>
-                        <ControlledField label="Email" control={form.control} name="email" />
-                        <ControlledField
-                            label="Password"
-                            control={form.control}
-                            name="password"
-                            type="password"
-                        />
-                        <Link
-                            href="/forgot-password"
-                            className="mb-8 flex text-lg text-orange md:text-base"
-                        >
-                            Forgot password?
-                        </Link>
+        <main className="flex flex-col items-center">
+            <section className="w-full max-w-lg">
+                <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                    <div className="z-0 w-full border-4 border-black bg-white px-12 py-12 text-black">
+                        {/* Heading */}
+                        <h3 className="text-3xl font-bold">Sign In</h3>
+                        <p className="mb-8 text-xl">Sign into your account</p>
+
                         <Button
-                            type="submit"
-                            colour="orange"
-                            width="w-[19rem] md:w-[25rem]"
-                            loading={signInLoading}
+                            onClick={handleGoogleSignIn}
+                            colour="white"
+                            width="w-full"
+                            size="small"
                         >
-                            Sign In
+                            <FcGoogle className="mr-2 inline-block text-xl" /> Continue with Google
                         </Button>
-                    </form>
-
-                    {/* Sign-up option */}
-                    <div className="mt-10 flex">
-                        <p className="text-lg text-grey md:text-base">
-                            Don&apos;t have an account yet?{' '}
-                            <Link href="/join" className="text-orange">
-                                Join Us
+
+                        <div className="my-6 mt-10 flex items-center justify-center">
+                            <div className="w-full border-t border-grey"></div>
+                            <p className="mx-4 text-grey">or</p>
+                            <div className="w-full border-t border-grey"></div>
+                        </div>
+                        <form onSubmit={handleSignIn}>
+                            <ControlledField label="Email" control={form.control} name="email" />
+                            <ControlledField
+                                label="Password"
+                                control={form.control}
+                                name="password"
+                                type="password"
+                            />
+                            <Link
+                                href="/forgot-password"
+                                className="mb-8 flex text-lg text-orange md:text-base"
+                            >
+                                Forgot password?
                             </Link>
-                        </p>
+                            <Button
+                                type="submit"
+                                colour="orange"
+                                width="w-full"
+                                size="small"
+                                loading={signInLoading}
+                            >
+                                Sign In
+                            </Button>
+                        </form>
+
+                        {/* Sign-up option */}
+                        <div className="mt-10 flex">
+                            <p className="text-lg text-grey md:text-base">
+                                Don&apos;t have an account yet?{' '}
+                                <Link href="/join" className="text-orange">
+                                    Join Us
+                                </Link>
+                            </p>
+                        </div>
                     </div>
-                </div>
-            </FancyRectangle>
-        </section>
+                </FancyRectangle>
+            </section>
+        </main>
     );
 }

src/app/(home)/page.tsx

@@ -46,7 +46,7 @@ export default function HomePage() {
                     {/* Right side */}
                     <div className="mt-12 w-full transition-all duration-500 md:w-auto lg:ml-10 lg:mt-0">
                         <div className="relative z-10 mr-2">
-                            <FancyRectangle colour="purple" offset="8" filled={true}>
+                            <FancyRectangle colour="purple" offset="8" filled>
                                 <div className="relative h-full w-full bg-white">
                                     <ImageCarousel
                                         images={CAROUSEL_IMAGES}

src/app/about/FAQ.tsx

@@ -19,7 +19,7 @@ const FAQ = ({ question, answer, colour }: FAQProps) => {
     };
 
     return (
-        <FancyRectangle colour="white" filled={true} rounded={true} offset={'8'} fullWidth={true}>
+        <FancyRectangle colour="white" filled rounded offset={'8'} fullWidth>
             <div className="flex w-full flex-col">
                 <div
                     className={`flex h-full w-full flex-col justify-center rounded-xl border-2 bg-${colour} border-white p-4`}

src/app/about/page.tsx

@@ -30,7 +30,7 @@ export default function AboutPage() {
                         className="absolute -z-10 ml-8 mt-8 w-0 max-w-[800px] md:w-[70vw] lg:w-[50vw]"
                     />
                     <div className="mr-2 flex">
-                        <FancyRectangle colour={'purple'} offset={'8'} filled={true} rounded={true}>
+                        <FancyRectangle colour={'purple'} offset={'8'} filled rounded>
                             <Image
                                 src={'/images/about/meet-and-greet.jpg'}
                                 alt={'Meet and Greet'}
@@ -86,7 +86,7 @@ export default function AboutPage() {
                                 <h3 className="mb-2 ml-2 md:mb-0">to</h3>
                             </div>
                         </div>
-                        <FancyRectangle colour={'purple'} offset={'8'} filled={true} rounded={true}>
+                        <FancyRectangle colour={'purple'} offset={'8'} filled rounded>
                             <Paragraph>
                                 <ul className="ml-6 list-disc">
                                     <li>
@@ -161,7 +161,7 @@ export default function AboutPage() {
                         </p>
                     </div>
                     <div className="mr-2 flex justify-center lg:justify-end">
-                        <FancyRectangle colour={'purple'} offset={'8'} filled={true} rounded={true}>
+                        <FancyRectangle colour={'purple'} offset={'8'} filled rounded>
                             <Image
                                 src={'/images/about/quiz-night.jpg'}
                                 alt={'Quiz Night'}
@@ -239,10 +239,10 @@ export default function AboutPage() {
                                 key={index}
                                 colour={member.isExecCommittee ? 'yellow' : 'white'}
                                 offset={'8'}
-                                filled={true}
-                                rounded={true}
-                                fullWidth={true}
-                                fullHeight={true}
+                                filled
+                                rounded
+                                fullWidth
+                                fullHeight
                             >
                                 <div
                                     className={`h-full w-full rounded-xl border-2 border-${member.isExecCommittee ? 'yellow' : 'white'} flex flex-col justify-center bg-grey p-4`}

src/app/events/FridayNight.tsx

@@ -52,7 +52,7 @@ function Ducks() {
 
 function Details() {
     return (
-        <FancyRectangle colour="white" offset="16" filled={true} rounded>
+        <FancyRectangle colour="white" offset="16" filled rounded>
             <Paragraph className="space-y-8">
                 <ul className="ml-6 list-disc">
                     <li>Need to blow off some steam from a long week of studying?</li>

src/app/events/Info.tsx

@@ -15,7 +15,7 @@ export default function Info({ className }: { className?: string }) {
                 <p>For further information, take a look at some of the events below!</p>
             </div>
             <div className="mb-4 mr-4">
-                <FancyRectangle colour="white" offset="16" filled={true} rounded>
+                <FancyRectangle colour="white" offset="16" filled rounded>
                     <div className="relative h-full w-full rounded bg-white p-1">
                         <ImageCarousel images={CAROUSEL_IMAGES} width={400} height={300} />
                     </div>