chore: Improve mobile responsiveness (#104)

* chore: remove extra margin on join us page * feat: make account boxes fit better on mobile * refactor: simplify bool component props and rename isFormButton to size * feat(home): Add join us button at end of page * fix(home): Center sponsors on screen resize * feat(home): Use join us link instead of button * chore: spelling and grammar fixes (#86) * chore: more spelling and grammar fixes (#88) * feat: add button loading to indicate request in progress (#89) * chore: add loading for pay online button (#92) * feat: enable ssr for header * feat(api): remove unnecessary apis * feat: refresh rsc after mutation (#94) * feat: add titles for all pages * feat(seo): disable robot for few pages * fix(seo): remove metadata on client components * fix(header): mobile menu has correct links and behaviour (#96) * chore: Add underline styling to mobile menu links (#98) * fix(contact): minor fix for mobile style (#100) * fix: make button component valid after merge * chore: use self-closing tag for divs * chore: make settings container wider on desktop * fix(settings): responsive style for setting tabs --------- Co-authored-by: Ray <[email protected]> Co-authored-by: Timothy Choi <[email protected]> Co-authored-by: jsun969 <[email protected]>
compsci-adl · Feb 24, 2024 · 083eeb2 · 083eeb2
1 parent f68f690
commit 083eeb2
Show file tree

Hide file tree

Showing 22 changed files with 153 additions and 129 deletions.
diff --git a/src/app/(account)/forgot-password/page.tsx b/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 && (

diff --git a/src/app/(account)/join/page.tsx b/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 />

diff --git a/src/app/(account)/join/steps/StepFour.tsx b/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>

diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx
@@ -153,14 +153,15 @@ 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">
-                <div className="w-full border-t border-grey"></div>
+                <div className="w-full border-t border-grey" />
                 <p className="mx-4 text-grey">or</p>
-                <div className="w-full border-t border-grey"></div>
+                <div className="w-full border-t border-grey" />
             </div>
 
             <form onSubmit={handleSignUp}>
@@ -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

diff --git a/src/app/(account)/join/steps/StepThree.tsx b/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>

diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/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>
     );
 }
diff --git a/src/app/(account)/settings/Settings.tsx b/src/app/(account)/settings/Settings.tsx
@@ -26,17 +26,17 @@ export default function Settings({ settingData }: { settingData: SettingData })
     const { refresh } = useRouter();
 
     return (
-        <>
+        <div className="flex w-full flex-col gap-4 border-4 border-black bg-white px-4 py-8 text-black md:flex-row md:gap-8 md:p-12">
             <Sidebar
                 currentTab={tab}
                 onTabChange={(tab) => {
                     setTab(tab);
                     refresh();
                 }}
             />
-            <div className="flex w-full">
+            <div className="w-full">
                 <Tab settingData={settingData} />
             </div>
-        </>
+        </div>
     );
 }
