filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 01:23:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(Field): adjust fill opacity

Browse Source
This commit is contained in:
Aminejvm 2021-06-14 19:34:50 +01:00
parent 295683bd08
commit 7053083ef8
2 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/core/Auth/Initial.js
View File

@ -188,7 +188,7 @@ export default function Initial({
autoFocus
label="Sign up with email"
placeholder="Email"
type="email"
type="text"
name="email"
full
style={{ backgroundColor: "rgba(242,242,247,0.5)" }}
@ -196,8 +196,7 @@ export default function Initial({
containerStyle={{ marginTop: "4px" }}
{...getFieldProps("email")}
/>
<motion.div layout>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} layout>
<System.ButtonPrimary
full
type="submit"

36
components/core/Field.js
View File

@ -22,14 +22,13 @@ const STYLES_PASSWORD_VALIDATIONS = (theme) => css`
border-radius: 8px;
`;
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;
@ -43,25 +42,18 @@ const STYLES_CIRCLE_SUCCESS = (theme) => css`
`;
const STYLES_INPUT = (theme) => css`
background-color: rgba(242, 242, 247, 0.5);
background-color: rgba(242, 242, 247, 0.7);
box-shadow: ${theme.shadow.large};
border-radius: 8px;
&::placeholder {
color: ${theme.system.textGrayDark};
}
`;
const STYLES_INPUT_ERROR = (theme) => css`
background-color: rgba(242, 242, 247, 0.5);
border: 1px solid ${theme.system.red};
&::placeholder {
color: ${theme.system.textGrayDark};
}
`;
const STYLES_INPUT_SUCCESS = (theme) => css`
background-color: rgba(242, 242, 247, 0.5);
border: 1px solid ${theme.system.green};
&::placeholder {
color: ${theme.system.textGrayDark};
}
`;
const PasswordValidations = ({ validations }) => {
@ -105,10 +97,9 @@ export default function Field({
const showError = touched && error;
const showSuccess = touched && !error;
const STYLES = React.useMemo(() => {
const STYLES_STATUS = React.useMemo(() => {
if (showError) return STYLES_INPUT_ERROR;
if (showSuccess) return STYLES_INPUT_SUCCESS;
return STYLES_INPUT;
}, [touched, error]);
const ContainerComponent = containerAs || "div";
@ -116,11 +107,10 @@ export default function Field({
return (
<div>
<ContainerComponent>
<Input inputCss={STYLES} {...props} />
<Input inputCss={[STYLES_INPUT, STYLES_STATUS]} {...props} />
</ContainerComponent>
{props.name === "password" && validations ? (
<PasswordValidations validations={validations} />
) : (
{props.name === "password" && validations(<PasswordValidations validations={validations} />)}
{props.name !== "password" && (showError || showSuccess) && (
<ErrorWrapper>
<P css={STYLES_SMALL_TEXT} style={{ marginTop: "8px" }}>
{(showError && error) || (showSuccess && success)}