mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
feat(Field): match Input and Field styles
This commit is contained in:
parent
3267b42d1c
commit
340a460439
@ -9,12 +9,10 @@ import * as Styles from "~/common/styles";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { useField, useForm, useIsomorphicLayoutEffect } from "~/common/hooks";
|
||||
import { Toggle, SignUpPopover, ArrowButton } from "~/components/core/Auth/components";
|
||||
import { Toggle, SignUpPopover, ArrowButton, AuthField } from "~/components/core/Auth/components";
|
||||
import { AnimateSharedLayout, motion } from "framer-motion";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
const STYLES_INITIAL_CONTAINER = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -254,7 +252,7 @@ function Initial(
|
||||
)}
|
||||
{toggleValue === "signup" ? (
|
||||
<form {...getSigninFormProps()}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
label="Sign up with email"
|
||||
placeholder="Email"
|
||||
@ -285,7 +283,7 @@ function Initial(
|
||||
) : (
|
||||
<AnimateSharedLayout>
|
||||
<motion.div layoutId="auth_signin_field">
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
label="Email address or username"
|
||||
placeholder="Email/username"
|
||||
|
@ -5,14 +5,12 @@ import * as Actions from "~/common/actions";
|
||||
import * as Utilities from "~/common/utilities";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
import { AnimateSharedLayout, motion } from "framer-motion";
|
||||
import { P1 } from "~/components/system";
|
||||
import { useForm } from "~/common/hooks";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import { SignUpPopover, Verification } from "~/components/core/Auth/components";
|
||||
import { SignUpPopover, Verification, AuthField } from "~/components/core/Auth/components";
|
||||
|
||||
const STYLES_BACK_BUTTON = css`
|
||||
background: none;
|
||||
@ -110,7 +108,7 @@ export default function ResetPassword({
|
||||
return (
|
||||
<SignUpPopover title={<>Enter new password</>}>
|
||||
<form {...getNewPasswordFormProps()} style={{ marginTop: 72 }}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
containerStyle={{ marginTop: 16 }}
|
||||
placeholder="New password"
|
||||
@ -153,7 +151,7 @@ export default function ResetPassword({
|
||||
}
|
||||
>
|
||||
<form {...getFormProps()} style={{ marginTop: 72 }}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
containerStyle={{ marginTop: 16 }}
|
||||
placeholder="Email"
|
||||
|
@ -6,12 +6,10 @@ import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Styles from "~/common/styles";
|
||||
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
import { AnimateSharedLayout, motion } from "framer-motion";
|
||||
import { useForm } from "~/common/hooks";
|
||||
import { css } from "@emotion/react";
|
||||
import { SignUpPopover, Verification } from "~/components/core/Auth/components";
|
||||
import { SignUpPopover, Verification, AuthField } from "~/components/core/Auth/components";
|
||||
|
||||
const STYLES_BACK_BUTTON = css`
|
||||
color: ${Constants.semantic.textGrayDark};
|
||||
@ -147,7 +145,7 @@ export default function Signin({
|
||||
return (
|
||||
<SignUpPopover title={`Please add an email address for ${emailOrUsername}`}>
|
||||
<form {...getEmailFormProps()} style={{ marginTop: 72 }}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
containerStyle={{ marginTop: 16 }}
|
||||
placeholder="Email"
|
||||
@ -184,7 +182,7 @@ export default function Signin({
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
containerStyle={{ marginTop: message ? 24 : 16 }}
|
||||
placeholder="Password"
|
||||
|
@ -4,12 +4,15 @@ import * as Validations from "~/common/validations";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Actions from "~/common/actions";
|
||||
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
import { AnimateSharedLayout, motion } from "framer-motion";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
import { useForm } from "~/common/hooks";
|
||||
import { SignUpPopover, Verification, AuthCheckBox } from "~/components/core/Auth/components";
|
||||
import {
|
||||
SignUpPopover,
|
||||
Verification,
|
||||
AuthCheckBox,
|
||||
AuthField,
|
||||
} from "~/components/core/Auth/components";
|
||||
|
||||
const useSignup = () => {
|
||||
const [scene, setScene] = React.useState("verification");
|
||||
@ -94,7 +97,7 @@ export default function Signup({ verifyEmail, createUser, resendEmailVerificatio
|
||||
<SignUpPopover title="Create an account">
|
||||
<AnimateSharedLayout>
|
||||
<form {...getFormProps()}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
containerStyle={{ marginTop: 46 }}
|
||||
placeholder="Username"
|
||||
@ -122,7 +125,7 @@ export default function Signup({ verifyEmail, createUser, resendEmailVerificatio
|
||||
/>
|
||||
|
||||
<motion.div layout>
|
||||
<Field
|
||||
<AuthField
|
||||
containerStyle={{ marginTop: 16 }}
|
||||
placeholder="Password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
|
@ -4,12 +4,15 @@ import * as Validations from "~/common/validations";
|
||||
import * as System from "~/components/system";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
import { AnimateSharedLayout, motion } from "framer-motion";
|
||||
import { useForm } from "~/common/hooks";
|
||||
|
||||
import { SignUpPopover, Verification, AuthCheckBox } from "~/components/core/Auth/components";
|
||||
import {
|
||||
SignUpPopover,
|
||||
Verification,
|
||||
AuthCheckBox,
|
||||
AuthField,
|
||||
} from "~/components/core/Auth/components";
|
||||
|
||||
const useTwitterLinking = () => {
|
||||
// NOTE(amine): can be either 'account' | 'email' | 'verificatiom'
|
||||
@ -97,7 +100,7 @@ export default function TwitterLinking({
|
||||
<div>
|
||||
<SignUpPopover title={`Please add an email address for ${username}`}>
|
||||
<form {...getEmailFormProps()} style={{ marginTop: 72 }}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
containerStyle={{ marginTop: 16 }}
|
||||
placeholder="Email"
|
||||
@ -127,7 +130,7 @@ export default function TwitterLinking({
|
||||
return (
|
||||
<SignUpPopover title="Create an account">
|
||||
<form {...getFormProps()}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
containerStyle={{ marginTop: 41 }}
|
||||
placeholder="Username"
|
||||
@ -137,7 +140,7 @@ export default function TwitterLinking({
|
||||
{...getFieldProps("username")}
|
||||
/>
|
||||
<AnimateSharedLayout>
|
||||
<Field
|
||||
<AuthField
|
||||
containerStyle={{ marginTop: 16 }}
|
||||
containerAs={MotionLayout}
|
||||
errorAs={MotionLayout}
|
||||
|
@ -6,14 +6,17 @@ import * as Actions from "~/common/actions";
|
||||
import * as Styles from "~/common/styles";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
import { AnimateSharedLayout, motion } from "framer-motion";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
import { css } from "@emotion/react";
|
||||
import { useForm } from "~/common/hooks";
|
||||
|
||||
import { SignUpPopover, Verification, AuthCheckBox } from "~/components/core/Auth/components";
|
||||
import {
|
||||
SignUpPopover,
|
||||
Verification,
|
||||
AuthCheckBox,
|
||||
AuthField,
|
||||
} from "~/components/core/Auth/components";
|
||||
|
||||
const STYLES_LINK = (theme) => css`
|
||||
padding: 0;
|
||||
@ -124,7 +127,7 @@ export default function TwitterSignup({
|
||||
return (
|
||||
<SignUpPopover title="Create an account">
|
||||
<form {...getFormProps()}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
containerStyle={{ marginTop: 41 }}
|
||||
placeholder="Username"
|
||||
@ -150,7 +153,7 @@ export default function TwitterSignup({
|
||||
full
|
||||
/>
|
||||
<AnimateSharedLayout>
|
||||
<Field
|
||||
<AuthField
|
||||
containerStyle={{ marginTop: 16 }}
|
||||
containerAs={MotionLayout}
|
||||
errorAs={MotionLayout}
|
||||
|
15
components/core/Auth/components/AuthField.js
Normal file
15
components/core/Auth/components/AuthField.js
Normal file
@ -0,0 +1,15 @@
|
||||
import * as React from "react";
|
||||
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_INPUT = (theme) => css`
|
||||
background-color: rgba(242, 242, 247, 0.5);
|
||||
box-shadow: ${theme.shadow.lightLarge};
|
||||
border-radius: 12px;
|
||||
`;
|
||||
|
||||
export default function AuthField({ css, ...props }) {
|
||||
return <Field inputCss={[STYLES_INPUT, css]} {...props} />;
|
||||
}
|
@ -1,16 +1,13 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Validations from "~/common/validations";
|
||||
import * as Styles from "~/common/styles";
|
||||
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
import { AnimateSharedLayout, motion } from "framer-motion";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
import { css } from "@emotion/react";
|
||||
import { useField } from "~/common/hooks";
|
||||
import { SignUpPopover, ArrowButton } from "~/components/core/Auth/components";
|
||||
import { SignUpPopover, ArrowButton, AuthField } from "~/components/core/Auth/components";
|
||||
|
||||
const STYLES_HELPER = (theme) => css`
|
||||
text-align: center;
|
||||
@ -101,7 +98,7 @@ export default function Verification({ onVerify, title = DEFAULT_TITLE, onResend
|
||||
return (
|
||||
<SignUpPopover logoStyle={{ width: 56, height: 56 }} title={title}>
|
||||
<div style={{ marginTop: 40 }}>
|
||||
<Field
|
||||
<AuthField
|
||||
autoFocus
|
||||
label="Enter the 6 digit code sent to your email"
|
||||
full
|
||||
|
@ -2,5 +2,6 @@ export { default as Toggle } from "~/components/core/Auth/components/Toggle";
|
||||
export { default as SignUpPopover } from "~/components/core/Auth/components/SignUpPopover";
|
||||
export { default as Verification } from "~/components/core/Auth/components/Verification";
|
||||
export { default as AuthCheckBox } from "~/components/core/Auth/components/AuthCheckBox";
|
||||
export { default as AuthField } from "~/components/core/Auth/components/AuthField";
|
||||
export { default as ArrowButton } from "~/components/core/Auth/components/ArrowButton";
|
||||
export { default as AuthWrapper } from "~/components/core/Auth/components/AuthWrapper";
|
||||
|
@ -1,5 +1,4 @@
|
||||
import * as React from "react";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { P1 } from "~/components/system/components/Typography";
|
||||
import { Input } from "~/components/system";
|
||||
@ -22,14 +21,13 @@ const STYLES_PASSWORD_VALIDATIONS = (theme) => css`
|
||||
border-radius: 12px;
|
||||
`;
|
||||
|
||||
const STYLES_PASSWORD_VALIDATION = (theme) =>
|
||||
css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > * + * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
`;
|
||||
const STYLES_PASSWORD_VALIDATION = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > * + * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CIRCLE = (theme) => css`
|
||||
height: 8px;
|
||||
@ -42,29 +40,11 @@ const STYLES_CIRCLE_SUCCESS = (theme) => css`
|
||||
border: 1.25px solid ${theme.system.green};
|
||||
`;
|
||||
|
||||
const STYLES_INPUT = (theme) => css`
|
||||
background-color: rgba(242, 242, 247, 0.5);
|
||||
box-shadow: ${theme.shadow.lightLarge};
|
||||
border-radius: 12px;
|
||||
&::placeholder {
|
||||
color: ${theme.semantic.textGrayDark};
|
||||
}
|
||||
`;
|
||||
const STYLES_INPUT_ERROR = (theme) => css`
|
||||
background-color: rgba(242, 242, 247, 0.5);
|
||||
border: 1px solid ${theme.system.red};
|
||||
border-radius: 8px;
|
||||
&::placeholder {
|
||||
color: ${theme.semantic.textGrayDark};
|
||||
}
|
||||
box-shadow: 0 0 0 1px ${theme.system.red};
|
||||
`;
|
||||
const STYLES_INPUT_SUCCESS = (theme) => css`
|
||||
background-color: rgba(242, 242, 247, 0.5);
|
||||
border: 1px solid ${theme.system.green};
|
||||
border-radius: 8px;
|
||||
&::placeholder {
|
||||
color: ${theme.semantic.textGrayDark};
|
||||
}
|
||||
box-shadow: 0 0 0 1px ${theme.system.green};
|
||||
`;
|
||||
|
||||
const PasswordValidations = ({ validations }) => {
|
||||
@ -103,15 +83,16 @@ export default function Field({
|
||||
validations,
|
||||
errorAs,
|
||||
containerAs,
|
||||
inputCss,
|
||||
...props
|
||||
}) {
|
||||
const showError = touched && error;
|
||||
const showSuccess = touched && !error;
|
||||
|
||||
const STYLES = React.useMemo(() => {
|
||||
const STYLES_VALIDATIONS = React.useMemo(() => {
|
||||
if (showError) return STYLES_INPUT_ERROR;
|
||||
if (showSuccess) return STYLES_INPUT_SUCCESS;
|
||||
return STYLES_INPUT;
|
||||
return null;
|
||||
}, [touched, error]);
|
||||
|
||||
const ContainerComponent = containerAs || "div";
|
||||
@ -119,7 +100,7 @@ export default function Field({
|
||||
return (
|
||||
<div>
|
||||
<ContainerComponent>
|
||||
<Input inputCss={STYLES} {...props} />
|
||||
<Input inputCss={[inputCss, STYLES_VALIDATIONS]} {...props} />
|
||||
</ContainerComponent>
|
||||
{props.name === "password" && validations ? (
|
||||
<PasswordValidations validations={validations} />
|
||||
|
@ -9,11 +9,11 @@ import * as Strings from "~/common/strings";
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||
import Field from "~/components/core/Field";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { useForm } from "~/common/hooks";
|
||||
import { motion, AnimateSharedLayout } from "framer-motion";
|
||||
import { AuthField } from "~/components/core/Auth/components";
|
||||
|
||||
const INTEGRATION = [
|
||||
{
|
||||
@ -1084,7 +1084,7 @@ export default function IndexPage() {
|
||||
</System.ButtonPrimaryFull>
|
||||
<div css={STYLES_DIVIDER} />
|
||||
<form {...getSigninFormProps()} style={{ width: "100%" }}>
|
||||
<Field
|
||||
<AuthField
|
||||
{...getSignupFielProps("email")}
|
||||
label="Sign up with email"
|
||||
placeholder="Email"
|
||||
|
Loading…
Reference in New Issue
Block a user