forked from mrwyndham/fastpocket
feature - added some stylings
This commit is contained in:
James Wyndham
parent
57e92a3151
commit
add7f12fde
|
|
@ -23,10 +23,10 @@ export default async function AccountPage() {
|
|||
role="main"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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..."
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -131,12 +131,15 @@ function ModalSignUp({
|
|||
Excited to see what we'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")}
|
||||
|
|
|
|||
|
|
@ -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)`,
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue