updated styling for homepage

UoaWDCC · Mar 28, 2024 · a282ac1 · a282ac1
1 parent 28692ba
commit a282ac1
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 54 deletions.
diff --git a/client/src/index.css b/client/src/index.css
@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -12,7 +12,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #e6e9f1;
+  background-color: #fff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -50,11 +50,11 @@ body {
   }
 }
 @font-face {
-  font-family: 'Montserrat';
-  src: url('/Montserrat-VariableFont_wght.ttf');
+  font-family: "Montserrat";
+  src: url("/Montserrat-VariableFont_wght.ttf");
 }
 .montserrat {
-  font-family: 'Montserrat';
+  font-family: "Montserrat";
 }
 
 .fontpicker {
@@ -71,7 +71,7 @@ body {
   margin-top: 0.5rem;
 }
 
-[class^='font-preview-'] {
+[class^="font-preview-"] {
   filter: invert(11%) sepia(5%) saturate(244%) hue-rotate(201deg)
     brightness(100%) contrast(82%) !important;
 }

diff --git a/client/src/pages/google-sign-in/GoogleSignInPage.tsx b/client/src/pages/google-sign-in/GoogleSignInPage.tsx
@@ -1,39 +1,39 @@
-import SignInDoor from '../../assets/sign-in-through-door.svg';
-import GoogleLogo from '../../assets/google-white-background.svg';
-import styles from './style.module.css';
-import Link from '../../components/Link';
-import WDCCLogo from '../../assets/wdcc_blue_logo.svg';
+import SignInDoor from "../../assets/sign-in-through-door.svg";
+import GoogleLogo from "../../assets/google-white-background.svg";
+import styles from "./style.module.css";
+import Link from "../../components/Link";
+import WDCCLogo from "../../assets/wdcc_blue_logo.svg";
 
-import { AnchorLink } from '../../components/Link';
+import { AnchorLink } from "../../components/Link";
 
 export function GoogleSignIn() {
   return (
     <div className={styles.sign_in_page}>
       <img className={styles.logo} src={WDCCLogo} alt="WDCC Logo" />
       <div className={styles.container}>
         <img
-          className={`${styles['door-image']} ${styles.hide_for_mobile}`}
+          className={`${styles["door-image"]} ${styles.hide_for_mobile}`}
           width={600}
           height={600}
           src={SignInDoor}
         />
-        <div className={styles['sign-in-container']}>
+        <div className={styles["sign-in-container"]}>
           <div className={styles.text}>
-            <p className={styles.title}>sign in</p>
+            <p className={styles.title}>Sign In</p>
             <p className={styles.subtitle}>
               please sign in with your Google account to proceed.
             </p>
           </div>
           <AnchorLink
-            linkText="sign in"
+            linkText="Sign In"
             icon={GoogleLogo}
             backgroundColor="#03045E"
             iconSize="40"
             fontSize="1.5rem"
             href={
-              import.meta.env.MODE == 'production'
-                ? '/api/auth/google'
-                : 'http://localhost:3000/api/auth/google'
+              import.meta.env.MODE == "production"
+                ? "/api/auth/google"
+                : "http://localhost:3000/api/auth/google"
             }
           />
         </div>

diff --git a/client/src/pages/home/home.tsx b/client/src/pages/home/home.tsx
@@ -1,48 +1,46 @@
-import WDCCLogo from '../../assets/wdcc_blue_logo.svg';
-import femaleProgrammer from '../../assets/femaleProgrammer.svg';
-import { useNavigate } from 'react-router';
-import Button from '../../components/Button';
+import WDCCLogo from "../../assets/wdcc_blue_logo.svg";
+import femaleProgrammer from "../../assets/femaleProgrammer.svg";
+import { useNavigate } from "react-router";
+import Button from "../../components/Button";
 
 export const HomePage = () => {
   const navigate = useNavigate();
   const handleButtonClick = () => {
-    navigate('/sign-in');
+    navigate("/sign-in");
   };
   return (
-    <div className="w-screen h-screen flex flex-col items-center justify-center">
+    <div className=" flex justify-center items-center h-screen w-screen">
       <title>Club Membership Checker</title>
       <img
-        className="absolute top-[3em] right-[3em] w-[9em] h-auto"
+        className="absolute top-[1.5em] md:top-[3em] right-[1.5em] md:right-[3em] w-[9em] h-auto"
         src={WDCCLogo}
         alt="WDCC Logo"
       />
-      <div className="flex flex-row gap-10 items-start px-8">
-        <div>
-          <h1 className="text-[#183249] text-3xl font-display font-bold">
+      <div className="flex flex-col-reverse md:flex-row gap-20 max-w-7xl mx-auto items-center justify-center shadow-xl p-12 lg:p-24 rounded-xl">
+        <div className="flex flex-col gap-16">
+          <h1 className="text-[#183249] text-4xl md:text-5xl lg:text-6xl font-display font-bold">
             Club Membership Checker
           </h1>
 
-          <p className="text-[#183249] text-lg font-sans font-normal">
-            we’re here to make membership status checking super easy for you and
-            your club members.
-            <br />
-            <br />
-            simply link your club’s Google Sheet to create and customise your
-            club’s checker page, and manage your data in the admin dashboard.
-            <br />
-            <br />
+          <div className="text-[#183249] text-lg font-semibold opacity-90 font-sans flex flex-col gap-6">
+            <p>
+              {" "}
+              We’re here to make membership status checking super easy for you
+              and your club members.
+            </p>
+            <p>
+              {" "}
+              Simply link your club’s Google Sheet to create and customise your
+              club’s checker page, and manage your data in the admin dashboard.
+            </p>
             <a href="/our-team">Developed by WDCC. Meet our Team!</a>
-            <br />
-            <a
-              className="text-sm"
-              href="/privacy-policy"
-            >
+            <a className="text-sm" href="/privacy-policy">
               Our Privacy Policy
             </a>
-          </p>
+          </div>
           <div>
             <Button
-              buttonText="get started!"
+              buttonText="Get Started!"
               width="8.8em"
               height="3.5em"
               backgroundColor="transparent"
@@ -57,7 +55,7 @@ export const HomePage = () => {
         </div>
 
         <img
-          className="top-[7em] w-auto h-[30em] hidden md:flex"
+          className="top-[7em] w-auto h-[30em]"
           src={femaleProgrammer}
           alt=""
         />

diff --git a/client/src/pages/onboarding-confirmation-page/style.module.css b/client/src/pages/onboarding-confirmation-page/style.module.css
@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
 
 .title {
   color: #183249;
@@ -13,7 +13,7 @@
   top: 10vh;
   left: 10.3vw;
 
-  font-family: 'Montserrat';
+  font-family: "Montserrat";
   font-style: normal;
   font-weight: 700;
   line-height: 1.2;
@@ -33,13 +33,13 @@
   top: 40vh;
   left: 10.4vw;
 
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: normal;
   font-weight: 300;
 }
 
 body {
-  background-color: #e6e9f1;
+  background-color: #fff;
 }
 
 .intro_button {