mrwyndham
/
fastpocket
1
2
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feature - added some stylings

This commit is contained in:
James Wyndham 2024-03-08 15:49:03 +08:00
parent 57e92a3151
commit add7f12fde
6 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Frontend/app/(authenticated)/account/page.tsx
View File

@ -21,12 +21,12 @@ export default async function AccountPage() {
<main <main
id="content" id="content"
role="main" 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={<></>} /> <PageHeader title="Account" subtitle={<></>} />
<AccountContent user={user} /> <AccountContent user={user} />
<Spacer className="mb-auto h-full w-full" /> <Spacer className="mt-auto" />
<Footer /> <Footer />
</Background> </Background>
</main> </main>

4
Frontend/components/Modals/ModalSignIn.tsx
View File

@ -78,7 +78,7 @@ function ModalSignIn() {
{...register("email")} {...register("email")}
id="SignInEmail" id="SignInEmail"
type="text" 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…" placeholder="Your email…"
aria-label="Your email…" aria-label="Your email…"
autoComplete="on" autoComplete="on"
@ -92,7 +92,7 @@ function ModalSignIn() {
{...register("password")} {...register("password")}
id="SignInPwd" id="SignInPwd"
type="password" 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..." placeholder="Your password..."
aria-label="Your password..." aria-label="Your password..."
/> />

21
Frontend/components/Modals/ModalSignUp.tsx
View File

@ -131,12 +131,15 @@ function ModalSignUp({
Excited to see what we&apos;ve got! Signup and get started! Excited to see what we&apos;ve got! Signup and get started!
</p> </p>
</div> </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"> <div className="relative mt-6">
<input <input
type="text" type="text"
id="SignUpEmail" 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…" placeholder="Email…"
aria-label="Email…" aria-label="Email…"
autoComplete="on" autoComplete="on"
@ -152,7 +155,7 @@ function ModalSignUp({
<input <input
id="SignUpFirstName" id="SignUpFirstName"
type="text" 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…" placeholder="First Name…"
aria-label="First Name…" aria-label="First Name…"
autoComplete="on" autoComplete="on"
@ -166,7 +169,7 @@ function ModalSignUp({
<input <input
id="SignUpLastName" id="SignUpLastName"
type="text" 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…" placeholder="Last Name…"
aria-label="Last Name…" aria-label="Last Name…"
{...register("lastName")} {...register("lastName")}
@ -181,7 +184,7 @@ function ModalSignUp({
<input <input
id="SignUpPhoneNumber" id="SignUpPhoneNumber"
type="text" 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…" placeholder="Phone Number…"
aria-label="Phone Number…" aria-label="Phone Number…"
{...register("phoneNumber")} {...register("phoneNumber")}
@ -195,7 +198,7 @@ function ModalSignUp({
<input <input
id="SignUpOrganisation" id="SignUpOrganisation"
type="text" 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…" placeholder="Organisation…"
aria-label="Organisation…" aria-label="Organisation…"
{...register("organisation")} {...register("organisation")}
@ -208,7 +211,7 @@ function ModalSignUp({
<select <select
id="SignUpCompanySize" id="SignUpCompanySize"
defaultValue={""} 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")} {...register("organisationSize")}
> >
<option className="bg-gray-850" value={""} disabled> <option className="bg-gray-850" value={""} disabled>
@ -236,7 +239,7 @@ function ModalSignUp({
<input <input
id="SignUpPwd" id="SignUpPwd"
type="password" 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..." placeholder="Password..."
aria-label="Password" aria-label="Password"
{...register("password")} {...register("password")}
@ -249,7 +252,7 @@ function ModalSignUp({
<input <input
id="SignUpPwdConfirm" id="SignUpPwdConfirm"
type="password" 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..." placeholder="Confirm Password..."
aria-label="Confirmed Password" aria-label="Confirmed Password"
{...register("passwordConfirm")} {...register("passwordConfirm")}

14
Frontend/components/Utilities/Background.tsx
View File

@ -5,7 +5,13 @@ import { useTheme } from "next-themes";
import React, { ReactNode, useEffect, useState } from "react"; import React, { ReactNode, useEffect, useState } from "react";
import Circuit from "@/images/circuit.svg"; import Circuit from "@/images/circuit.svg";
const Background = ({ children }: { children: ReactNode }) => { const Background = ({
children,
className,
}: {
children: ReactNode;
className?: string;
}) => {
const { theme } = useTheme(); const { theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
@ -16,7 +22,9 @@ const Background = ({ children }: { children: ReactNode }) => {
if (!mounted) { if (!mounted) {
return ( 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 ( return (
<div <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={{ style={{
backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/gradient.png)`, backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/gradient.png)`,
}} }}

2
Frontend/sections/Feature/ContainerImageIconBlocksFeature.tsx
View File

@ -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="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"> <div className="aspect-w-16 aspect-h-7 rounded-xl">
<Image <Image
className="w-full object-contain rounded-xl h-[40rem]" className="w-full object-contain max-h-[40rem] rounded-xl"
width="1000" width="1000"
height="1000" height="1000"
src="/images/fastpocket-diagram.png" src="/images/fastpocket-diagram.png"

6
Frontend/sections/Hero/WaitingListWithImageHero.tsx
View File

@ -72,7 +72,7 @@ const WaitingListWithImageHero = () => {
{...register("firstName")} {...register("firstName")}
type="text" type="text"
id="hs-cover-with-gradient-form-name-1" 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" placeholder="First name"
/> />
<div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4"> <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")} {...register("lastName")}
type="text" type="text"
id="hs-cover-with-gradient-form-name-1" 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" placeholder="Last name"
/> />
<div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4"> <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")} {...register("email")}
type="email" type="email"
id="hs-cover-with-gradient-form-email-1" 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" placeholder="Email address"
/> />
<div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4"> <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">