Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Improve mobile responsiveness #104

Merged
merged 24 commits into from
Feb 24, 2024
Merged

chore: Improve mobile responsiveness #104

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
749c962
chore: remove extra margin on join us page
phoenixpereira Feb 19, 2024
fb920be
feat: make account boxes fit better on mobile
phoenixpereira Feb 22, 2024
ba98af1
refactor: simplify bool component props and rename isFormButton to size
phoenixpereira Feb 24, 2024
465c78a
feat(home): Add join us button at end of page
rayokamoto Feb 19, 2024
f9391c8
fix(home): Center sponsors on screen resize
rayokamoto Feb 19, 2024
0ab6332
feat(home): Use join us link instead of button
rayokamoto Feb 19, 2024
67fbe90
chore: spelling and grammar fixes (#86)
rayokamoto Feb 19, 2024
b5396ec
chore: more spelling and grammar fixes (#88)
tinnamchoi Feb 19, 2024
7d51320
feat: add button loading to indicate request in progress (#89)
rayokamoto Feb 19, 2024
ab63f12
chore: add loading for pay online button (#92)
rayokamoto Feb 19, 2024
28f034a
feat: enable ssr for header
jsun969 Feb 19, 2024
565f05b
feat(api): remove unnecessary apis
jsun969 Feb 19, 2024
ba1cd10
feat: refresh rsc after mutation (#94)
jsun969 Feb 19, 2024
d28bdde
feat: add titles for all pages
jsun969 Feb 19, 2024
2795259
feat(seo): disable robot for few pages
jsun969 Feb 19, 2024
8361990
fix(seo): remove metadata on client components
jsun969 Feb 19, 2024
e48fc50
fix(header): mobile menu has correct links and behaviour (#96)
rayokamoto Feb 19, 2024
97c5c2a
chore: Add underline styling to mobile menu links (#98)
rayokamoto Feb 19, 2024
3da5c9e
fix(contact): minor fix for mobile style (#100)
jsun969 Feb 19, 2024
834a787
Merge branch 'main' into chore/mobile-responsiveness
phoenixpereira Feb 24, 2024
3041225
fix: make button component valid after merge
phoenixpereira Feb 24, 2024
06cf029
chore: use self-closing tag for divs
phoenixpereira Feb 24, 2024
9789fe0
chore: make settings container wider on desktop
phoenixpereira Feb 24, 2024
20b66ab
fix(settings): responsive style for setting tabs
jsun969 Feb 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/app/(account)/forgot-password/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,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={true} fullWidth={true}>
phoenixpereira marked this conversation as resolved.
Show resolved Hide resolved
<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 && (
Expand Down
10 changes: 5 additions & 5 deletions src/app/(account)/join/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function JoinUsPage() {
}, [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">
Expand All @@ -49,11 +49,11 @@ export default function JoinUsPage() {
</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={true} fullWidth={true}>
<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 />
Expand Down
12 changes: 9 additions & 3 deletions src/app/(account)/join/steps/StepFour.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,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" isFormButton={true}>
phoenixpereira marked this conversation as resolved.
Show resolved Hide resolved
Back
</Button>
<Button onClick={handleSignUp} colour="purple" loading={createMember.isMutating}>
<Button
onClick={handleSignUp}
colour="purple"
width="w-full"
isFormButton={true}
loading={createMember.isMutating}
>
Sign up
</Button>
</div>
Expand Down
9 changes: 5 additions & 4 deletions src/app/(account)/join/steps/StepOne.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,8 +131,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" isFormButton={true}>
<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">
Expand All @@ -151,8 +152,8 @@ export default function StepOne() {
control={form.control}
name="password"
/>
<div className="mt-8 flex justify-center space-x-4">
<Button colour="orange" width="w-[19rem] md:w-[25.5rem]" type="submit">
<div className="mt-8">
<Button colour="orange" width="w-full" type="submit" isFormButton={true}>
Continue
</Button>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/app/(account)/join/steps/StepThree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" isFormButton={true}>
Back
</Button>
<Button type="submit" colour="orange">
<Button type="submit" colour="orange" width="w-full" isFormButton={true}>
Continue
</Button>
</div>
Expand Down
8 changes: 3 additions & 5 deletions src/app/(account)/join/steps/StepTwo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" isFormButton={true} type="submit">
Continue
</Button>
</form>
);
}
2 changes: 1 addition & 1 deletion src/app/(account)/settings/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down
21 changes: 12 additions & 9 deletions src/app/(account)/settings/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
phoenixpereira marked this conversation as resolved.
Show resolved Hide resolved
</div>
);
}
10 changes: 5 additions & 5 deletions src/app/(account)/settings/page.tsx
View file
Open in desktop
jsun969 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,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={true} fullWidth={true}>
<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 }} />
) : (
Expand All @@ -36,6 +36,6 @@ export default async function SettingsPage() {
</div>
</FancyRectangle>
</section>
</div>
</main>
);
}
8 changes: 7 additions & 1 deletion src/app/(account)/settings/tabs/MembershipSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,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>
<Button type="submit" colour="orange" onClick={handlePayment}>
<Button
type="submit"
colour="orange"
onClick={handlePayment}
width="w-full"
isFormButton={true}
>
Pay Online
</Button>
</>
Expand Down
98 changes: 53 additions & 45 deletions src/app/(account)/signin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,56 +76,64 @@ 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>
<main className="flex flex-col items-center">
<section className="w-full max-w-lg">
<FancyRectangle colour="purple" offset="8" filled={true} fullWidth={true}>
<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
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"
<Button
onClick={handleGoogleSignIn}
colour="white"
width="w-full"
isFormButton={true}
>
Forgot password?
</Link>
<Button type="submit" colour="orange" width="w-[19rem] md:w-[25rem]">
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"
isFormButton={true}
>
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>
);
}
16 changes: 13 additions & 3 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,29 @@ interface ButtonProps {
type?: 'button' | 'submit' | 'reset';
width?: string;
loading?: boolean;
isFormButton?: boolean;
phoenixpereira marked this conversation as resolved.
Show resolved Hide resolved
}

const Button = ({ children, colour, href, onClick, width, type, loading }: ButtonProps) => {
const Button = ({
children,
colour,
href,
onClick,
width,
type,
loading,
isFormButton,
}: ButtonProps) => {
const isAnchor = !!href;
const Component = isAnchor ? 'a' : 'button';

return (
<FancyRectangle colour="black" offset="4" filled>
<FancyRectangle colour="black" offset="4" filled fullWidth={true}>
<Component
href={isAnchor ? href : undefined}
onClick={onClick}
type={isAnchor ? undefined : type}
className={`${width} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black px-12 py-4 text-lg font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 md:text-base lg:px-6 lg:py-2`}
className={`${width} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black ${isFormButton ? 'px-4 text-sm' : 'px-16 text-lg'} py-4 font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 md:text-base lg:px-6 lg:py-2`}
disabled={loading}
>
{children}
Expand Down