From 083eeb243744889cdf511094d3e8fce3d0e993c5 Mon Sep 17 00:00:00 2001 From: Phoenix Pereira <47909638+phoenixpereira@users.noreply.github.com> Date: Sat, 24 Feb 2024 15:20:36 +1030 Subject: [PATCH] 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 <22254748+rayokamoto@users.noreply.github.com> Co-authored-by: Timothy Choi <101849050+tinnamchoi@users.noreply.github.com> Co-authored-by: jsun969 --- src/app/(account)/forgot-password/page.tsx | 6 +- src/app/(account)/join/page.tsx | 10 +- src/app/(account)/join/steps/StepFour.tsx | 12 +- src/app/(account)/join/steps/StepOne.tsx | 14 ++- src/app/(account)/join/steps/StepThree.tsx | 6 +- src/app/(account)/join/steps/StepTwo.tsx | 8 +- src/app/(account)/settings/Settings.tsx | 6 +- src/app/(account)/settings/Sidebar.tsx | 9 +- src/app/(account)/settings/page.tsx | 32 +++--- .../settings/tabs/AccountSettings.tsx | 8 +- .../settings/tabs/MembershipSettings.tsx | 6 +- .../settings/tabs/NotificationsSettings.tsx | 2 +- .../settings/tabs/PersonalInfoSettings.tsx | 2 +- src/app/(account)/signin/page.tsx | 106 +++++++++--------- src/app/(home)/page.tsx | 12 +- src/app/about/FAQ.tsx | 2 +- src/app/about/page.tsx | 16 +-- src/app/events/FridayNight.tsx | 2 +- src/app/events/Info.tsx | 2 +- src/components/Button.tsx | 17 ++- src/components/FancyRectangle.tsx | 2 +- src/components/Link.tsx | 2 +- 22 files changed, 153 insertions(+), 129 deletions(-) diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx index 203968ea..17e3f347 100644 --- 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 ( -
- -
+
+ +

Forgot Your Password?

{STEP_INSTRUCTIONS[step]}

{step === 1 && ( diff --git a/src/app/(account)/join/page.tsx b/src/app/(account)/join/page.tsx index 6147cb90..dce7418b 100644 --- a/src/app/(account)/join/page.tsx +++ b/src/app/(account)/join/page.tsx @@ -28,7 +28,7 @@ export default function JoinPage() { }, [isSignedIn]); return ( -
+
Join Us
@@ -53,11 +53,11 @@ export default function JoinPage() {

-
- -
+
+ +

{heading.title}

-

{heading.description}

+

{heading.description}

diff --git a/src/app/(account)/join/steps/StepFour.tsx b/src/app/(account)/join/steps/StepFour.tsx index a32dc9ff..4441da7e 100644 --- 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" />
-
- -
diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx index d4a710fd..a2d8edba 100644 --- 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 (
-
-
+

or

-
+
@@ -173,11 +174,12 @@ export default function StepOne() { control={form.control} name="password" /> -
+
-
diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/src/app/(account)/join/steps/StepTwo.tsx index 7e9e7de2..8331bca8 100644 --- 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' && ( )} -
- -
+ ); } diff --git a/src/app/(account)/settings/Settings.tsx b/src/app/(account)/settings/Settings.tsx index ee14e335..8282fce5 100644 --- a/src/app/(account)/settings/Settings.tsx +++ b/src/app/(account)/settings/Settings.tsx @@ -26,7 +26,7 @@ export default function Settings({ settingData }: { settingData: SettingData }) const { refresh } = useRouter(); return ( - <> +
{ @@ -34,9 +34,9 @@ export default function Settings({ settingData }: { settingData: SettingData }) refresh(); }} /> -
+
- +
); } diff --git a/src/app/(account)/settings/Sidebar.tsx b/src/app/(account)/settings/Sidebar.tsx index ed1ba8f6..2b1ce4ea 100644 --- 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 (
); } diff --git a/src/app/(account)/settings/tabs/AccountSettings.tsx b/src/app/(account)/settings/tabs/AccountSettings.tsx index 0c1a2c59..1fc598d4 100644 --- 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: Payment Required -
+

Finalise your membership by{' '}

Change Email

-
+

Email address

Change Password

-
+
+ ); } diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 8b321096..13fd40d5 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -27,14 +27,14 @@ export default function HomePage() {

LEARN,

-
+

SOCIALISE,

-
+
CODE. -
+

Computer Science Club

@@ -46,7 +46,7 @@ export default function HomePage() { {/* Right side */}
- +
-
+
{/* */}
-
+
Thinking about Joining? diff --git a/src/app/about/FAQ.tsx b/src/app/about/FAQ.tsx index 41c48e18..1ba269d8 100644 --- a/src/app/about/FAQ.tsx +++ b/src/app/about/FAQ.tsx @@ -19,7 +19,7 @@ const FAQ = ({ question, answer, colour }: FAQProps) => { }; return ( - +
- + {'Meetto
- +
  • @@ -161,7 +161,7 @@ export default function AboutPage() {

- + {'Quiz
FAQ
-
+
{/* FAQ */}
diff --git a/src/app/events/FridayNight.tsx b/src/app/events/FridayNight.tsx index 674ee31c..d900ab0c 100644 --- a/src/app/events/FridayNight.tsx +++ b/src/app/events/FridayNight.tsx @@ -52,7 +52,7 @@ function Ducks() { function Details() { return ( - +
  • Need to blow off some steam from a long week of studying?
    • diff --git a/src/app/events/Info.tsx b/src/app/events/Info.tsx index 89b75b15..aaecb161 100644 --- a/src/app/events/Info.tsx +++ b/src/app/events/Info.tsx @@ -15,7 +15,7 @@ export default function Info({ className }: { className?: string }) {

    For further information, take a look at some of the events below!

- +
diff --git a/src/components/Button.tsx b/src/components/Button.tsx index ba12f1ec..1339ac22 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -11,20 +11,31 @@ interface ButtonProps { type?: 'button' | 'submit' | 'reset'; width?: string; loading?: boolean; + size?: 'base' | 'small'; font?: string; } -const Button = ({ children, colour, href, onClick, width, type, loading, font }: ButtonProps) => { +const Button = ({ + children, + colour, + href, + onClick, + width, + type, + loading, + font, + size = 'base', +}: ButtonProps) => { const isAnchor = !!href; const Component = isAnchor ? 'a' : 'button'; return ( - + {children} diff --git a/src/components/FancyRectangle.tsx b/src/components/FancyRectangle.tsx index b14d8e3d..07db8bc5 100644 --- a/src/components/FancyRectangle.tsx +++ b/src/components/FancyRectangle.tsx @@ -39,7 +39,7 @@ const FancyRectangle = ({ className={`absolute bottom-0 right-0 h-full w-full ${ filled ? BG_COLOURS[colour] : BORDER_COLOURS[colour] } ${rounded ? 'rounded-xl' : ''}`} - >
+ />
{children}
diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 513f0282..906e768d 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -11,7 +11,7 @@ interface LinkProps { export default function Link({ name, link, icon: Icon, borderColour }: LinkProps) { return ( - +