feat(web): tailwind css (#1147)
This commit is contained in:
Aman Harwara
@@ -105,21 +105,21 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<CircleIcon className="absolute w-8 h-8 top-40% -left-28" />
|
||||
<BlueDotIcon className="absolute w-4 h-4 top-35% -left-10" />
|
||||
<DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
|
||||
<CircleIcon className="absolute w-8 h-8 top-[40%] -left-28" />
|
||||
<BlueDotIcon className="absolute w-4 h-4 top-[35%] -left-10" />
|
||||
<DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-[1]" />
|
||||
|
||||
<CircleIcon className="absolute w-8 h-8 bottom-35% -right-20" />
|
||||
<BlueDotIcon className="absolute w-4 h-4 bottom-25% -right-10" />
|
||||
<DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
|
||||
<CircleIcon className="absolute w-8 h-8 bottom-[35%] -right-20" />
|
||||
<BlueDotIcon className="absolute w-4 h-4 bottom-[25%] -right-10" />
|
||||
<DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-[1]" />
|
||||
|
||||
<div className="mr-12 md:mr-0">
|
||||
<h1 className="mt-0 mb-2 text-2xl">Create your free account</h1>
|
||||
<div className="mr-0 md:mr-12">
|
||||
<h1 className="mt-0 mb-2 font-bold text-2xl">Create your free account</h1>
|
||||
<div className="mb-4 font-medium text-sm">to continue to Standard Notes.</div>
|
||||
<form onSubmit={handleCreateAccount}>
|
||||
<div className="flex flex-col">
|
||||
<FloatingLabelInput
|
||||
className={`min-w-90 xs:min-w-auto ${isEmailInvalid ? 'mb-2' : 'mb-4'}`}
|
||||
className={`md:min-w-90 min-w-auto ${isEmailInvalid ? 'mb-2' : 'mb-4'}`}
|
||||
id="purchase-sign-in-email"
|
||||
type="email"
|
||||
label="Email"
|
||||
@@ -129,9 +129,9 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
|
||||
disabled={isCreatingAccount}
|
||||
isInvalid={isEmailInvalid}
|
||||
/>
|
||||
{isEmailInvalid ? <div className="color-danger mb-4">Please provide a valid email.</div> : null}
|
||||
{isEmailInvalid ? <div className="text-danger mb-4">Please provide a valid email.</div> : null}
|
||||
<FloatingLabelInput
|
||||
className="min-w-90 xs:min-w-auto mb-4"
|
||||
className="md:min-w-90 min-w-auto mb-4"
|
||||
id="purchase-create-account-password"
|
||||
type="password"
|
||||
label="Password"
|
||||
@@ -141,7 +141,7 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
|
||||
disabled={isCreatingAccount}
|
||||
/>
|
||||
<FloatingLabelInput
|
||||
className={`min-w-90 xs:min-w-auto ${isPasswordNotMatching ? 'mb-2' : 'mb-4'}`}
|
||||
className={`md:min-w-90 min-w-auto ${isPasswordNotMatching ? 'mb-2' : 'mb-4'}`}
|
||||
id="create-account-confirm"
|
||||
type="password"
|
||||
label="Repeat password"
|
||||
@@ -152,37 +152,37 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
|
||||
isInvalid={isPasswordNotMatching}
|
||||
/>
|
||||
{isPasswordNotMatching ? (
|
||||
<div className="color-danger mb-4">Passwords don't match. Please try again.</div>
|
||||
<div className="text-danger mb-4">Passwords don't match. Please try again.</div>
|
||||
) : null}
|
||||
</div>
|
||||
</form>
|
||||
<div className="flex xs:flex-col-reverse xs:items-start items-center justify-between">
|
||||
<div className="flex flex-col-reverse md:flex-row items-start md:items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
onClick={handleSignInInstead}
|
||||
disabled={isCreatingAccount}
|
||||
className="flex items-start p-0 mb-2 bg-default border-0 font-medium color-info cursor-pointer hover:underline"
|
||||
className="flex items-start p-0 mb-2 bg-default border-0 font-medium text-info cursor-pointer hover:underline"
|
||||
>
|
||||
Sign in instead
|
||||
</button>
|
||||
<button
|
||||
onClick={subscribeWithoutAccount}
|
||||
disabled={isCreatingAccount}
|
||||
className="flex items-start p-0 bg-default border-0 font-medium color-info cursor-pointer hover:underline"
|
||||
className="flex items-start p-0 bg-default border-0 font-medium text-info cursor-pointer hover:underline"
|
||||
>
|
||||
Subscribe without account
|
||||
</button>
|
||||
</div>
|
||||
<Button
|
||||
className="py-2.5 xs:mb-4"
|
||||
variant="primary"
|
||||
className="py-2.5 mb-4 md:mb-0"
|
||||
primary
|
||||
label={isCreatingAccount ? 'Creating account...' : 'Create account'}
|
||||
onClick={handleCreateAccount}
|
||||
disabled={isCreatingAccount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CreateAccountIllustration className="md:hidden" />
|
||||
<CreateAccountIllustration className="hidden md:block" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -95,21 +95,21 @@ const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<CircleIcon className="absolute w-8 h-8 top-35% -left-56" />
|
||||
<BlueDotIcon className="absolute w-4 h-4 top-30% -left-40" />
|
||||
<DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
|
||||
<CircleIcon className="absolute w-8 h-8 top-[35%] -left-56" />
|
||||
<BlueDotIcon className="absolute w-4 h-4 top-[30%] -left-40" />
|
||||
<DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-[1]" />
|
||||
|
||||
<CircleIcon className="absolute w-8 h-8 bottom-30% -right-56" />
|
||||
<BlueDotIcon className="absolute w-4 h-4 bottom-20% -right-44" />
|
||||
<DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
|
||||
<CircleIcon className="absolute w-8 h-8 bottom-[30%] -right-56" />
|
||||
<BlueDotIcon className="absolute w-4 h-4 bottom-[20%] -right-44" />
|
||||
<DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-[1]" />
|
||||
|
||||
<div>
|
||||
<h1 className="mt-0 mb-2 text-2xl">Sign in</h1>
|
||||
<h1 className="mt-0 mb-2 text-2xl font-bold">Sign in</h1>
|
||||
<div className="mb-4 font-medium text-sm">to continue to Standard Notes.</div>
|
||||
<form onSubmit={handleSignIn}>
|
||||
<div className="flex flex-col">
|
||||
<FloatingLabelInput
|
||||
className={`min-w-90 xs:min-w-auto ${isEmailInvalid && !otherErrorMessage ? 'mb-2' : 'mb-4'}`}
|
||||
className={`sm:min-w-90 min-w-auto ${isEmailInvalid && !otherErrorMessage ? 'mb-2' : 'mb-4'}`}
|
||||
id="purchase-sign-in-email"
|
||||
type="email"
|
||||
label="Email"
|
||||
@@ -120,10 +120,10 @@ const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }
|
||||
isInvalid={isEmailInvalid}
|
||||
/>
|
||||
{isEmailInvalid && !otherErrorMessage ? (
|
||||
<div className="color-danger mb-4">Please provide a valid email.</div>
|
||||
<div className="text-danger mb-4">Please provide a valid email.</div>
|
||||
) : null}
|
||||
<FloatingLabelInput
|
||||
className={`min-w-90 xs:min-w-auto ${otherErrorMessage ? 'mb-2' : 'mb-4'}`}
|
||||
className={`sm:min-w-90 min-w-auto ${otherErrorMessage ? 'mb-2' : 'mb-4'}`}
|
||||
id="purchase-sign-in-password"
|
||||
type="password"
|
||||
label="Password"
|
||||
@@ -133,20 +133,20 @@ const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }
|
||||
disabled={isSigningIn}
|
||||
isInvalid={isPasswordInvalid}
|
||||
/>
|
||||
{otherErrorMessage ? <div className="color-danger mb-4">{otherErrorMessage}</div> : null}
|
||||
{otherErrorMessage ? <div className="text-danger mb-4">{otherErrorMessage}</div> : null}
|
||||
</div>
|
||||
<Button
|
||||
className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`}
|
||||
variant="primary"
|
||||
primary
|
||||
label={isSigningIn ? 'Signing in...' : 'Sign in'}
|
||||
onClick={handleSignIn}
|
||||
disabled={isSigningIn}
|
||||
/>
|
||||
</form>
|
||||
<div className="text-sm font-medium color-passive-1">
|
||||
<div className="text-sm font-medium text-passive-1">
|
||||
Don’t have an account yet?{' '}
|
||||
<a
|
||||
className={`color-info ${isSigningIn ? 'cursor-not-allowed' : 'cursor-pointer '}`}
|
||||
className={`text-info ${isSigningIn ? 'cursor-not-allowed' : 'cursor-pointer '}`}
|
||||
onClick={handleCreateAccountInstead}
|
||||
>
|
||||
Create account
|
||||
|
||||
@@ -33,9 +33,9 @@ const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewContro
|
||||
const { currentPane } = viewControllerManager.purchaseFlowController
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-passive-super-light">
|
||||
<div className="relative fit-content">
|
||||
<div className="relative p-12 xs:px-8 mb-4 bg-default border-1 border-solid border-main rounded xs:rounded-0">
|
||||
<div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-0 left-0 z-purchase-flow bg-passive-super-light">
|
||||
<div className="relative w-fit">
|
||||
<div className="relative w-full md:p-12 px-8 py-8 mb-4 bg-default border border-solid border-border md:rounded rounded-0">
|
||||
<SNLogoFull className="mb-5" />
|
||||
<PurchaseFlowPaneSelector
|
||||
currentPane={currentPane}
|
||||
@@ -43,9 +43,9 @@ const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewContro
|
||||
application={application}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end xs:px-4">
|
||||
<div className="flex justify-end px-4 md:px-0">
|
||||
<a
|
||||
className="mr-3 font-medium color-passive-1"
|
||||
className="mr-3 font-medium text-passive-1"
|
||||
href="https://standardnotes.com/privacy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
@@ -53,7 +53,7 @@ const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewContro
|
||||
Privacy
|
||||
</a>
|
||||
<a
|
||||
className="font-medium color-passive-1"
|
||||
className="font-medium text-passive-1"
|
||||
href="https://standardnotes.com/help"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
Reference in New Issue
Block a user