From add7f12fde2fe0f8ae471c7b262ce60841a52e39 Mon Sep 17 00:00:00 2001
From: James Wyndham <samwyn@xam.com.au>
Date: Fri, 8 Mar 2024 15:49:03 +0800
Subject: [PATCH] feature - added some stylings

---
 Frontend/app/(authenticated)/account/page.tsx |  6 +++---
 Frontend/components/Modals/ModalSignIn.tsx    |  4 ++--
 Frontend/components/Modals/ModalSignUp.tsx    | 21 +++++++++++--------
 Frontend/components/Utilities/Background.tsx  | 14 ++++++++++---
 .../ContainerImageIconBlocksFeature.tsx       |  2 +-
 .../Hero/WaitingListWithImageHero.tsx         |  6 +++---
 6 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/Frontend/app/(authenticated)/account/page.tsx b/Frontend/app/(authenticated)/account/page.tsx
index 16a28f2..05b024a 100644
--- a/Frontend/app/(authenticated)/account/page.tsx
+++ b/Frontend/app/(authenticated)/account/page.tsx
@@ -21,12 +21,12 @@ export default async function AccountPage() {
       <main
         id="content"
         role="main"
-        className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-base-100 "
+        className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-base-100"
       >
-        <Background>
+        <Background className="min-h-screen">
           <PageHeader title="Account" subtitle={<></>} />
           <AccountContent user={user} />
-          <Spacer className="mb-auto h-full w-full" />
+          <Spacer className="mt-auto" />
           <Footer />
         </Background>
       </main>
diff --git a/Frontend/components/Modals/ModalSignIn.tsx b/Frontend/components/Modals/ModalSignIn.tsx
index 2d6c952..903d577 100644
--- a/Frontend/components/Modals/ModalSignIn.tsx
+++ b/Frontend/components/Modals/ModalSignIn.tsx
@@ -78,7 +78,7 @@ function ModalSignIn() {
                   {...register("email")}
                   id="SignInEmail"
                   type="text"
-                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                   placeholder="Your email…"
                   aria-label="Your email…"
                   autoComplete="on"
@@ -92,7 +92,7 @@ function ModalSignIn() {
                   {...register("password")}
                   id="SignInPwd"
                   type="password"
-                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                   placeholder="Your password..."
                   aria-label="Your password..."
                 />
diff --git a/Frontend/components/Modals/ModalSignUp.tsx b/Frontend/components/Modals/ModalSignUp.tsx
index 1753696..bc6002d 100644
--- a/Frontend/components/Modals/ModalSignUp.tsx
+++ b/Frontend/components/Modals/ModalSignUp.tsx
@@ -131,12 +131,15 @@ function ModalSignUp({
                 Excited to see what we&apos;ve got! Signup and get started!
               </p>
             </div>
-            <form onSubmit={handleSubmit(onSubmit)} className="w-full md:w-2/3">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="w-full md:w-2/3 pl-1"
+            >
               <div className="relative mt-6">
                 <input
                   type="text"
                   id="SignUpEmail"
-                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                   placeholder="Email…"
                   aria-label="Email…"
                   autoComplete="on"
@@ -152,7 +155,7 @@ function ModalSignUp({
                   <input
                     id="SignUpFirstName"
                     type="text"
-                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="First Name…"
                     aria-label="First Name…"
                     autoComplete="on"
@@ -166,7 +169,7 @@ function ModalSignUp({
                   <input
                     id="SignUpLastName"
                     type="text"
-                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="Last Name…"
                     aria-label="Last Name…"
                     {...register("lastName")}
@@ -181,7 +184,7 @@ function ModalSignUp({
                 <input
                   id="SignUpPhoneNumber"
                   type="text"
-                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                   placeholder="Phone Number…"
                   aria-label="Phone Number…"
                   {...register("phoneNumber")}
@@ -195,7 +198,7 @@ function ModalSignUp({
                   <input
                     id="SignUpOrganisation"
                     type="text"
-                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="Organisation…"
                     aria-label="Organisation…"
                     {...register("organisation")}
@@ -208,7 +211,7 @@ function ModalSignUp({
                   <select
                     id="SignUpCompanySize"
                     defaultValue={""}
-                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                     {...register("organisationSize")}
                   >
                     <option className="bg-gray-850" value={""} disabled>
@@ -236,7 +239,7 @@ function ModalSignUp({
                   <input
                     id="SignUpPwd"
                     type="password"
-                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="Password..."
                     aria-label="Password"
                     {...register("password")}
@@ -249,7 +252,7 @@ function ModalSignUp({
                   <input
                     id="SignUpPwdConfirm"
                     type="password"
-                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                    className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                     placeholder="Confirm Password..."
                     aria-label="Confirmed Password"
                     {...register("passwordConfirm")}
diff --git a/Frontend/components/Utilities/Background.tsx b/Frontend/components/Utilities/Background.tsx
index 6dc8b86..eaf484b 100644
--- a/Frontend/components/Utilities/Background.tsx
+++ b/Frontend/components/Utilities/Background.tsx
@@ -5,7 +5,13 @@ import { useTheme } from "next-themes";
 import React, { ReactNode, useEffect, useState } from "react";
 import Circuit from "@/images/circuit.svg";
 
-const Background = ({ children }: { children: ReactNode }) => {
+const Background = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
@@ -16,7 +22,9 @@ const Background = ({ children }: { children: ReactNode }) => {
 
   if (!mounted) {
     return (
-      <div className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col animation-pulse"></div>
+      <div
+        className={`${className} h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col animation-pulse`}
+      ></div>
     );
   }
 
@@ -24,7 +32,7 @@ const Background = ({ children }: { children: ReactNode }) => {
 
   return (
     <div
-      className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col"
+      className={`${className} h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col`}
       style={{
         backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/gradient.png)`,
       }}
diff --git a/Frontend/sections/Feature/ContainerImageIconBlocksFeature.tsx b/Frontend/sections/Feature/ContainerImageIconBlocksFeature.tsx
index f2ed892..e5bd596 100644
--- a/Frontend/sections/Feature/ContainerImageIconBlocksFeature.tsx
+++ b/Frontend/sections/Feature/ContainerImageIconBlocksFeature.tsx
@@ -8,7 +8,7 @@ function ContainerImageIconBlocksFeature() {
       <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
         <div className="aspect-w-16 aspect-h-7 rounded-xl">
           <Image
-            className="w-full object-contain rounded-xl h-[40rem]"
+            className="w-full object-contain max-h-[40rem] rounded-xl"
             width="1000"
             height="1000"
             src="/images/fastpocket-diagram.png"
diff --git a/Frontend/sections/Hero/WaitingListWithImageHero.tsx b/Frontend/sections/Hero/WaitingListWithImageHero.tsx
index 0a65377..5649a25 100644
--- a/Frontend/sections/Hero/WaitingListWithImageHero.tsx
+++ b/Frontend/sections/Hero/WaitingListWithImageHero.tsx
@@ -72,7 +72,7 @@ const WaitingListWithImageHero = () => {
                         {...register("firstName")}
                         type="text"
                         id="hs-cover-with-gradient-form-name-1"
-                        className="  py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 placeholder:text-base-content  rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
+                        className="  py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-primary/40 placeholder:text-base-content  rounded-lg text-sm focus:border-secondary focus:ring-secondary sm:p-4 sm:ps-11"
                         placeholder="First name"
                       />
                       <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
@@ -109,7 +109,7 @@ const WaitingListWithImageHero = () => {
                         {...register("lastName")}
                         type="text"
                         id="hs-cover-with-gradient-form-name-1"
-                        className="  py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 dark:placeholder:bg-base-contentntent  placeholder:text-base-content  rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
+                        className="  py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-primary/40 dark:placeholder:bg-base-contentntent  placeholder:text-base-content  rounded-lg text-sm focus:border-secondary focus:ring-secondary sm:p-4 sm:ps-11"
                         placeholder="Last name"
                       />
                       <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
@@ -146,7 +146,7 @@ const WaitingListWithImageHero = () => {
                         {...register("email")}
                         type="email"
                         id="hs-cover-with-gradient-form-email-1"
-                        className=" py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 text-base-content  placeholder:text-base-content rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
+                        className=" py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-primary/40 text-base-content  placeholder:text-base-content rounded-lg text-sm focus:border-secondary focus:ring-secondary sm:p-4 sm:ps-11"
                         placeholder="Email address"
                       />
                       <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">