Merge branch 'clean-up-styling' of https://github.com/UoAWDCC/wdcc-cl…

…ubs-mem-checker
UoaWDCC · Mar 1, 2024 · 10219aa · 10219aa
2 parents cb2f8a1 + 9eeffec
commit 10219aa
Show file tree

Hide file tree

Showing 27 changed files with 422 additions and 975 deletions.
diff --git a/client/src/assets/WDCCLogo.svg b/client/src/assets/WDCCLogo.svg
diff --git a/client/src/assets/WdccLogo.svg b/client/src/assets/WdccLogo.svg
diff --git a/client/src/components/Background.module.css b/client/src/components/Background.module.css
diff --git a/client/src/components/Background.tsx b/client/src/components/Background.tsx
@@ -1,13 +1,15 @@
-import styles from './Background.module.css';
 import WdccLogo from '../assets/wdcc_blue_logo.svg';
 
 interface BackgroundProps {
   children?: React.ReactNode;
 }
 const Background = ({ children }: BackgroundProps) => {
   return (
-    <div className={styles.background}>
-      <img id={styles.wdccLogo} src={WdccLogo} />
+    <div className="bg-[#e6e9f1] flex relative h-screen w-screen">
+      <img
+        className="fixed top-4 right-4 w-[9em]"
+        src={WdccLogo}
+      />
       {children}
     </div>
   );

diff --git a/client/src/index.css b/client/src/index.css
@@ -1,3 +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');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -22,6 +25,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  min-height: 0;
 }
 
 a {

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -14,6 +14,7 @@ import { ConfimationPage } from './pages/onboarding-confirmation-page/Confirmati
 import PublicCheckerPage from './pages/public-checker-page/PublicCheckerPage';
 import OurTeam from './pages/our-team/OurTeam';
 import EditCheckerPage from './pages/create-checker-page/EditCheckerPage';
+import PrivacyPolicy from './pages/privacy-policy/PrivacyPolicy';
 
 axios.defaults.withCredentials = true;
 
@@ -62,6 +63,10 @@ const router = createBrowserRouter([
     path: '/confirmation',
     element: <ConfimationPage />,
   },
+  {
+    path: '/privacy-policy',
+    element: <PrivacyPolicy />,
+  },
   {
     path: '/:webLinkId',
     element: <PublicCheckerPage />,

diff --git a/client/src/pages/club-checker-page/ClubCheckerPage.tsx b/client/src/pages/club-checker-page/ClubCheckerPage.tsx
@@ -13,6 +13,8 @@ import Button from '../../components/Button';
 import Textfield from '../../components/Textfield';
 import styles from './ClubCheckerPage.module.css';
 import {
+  InputHTMLAttributes,
+  ReactElement,
   createRef,
   useEffect,
   useLayoutEffect,
@@ -29,6 +31,7 @@ import SadFace from '../../assets/SadFace.svg';
 import DeadFace from '../../assets/DeadFace.svg';
 import CircularProgress from '@mui/material/CircularProgress';
 import WebFont from 'webfontloader';
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 
 interface ClubCheckerPageProps {
   clubId?: number;
@@ -90,7 +93,7 @@ const ClubCheckerPage = ({
   }, [optionsList]); // This dependency array specifies that the effect should run whenever optionsList changes
 
   const [textFieldWidth, setTextFieldWidth] = useState(0);
-  const textFieldRef = createRef();
+  const textFieldRef = createRef<any>();
 
   useLayoutEffect(() => {
     setTextFieldWidth(textFieldLabelRef.current?.offsetWidth || 0);
@@ -104,6 +107,11 @@ const ClubCheckerPage = ({
       }
     });
   }, []);
+  useEffect(() => {
+    try {
+      textFieldRef.current.value = '';
+    } catch {}
+  }, [selectedIdentifier]);
 
   const backgroundImageBlob = useMemo(() => {
     try {
@@ -180,7 +188,7 @@ const ClubCheckerPage = ({
 
   return selectedIdentifier ? (
     <div
-      className={styles.container}
+      className="flex flex-col items-center w-full justify-center py-16 gap-6 h-full rounded-xl"
       style={{
         backgroundImage: backgroundImageBlob
           ? `url(${backgroundImageBlob})`
@@ -194,31 +202,27 @@ const ClubCheckerPage = ({
     >
       {logoImageBlob && (
         <img
-          className={styles.logo}
+          className="float-right absolute top-[15px] right-[15px]"
+          width={96}
           src={logoImageBlob}
         />
       )}
       <h1
+        className="font-bold text-5xl text-ellipsis text-center p-8"
         style={{
           color: titleTextColor,
-          font: `bold 56px "${font}"`,
-          textAlign: 'center',
-          minHeight: '45px',
-          maxWidth: '95%',
-          overflowWrap: 'break-word',
+          fontFamily: font,
         }}
       >
         {title}
       </h1>
       <select
+        className="h-[30px] w-[160px] rounded-xl"
         style={{
           backgroundColor: dropDownBackgroundColor,
-          borderRadius: '8px',
-          height: '30px',
-          width: '160px',
           color: getTextColor(dropDownBackgroundColor),
         }}
-        value={''}
+        value={selectedIdentifier.displayName}
         onChange={(event) => {
           const originalName = event.target.value;
           const columnObject = optionsList.find(
@@ -244,30 +248,7 @@ const ClubCheckerPage = ({
           </option>
         ))}
       </select>
-      <div
-        style={{
-          display: 'flex',
-          height: '45px',
-          margin: '-30px 0px 0px 0px',
-          position: 'relative',
-        }}
-      >
-        <p
-          style={{
-            alignSelf: 'center',
-            color: textFieldTextColor,
-            display: 'flex',
-            fontWeight: '900',
-            left: '10px',
-            top: '13px',
-            position: 'absolute',
-            zIndex: '1',
-            fontFamily: font,
-          }}
-          ref={textFieldLabelRef}
-        >
-          {selectedIdentifier.displayName}
-        </p>
+      <div className="flex">
         <Textfield
           backgroundColor={textFieldBackgroundColor}
           isError={isError}
@@ -286,14 +267,7 @@ const ClubCheckerPage = ({
           onFocus={handleFocus}
         />
       </div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          // alignItems: 'center',
-          height: '25vh',
-        }}
-      >
+      <div className="flex justify-center h-[10rem]">
         {iconState === 0 && (
           <Button
             buttonText="check"
@@ -329,10 +303,9 @@ const ClubCheckerPage = ({
             )}
             {isSuccess && (
               <p
+                className="text-xl"
                 style={{
                   fontFamily: font,
-                  fontSize: '1.5rem',
-                  width: '300px',
                   color: textFieldTextColor,
                 }}
               >

diff --git a/client/src/pages/create-checker-page/EditCheckerPage.tsx b/client/src/pages/create-checker-page/EditCheckerPage.tsx
@@ -100,45 +100,36 @@ const EditCheckerPage = ({ isEdit }: EditCheckerPageProps) => {
 
   return (
     <Background>
-      <div id={styles.progressBarContainer}>
-        <div id={styles.progressBar}>
-          {steps.map((keyValue, index) => {
-            return (
-              <div
-                className={styles.bar}
-                key={index}
-                style={index + 1 === progress ? { opacity: 1 } : {}}
-              />
-            );
-          })}
+      <div className="text-[white] flex flex-col p-12  w-full justify-center">
+        <div>
+          <div className="gap-2 flex-row hidden lg:flex">
+            {steps.map((keyValue, index) => {
+              return (
+                <div
+                  className="bg-[#087df1] border-none rounded-lg h-[8px] w-[65px] opacity-75"
+                  key={index}
+                  style={index + 1 === progress ? { opacity: 1 } : {}}
+                />
+              );
+            })}
+          </div>
+          <p className="text-[#087df1]">
+            {progress} of {steps.length}
+          </p>
         </div>
-        <p
-          style={{ marginLeft: '10px' }}
-          className={styles.progressText}
-        >
-          {progress} of {steps.length}
-        </p>
-      </div>
 
-      <PageContextProvider.Provider value={[page, setPage]}>
-        {showConfirm ? (
-          isEdit ? (
-            <CustomiseConfirmEdit
+        <PageContextProvider.Provider value={[page, setPage]}>
+          {showConfirm ? (
+            <CustomiseConfirm
               clubDetails={clubDetails}
               onNext={onConfirm}
               onBack={() => setShowConfirm(false)}
             />
           ) : (
-            <CustomiseConfirmCreate
-              onNext={onConfirm}
-              clubDetails={clubDetails}
-              onBack={() => setShowConfirm(false)}
-            />
-          )
-        ) : (
-          steps[progress]
-        )}
-      </PageContextProvider.Provider>
+            steps[progress]
+          )}
+        </PageContextProvider.Provider>
+      </div>
     </Background>
   );
 };

diff --git a/client/src/pages/create-checker-page/GoogleSheetForm.tsx b/client/src/pages/create-checker-page/GoogleSheetForm.tsx
@@ -120,36 +120,30 @@ const GoogleSheetForm = ({ onNext, onBack }: GoogleSheetFormProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   return (
-    <div className={styles.container}>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          rowGap: '10vh',
-          alignItems: 'center',
-        }}
-      >
-        <div>
-          <div id={styles.CustomisePageBackButton}>
+    <div className="flex justify-center h-full">
+      <div className="flex flex-col items-center md:bg-[#fff] font-display pt-8 justify-top md:justify-between gap-8 p-0 bg-[transparent] md:px-10 md:py-16 rounded-xl w-fit">
+        <div className="flex flex-col md:flex-row w-full justify-center">
+          <span className="float-left">
             <BackButton
               onClick={onBack}
               color="#087DF1"
-              size="45px"
+              size="40px"
               hoverColor="#cceeff"
               backgroundColor="transparent"
-              margin="0 500px 0 0"
+            />
+          </span>
+          <div className="w-full flex text-2xl text-[#087df1] md:pt-[2vh] justify-center items-center gap-1 md:gap-4 flex-row">
+            <h1 className="font-display font-bold">link your google sheet</h1>
+            <img
+              className="w-14"
+              src={GoogleSheetsLogo}
             />
           </div>
-          <div className={styles.title}>
-            <h1>link your google sheet</h1>
-            <img src={GoogleSheetsLogo} />
-          </div>
-          <i className={styles.subtitle}>
-            paste the link to the google sheet with {`<club acronym>`}'s
-            membership data
-          </i>
         </div>
-        <div style={{ width: '100%', marginBottom: '-10px' }}>
+        <i className="text-xl text-[#087DF1]">
+          paste the link to the google sheet with membership data
+        </i>
+        <div className="">
           <Textfield
             errorText="enter valid link"
             fontSize="1rem"
@@ -161,8 +155,8 @@ const GoogleSheetForm = ({ onNext, onBack }: GoogleSheetFormProps) => {
             width="100%"
           />
         </div>
-        <div>
-          <p style={{ fontSize: '14px', color: '#707070' }}>
+        <div className="flex flex-col justify-center items-center w-full">
+          <p className="text-lg text-[#707070] mt-1 max-w-[60%]">
             If you have more than one google sheet (e.g. for different years),
             you can create more membership checker pages for your club later in
             the admin dashboard.