[CORL-748] Update admin login to match new branding styles (#2788)

* Update admin login to match new branding styles

CORL-748

* Update admin login to match new branding styles

CORL-748
This commit is contained in:
Nick Funk
2020-01-20 17:43:40 +00:00
committed by Wyatt Johnson
parent 785735d36a
commit 4bd929f3f0
54 changed files with 1336 additions and 802 deletions
@@ -39,6 +39,7 @@ we require users to create a password.
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
@@ -167,6 +168,7 @@ we require users to create a password.
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
@@ -258,6 +260,7 @@ we require users to create a password.
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
@@ -371,6 +374,7 @@ GraphQL request (4:3)
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
@@ -457,6 +461,7 @@ we require users to create a password.
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="password"
name="password"
@@ -10,39 +10,27 @@ exports[`show restricted screen for commenters and staff 1`] = `
<div
className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="AuthBox-brandIcon"
>
<svg
className="BrandMark-base BrandMark-lg"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 520.96 540.83"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M510.27,352.74a17.5,17.5,0,0,0-22.93,9.3A235.18,235.18,0,0,1,287.92,505.19V463a66.65,66.65,0,0,1,3.22-6.65c10.93-19.65,31.34-30.85,55-43.83,26.9-14.77,57.38-31.51,76-64.65a17.5,17.5,0,1,0-30.51-17.14c-13.72,24.41-37.33,37.38-62.33,51.11-14.16,7.78-28.59,15.71-41.34,25.91V382.59c0-36,23.82-56.49,54-82.46,18.33-15.79,37.29-32.11,52.27-53.74C411.77,221,420.32,193,420.32,160.7a17.5,17.5,0,0,0-35,0c0,35.62-13.1,59.79-31.43,80.24-17.9-24.71-30.34-56.66-30.34-80.24a17.5,17.5,0,0,0-35,0c0,32.53,15.93,73.46,39.93,104.75-3.11,2.72-6.26,5.43-9.43,8.16-17.77,15.31-35.87,30.91-48.63,50.41-12.77-19.5-30.86-35.1-48.64-50.41-3.17-2.73-6.32-5.44-9.42-8.16,24-31.29,39.92-72.22,39.92-104.75a17.5,17.5,0,0,0-35,0c0,23.58-12.44,55.54-30.34,80.24-18.33-20.45-31.43-44.62-31.43-80.24a17.5,17.5,0,0,0-35,0c0,32.26,8.56,60.29,26.16,85.69,15,21.63,33.94,37.95,52.27,53.74,30.16,26,54,46.48,54,82.46v25.19c-12.77-10.22-27.21-18.16-41.38-25.94-25-13.73-48.62-26.7-62.33-51.11a17.5,17.5,0,1,0-30.51,17.14c18.61,33.14,49.09,49.88,76,64.65,23.63,13,44,24.18,55,43.83a70.43,70.43,0,0,1,3.26,6.72v42.12A235.34,235.34,0,0,1,104,104a235.56,235.56,0,0,1,383.39,74.84,17.5,17.5,0,1,0,32.23-13.64,270.22,270.22,0,1,0,0,210.53A17.5,17.5,0,0,0,510.27,352.74Z"
fill="#f77160"
/>
</svg>
</div>
</div>
<div>
<h1
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<span>
Currently signed in to
</span>
</h1>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
<div
className="adminSignInTitle"
>
<div
className="Restricted-title"
>
<span>
Currently signed in to
</span>
</div>
</div>
</div>
<div
className="BrandName-root BrandName-lg BrandName-alignCenter"
>
Coral
</h1>
</div>
</div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-double"
@@ -58,31 +46,31 @@ exports[`show restricted screen for commenters and staff 1`] = `
lock
</i>
</div>
<h1
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
<div
className="Restricted-noPermission"
>
You do not have permission to access this page.
</h1>
</div>
</div>
<div>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
className="Restricted-copy"
>
You are signed in as:
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
<div
className="Restricted-username"
>
Markus
</h1>
</div>
</div>
</div>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular Button-variantRegular Button-uppercase"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -94,11 +82,11 @@ exports[`show restricted screen for commenters and staff 1`] = `
Sign in with a different account
</button>
</div>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
<div
className="Restricted-copy Restricted-contactAdmin"
>
If you think this is an error, please contact your administrator for assistance.
</p>
</div>
</div>
</div>
</div>
@@ -115,39 +103,27 @@ exports[`show restricted screen for commenters and staff 2`] = `
<div
className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="AuthBox-brandIcon"
>
<svg
className="BrandMark-base BrandMark-lg"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 520.96 540.83"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M510.27,352.74a17.5,17.5,0,0,0-22.93,9.3A235.18,235.18,0,0,1,287.92,505.19V463a66.65,66.65,0,0,1,3.22-6.65c10.93-19.65,31.34-30.85,55-43.83,26.9-14.77,57.38-31.51,76-64.65a17.5,17.5,0,1,0-30.51-17.14c-13.72,24.41-37.33,37.38-62.33,51.11-14.16,7.78-28.59,15.71-41.34,25.91V382.59c0-36,23.82-56.49,54-82.46,18.33-15.79,37.29-32.11,52.27-53.74C411.77,221,420.32,193,420.32,160.7a17.5,17.5,0,0,0-35,0c0,35.62-13.1,59.79-31.43,80.24-17.9-24.71-30.34-56.66-30.34-80.24a17.5,17.5,0,0,0-35,0c0,32.53,15.93,73.46,39.93,104.75-3.11,2.72-6.26,5.43-9.43,8.16-17.77,15.31-35.87,30.91-48.63,50.41-12.77-19.5-30.86-35.1-48.64-50.41-3.17-2.73-6.32-5.44-9.42-8.16,24-31.29,39.92-72.22,39.92-104.75a17.5,17.5,0,0,0-35,0c0,23.58-12.44,55.54-30.34,80.24-18.33-20.45-31.43-44.62-31.43-80.24a17.5,17.5,0,0,0-35,0c0,32.26,8.56,60.29,26.16,85.69,15,21.63,33.94,37.95,52.27,53.74,30.16,26,54,46.48,54,82.46v25.19c-12.77-10.22-27.21-18.16-41.38-25.94-25-13.73-48.62-26.7-62.33-51.11a17.5,17.5,0,1,0-30.51,17.14c18.61,33.14,49.09,49.88,76,64.65,23.63,13,44,24.18,55,43.83a70.43,70.43,0,0,1,3.26,6.72v42.12A235.34,235.34,0,0,1,104,104a235.56,235.56,0,0,1,383.39,74.84,17.5,17.5,0,1,0,32.23-13.64,270.22,270.22,0,1,0,0,210.53A17.5,17.5,0,0,0,510.27,352.74Z"
fill="#f77160"
/>
</svg>
</div>
</div>
<div>
<h1
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<span>
Currently signed in to
</span>
</h1>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
<div
className="adminSignInTitle"
>
<div
className="Restricted-title"
>
<span>
Currently signed in to
</span>
</div>
</div>
</div>
<div
className="BrandName-root BrandName-lg BrandName-alignCenter"
>
Coral
</h1>
</div>
</div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-double"
@@ -163,31 +139,31 @@ exports[`show restricted screen for commenters and staff 2`] = `
lock
</i>
</div>
<h1
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
<div
className="Restricted-noPermission"
>
You do not have permission to access this page.
</h1>
</div>
</div>
<div>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
className="Restricted-copy"
>
You are signed in as:
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
<div
className="Restricted-username"
>
Markus
</h1>
</div>
</div>
</div>
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
data-color="primary"
data-variant="filled"
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular Button-variantRegular Button-uppercase"
data-color="regular"
data-variant="regular"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -199,11 +175,11 @@ exports[`show restricted screen for commenters and staff 2`] = `
Sign in with a different account
</button>
</div>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
<div
className="Restricted-copy Restricted-contactAdmin"
>
If you think this is an error, please contact your administrator for assistance.
</p>
</div>
</div>
</div>
</div>
File diff suppressed because it is too large Load Diff
@@ -85,7 +85,7 @@ it("checks for invalid email", async () => {
act(() => {
within(form)
.getByLabelText("Email Address")
.getByTestID("email-field")
.props.onChange({ target: { value: "invalid-email" } });
});
act(() => {
@@ -104,7 +104,7 @@ it("accepts valid email", async () => {
act(() => {
within(form)
.getByLabelText("Email Address")
.getByTestID("email-field")
.props.onChange({ target: { value: "hans@test.com" } });
});
act(() => {
@@ -123,7 +123,7 @@ it("accepts correct password", async () => {
act(() => {
within(form)
.getByLabelText("Password")
.getByTestID("password-field")
.props.onChange({ target: { value: "testtest" } });
});
act(() => {
@@ -141,12 +141,12 @@ it("shows server error", async () => {
const { form, context } = await createTestRenderer();
act(() => {
within(form)
.getByLabelText("Email Address")
.getByTestID("email-field")
.props.onChange({ target: { value: "hans@test.com" } });
});
act(() => {
within(form)
.getByLabelText("Password")
.getByTestID("password-field")
.props.onChange({ target: { value: "testtest" } });
});
@@ -184,12 +184,12 @@ it("submits form successfully", async () => {
const { form, context } = await createTestRenderer();
act(() => {
within(form)
.getByLabelText("Email Address")
.getByTestID("email-field")
.props.onChange({ target: { value: "hans@test.com" } });
});
act(() => {
within(form)
.getByLabelText("Password")
.getByTestID("password-field")
.props.onChange({ target: { value: "testtest" } });
});
@@ -872,6 +872,7 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={true}
id="auth.integrations.oidc.clientSecret"
name="auth.integrations.oidc.clientSecret"
@@ -1252,6 +1253,7 @@ integration to register for a new account.
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
id="configure-auth-sso-key"
name="key"
placeholder=""
@@ -1603,6 +1605,7 @@ to create and set up a web application. For more information visit:
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={true}
id="auth.integrations.google.clientSecret"
name="auth.integrations.google.clientSecret"
@@ -1923,6 +1926,7 @@ For more information visit:
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={true}
id="auth.integrations.facebook.clientSecret"
name="auth.integrations.facebook.clientSecret"
@@ -977,6 +977,7 @@ community model building purposes to improve the API over time.
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="configure-moderation-integrations.perspective.key"
name="integrations.perspective.key"
@@ -1180,6 +1181,7 @@ in your Akismet account:
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
data-testid="password-field"
disabled={false}
id="configure-moderation-integrations.akismet.key"
name="integrations.akismet.key"