feat(web): tailwind css (#1147)
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user