diff --git a/src/app/(account)/settings/Sidebar.tsx b/src/app/(account)/settings/Sidebar.tsx
@@ -10,7 +10,7 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
     const selected = currentTab === tabName;
     return (
         <button
-            className={`text-left ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
+            className={`text-nowrap text-xl md:text-base ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
             onClick={() => {
                 if (!selected) {
                     onTabChange(tabName);
@@ -25,11 +25,14 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
 interface SidebarProps {
     currentTab: TabNames;
     onTabChange: (tab: TabNames) => void;
+    className?: string;
 }
 
-export default function Sidebar({ currentTab, onTabChange }: SidebarProps) {
+export default function Sidebar({ currentTab, onTabChange, className }: SidebarProps) {
     return (
-        <div className="flex w-48 flex-col space-y-4 border-r-2 border-grey">
+        <div
+            className={`${className} flex flex-col items-center gap-4 overflow-y-scroll border-2 border-grey p-2 md:items-end md:overflow-visible md:border-y-0 md:border-l-0 md:border-r-2 md:py-0 md:pl-0 md:pr-8`}
+        >
             {TAB_NAMES.map((tab, i) => (
                 <SidebarTab
                     currentTab={currentTab}

diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx
@@ -21,27 +21,25 @@ 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">
-                        {exists ? (
-                            <Settings settingData={{ membershipPayment }} />
-                        ) : (
-                            <h2 className="text-2xl">
-                                Please finishing{' '}
-                                <Link href="/join" className="font-bold text-purple">
-                                    signing up
-                                </Link>{' '}
-                                first.
-                            </h2>
-                        )}
-                    </div>
+            <section className="w-full max-w-[62rem]">
+                <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                    {exists ? (
+                        <Settings settingData={{ membershipPayment }} />
+                    ) : (
+                        <h2 className="text-2xl">
+                            Please finishing{' '}
+                            <Link href="/join" className="font-bold text-purple">
+                                signing up
+                            </Link>{' '}
+                            first.
+                        </h2>
+                    )}
                 </FancyRectangle>
             </section>
-        </div>
+        </main>
     );
 }
diff --git a/src/app/(account)/settings/tabs/AccountSettings.tsx b/src/app/(account)/settings/tabs/AccountSettings.tsx
@@ -63,7 +63,7 @@ export default function AccountSettings({
                         Membership Status: <span className="text-orange">Payment Required</span>
                     </h2>
 
-                    <div className="mb-6 border-b-2 border-black"></div>
+                    <div className="mb-6 border-b-2 border-black" />
                     <p>
                         Finalise your membership by{' '}
                         <span
@@ -78,7 +78,7 @@ export default function AccountSettings({
             )}
             <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
                 <h2 className="text-2xl font-bold">Change Email</h2>
-                <div className="mb-2 border-b-2 border-black"></div>
+                <div className="mb-2 border-b-2 border-black" />
                 <p className="font-bold">Email address</p>
                 <input
                     type="email"
@@ -93,7 +93,7 @@ export default function AccountSettings({
             </form>
             <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
                 <h2 className="text-2xl font-bold">Change Password</h2>
-                <div className="mb-2 border-b-2 border-black"></div>
+                <div className="mb-2 border-b-2 border-black" />
                 <div className="flex flex-col gap-2">
                     <label htmlFor="oldPassword" className="font-bold">
                         Old Password
@@ -139,7 +139,7 @@ export default function AccountSettings({
             </form>
             <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
                 <h2 className="text-2xl font-bold">Change Linked Google Account</h2>
-                <div className="mb-2 border-b-2 border-black"></div>
+                <div className="mb-2 border-b-2 border-black" />
                 <p className="font-bold">Link Status: </p>
             </form>
         </div>

diff --git a/src/app/(account)/settings/tabs/MembershipSettings.tsx b/src/app/(account)/settings/tabs/MembershipSettings.tsx
@@ -34,7 +34,7 @@ export default function MembershipSettings({
                     {payment.paid ? 'Paid' : 'Payment Required'}
                 </span>
             </h2>
-            <div className="mb-6 border-b-2 border-black"></div>
+            <div className="mb-6 border-b-2 border-black" />
             {payment.paid ? (
                 <p>
                     You are a CS Club member! Your membership expires on{' '}
@@ -51,11 +51,13 @@ export default function MembershipSettings({
                         .
                     </p>
                     <h2 className="mt-8 text-2xl font-bold">Pay Membership Fee</h2>
-                    <div className="mb-6 border-b-2 border-black"></div>
+                    <div className="mb-6 border-b-2 border-black" />
                     <Button
                         type="submit"
                         colour="orange"
                         onClick={handlePayment}
+                        width="w-full md:w-42"
+                        size="small"
                         loading={pay.isMutating}
                     >
                         Pay Online

diff --git a/src/app/(account)/settings/tabs/NotificationsSettings.tsx b/src/app/(account)/settings/tabs/NotificationsSettings.tsx
@@ -14,7 +14,7 @@ export default function NotificationsSettings() {
         <div className="relative flex w-full flex-col gap-10">
             <div>
                 <h2 className="text-2xl font-bold">Change Email Notification Settings</h2>
-                <div className="mb-2 border-b-2 border-black"></div>
+                <div className="mb-2 border-b-2 border-black" />
             </div>
             <div className="items-left flex flex-col gap-4 md:flex-row">
                 <h2 className="text-lg font-semibold">Enable Email Notifications</h2>

diff --git a/src/app/(account)/settings/tabs/PersonalInfoSettings.tsx b/src/app/(account)/settings/tabs/PersonalInfoSettings.tsx
@@ -65,7 +65,7 @@ export default function PersonalInfoSettings() {
     return (
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
             <h2 className="text-2xl font-bold">Change Personal Info</h2>
-            <div className="mb-2 border-b-2 border-black"></div>
+            <div className="mb-2 border-b-2 border-black" />
             <ControlledField label="First Name" name="firstName" control={control} type="text" />
             <ControlledField label="Last Name" name="lastName" control={control} type="text" />
             <ControlledField