diff --git a/src/core/client/admin/components/AuthBox.css b/src/core/client/admin/components/AuthBox.css index f59de9db9..c414eb4b9 100644 --- a/src/core/client/admin/components/AuthBox.css +++ b/src/core/client/admin/components/AuthBox.css @@ -1,17 +1,8 @@ .container { - width: 350px; - background-color: #f5f5f5; - border: 1px solid var(--palette-grey-lighter); + width: 385px; + background-color: var(--v2-colors-grey-100); + border: 1px solid var(--v2-colors-grey-300); margin-top: 70px; - padding: 0 calc(3 * var(--mini-unit)) calc(4 * var(--mini-unit)) - calc(3 * var(--mini-unit)); + padding: var(--v2-spacing-6); box-sizing: border-box; } - -.brandIcon { - display: inline-flex; - background: var(--palette-common-white); - padding: calc(0.5 * var(--mini-unit)); - border: 1px solid var(--palette-grey-lighter); - margin-top: -42px; -} diff --git a/src/core/client/admin/components/AuthBox.tsx b/src/core/client/admin/components/AuthBox.tsx index 7599e68b7..fdc781291 100644 --- a/src/core/client/admin/components/AuthBox.tsx +++ b/src/core/client/admin/components/AuthBox.tsx @@ -1,12 +1,6 @@ import React, { FunctionComponent } from "react"; -import { - BrandMark, - BrandName, - Flex, - HorizontalGutter, - Typography, -} from "coral-ui/components"; +import { BrandName, Flex, HorizontalGutter } from "coral-ui/components/v2"; import styles from "./AuthBox.css"; @@ -20,15 +14,10 @@ const AuthBox: FunctionComponent = ({ title, children }) => {
- -
- -
-
- - {title} - + +
{title}
+
{children} diff --git a/src/core/client/admin/components/__snapshots__/AuthBox.spec.tsx.snap b/src/core/client/admin/components/__snapshots__/AuthBox.spec.tsx.snap index 27cf28ad0..0a49d38a0 100644 --- a/src/core/client/admin/components/__snapshots__/AuthBox.spec.tsx.snap +++ b/src/core/client/admin/components/__snapshots__/AuthBox.spec.tsx.snap @@ -11,23 +11,15 @@ exports[`renders correctly 1`] = ` className="AuthBox-container" size="double" > - -
- -
-
- title +
+ title +
= ({ username, onSignInAs }) => { - const Username = () => ( - - {username} - - ); + const Username = () =>
{username}
; return ( - Currently signed in to - +
+ + Currently signed in to + +
} > @@ -39,38 +32,35 @@ const SignIn: FunctionComponent = ({ username, onSignInAs }) => { - +
You do not have permission to access this page. - +
}> - +
{"You are signed in as: "} - +
- - +
If you think this is an error, please contact your administrator for assistance. - +
diff --git a/src/core/client/admin/routes/AuthCheck/__snapshots__/Restricted.spec.tsx.snap b/src/core/client/admin/routes/AuthCheck/__snapshots__/Restricted.spec.tsx.snap index 995cbdbcc..b0d3203a9 100644 --- a/src/core/client/admin/routes/AuthCheck/__snapshots__/Restricted.spec.tsx.snap +++ b/src/core/client/admin/routes/AuthCheck/__snapshots__/Restricted.spec.tsx.snap @@ -3,13 +3,17 @@ exports[`renders correctly 1`] = ` - - Currently signed in to - - + + + Currently signed in to + + +
} > - You do not have permission to access this page. - +
@@ -43,13 +45,11 @@ exports[`renders correctly 1`] = ` Username={} id="restricted-signedInAs" > - You are signed in as: <Username></Username> - +
Sign in with a different account @@ -70,13 +71,11 @@ exports[`renders correctly 1`] = ` - If you think this is an error, please contact your administrator for assistance. - + diff --git a/src/core/client/admin/routes/Login/EmailField.tsx b/src/core/client/admin/routes/Login/EmailField.tsx index 82a342763..4fd8ad627 100644 --- a/src/core/client/admin/routes/Login/EmailField.tsx +++ b/src/core/client/admin/routes/Login/EmailField.tsx @@ -8,7 +8,7 @@ import { required, validateEmail, } from "coral-framework/lib/validation"; -import { FormField, InputLabel, TextField } from "coral-ui/components"; +import { FormField, InputLabel, TextField } from "coral-ui/components/v2"; interface Props { disabled: boolean; @@ -32,6 +32,7 @@ const EmailField: FunctionComponent = props => ( color={colorFromMeta(meta)} disabled={props.disabled} fullWidth + data-testid="email-field" /> diff --git a/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.css b/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.css index f1f9dc9fa..53c0e6001 100644 --- a/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.css +++ b/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.css @@ -9,8 +9,13 @@ margin: 0; } .text { - composes: heading3 from "coral-ui/shared/typography.css"; position: relative; background-color: #f5f5f5; padding: 0 var(--mini-unit); + + font-size: var(--v2-font-size-4); + font-weight: var(--v2-font-weight-bold); + font-family: var(--v2-font-family-primary); + line-height: var(--v2-line-height-title); + color: var(--v2-colors-mono-100); } diff --git a/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx b/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx index e1b3dcb69..82eb91d18 100644 --- a/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx +++ b/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Flex } from "coral-ui/components"; +import { Flex } from "coral-ui/components/v2"; import styles from "./HorizontalSeparator.css"; diff --git a/src/core/client/admin/routes/Login/views/SignIn/SignIn.css b/src/core/client/admin/routes/Login/views/SignIn/SignIn.css new file mode 100644 index 000000000..218c52ade --- /dev/null +++ b/src/core/client/admin/routes/Login/views/SignIn/SignIn.css @@ -0,0 +1,17 @@ +.title { + font-weight: var(--v2-font-weight-secondary-bold); + font-family: var(--v2-font-family-secondary); + color: var(--v2-colors-mono-100); + font-size: var(--v2-font-size-3); + line-height: var(--v2-line-height-title); + + padding-bottom: var(--v2-spacing-3); +} + +.orSeparator { + padding-bottom: var(--v2-spacing-5); +} + +.loginButton { + padding-bottom: var(--v2-spacing-4); +} diff --git a/src/core/client/admin/routes/Login/views/SignIn/SignIn.tsx b/src/core/client/admin/routes/Login/views/SignIn/SignIn.tsx index 7a57c6e80..5bda88360 100644 --- a/src/core/client/admin/routes/Login/views/SignIn/SignIn.tsx +++ b/src/core/client/admin/routes/Login/views/SignIn/SignIn.tsx @@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react"; import AuthBox from "coral-admin/components/AuthBox"; import { PropTypesOf } from "coral-framework/types"; -import { CallOut, HorizontalGutter } from "coral-ui/components"; +import { CallOut, HorizontalGutter } from "coral-ui/components/v2"; import OrSeparator from "./OrSeparator"; import SignInWithEmailContainer from "./SignInWithEmailContainer"; @@ -12,6 +12,8 @@ import SignInWithGoogleContainer from "./SignInWithGoogleContainer"; import SignInWithOIDCContainer from "./SignInWithOIDCContainer"; import Version from "./Version"; +import styles from "./SignIn.css"; + interface Props { error: string | null; emailEnabled?: boolean; @@ -37,9 +39,11 @@ const SignIn: FunctionComponent = ({ <> - Sign in to - +
+ + Sign in to + +
} > @@ -49,11 +53,23 @@ const SignIn: FunctionComponent = ({ )} {emailEnabled && } - {emailEnabled && oneClickIntegrationEnabled && } + {emailEnabled && oneClickIntegrationEnabled && ( +
+ +
+ )} {oneClickIntegrationEnabled && ( - {facebookEnabled && } - {googleEnabled && } + {facebookEnabled && ( +
+ +
+ )} + {googleEnabled && ( +
+ +
+ )} {oidcEnabled && } )} diff --git a/src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.css b/src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.css index c2b95658d..e8a7808e2 100644 --- a/src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.css +++ b/src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.css @@ -1,4 +1,20 @@ .textLink { - color: var(--palette-primary-main); + font-weight: var(--v2-font-weight-primary-semi-bold); + font-family: var(--v2-font-family-primary); + color: var(--v2-colors-teal-700); + font-size: var(--v2-font-size-1); + line-height: var(--v2-line-height-reset); text-decoration: underline; -} \ No newline at end of file +} + +.container { + padding-bottom: var(--v2-spacing-5); +} + +.field { + padding-bottom: var(--v2-spacing-4); +} + +.field { + padding-bottom: var(--v2-spacing-4); +} diff --git a/src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.tsx b/src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.tsx index 947cade97..1b583fa6b 100644 --- a/src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.tsx +++ b/src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.tsx @@ -19,8 +19,7 @@ import { FormField, HorizontalGutter, InputLabel, - Typography, -} from "coral-ui/components"; +} from "coral-ui/components/v2"; import EmailField from "../../EmailField"; @@ -42,36 +41,37 @@ const SignInWithEmail: FunctionComponent = props => {
{({ handleSubmit, submitting, submitError }) => ( - + {submitError && ( {submitError} )} - - - - {({ input, meta }) => ( - - - Password - - - - - - - +
+ +
+
+ + {({ input, meta }) => ( + + + Password + + + + + + = props => { Forgot your password? - - - - )} - + + + )} + +