wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-17 11:33:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-586] update logos to match new branding (#2540)

Browse Source 
* update logos to match new branding

* update styles of logo

* move version number to bottom of admin

* update specs
This commit is contained in:
Tessa Thornton
2019-09-10 09:02:35 -04:00
committed by Kim Gardner
parent d031df38f6
commit e86e9d2c68
23 changed files with 367 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/admin/App/Main.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Logo } from "coral-ui/components";
import { LogoHorizontal } from "coral-ui/components";
import { AppBar, Begin, Divider, End } from "coral-ui/components/AppBar";
import { DecisionHistoryButton } from "./DecisionHistory";
@@ -22,8 +22,7 @@ const Main: FunctionComponent<Props> = ({ children, viewer }) => (
<AppBar gutterBegin gutterEnd>
<Begin itemGutter="double">
<div className={styles.logoContainer}>
<Logo />
<Version />
<LogoHorizontal />
</div>
<NavigationContainer viewer={viewer} />
</Begin>
@@ -34,6 +33,7 @@ const Main: FunctionComponent<Props> = ({ children, viewer }) => (
</End>
</AppBar>
{children}
<Version />
</div>
);
src/core/client/admin/App/Version.css
+3 -3
View File
@@ -1,6 +1,6 @@
.version {
position: absolute;
right: 0;
top: 23px;
font-size: calc(10rem / var(--rem-base));
color: var(--palette-text-secondary);
text-align: center;
padding-bottom: var(--spacing-3);
}
src/core/client/admin/App/__snapshots__/Main.spec.tsx.snap
+2 -2
View File
@@ -14,8 +14,7 @@ exports[`renders correctly 1`] = `
<div
className="Main-logoContainer"
>
<withPropsOnChange(Logo) />
<Version />
<withPropsOnChange(LogoHorizontal) />
</div>
<withContext(createMutationContainer(Relay(NavigationContainer)))
viewer={Object {}}
@@ -30,5 +29,6 @@ exports[`renders correctly 1`] = `
</withPropsOnChange(End)>
</withPropsOnChange(AppBar)>
child
<Version />
</div>
`;
src/core/client/admin/components/AuthBox.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React, { FunctionComponent } from "react";
import {
BrandIcon,
BrandMark,
BrandName,
Flex,
HorizontalGutter,
@@ -22,7 +22,7 @@ const AuthBox: FunctionComponent<Props> = ({ title, children }) => {
<HorizontalGutter className={styles.container} size="double">
<Flex justifyContent="center">
<div className={styles.brandIcon}>
<BrandIcon size="lg" />
<BrandMark size="lg" />
</div>
</Flex>
<div>
src/core/client/admin/components/__snapshots__/AuthBox.spec.tsx.snap
+1 -1
View File
@@ -17,7 +17,7 @@ exports[`renders correctly 1`] = `
<div
className="AuthBox-brandIcon"
>
<withPropsOnChange(BrandIcon)
<withPropsOnChange(BrandMark)
size="lg"
/>
</div>
src/core/client/admin/routes/Invite/InviteLayout.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import React, { FunctionComponent } from "react";
import Version from "coral-admin/App/Version";
import { AppBar, Flex, Logo } from "coral-ui/components";
import { AppBar, Flex, LogoHorizontal } from "coral-ui/components";
import { Begin } from "coral-ui/components/AppBar";
import styles from "./InviteLayout.css";
@@ -11,8 +11,7 @@ const InviteLayout: FunctionComponent = ({ children }) => (
<AppBar gutterBegin gutterEnd>
<Begin itemGutter="double">
<div className={styles.logoContainer}>
<Logo />
<Version />
<LogoHorizontal />
</div>
</Begin>
</AppBar>
@@ -24,6 +23,7 @@ const InviteLayout: FunctionComponent = ({ children }) => (
>
{children}
</Flex>
<Version />
</div>
);
src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap
+12 -72
View File
@@ -17,46 +17,16 @@ exports[`show restricted screen for commenters and staff 1`] = `
className="AuthBox-brandIcon"
>
<svg
className="BrandIcon-base BrandIcon-lg"
className="BrandMark-base BrandMark-lg"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 541.77 557.72"
viewBox="0 0 520.96 540.83"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath
id="clip-path"
>
<rect
fill="none"
height="570"
width="554"
/>
</clipPath>
<clipPath
id="clip-path-2"
transform="translate(-8.12 -8.14)"
>
<path
clipPath="url(#clip-path)"
clipRule="evenodd"
d="M61.63,350.45c-.67,10.22,1.34,21.13,6,32.21a95.36,95.36,0,0,0,27.22,36.41c26,21.16,52.14,17.65,77.43,14.24,21.22-2.85,43.17-5.8,69,5.43,33.54,14.57,59.71,45.39,66.65,78.46a99.16,99.16,0,0,1,.11,38.66H219.65a16.89,16.89,0,0,0-.71-2.44c-16.54-44.09-38.46-69.52-67.09-77.78-9.37-2.66-18-3-25.68-3.27-9.91-.37-17.75-.66-26-5.6s-14.93-13.28-19.59-24.42a17,17,0,0,0-22.12-9.07,16.69,16.69,0,0,0-9.17,21.88c7.45,17.8,18.6,31.31,33.25,40.21,15.85,9.48,30.54,10,42.35,10.48,6.55.24,12.2.45,17.55,2,15.64,4.51,29.43,20.65,41.07,48H63.07a45,45,0,0,1-44.95-45V322.78a144.51,144.51,0,0,0,43.51,27.67Zm13-31.55a109.22,109.22,0,0,1-56.48-52.22v-66a88.41,88.41,0,0,0,35.59,10.37c18.52,1.13,34.77-4.64,47-16.71,11.63-11.51,14.6-24.24,18.05-39,2.88-12.32,6.46-27.66,16.66-48.7,10.44-21.72,17.13-30,24.69-30.51,11-.79,29.3,13.46,32.09,34.75,2,14.93-3.58,25.14-10.07,37C175,161,166,177.28,172.4,198.15c6.81,22.16,25.44,31.45,40.4,38.91,15.61,7.78,25.42,13.21,30.37,26.2,4.26,11.27,4.87,27.9-.71,33.32-3.74,3.66-16.43.64-29.86-2.55-23-5.47-54.5-12.95-91.49-1.57-9.77,3-32.07,9.72-46.51,26.44ZM357.73,18.14c-15,17.37-28.76,40.23-34.85,69-4.25,19.33-13.09,59.57,13.51,88.26A71.68,71.68,0,0,0,388.11,198a61.12,61.12,0,0,0,22.65-4.23c31.63-12.61,46.84-43.4,49.25-56.36,3.24-17.51,5-35.76,6.33-51.32a11.43,11.43,0,0,1,5.38-8.61l.5-.31a12.23,12.23,0,0,1,13.33,1.63c19.82,16.56,36.73,31.82,51.69,46.63a17.07,17.07,0,0,0,2.64,2.14v93.21a16.92,16.92,0,0,0-3.87,4.69c-9.23,16.43-23.71,36.42-40.11,38.31-6.55.7-10.3-1.49-20.21-7.9S452.37,240.8,431,236c-23.2-5.22-38.56-2.06-50.9.48-10.61,2.18-17.62,3.62-28.9,0-27.43-9-42.31-36.22-51.21-52.47l-.24-.45c-19.81-36.54-18.23-71.85-16.84-103l0-.58a287.16,287.16,0,0,1,9.81-61.77Zm49.14,0h88.06a45,45,0,0,1,44.95,45V80.79c-10.08-9.22-21-18.69-32.79-28.58a45.72,45.72,0,0,0-50.93-5.38,19.1,19.1,0,0,0-2.55,1.52,46.1,46.1,0,0,0-21,34.46,1.49,1.49,0,0,0,0,.21c-1.24,14.7-2.91,31.88-5.86,47.9-.88,3.66-9.12,23.11-28.33,30.76-12.81,5.1-29.11-1.09-37.41-10-14.22-15.33-8.26-42.48-5-57.19C363.43,59.29,386.3,35,404.17,20.82a18,18,0,0,0,2.7-2.68Zm-149.42,0a319.88,319.88,0,0,0-8.67,60.21l0,.62c-1.43,32-3.38,75.91,21,120.82l.28.52c9.81,17.93,30.25,55.25,70.55,68.52,19.95,6.48,34,3.59,46.44,1,11-2.26,20.48-4.21,36.49-.61,15.43,3.48,24.69,9.46,33.63,15.25C467,290.87,478,298,493.8,298a54,54,0,0,0,5.86-.32c14.5-1.67,27.83-8.41,40.22-20.42v45.53a179.81,179.81,0,0,1-47.68.48c-17-2.18-28.9-6.21-40.39-10.1-16.13-5.46-31.37-10.63-54.46-8.79-12.34.86-49.5,3.52-68.67,32.46-21.27,32-4.79,71.47-1.27,79.05,0,.06,0,.11.07.17,11.15,23.37,28,33.16,44.25,42.63,9.57,5.57,19.46,11.33,29.45,20.4C421,497.23,435.05,523,443,555.86H342.61a132,132,0,0,0-1.29-45.63c-9.16-43.62-43.1-84-86.46-102.82-34.51-15-63.68-11.11-87.12-8-24.18,3.25-37.44,4.42-51.35-6.91-15-12.14-24-32.83-19.67-45.1,4.74-13.34,25.44-19.62,34.35-22.32,28.19-8.67,52.33-2.93,73.64,2.14,21.83,5.18,44.4,10.55,61.57-6.21,17.7-17.22,17-48.29,8.81-69.92-10-26.15-30.53-36.41-47.06-44.65-13.09-6.53-20.6-10.6-23-18.37-2-6.43.36-11.62,7-23.75,7.41-13.48,17.55-31.93,14-58-4.77-36.43-36.65-66.5-68.28-64.3-30.19,2.1-44.53,32-53.08,49.73-11.83,24.42-16.07,42.54-19.16,55.78-2.9,12.39-4.37,18.06-8.79,22.43-5.21,5.13-12.26,7.47-21,6.93-13-.8-27.57-8-37.68-18.45V63.15a45,45,0,0,1,45-45Zm282.43,449v43.76a45,45,0,0,1-44.95,45H477.46a16.09,16.09,0,0,0-.36-2.56c-4.89-22.41-12.24-42.37-22-59.73a120.79,120.79,0,0,1,39-21,119.51,119.51,0,0,1,45.77-5.45Zm0-34.82a152.6,152.6,0,0,0-56,7.12,154.85,154.85,0,0,0-48.66,25.94,153.26,153.26,0,0,0-11.29-11.5c-12.68-11.52-24.67-18.5-35.24-24.65-14.45-8.41-24-14-30.62-27.78-.87-1.9-12.66-28.42-1.23-45.62,10-15.1,33.94-16.77,42.95-17.4l.17,0c16.24-1.3,26.66,2.23,41.07,7.11,12.45,4.22,26.57,9,46.95,11.61a212.66,212.66,0,0,0,51.92.08v75.11Z"
fill="none"
/>
</clipPath>
</defs>
<title>
logo mark2018
</title>
<g
clipPath="url(#clip-path-2)"
>
<rect
fill="#f7705f"
height="557.72"
width="541.77"
/>
</g>
<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>
@@ -152,46 +122,16 @@ exports[`show restricted screen for commenters and staff 2`] = `
className="AuthBox-brandIcon"
>
<svg
className="BrandIcon-base BrandIcon-lg"
className="BrandMark-base BrandMark-lg"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 541.77 557.72"
viewBox="0 0 520.96 540.83"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath
id="clip-path"
>
<rect
fill="none"
height="570"
width="554"
/>
</clipPath>
<clipPath
id="clip-path-2"
transform="translate(-8.12 -8.14)"
>
<path
clipPath="url(#clip-path)"
clipRule="evenodd"
d="M61.63,350.45c-.67,10.22,1.34,21.13,6,32.21a95.36,95.36,0,0,0,27.22,36.41c26,21.16,52.14,17.65,77.43,14.24,21.22-2.85,43.17-5.8,69,5.43,33.54,14.57,59.71,45.39,66.65,78.46a99.16,99.16,0,0,1,.11,38.66H219.65a16.89,16.89,0,0,0-.71-2.44c-16.54-44.09-38.46-69.52-67.09-77.78-9.37-2.66-18-3-25.68-3.27-9.91-.37-17.75-.66-26-5.6s-14.93-13.28-19.59-24.42a17,17,0,0,0-22.12-9.07,16.69,16.69,0,0,0-9.17,21.88c7.45,17.8,18.6,31.31,33.25,40.21,15.85,9.48,30.54,10,42.35,10.48,6.55.24,12.2.45,17.55,2,15.64,4.51,29.43,20.65,41.07,48H63.07a45,45,0,0,1-44.95-45V322.78a144.51,144.51,0,0,0,43.51,27.67Zm13-31.55a109.22,109.22,0,0,1-56.48-52.22v-66a88.41,88.41,0,0,0,35.59,10.37c18.52,1.13,34.77-4.64,47-16.71,11.63-11.51,14.6-24.24,18.05-39,2.88-12.32,6.46-27.66,16.66-48.7,10.44-21.72,17.13-30,24.69-30.51,11-.79,29.3,13.46,32.09,34.75,2,14.93-3.58,25.14-10.07,37C175,161,166,177.28,172.4,198.15c6.81,22.16,25.44,31.45,40.4,38.91,15.61,7.78,25.42,13.21,30.37,26.2,4.26,11.27,4.87,27.9-.71,33.32-3.74,3.66-16.43.64-29.86-2.55-23-5.47-54.5-12.95-91.49-1.57-9.77,3-32.07,9.72-46.51,26.44ZM357.73,18.14c-15,17.37-28.76,40.23-34.85,69-4.25,19.33-13.09,59.57,13.51,88.26A71.68,71.68,0,0,0,388.11,198a61.12,61.12,0,0,0,22.65-4.23c31.63-12.61,46.84-43.4,49.25-56.36,3.24-17.51,5-35.76,6.33-51.32a11.43,11.43,0,0,1,5.38-8.61l.5-.31a12.23,12.23,0,0,1,13.33,1.63c19.82,16.56,36.73,31.82,51.69,46.63a17.07,17.07,0,0,0,2.64,2.14v93.21a16.92,16.92,0,0,0-3.87,4.69c-9.23,16.43-23.71,36.42-40.11,38.31-6.55.7-10.3-1.49-20.21-7.9S452.37,240.8,431,236c-23.2-5.22-38.56-2.06-50.9.48-10.61,2.18-17.62,3.62-28.9,0-27.43-9-42.31-36.22-51.21-52.47l-.24-.45c-19.81-36.54-18.23-71.85-16.84-103l0-.58a287.16,287.16,0,0,1,9.81-61.77Zm49.14,0h88.06a45,45,0,0,1,44.95,45V80.79c-10.08-9.22-21-18.69-32.79-28.58a45.72,45.72,0,0,0-50.93-5.38,19.1,19.1,0,0,0-2.55,1.52,46.1,46.1,0,0,0-21,34.46,1.49,1.49,0,0,0,0,.21c-1.24,14.7-2.91,31.88-5.86,47.9-.88,3.66-9.12,23.11-28.33,30.76-12.81,5.1-29.11-1.09-37.41-10-14.22-15.33-8.26-42.48-5-57.19C363.43,59.29,386.3,35,404.17,20.82a18,18,0,0,0,2.7-2.68Zm-149.42,0a319.88,319.88,0,0,0-8.67,60.21l0,.62c-1.43,32-3.38,75.91,21,120.82l.28.52c9.81,17.93,30.25,55.25,70.55,68.52,19.95,6.48,34,3.59,46.44,1,11-2.26,20.48-4.21,36.49-.61,15.43,3.48,24.69,9.46,33.63,15.25C467,290.87,478,298,493.8,298a54,54,0,0,0,5.86-.32c14.5-1.67,27.83-8.41,40.22-20.42v45.53a179.81,179.81,0,0,1-47.68.48c-17-2.18-28.9-6.21-40.39-10.1-16.13-5.46-31.37-10.63-54.46-8.79-12.34.86-49.5,3.52-68.67,32.46-21.27,32-4.79,71.47-1.27,79.05,0,.06,0,.11.07.17,11.15,23.37,28,33.16,44.25,42.63,9.57,5.57,19.46,11.33,29.45,20.4C421,497.23,435.05,523,443,555.86H342.61a132,132,0,0,0-1.29-45.63c-9.16-43.62-43.1-84-86.46-102.82-34.51-15-63.68-11.11-87.12-8-24.18,3.25-37.44,4.42-51.35-6.91-15-12.14-24-32.83-19.67-45.1,4.74-13.34,25.44-19.62,34.35-22.32,28.19-8.67,52.33-2.93,73.64,2.14,21.83,5.18,44.4,10.55,61.57-6.21,17.7-17.22,17-48.29,8.81-69.92-10-26.15-30.53-36.41-47.06-44.65-13.09-6.53-20.6-10.6-23-18.37-2-6.43.36-11.62,7-23.75,7.41-13.48,17.55-31.93,14-58-4.77-36.43-36.65-66.5-68.28-64.3-30.19,2.1-44.53,32-53.08,49.73-11.83,24.42-16.07,42.54-19.16,55.78-2.9,12.39-4.37,18.06-8.79,22.43-5.21,5.13-12.26,7.47-21,6.93-13-.8-27.57-8-37.68-18.45V63.15a45,45,0,0,1,45-45Zm282.43,449v43.76a45,45,0,0,1-44.95,45H477.46a16.09,16.09,0,0,0-.36-2.56c-4.89-22.41-12.24-42.37-22-59.73a120.79,120.79,0,0,1,39-21,119.51,119.51,0,0,1,45.77-5.45Zm0-34.82a152.6,152.6,0,0,0-56,7.12,154.85,154.85,0,0,0-48.66,25.94,153.26,153.26,0,0,0-11.29-11.5c-12.68-11.52-24.67-18.5-35.24-24.65-14.45-8.41-24-14-30.62-27.78-.87-1.9-12.66-28.42-1.23-45.62,10-15.1,33.94-16.77,42.95-17.4l.17,0c16.24-1.3,26.66,2.23,41.07,7.11,12.45,4.22,26.57,9,46.95,11.61a212.66,212.66,0,0,0,51.92.08v75.11Z"
fill="none"
/>
</clipPath>
</defs>
<title>
logo mark2018
</title>
<g
clipPath="url(#clip-path-2)"
>
<rect
fill="#f7705f"
height="557.72"
width="541.77"
/>
</g>
<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>
src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
+6 -36
View File
@@ -394,46 +394,16 @@ exports[`renders sign in form 1`] = `
className="AuthBox-brandIcon"
>
<svg
className="BrandIcon-base BrandIcon-lg"
className="BrandMark-base BrandMark-lg"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 541.77 557.72"
viewBox="0 0 520.96 540.83"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath
id="clip-path"
>
<rect
fill="none"
height="570"
width="554"
/>
</clipPath>
<clipPath
id="clip-path-2"
transform="translate(-8.12 -8.14)"
>
<path
clipPath="url(#clip-path)"
clipRule="evenodd"
d="M61.63,350.45c-.67,10.22,1.34,21.13,6,32.21a95.36,95.36,0,0,0,27.22,36.41c26,21.16,52.14,17.65,77.43,14.24,21.22-2.85,43.17-5.8,69,5.43,33.54,14.57,59.71,45.39,66.65,78.46a99.16,99.16,0,0,1,.11,38.66H219.65a16.89,16.89,0,0,0-.71-2.44c-16.54-44.09-38.46-69.52-67.09-77.78-9.37-2.66-18-3-25.68-3.27-9.91-.37-17.75-.66-26-5.6s-14.93-13.28-19.59-24.42a17,17,0,0,0-22.12-9.07,16.69,16.69,0,0,0-9.17,21.88c7.45,17.8,18.6,31.31,33.25,40.21,15.85,9.48,30.54,10,42.35,10.48,6.55.24,12.2.45,17.55,2,15.64,4.51,29.43,20.65,41.07,48H63.07a45,45,0,0,1-44.95-45V322.78a144.51,144.51,0,0,0,43.51,27.67Zm13-31.55a109.22,109.22,0,0,1-56.48-52.22v-66a88.41,88.41,0,0,0,35.59,10.37c18.52,1.13,34.77-4.64,47-16.71,11.63-11.51,14.6-24.24,18.05-39,2.88-12.32,6.46-27.66,16.66-48.7,10.44-21.72,17.13-30,24.69-30.51,11-.79,29.3,13.46,32.09,34.75,2,14.93-3.58,25.14-10.07,37C175,161,166,177.28,172.4,198.15c6.81,22.16,25.44,31.45,40.4,38.91,15.61,7.78,25.42,13.21,30.37,26.2,4.26,11.27,4.87,27.9-.71,33.32-3.74,3.66-16.43.64-29.86-2.55-23-5.47-54.5-12.95-91.49-1.57-9.77,3-32.07,9.72-46.51,26.44ZM357.73,18.14c-15,17.37-28.76,40.23-34.85,69-4.25,19.33-13.09,59.57,13.51,88.26A71.68,71.68,0,0,0,388.11,198a61.12,61.12,0,0,0,22.65-4.23c31.63-12.61,46.84-43.4,49.25-56.36,3.24-17.51,5-35.76,6.33-51.32a11.43,11.43,0,0,1,5.38-8.61l.5-.31a12.23,12.23,0,0,1,13.33,1.63c19.82,16.56,36.73,31.82,51.69,46.63a17.07,17.07,0,0,0,2.64,2.14v93.21a16.92,16.92,0,0,0-3.87,4.69c-9.23,16.43-23.71,36.42-40.11,38.31-6.55.7-10.3-1.49-20.21-7.9S452.37,240.8,431,236c-23.2-5.22-38.56-2.06-50.9.48-10.61,2.18-17.62,3.62-28.9,0-27.43-9-42.31-36.22-51.21-52.47l-.24-.45c-19.81-36.54-18.23-71.85-16.84-103l0-.58a287.16,287.16,0,0,1,9.81-61.77Zm49.14,0h88.06a45,45,0,0,1,44.95,45V80.79c-10.08-9.22-21-18.69-32.79-28.58a45.72,45.72,0,0,0-50.93-5.38,19.1,19.1,0,0,0-2.55,1.52,46.1,46.1,0,0,0-21,34.46,1.49,1.49,0,0,0,0,.21c-1.24,14.7-2.91,31.88-5.86,47.9-.88,3.66-9.12,23.11-28.33,30.76-12.81,5.1-29.11-1.09-37.41-10-14.22-15.33-8.26-42.48-5-57.19C363.43,59.29,386.3,35,404.17,20.82a18,18,0,0,0,2.7-2.68Zm-149.42,0a319.88,319.88,0,0,0-8.67,60.21l0,.62c-1.43,32-3.38,75.91,21,120.82l.28.52c9.81,17.93,30.25,55.25,70.55,68.52,19.95,6.48,34,3.59,46.44,1,11-2.26,20.48-4.21,36.49-.61,15.43,3.48,24.69,9.46,33.63,15.25C467,290.87,478,298,493.8,298a54,54,0,0,0,5.86-.32c14.5-1.67,27.83-8.41,40.22-20.42v45.53a179.81,179.81,0,0,1-47.68.48c-17-2.18-28.9-6.21-40.39-10.1-16.13-5.46-31.37-10.63-54.46-8.79-12.34.86-49.5,3.52-68.67,32.46-21.27,32-4.79,71.47-1.27,79.05,0,.06,0,.11.07.17,11.15,23.37,28,33.16,44.25,42.63,9.57,5.57,19.46,11.33,29.45,20.4C421,497.23,435.05,523,443,555.86H342.61a132,132,0,0,0-1.29-45.63c-9.16-43.62-43.1-84-86.46-102.82-34.51-15-63.68-11.11-87.12-8-24.18,3.25-37.44,4.42-51.35-6.91-15-12.14-24-32.83-19.67-45.1,4.74-13.34,25.44-19.62,34.35-22.32,28.19-8.67,52.33-2.93,73.64,2.14,21.83,5.18,44.4,10.55,61.57-6.21,17.7-17.22,17-48.29,8.81-69.92-10-26.15-30.53-36.41-47.06-44.65-13.09-6.53-20.6-10.6-23-18.37-2-6.43.36-11.62,7-23.75,7.41-13.48,17.55-31.93,14-58-4.77-36.43-36.65-66.5-68.28-64.3-30.19,2.1-44.53,32-53.08,49.73-11.83,24.42-16.07,42.54-19.16,55.78-2.9,12.39-4.37,18.06-8.79,22.43-5.21,5.13-12.26,7.47-21,6.93-13-.8-27.57-8-37.68-18.45V63.15a45,45,0,0,1,45-45Zm282.43,449v43.76a45,45,0,0,1-44.95,45H477.46a16.09,16.09,0,0,0-.36-2.56c-4.89-22.41-12.24-42.37-22-59.73a120.79,120.79,0,0,1,39-21,119.51,119.51,0,0,1,45.77-5.45Zm0-34.82a152.6,152.6,0,0,0-56,7.12,154.85,154.85,0,0,0-48.66,25.94,153.26,153.26,0,0,0-11.29-11.5c-12.68-11.52-24.67-18.5-35.24-24.65-14.45-8.41-24-14-30.62-27.78-.87-1.9-12.66-28.42-1.23-45.62,10-15.1,33.94-16.77,42.95-17.4l.17,0c16.24-1.3,26.66,2.23,41.07,7.11,12.45,4.22,26.57,9,46.95,11.61a212.66,212.66,0,0,0,51.92.08v75.11Z"
fill="none"
/>
</clipPath>
</defs>
<title>
logo mark2018
</title>
<g
clipPath="url(#clip-path-2)"
>
<rect
fill="#f7705f"
height="557.72"
width="541.77"
/>
</g>
<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>
src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap
+168 -108
View File
@@ -17,62 +17,87 @@ exports[`renders form 1`] = `
<div
className="InviteLayout-logoContainer"
>
<div
className="Box-root Flex-root Logo-root Flex-flex Flex-alignCenter"
<h1
aria-hidden={true}
className="LogoHorizontal-hiddenTitle"
>
<svg
className="BrandIcon-base Logo-icon BrandIcon-md"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 541.77 557.72"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath
id="clip-path"
>
<rect
fill="none"
height="570"
width="554"
/>
</clipPath>
<clipPath
id="clip-path-2"
transform="translate(-8.12 -8.14)"
>
<path
clipPath="url(#clip-path)"
clipRule="evenodd"
d="M61.63,350.45c-.67,10.22,1.34,21.13,6,32.21a95.36,95.36,0,0,0,27.22,36.41c26,21.16,52.14,17.65,77.43,14.24,21.22-2.85,43.17-5.8,69,5.43,33.54,14.57,59.71,45.39,66.65,78.46a99.16,99.16,0,0,1,.11,38.66H219.65a16.89,16.89,0,0,0-.71-2.44c-16.54-44.09-38.46-69.52-67.09-77.78-9.37-2.66-18-3-25.68-3.27-9.91-.37-17.75-.66-26-5.6s-14.93-13.28-19.59-24.42a17,17,0,0,0-22.12-9.07,16.69,16.69,0,0,0-9.17,21.88c7.45,17.8,18.6,31.31,33.25,40.21,15.85,9.48,30.54,10,42.35,10.48,6.55.24,12.2.45,17.55,2,15.64,4.51,29.43,20.65,41.07,48H63.07a45,45,0,0,1-44.95-45V322.78a144.51,144.51,0,0,0,43.51,27.67Zm13-31.55a109.22,109.22,0,0,1-56.48-52.22v-66a88.41,88.41,0,0,0,35.59,10.37c18.52,1.13,34.77-4.64,47-16.71,11.63-11.51,14.6-24.24,18.05-39,2.88-12.32,6.46-27.66,16.66-48.7,10.44-21.72,17.13-30,24.69-30.51,11-.79,29.3,13.46,32.09,34.75,2,14.93-3.58,25.14-10.07,37C175,161,166,177.28,172.4,198.15c6.81,22.16,25.44,31.45,40.4,38.91,15.61,7.78,25.42,13.21,30.37,26.2,4.26,11.27,4.87,27.9-.71,33.32-3.74,3.66-16.43.64-29.86-2.55-23-5.47-54.5-12.95-91.49-1.57-9.77,3-32.07,9.72-46.51,26.44ZM357.73,18.14c-15,17.37-28.76,40.23-34.85,69-4.25,19.33-13.09,59.57,13.51,88.26A71.68,71.68,0,0,0,388.11,198a61.12,61.12,0,0,0,22.65-4.23c31.63-12.61,46.84-43.4,49.25-56.36,3.24-17.51,5-35.76,6.33-51.32a11.43,11.43,0,0,1,5.38-8.61l.5-.31a12.23,12.23,0,0,1,13.33,1.63c19.82,16.56,36.73,31.82,51.69,46.63a17.07,17.07,0,0,0,2.64,2.14v93.21a16.92,16.92,0,0,0-3.87,4.69c-9.23,16.43-23.71,36.42-40.11,38.31-6.55.7-10.3-1.49-20.21-7.9S452.37,240.8,431,236c-23.2-5.22-38.56-2.06-50.9.48-10.61,2.18-17.62,3.62-28.9,0-27.43-9-42.31-36.22-51.21-52.47l-.24-.45c-19.81-36.54-18.23-71.85-16.84-103l0-.58a287.16,287.16,0,0,1,9.81-61.77Zm49.14,0h88.06a45,45,0,0,1,44.95,45V80.79c-10.08-9.22-21-18.69-32.79-28.58a45.72,45.72,0,0,0-50.93-5.38,19.1,19.1,0,0,0-2.55,1.52,46.1,46.1,0,0,0-21,34.46,1.49,1.49,0,0,0,0,.21c-1.24,14.7-2.91,31.88-5.86,47.9-.88,3.66-9.12,23.11-28.33,30.76-12.81,5.1-29.11-1.09-37.41-10-14.22-15.33-8.26-42.48-5-57.19C363.43,59.29,386.3,35,404.17,20.82a18,18,0,0,0,2.7-2.68Zm-149.42,0a319.88,319.88,0,0,0-8.67,60.21l0,.62c-1.43,32-3.38,75.91,21,120.82l.28.52c9.81,17.93,30.25,55.25,70.55,68.52,19.95,6.48,34,3.59,46.44,1,11-2.26,20.48-4.21,36.49-.61,15.43,3.48,24.69,9.46,33.63,15.25C467,290.87,478,298,493.8,298a54,54,0,0,0,5.86-.32c14.5-1.67,27.83-8.41,40.22-20.42v45.53a179.81,179.81,0,0,1-47.68.48c-17-2.18-28.9-6.21-40.39-10.1-16.13-5.46-31.37-10.63-54.46-8.79-12.34.86-49.5,3.52-68.67,32.46-21.27,32-4.79,71.47-1.27,79.05,0,.06,0,.11.07.17,11.15,23.37,28,33.16,44.25,42.63,9.57,5.57,19.46,11.33,29.45,20.4C421,497.23,435.05,523,443,555.86H342.61a132,132,0,0,0-1.29-45.63c-9.16-43.62-43.1-84-86.46-102.82-34.51-15-63.68-11.11-87.12-8-24.18,3.25-37.44,4.42-51.35-6.91-15-12.14-24-32.83-19.67-45.1,4.74-13.34,25.44-19.62,34.35-22.32,28.19-8.67,52.33-2.93,73.64,2.14,21.83,5.18,44.4,10.55,61.57-6.21,17.7-17.22,17-48.29,8.81-69.92-10-26.15-30.53-36.41-47.06-44.65-13.09-6.53-20.6-10.6-23-18.37-2-6.43.36-11.62,7-23.75,7.41-13.48,17.55-31.93,14-58-4.77-36.43-36.65-66.5-68.28-64.3-30.19,2.1-44.53,32-53.08,49.73-11.83,24.42-16.07,42.54-19.16,55.78-2.9,12.39-4.37,18.06-8.79,22.43-5.21,5.13-12.26,7.47-21,6.93-13-.8-27.57-8-37.68-18.45V63.15a45,45,0,0,1,45-45Zm282.43,449v43.76a45,45,0,0,1-44.95,45H477.46a16.09,16.09,0,0,0-.36-2.56c-4.89-22.41-12.24-42.37-22-59.73a120.79,120.79,0,0,1,39-21,119.51,119.51,0,0,1,45.77-5.45Zm0-34.82a152.6,152.6,0,0,0-56,7.12,154.85,154.85,0,0,0-48.66,25.94,153.26,153.26,0,0,0-11.29-11.5c-12.68-11.52-24.67-18.5-35.24-24.65-14.45-8.41-24-14-30.62-27.78-.87-1.9-12.66-28.42-1.23-45.62,10-15.1,33.94-16.77,42.95-17.4l.17,0c16.24-1.3,26.66,2.23,41.07,7.11,12.45,4.22,26.57,9,46.95,11.61a212.66,212.66,0,0,0,51.92.08v75.11Z"
fill="none"
/>
</clipPath>
</defs>
<title>
logo mark2018
</title>
<g
clipPath="url(#clip-path-2)"
>
<rect
fill="#f7705f"
height="557.72"
width="541.77"
/>
</g>
</svg>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignLeft BrandName-root BrandName-md"
>
Coral
</h1>
</div>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary Version-version"
Coral
</h1>
<svg
className="LogoHorizontal-base"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 1011.23 388.38"
xmlns="http://www.w3.org/2000/svg"
>
vTest
</p>
<title>
Coral by Vox Media
</title>
<path
d="M471.21,341.35l10.17,29.78L488,351.31c1.13-3.39,2.16-6.78,3.08-9.65h13.66L491.14,375c-2.16,5.45-3.5,8.63-4.73,12.33l-10.27.61-13.55-32.86c-1.65-4.11-3.7-9.24-5.55-13.25Z"
fill="#f77160"
/>
<path
d="M534.88,340.63c-14.27,0-23.82,10.68-23.82,25.06,0,12.53,9,22.69,22.69,22.69,14.17,0,23.83-10.68,23.83-25.05C557.58,350.7,548.54,340.63,534.88,340.63Zm-.72,37.59c-6.16,0-10.57-5.34-10.57-14,0-7.39,4.21-13.55,10.78-13.55,6.16,0,10.58,5.34,10.58,14C545,372.16,540.74,378.22,534.16,378.22Z"
fill="#f77160"
/>
<path
d="M564.66,387.15l15.71-23.31-6.16-9-8.83-13,14.28-.51L589,355.83l3.18-5.44c1.65-2.67,3.91-6.27,5.55-8.83H611.8l-15,22.49,5.54,8.11c2.57,3.9,7,10.58,9.86,14.79l-14.38.51L588.28,372l-3,4.83c-1.43,2.36-4.51,7.39-6.26,10.06H564.66Z"
fill="#f77160"
/>
<path
d="M646.2,371.54l1.95-14.27c.62-4.11,1.64-12.32,1.85-15.71l9.86-.41c1.13,2.56,2.77,6.26,4.11,9.14L672.39,369l8.21-19c1.23-2.78,2.67-6.16,3.8-8.73H694c.41,3.8,1.44,11.81,2.06,16l2,14.27c.62,4.21,1.85,12.22,2.57,15.61l-12.74.52c-.1-1.85-.72-7.3-1.13-9.86l-1.84-14.38c-3.19,7.91-8.84,22-9.66,24.24l-6.78.3-9.75-23.92-1.54,13.86c-.31,2.57-.82,7.5-.82,9.34H643.63C644.45,383.87,645.58,375.75,646.2,371.54Z"
fill="#f77160"
/>
<path
d="M745,387.46c-4.31-.31-9.55-.31-14.58-.31-5.65,0-11.81.1-16.64.31.31-3.08.41-11.6.41-15.81V357.27c0-4.11-.1-12.84-.41-16,4.73.2,9.86.31,15.71.31,5.34,0,10.27-.11,14.69-.31a101.86,101.86,0,0,0-.51,10.27c-3.29-.1-6.58-.1-10.58-.1-2,0-4.11,0-6,.1-.1.92-.1,2.26-.1,2.87v5l14.07-.11c-.1,2.67-.21,5.65-.21,9H727v5.85c0,.72,0,2.06.1,3,1.85,0,4,.1,6,.1,4.62,0,8.52-.1,12.32-.2C745.09,380.37,745,383.45,745,387.46Z"
fill="#f77160"
/>
<path
d="M774.05,341.35c-7.19,0-12.94.41-15.3.41.31,3.19.41,11.4.41,15.51v14.27c0,4.21-.1,12.53-.41,15.61h17c15.2,0,24.85-9.14,25-23.72C800.75,349.57,791.2,341.35,774.05,341.35Zm1.64,35.94a28.92,28.92,0,0,1-3.38-.2,22.58,22.58,0,0,1-.11-2.67V354.29a25.92,25.92,0,0,1,.11-2.87,25.76,25.76,0,0,1,3.18-.21c7.8,0,12.53,4.62,12.53,12.73C788,371.65,784.32,377.29,775.69,377.29Z"
fill="#f77160"
/>
<path
d="M813.69,387.15c.31-3.08.41-11.4.41-15.61V357.27c0-4.11-.1-12.53-.41-15.61,2.57,0,11.61-.1,13.76-.31-.2,1.85-.31,7.09-.31,9.55v26.91c0,2.46.11,7.49.31,9.34Z"
fill="#f77160"
/>
<path
d="M882.39,374l-14.17-32.86-10.37.61c-1.23,3.6-2.77,7-5,12.33l-14.07,33.16H852.2c.41-.82,2.26-5.95,3.08-8.11H871.1l3.49,8.63,13.76-.52C886.5,383.25,884,378,882.39,374Zm-24.54-3L863,357,868.22,371Z"
fill="#f77160"
/>
<path
d="M384.61,375.13c0,6.54-4.55,10-11.82,10H359.44V350.25h12.22c7.27,0,11.81,3.24,11.81,9.49,0,3.75-2,6.47-4.54,7.38A8.45,8.45,0,0,1,384.61,375.13Zm-13-10.22c4,0,6.19-1.54,6.19-4.83s-2.16-4.72-6.19-4.72h-6.42v9.55ZM365.18,380h7.5c4,0,6.13-2,6.13-5.12s-2.15-5.11-6.13-5.11h-7.5Z"
fill="#f77160"
/>
<path
d="M415.76,350.25H422l-12.67,21v13.92h-5.85V371.21l-12.62-21h6.42l9.26,15.62Z"
fill="#f77160"
/>
<path
d="M358.84,148.31c0-56.33,44-100.89,99.76-100.89a98.22,98.22,0,0,1,75.95,35.31,12.88,12.88,0,0,1,3.36,8.41,11.9,11.9,0,0,1-12,11.77c-3.08,0-6.44-2-9.53-4.77-13.45-16.81-33.62-28-57.73-28-42,0-75.1,34.47-75.1,78.19,0,43.43,33.07,77.9,75.1,77.9,24.11,0,44.28-11.21,57.73-27.74,3.09-3.08,6.45-4.76,9.53-4.76a11.72,11.72,0,0,1,12,11.77,12.2,12.2,0,0,1-3.36,8.12,97.56,97.56,0,0,1-75.95,35.59C402.84,249.19,358.84,204.64,358.84,148.31Z"
fill="#f77160"
/>
<path
d="M556.69,174.93c0-41.48,31.95-74.26,74-74.26s73.71,32.78,73.71,74.26-31.67,74.26-73.71,74.26S556.69,216.41,556.69,174.93Zm125,0c0-29.71-22.14-53.53-51-53.53s-51.28,23.82-51.28,53.53c0,29.42,22.42,53.53,51.28,53.53S681.68,204.35,681.68,174.93Z"
fill="#f77160"
/>
<path
d="M729.87,161.2c0-36.15,23-60.53,57.73-60.53A10.34,10.34,0,0,1,798,111,10.52,10.52,0,0,1,787.6,121.4c-20.73,0-35.31,13.74-35.31,39.8v75.94a11.3,11.3,0,0,1-11.21,11.49,11.13,11.13,0,0,1-11.21-11.49Z"
fill="#f77160"
/>
<path
d="M928.84,226.77a70.75,70.75,0,0,1-52.4,22.42c-41.2,0-72.59-32.78-72.59-74.26s31.39-74.26,72.59-74.26a71.84,71.84,0,0,1,52.4,22.41V112.43a11.25,11.25,0,0,1,11.21-11.21,11.07,11.07,0,0,1,11.21,11.21V237.14a11.13,11.13,0,0,1-11.21,11.49,11.31,11.31,0,0,1-11.21-11.49Zm0-49.6v-4.48c-1.12-29.15-23.26-51.29-51-51.29-28.59,0-51.29,23.26-51.29,53.53s22.7,53.53,51.29,53.53C905.58,228.46,927.72,206.32,928.84,177.17Z"
fill="#f77160"
/>
<path
d="M988.81,59.19A11.06,11.06,0,0,1,1000,48a11.24,11.24,0,0,1,11.21,11.21v178A11.3,11.3,0,0,1,1000,248.63a11.13,11.13,0,0,1-11.21-11.49Z"
fill="#f77160"
/>
<path
d="M279.85,193.46a9.61,9.61,0,0,0-12.58,5.1A129,129,0,0,1,157.9,277.07V253.94a37.3,37.3,0,0,1,1.77-3.66c6-10.78,17.19-16.92,30.15-24,14.75-8.1,31.47-17.28,41.68-35.46a9.6,9.6,0,0,0-16.74-9.4c-7.52,13.39-20.47,20.51-34.18,28-7.77,4.26-15.68,8.62-22.68,14.22V209.83c0-19.74,13.07-31,29.61-45.23,20.16-17.36,43-37,43-76.47a9.6,9.6,0,0,0-19.2,0c0,19.54-7.18,32.79-17.23,44-9.82-13.55-16.64-31.08-16.64-44a9.6,9.6,0,0,0-19.2,0c0,17.84,8.74,40.29,21.9,57.45L175,150.06c-9.75,8.39-19.67,16.95-26.67,27.64-7-10.69-16.93-19.25-26.68-27.64l-5.17-4.48c13.16-17.16,21.9-39.6,21.9-57.45a9.6,9.6,0,0,0-19.2,0c0,12.94-6.82,30.46-16.63,44-10.06-11.22-17.24-24.47-17.24-44a9.6,9.6,0,0,0-19.2,0c0,39.43,22.85,59.11,43,76.47,16.53,14.24,29.6,25.49,29.6,45.23v13.82c-7-5.61-14.92-10-22.7-14.23-13.71-7.53-26.66-14.65-34.18-28a9.59,9.59,0,0,0-16.73,9.4C75.3,209,92,218.14,106.77,226.24c13,7.12,24.16,13.26,30.15,24a37,37,0,0,1,1.79,3.7v23.09A129.07,129.07,0,0,1,57,57a129.19,129.19,0,0,1,210.26,41A9.6,9.6,0,0,0,285,90.58a148.38,148.38,0,0,0-273.29,0A148.3,148.3,0,0,0,253.17,253.17,147.66,147.66,0,0,0,285,206,9.59,9.59,0,0,0,279.85,193.46Z"
fill="#f77160"
/>
</svg>
</div>
</div>
</div>
@@ -211,6 +236,11 @@ exports[`renders form 1`] = `
</form>
</div>
</div>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary Version-version"
>
vTest
</p>
</div>
`;
@@ -231,62 +261,87 @@ exports[`renders missing the token 1`] = `
<div
className="InviteLayout-logoContainer"
>
<div
className="Box-root Flex-root Logo-root Flex-flex Flex-alignCenter"
<h1
aria-hidden={true}
className="LogoHorizontal-hiddenTitle"
>
<svg
className="BrandIcon-base Logo-icon BrandIcon-md"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 541.77 557.72"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath
id="clip-path"
>
<rect
fill="none"
height="570"
width="554"
/>
</clipPath>
<clipPath
id="clip-path-2"
transform="translate(-8.12 -8.14)"
>
<path
clipPath="url(#clip-path)"
clipRule="evenodd"
d="M61.63,350.45c-.67,10.22,1.34,21.13,6,32.21a95.36,95.36,0,0,0,27.22,36.41c26,21.16,52.14,17.65,77.43,14.24,21.22-2.85,43.17-5.8,69,5.43,33.54,14.57,59.71,45.39,66.65,78.46a99.16,99.16,0,0,1,.11,38.66H219.65a16.89,16.89,0,0,0-.71-2.44c-16.54-44.09-38.46-69.52-67.09-77.78-9.37-2.66-18-3-25.68-3.27-9.91-.37-17.75-.66-26-5.6s-14.93-13.28-19.59-24.42a17,17,0,0,0-22.12-9.07,16.69,16.69,0,0,0-9.17,21.88c7.45,17.8,18.6,31.31,33.25,40.21,15.85,9.48,30.54,10,42.35,10.48,6.55.24,12.2.45,17.55,2,15.64,4.51,29.43,20.65,41.07,48H63.07a45,45,0,0,1-44.95-45V322.78a144.51,144.51,0,0,0,43.51,27.67Zm13-31.55a109.22,109.22,0,0,1-56.48-52.22v-66a88.41,88.41,0,0,0,35.59,10.37c18.52,1.13,34.77-4.64,47-16.71,11.63-11.51,14.6-24.24,18.05-39,2.88-12.32,6.46-27.66,16.66-48.7,10.44-21.72,17.13-30,24.69-30.51,11-.79,29.3,13.46,32.09,34.75,2,14.93-3.58,25.14-10.07,37C175,161,166,177.28,172.4,198.15c6.81,22.16,25.44,31.45,40.4,38.91,15.61,7.78,25.42,13.21,30.37,26.2,4.26,11.27,4.87,27.9-.71,33.32-3.74,3.66-16.43.64-29.86-2.55-23-5.47-54.5-12.95-91.49-1.57-9.77,3-32.07,9.72-46.51,26.44ZM357.73,18.14c-15,17.37-28.76,40.23-34.85,69-4.25,19.33-13.09,59.57,13.51,88.26A71.68,71.68,0,0,0,388.11,198a61.12,61.12,0,0,0,22.65-4.23c31.63-12.61,46.84-43.4,49.25-56.36,3.24-17.51,5-35.76,6.33-51.32a11.43,11.43,0,0,1,5.38-8.61l.5-.31a12.23,12.23,0,0,1,13.33,1.63c19.82,16.56,36.73,31.82,51.69,46.63a17.07,17.07,0,0,0,2.64,2.14v93.21a16.92,16.92,0,0,0-3.87,4.69c-9.23,16.43-23.71,36.42-40.11,38.31-6.55.7-10.3-1.49-20.21-7.9S452.37,240.8,431,236c-23.2-5.22-38.56-2.06-50.9.48-10.61,2.18-17.62,3.62-28.9,0-27.43-9-42.31-36.22-51.21-52.47l-.24-.45c-19.81-36.54-18.23-71.85-16.84-103l0-.58a287.16,287.16,0,0,1,9.81-61.77Zm49.14,0h88.06a45,45,0,0,1,44.95,45V80.79c-10.08-9.22-21-18.69-32.79-28.58a45.72,45.72,0,0,0-50.93-5.38,19.1,19.1,0,0,0-2.55,1.52,46.1,46.1,0,0,0-21,34.46,1.49,1.49,0,0,0,0,.21c-1.24,14.7-2.91,31.88-5.86,47.9-.88,3.66-9.12,23.11-28.33,30.76-12.81,5.1-29.11-1.09-37.41-10-14.22-15.33-8.26-42.48-5-57.19C363.43,59.29,386.3,35,404.17,20.82a18,18,0,0,0,2.7-2.68Zm-149.42,0a319.88,319.88,0,0,0-8.67,60.21l0,.62c-1.43,32-3.38,75.91,21,120.82l.28.52c9.81,17.93,30.25,55.25,70.55,68.52,19.95,6.48,34,3.59,46.44,1,11-2.26,20.48-4.21,36.49-.61,15.43,3.48,24.69,9.46,33.63,15.25C467,290.87,478,298,493.8,298a54,54,0,0,0,5.86-.32c14.5-1.67,27.83-8.41,40.22-20.42v45.53a179.81,179.81,0,0,1-47.68.48c-17-2.18-28.9-6.21-40.39-10.1-16.13-5.46-31.37-10.63-54.46-8.79-12.34.86-49.5,3.52-68.67,32.46-21.27,32-4.79,71.47-1.27,79.05,0,.06,0,.11.07.17,11.15,23.37,28,33.16,44.25,42.63,9.57,5.57,19.46,11.33,29.45,20.4C421,497.23,435.05,523,443,555.86H342.61a132,132,0,0,0-1.29-45.63c-9.16-43.62-43.1-84-86.46-102.82-34.51-15-63.68-11.11-87.12-8-24.18,3.25-37.44,4.42-51.35-6.91-15-12.14-24-32.83-19.67-45.1,4.74-13.34,25.44-19.62,34.35-22.32,28.19-8.67,52.33-2.93,73.64,2.14,21.83,5.18,44.4,10.55,61.57-6.21,17.7-17.22,17-48.29,8.81-69.92-10-26.15-30.53-36.41-47.06-44.65-13.09-6.53-20.6-10.6-23-18.37-2-6.43.36-11.62,7-23.75,7.41-13.48,17.55-31.93,14-58-4.77-36.43-36.65-66.5-68.28-64.3-30.19,2.1-44.53,32-53.08,49.73-11.83,24.42-16.07,42.54-19.16,55.78-2.9,12.39-4.37,18.06-8.79,22.43-5.21,5.13-12.26,7.47-21,6.93-13-.8-27.57-8-37.68-18.45V63.15a45,45,0,0,1,45-45Zm282.43,449v43.76a45,45,0,0,1-44.95,45H477.46a16.09,16.09,0,0,0-.36-2.56c-4.89-22.41-12.24-42.37-22-59.73a120.79,120.79,0,0,1,39-21,119.51,119.51,0,0,1,45.77-5.45Zm0-34.82a152.6,152.6,0,0,0-56,7.12,154.85,154.85,0,0,0-48.66,25.94,153.26,153.26,0,0,0-11.29-11.5c-12.68-11.52-24.67-18.5-35.24-24.65-14.45-8.41-24-14-30.62-27.78-.87-1.9-12.66-28.42-1.23-45.62,10-15.1,33.94-16.77,42.95-17.4l.17,0c16.24-1.3,26.66,2.23,41.07,7.11,12.45,4.22,26.57,9,46.95,11.61a212.66,212.66,0,0,0,51.92.08v75.11Z"
fill="none"
/>
</clipPath>
</defs>
<title>
logo mark2018
</title>
<g
clipPath="url(#clip-path-2)"
>
<rect
fill="#f7705f"
height="557.72"
width="541.77"
/>
</g>
</svg>
<h1
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignLeft BrandName-root BrandName-md"
>
Coral
</h1>
</div>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary Version-version"
Coral
</h1>
<svg
className="LogoHorizontal-base"
data-name="Layer 1"
id="Layer_1"
viewBox="0 0 1011.23 388.38"
xmlns="http://www.w3.org/2000/svg"
>
vTest
</p>
<title>
Coral by Vox Media
</title>
<path
d="M471.21,341.35l10.17,29.78L488,351.31c1.13-3.39,2.16-6.78,3.08-9.65h13.66L491.14,375c-2.16,5.45-3.5,8.63-4.73,12.33l-10.27.61-13.55-32.86c-1.65-4.11-3.7-9.24-5.55-13.25Z"
fill="#f77160"
/>
<path
d="M534.88,340.63c-14.27,0-23.82,10.68-23.82,25.06,0,12.53,9,22.69,22.69,22.69,14.17,0,23.83-10.68,23.83-25.05C557.58,350.7,548.54,340.63,534.88,340.63Zm-.72,37.59c-6.16,0-10.57-5.34-10.57-14,0-7.39,4.21-13.55,10.78-13.55,6.16,0,10.58,5.34,10.58,14C545,372.16,540.74,378.22,534.16,378.22Z"
fill="#f77160"
/>
<path
d="M564.66,387.15l15.71-23.31-6.16-9-8.83-13,14.28-.51L589,355.83l3.18-5.44c1.65-2.67,3.91-6.27,5.55-8.83H611.8l-15,22.49,5.54,8.11c2.57,3.9,7,10.58,9.86,14.79l-14.38.51L588.28,372l-3,4.83c-1.43,2.36-4.51,7.39-6.26,10.06H564.66Z"
fill="#f77160"
/>
<path
d="M646.2,371.54l1.95-14.27c.62-4.11,1.64-12.32,1.85-15.71l9.86-.41c1.13,2.56,2.77,6.26,4.11,9.14L672.39,369l8.21-19c1.23-2.78,2.67-6.16,3.8-8.73H694c.41,3.8,1.44,11.81,2.06,16l2,14.27c.62,4.21,1.85,12.22,2.57,15.61l-12.74.52c-.1-1.85-.72-7.3-1.13-9.86l-1.84-14.38c-3.19,7.91-8.84,22-9.66,24.24l-6.78.3-9.75-23.92-1.54,13.86c-.31,2.57-.82,7.5-.82,9.34H643.63C644.45,383.87,645.58,375.75,646.2,371.54Z"
fill="#f77160"
/>
<path
d="M745,387.46c-4.31-.31-9.55-.31-14.58-.31-5.65,0-11.81.1-16.64.31.31-3.08.41-11.6.41-15.81V357.27c0-4.11-.1-12.84-.41-16,4.73.2,9.86.31,15.71.31,5.34,0,10.27-.11,14.69-.31a101.86,101.86,0,0,0-.51,10.27c-3.29-.1-6.58-.1-10.58-.1-2,0-4.11,0-6,.1-.1.92-.1,2.26-.1,2.87v5l14.07-.11c-.1,2.67-.21,5.65-.21,9H727v5.85c0,.72,0,2.06.1,3,1.85,0,4,.1,6,.1,4.62,0,8.52-.1,12.32-.2C745.09,380.37,745,383.45,745,387.46Z"
fill="#f77160"
/>
<path
d="M774.05,341.35c-7.19,0-12.94.41-15.3.41.31,3.19.41,11.4.41,15.51v14.27c0,4.21-.1,12.53-.41,15.61h17c15.2,0,24.85-9.14,25-23.72C800.75,349.57,791.2,341.35,774.05,341.35Zm1.64,35.94a28.92,28.92,0,0,1-3.38-.2,22.58,22.58,0,0,1-.11-2.67V354.29a25.92,25.92,0,0,1,.11-2.87,25.76,25.76,0,0,1,3.18-.21c7.8,0,12.53,4.62,12.53,12.73C788,371.65,784.32,377.29,775.69,377.29Z"
fill="#f77160"
/>
<path
d="M813.69,387.15c.31-3.08.41-11.4.41-15.61V357.27c0-4.11-.1-12.53-.41-15.61,2.57,0,11.61-.1,13.76-.31-.2,1.85-.31,7.09-.31,9.55v26.91c0,2.46.11,7.49.31,9.34Z"
fill="#f77160"
/>
<path
d="M882.39,374l-14.17-32.86-10.37.61c-1.23,3.6-2.77,7-5,12.33l-14.07,33.16H852.2c.41-.82,2.26-5.95,3.08-8.11H871.1l3.49,8.63,13.76-.52C886.5,383.25,884,378,882.39,374Zm-24.54-3L863,357,868.22,371Z"
fill="#f77160"
/>
<path
d="M384.61,375.13c0,6.54-4.55,10-11.82,10H359.44V350.25h12.22c7.27,0,11.81,3.24,11.81,9.49,0,3.75-2,6.47-4.54,7.38A8.45,8.45,0,0,1,384.61,375.13Zm-13-10.22c4,0,6.19-1.54,6.19-4.83s-2.16-4.72-6.19-4.72h-6.42v9.55ZM365.18,380h7.5c4,0,6.13-2,6.13-5.12s-2.15-5.11-6.13-5.11h-7.5Z"
fill="#f77160"
/>
<path
d="M415.76,350.25H422l-12.67,21v13.92h-5.85V371.21l-12.62-21h6.42l9.26,15.62Z"
fill="#f77160"
/>
<path
d="M358.84,148.31c0-56.33,44-100.89,99.76-100.89a98.22,98.22,0,0,1,75.95,35.31,12.88,12.88,0,0,1,3.36,8.41,11.9,11.9,0,0,1-12,11.77c-3.08,0-6.44-2-9.53-4.77-13.45-16.81-33.62-28-57.73-28-42,0-75.1,34.47-75.1,78.19,0,43.43,33.07,77.9,75.1,77.9,24.11,0,44.28-11.21,57.73-27.74,3.09-3.08,6.45-4.76,9.53-4.76a11.72,11.72,0,0,1,12,11.77,12.2,12.2,0,0,1-3.36,8.12,97.56,97.56,0,0,1-75.95,35.59C402.84,249.19,358.84,204.64,358.84,148.31Z"
fill="#f77160"
/>
<path
d="M556.69,174.93c0-41.48,31.95-74.26,74-74.26s73.71,32.78,73.71,74.26-31.67,74.26-73.71,74.26S556.69,216.41,556.69,174.93Zm125,0c0-29.71-22.14-53.53-51-53.53s-51.28,23.82-51.28,53.53c0,29.42,22.42,53.53,51.28,53.53S681.68,204.35,681.68,174.93Z"
fill="#f77160"
/>
<path
d="M729.87,161.2c0-36.15,23-60.53,57.73-60.53A10.34,10.34,0,0,1,798,111,10.52,10.52,0,0,1,787.6,121.4c-20.73,0-35.31,13.74-35.31,39.8v75.94a11.3,11.3,0,0,1-11.21,11.49,11.13,11.13,0,0,1-11.21-11.49Z"
fill="#f77160"
/>
<path
d="M928.84,226.77a70.75,70.75,0,0,1-52.4,22.42c-41.2,0-72.59-32.78-72.59-74.26s31.39-74.26,72.59-74.26a71.84,71.84,0,0,1,52.4,22.41V112.43a11.25,11.25,0,0,1,11.21-11.21,11.07,11.07,0,0,1,11.21,11.21V237.14a11.13,11.13,0,0,1-11.21,11.49,11.31,11.31,0,0,1-11.21-11.49Zm0-49.6v-4.48c-1.12-29.15-23.26-51.29-51-51.29-28.59,0-51.29,23.26-51.29,53.53s22.7,53.53,51.29,53.53C905.58,228.46,927.72,206.32,928.84,177.17Z"
fill="#f77160"
/>
<path
d="M988.81,59.19A11.06,11.06,0,0,1,1000,48a11.24,11.24,0,0,1,11.21,11.21v178A11.3,11.3,0,0,1,1000,248.63a11.13,11.13,0,0,1-11.21-11.49Z"
fill="#f77160"
/>
<path
d="M279.85,193.46a9.61,9.61,0,0,0-12.58,5.1A129,129,0,0,1,157.9,277.07V253.94a37.3,37.3,0,0,1,1.77-3.66c6-10.78,17.19-16.92,30.15-24,14.75-8.1,31.47-17.28,41.68-35.46a9.6,9.6,0,0,0-16.74-9.4c-7.52,13.39-20.47,20.51-34.18,28-7.77,4.26-15.68,8.62-22.68,14.22V209.83c0-19.74,13.07-31,29.61-45.23,20.16-17.36,43-37,43-76.47a9.6,9.6,0,0,0-19.2,0c0,19.54-7.18,32.79-17.23,44-9.82-13.55-16.64-31.08-16.64-44a9.6,9.6,0,0,0-19.2,0c0,17.84,8.74,40.29,21.9,57.45L175,150.06c-9.75,8.39-19.67,16.95-26.67,27.64-7-10.69-16.93-19.25-26.68-27.64l-5.17-4.48c13.16-17.16,21.9-39.6,21.9-57.45a9.6,9.6,0,0,0-19.2,0c0,12.94-6.82,30.46-16.63,44-10.06-11.22-17.24-24.47-17.24-44a9.6,9.6,0,0,0-19.2,0c0,39.43,22.85,59.11,43,76.47,16.53,14.24,29.6,25.49,29.6,45.23v13.82c-7-5.61-14.92-10-22.7-14.23-13.71-7.53-26.66-14.65-34.18-28a9.59,9.59,0,0,0-16.73,9.4C75.3,209,92,218.14,106.77,226.24c13,7.12,24.16,13.26,30.15,24a37,37,0,0,1,1.79,3.7v23.09A129.07,129.07,0,0,1,57,57a129.19,129.19,0,0,1,210.26,41A9.6,9.6,0,0,0,285,90.58a148.38,148.38,0,0,0-273.29,0A148.3,148.3,0,0,0,253.17,253.17,147.66,147.66,0,0,0,285,206,9.59,9.59,0,0,0,279.85,193.46Z"
fill="#f77160"
/>
</svg>
</div>
</div>
</div>
@@ -316,5 +371,10 @@ exports[`renders missing the token 1`] = `
</div>
</div>
</div>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary Version-version"
>
vTest
</p>
</div>
`;
src/core/client/ui/components/AppBar/AppBar.css
+1 -1
View File
@@ -6,7 +6,7 @@
.container {
max-width: 1280px;
margin: 0 auto;
height: calc(7 * var(--mini-unit));
height: calc(8 * var(--mini-unit));
box-sizing: border-box;
}
src/core/client/ui/components/Brand/BrandIcon.spec.tsx
-16
View File
@@ -1,16 +0,0 @@
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { PropTypesOf } from "coral-framework/types";
import BrandIcon from "./BrandIcon";
it("renders correctly", () => {
const props: PropTypesOf<typeof BrandIcon> = {
className: "custom",
size: "lg",
};
const renderer = createRenderer();
renderer.render(<BrandIcon {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/ui/components/Brand/BrandIcon.tsx
-54
View File
@@ -1,54 +0,0 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { withStyles } from "coral-ui/hocs";
import styles from "./BrandIcon.css";
interface Props {
className?: string;
classes: typeof styles;
size?: "md" | "lg";
}
const BrandIcon: FunctionComponent<Props> = ({
className,
classes,
size,
...rest
}) => (
<svg
{...rest}
className={cn(classes.base, className, {
[classes.md]: size === "md",
[classes.lg]: size === "lg",
})}
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 541.77 557.72"
>
<defs>
<clipPath id="clip-path">
<rect width="554" height="570" fill="none" />
</clipPath>
<clipPath id="clip-path-2" transform="translate(-8.12 -8.14)">
<path
d="M61.63,350.45c-.67,10.22,1.34,21.13,6,32.21a95.36,95.36,0,0,0,27.22,36.41c26,21.16,52.14,17.65,77.43,14.24,21.22-2.85,43.17-5.8,69,5.43,33.54,14.57,59.71,45.39,66.65,78.46a99.16,99.16,0,0,1,.11,38.66H219.65a16.89,16.89,0,0,0-.71-2.44c-16.54-44.09-38.46-69.52-67.09-77.78-9.37-2.66-18-3-25.68-3.27-9.91-.37-17.75-.66-26-5.6s-14.93-13.28-19.59-24.42a17,17,0,0,0-22.12-9.07,16.69,16.69,0,0,0-9.17,21.88c7.45,17.8,18.6,31.31,33.25,40.21,15.85,9.48,30.54,10,42.35,10.48,6.55.24,12.2.45,17.55,2,15.64,4.51,29.43,20.65,41.07,48H63.07a45,45,0,0,1-44.95-45V322.78a144.51,144.51,0,0,0,43.51,27.67Zm13-31.55a109.22,109.22,0,0,1-56.48-52.22v-66a88.41,88.41,0,0,0,35.59,10.37c18.52,1.13,34.77-4.64,47-16.71,11.63-11.51,14.6-24.24,18.05-39,2.88-12.32,6.46-27.66,16.66-48.7,10.44-21.72,17.13-30,24.69-30.51,11-.79,29.3,13.46,32.09,34.75,2,14.93-3.58,25.14-10.07,37C175,161,166,177.28,172.4,198.15c6.81,22.16,25.44,31.45,40.4,38.91,15.61,7.78,25.42,13.21,30.37,26.2,4.26,11.27,4.87,27.9-.71,33.32-3.74,3.66-16.43.64-29.86-2.55-23-5.47-54.5-12.95-91.49-1.57-9.77,3-32.07,9.72-46.51,26.44ZM357.73,18.14c-15,17.37-28.76,40.23-34.85,69-4.25,19.33-13.09,59.57,13.51,88.26A71.68,71.68,0,0,0,388.11,198a61.12,61.12,0,0,0,22.65-4.23c31.63-12.61,46.84-43.4,49.25-56.36,3.24-17.51,5-35.76,6.33-51.32a11.43,11.43,0,0,1,5.38-8.61l.5-.31a12.23,12.23,0,0,1,13.33,1.63c19.82,16.56,36.73,31.82,51.69,46.63a17.07,17.07,0,0,0,2.64,2.14v93.21a16.92,16.92,0,0,0-3.87,4.69c-9.23,16.43-23.71,36.42-40.11,38.31-6.55.7-10.3-1.49-20.21-7.9S452.37,240.8,431,236c-23.2-5.22-38.56-2.06-50.9.48-10.61,2.18-17.62,3.62-28.9,0-27.43-9-42.31-36.22-51.21-52.47l-.24-.45c-19.81-36.54-18.23-71.85-16.84-103l0-.58a287.16,287.16,0,0,1,9.81-61.77Zm49.14,0h88.06a45,45,0,0,1,44.95,45V80.79c-10.08-9.22-21-18.69-32.79-28.58a45.72,45.72,0,0,0-50.93-5.38,19.1,19.1,0,0,0-2.55,1.52,46.1,46.1,0,0,0-21,34.46,1.49,1.49,0,0,0,0,.21c-1.24,14.7-2.91,31.88-5.86,47.9-.88,3.66-9.12,23.11-28.33,30.76-12.81,5.1-29.11-1.09-37.41-10-14.22-15.33-8.26-42.48-5-57.19C363.43,59.29,386.3,35,404.17,20.82a18,18,0,0,0,2.7-2.68Zm-149.42,0a319.88,319.88,0,0,0-8.67,60.21l0,.62c-1.43,32-3.38,75.91,21,120.82l.28.52c9.81,17.93,30.25,55.25,70.55,68.52,19.95,6.48,34,3.59,46.44,1,11-2.26,20.48-4.21,36.49-.61,15.43,3.48,24.69,9.46,33.63,15.25C467,290.87,478,298,493.8,298a54,54,0,0,0,5.86-.32c14.5-1.67,27.83-8.41,40.22-20.42v45.53a179.81,179.81,0,0,1-47.68.48c-17-2.18-28.9-6.21-40.39-10.1-16.13-5.46-31.37-10.63-54.46-8.79-12.34.86-49.5,3.52-68.67,32.46-21.27,32-4.79,71.47-1.27,79.05,0,.06,0,.11.07.17,11.15,23.37,28,33.16,44.25,42.63,9.57,5.57,19.46,11.33,29.45,20.4C421,497.23,435.05,523,443,555.86H342.61a132,132,0,0,0-1.29-45.63c-9.16-43.62-43.1-84-86.46-102.82-34.51-15-63.68-11.11-87.12-8-24.18,3.25-37.44,4.42-51.35-6.91-15-12.14-24-32.83-19.67-45.1,4.74-13.34,25.44-19.62,34.35-22.32,28.19-8.67,52.33-2.93,73.64,2.14,21.83,5.18,44.4,10.55,61.57-6.21,17.7-17.22,17-48.29,8.81-69.92-10-26.15-30.53-36.41-47.06-44.65-13.09-6.53-20.6-10.6-23-18.37-2-6.43.36-11.62,7-23.75,7.41-13.48,17.55-31.93,14-58-4.77-36.43-36.65-66.5-68.28-64.3-30.19,2.1-44.53,32-53.08,49.73-11.83,24.42-16.07,42.54-19.16,55.78-2.9,12.39-4.37,18.06-8.79,22.43-5.21,5.13-12.26,7.47-21,6.93-13-.8-27.57-8-37.68-18.45V63.15a45,45,0,0,1,45-45Zm282.43,449v43.76a45,45,0,0,1-44.95,45H477.46a16.09,16.09,0,0,0-.36-2.56c-4.89-22.41-12.24-42.37-22-59.73a120.79,120.79,0,0,1,39-21,119.51,119.51,0,0,1,45.77-5.45Zm0-34.82a152.6,152.6,0,0,0-56,7.12,154.85,154.85,0,0,0-48.66,25.94,153.26,153.26,0,0,0-11.29-11.5c-12.68-11.52-24.67-18.5-35.24-24.65-14.45-8.41-24-14-30.62-27.78-.87-1.9-12.66-28.42-1.23-45.62,10-15.1,33.94-16.77,42.95-17.4l.17,0c16.24-1.3,26.66,2.23,41.07,7.11,12.45,4.22,26.57,9,46.95,11.61a212.66,212.66,0,0,0,51.92.08v75.11Z"
fill="none"
clipPath="url(#clip-path)"
clipRule="evenodd"
/>
</clipPath>
</defs>
<title>logo mark2018</title>
<g clipPath="url(#clip-path-2)">
<rect width="541.77" height="557.72" fill="#f7705f" />
</g>
</svg>
);
BrandIcon.defaultProps = {
size: "md",
};
export default withStyles(styles)(BrandIcon);
src/core/client/ui/components/Brand/BrandIcon.css → src/core/client/ui/components/Brand/BrandMark.css
View File
src/core/client/ui/components/Brand/BrandMark.tsx
+44
View File
@@ -0,0 +1,44 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { withStyles } from "coral-ui/hocs";
import styles from "./BrandMark.css";
interface Props {
className?: string;
classes: typeof styles;
size?: "md" | "lg";
fill?: string;
}
const BrandMark: FunctionComponent<Props> = ({
className,
classes,
size,
fill,
...rest
}) => (
<svg
{...rest}
className={cn(classes.base, className, {
[classes.md]: size === "md",
[classes.lg]: size === "lg",
})}
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 520.96 540.83"
>
<path
fill={fill}
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"
/>
</svg>
);
BrandMark.defaultProps = {
size: "md",
fill: "#f77160",
};
export default withStyles(styles)(BrandMark);
src/core/client/ui/components/Brand/Logo.css
-6
View File
@@ -1,6 +0,0 @@
.root {
}
.icon {
margin-right: var(--mini-unit);
}
src/core/client/ui/components/Brand/Logo.spec.tsx
-15
View File
@@ -1,15 +0,0 @@
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { PropTypesOf } from "coral-framework/types";
import Logo from "./Logo";
it("renders correctly", () => {
const props: PropTypesOf<typeof Logo> = {
className: "custom",
};
const renderer = createRenderer();
renderer.render(<Logo {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/ui/components/Brand/Logo.tsx
-24
View File
@@ -1,24 +0,0 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { Flex } from "coral-ui/components";
import { withStyles } from "coral-ui/hocs";
import BrandIcon from "./BrandIcon";
import BrandName from "./BrandName";
import styles from "./Logo.css";
interface Props {
className?: string;
classes: typeof styles;
}
const Logo: FunctionComponent<Props> = ({ className, classes, ...rest }) => (
<Flex {...rest} alignItems="center" className={cn(classes.root, className)}>
<BrandIcon className={classes.icon} />
<BrandName />
</Flex>
);
export default withStyles(styles)(Logo);
src/core/client/ui/components/Brand/LogoHorizontal.css
+14
View File
@@ -0,0 +1,14 @@
.base {
height: 34px;
width: 89px;
}
.hiddenTitle {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
src/core/client/ui/components/Brand/LogoHorizontal.tsx
+105
View File
@@ -0,0 +1,105 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { withStyles } from "coral-ui/hocs";
import styles from "./LogoHorizontal.css";
interface Props {
className?: string;
classes: typeof styles;
fill?: string;
}
const LogoHorizontal: FunctionComponent<Props> = ({
className,
classes,
fill,
...rest
}) => (
<>
<Localized id="ui-brandName">
<h1 aria-hidden className={styles.hiddenTitle}>
Coral
</h1>
</Localized>
<svg
id="Layer_1"
className={styles.base}
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1011.23 388.38"
>
<title>Coral by Vox Media</title>
<path
fill={fill}
d="M471.21,341.35l10.17,29.78L488,351.31c1.13-3.39,2.16-6.78,3.08-9.65h13.66L491.14,375c-2.16,5.45-3.5,8.63-4.73,12.33l-10.27.61-13.55-32.86c-1.65-4.11-3.7-9.24-5.55-13.25Z"
/>
<path
fill={fill}
d="M534.88,340.63c-14.27,0-23.82,10.68-23.82,25.06,0,12.53,9,22.69,22.69,22.69,14.17,0,23.83-10.68,23.83-25.05C557.58,350.7,548.54,340.63,534.88,340.63Zm-.72,37.59c-6.16,0-10.57-5.34-10.57-14,0-7.39,4.21-13.55,10.78-13.55,6.16,0,10.58,5.34,10.58,14C545,372.16,540.74,378.22,534.16,378.22Z"
/>
<path
fill={fill}
d="M564.66,387.15l15.71-23.31-6.16-9-8.83-13,14.28-.51L589,355.83l3.18-5.44c1.65-2.67,3.91-6.27,5.55-8.83H611.8l-15,22.49,5.54,8.11c2.57,3.9,7,10.58,9.86,14.79l-14.38.51L588.28,372l-3,4.83c-1.43,2.36-4.51,7.39-6.26,10.06H564.66Z"
/>
<path
fill={fill}
d="M646.2,371.54l1.95-14.27c.62-4.11,1.64-12.32,1.85-15.71l9.86-.41c1.13,2.56,2.77,6.26,4.11,9.14L672.39,369l8.21-19c1.23-2.78,2.67-6.16,3.8-8.73H694c.41,3.8,1.44,11.81,2.06,16l2,14.27c.62,4.21,1.85,12.22,2.57,15.61l-12.74.52c-.1-1.85-.72-7.3-1.13-9.86l-1.84-14.38c-3.19,7.91-8.84,22-9.66,24.24l-6.78.3-9.75-23.92-1.54,13.86c-.31,2.57-.82,7.5-.82,9.34H643.63C644.45,383.87,645.58,375.75,646.2,371.54Z"
/>
<path
fill={fill}
d="M745,387.46c-4.31-.31-9.55-.31-14.58-.31-5.65,0-11.81.1-16.64.31.31-3.08.41-11.6.41-15.81V357.27c0-4.11-.1-12.84-.41-16,4.73.2,9.86.31,15.71.31,5.34,0,10.27-.11,14.69-.31a101.86,101.86,0,0,0-.51,10.27c-3.29-.1-6.58-.1-10.58-.1-2,0-4.11,0-6,.1-.1.92-.1,2.26-.1,2.87v5l14.07-.11c-.1,2.67-.21,5.65-.21,9H727v5.85c0,.72,0,2.06.1,3,1.85,0,4,.1,6,.1,4.62,0,8.52-.1,12.32-.2C745.09,380.37,745,383.45,745,387.46Z"
/>
<path
fill={fill}
d="M774.05,341.35c-7.19,0-12.94.41-15.3.41.31,3.19.41,11.4.41,15.51v14.27c0,4.21-.1,12.53-.41,15.61h17c15.2,0,24.85-9.14,25-23.72C800.75,349.57,791.2,341.35,774.05,341.35Zm1.64,35.94a28.92,28.92,0,0,1-3.38-.2,22.58,22.58,0,0,1-.11-2.67V354.29a25.92,25.92,0,0,1,.11-2.87,25.76,25.76,0,0,1,3.18-.21c7.8,0,12.53,4.62,12.53,12.73C788,371.65,784.32,377.29,775.69,377.29Z"
/>
<path
fill={fill}
d="M813.69,387.15c.31-3.08.41-11.4.41-15.61V357.27c0-4.11-.1-12.53-.41-15.61,2.57,0,11.61-.1,13.76-.31-.2,1.85-.31,7.09-.31,9.55v26.91c0,2.46.11,7.49.31,9.34Z"
/>
<path
fill={fill}
d="M882.39,374l-14.17-32.86-10.37.61c-1.23,3.6-2.77,7-5,12.33l-14.07,33.16H852.2c.41-.82,2.26-5.95,3.08-8.11H871.1l3.49,8.63,13.76-.52C886.5,383.25,884,378,882.39,374Zm-24.54-3L863,357,868.22,371Z"
/>
<path
fill={fill}
d="M384.61,375.13c0,6.54-4.55,10-11.82,10H359.44V350.25h12.22c7.27,0,11.81,3.24,11.81,9.49,0,3.75-2,6.47-4.54,7.38A8.45,8.45,0,0,1,384.61,375.13Zm-13-10.22c4,0,6.19-1.54,6.19-4.83s-2.16-4.72-6.19-4.72h-6.42v9.55ZM365.18,380h7.5c4,0,6.13-2,6.13-5.12s-2.15-5.11-6.13-5.11h-7.5Z"
/>
<path
fill={fill}
d="M415.76,350.25H422l-12.67,21v13.92h-5.85V371.21l-12.62-21h6.42l9.26,15.62Z"
/>
<path
fill={fill}
d="M358.84,148.31c0-56.33,44-100.89,99.76-100.89a98.22,98.22,0,0,1,75.95,35.31,12.88,12.88,0,0,1,3.36,8.41,11.9,11.9,0,0,1-12,11.77c-3.08,0-6.44-2-9.53-4.77-13.45-16.81-33.62-28-57.73-28-42,0-75.1,34.47-75.1,78.19,0,43.43,33.07,77.9,75.1,77.9,24.11,0,44.28-11.21,57.73-27.74,3.09-3.08,6.45-4.76,9.53-4.76a11.72,11.72,0,0,1,12,11.77,12.2,12.2,0,0,1-3.36,8.12,97.56,97.56,0,0,1-75.95,35.59C402.84,249.19,358.84,204.64,358.84,148.31Z"
/>
<path
fill={fill}
d="M556.69,174.93c0-41.48,31.95-74.26,74-74.26s73.71,32.78,73.71,74.26-31.67,74.26-73.71,74.26S556.69,216.41,556.69,174.93Zm125,0c0-29.71-22.14-53.53-51-53.53s-51.28,23.82-51.28,53.53c0,29.42,22.42,53.53,51.28,53.53S681.68,204.35,681.68,174.93Z"
/>
<path
fill={fill}
d="M729.87,161.2c0-36.15,23-60.53,57.73-60.53A10.34,10.34,0,0,1,798,111,10.52,10.52,0,0,1,787.6,121.4c-20.73,0-35.31,13.74-35.31,39.8v75.94a11.3,11.3,0,0,1-11.21,11.49,11.13,11.13,0,0,1-11.21-11.49Z"
/>
<path
fill={fill}
d="M928.84,226.77a70.75,70.75,0,0,1-52.4,22.42c-41.2,0-72.59-32.78-72.59-74.26s31.39-74.26,72.59-74.26a71.84,71.84,0,0,1,52.4,22.41V112.43a11.25,11.25,0,0,1,11.21-11.21,11.07,11.07,0,0,1,11.21,11.21V237.14a11.13,11.13,0,0,1-11.21,11.49,11.31,11.31,0,0,1-11.21-11.49Zm0-49.6v-4.48c-1.12-29.15-23.26-51.29-51-51.29-28.59,0-51.29,23.26-51.29,53.53s22.7,53.53,51.29,53.53C905.58,228.46,927.72,206.32,928.84,177.17Z"
/>
<path
fill={fill}
d="M988.81,59.19A11.06,11.06,0,0,1,1000,48a11.24,11.24,0,0,1,11.21,11.21v178A11.3,11.3,0,0,1,1000,248.63a11.13,11.13,0,0,1-11.21-11.49Z"
/>
<path
fill={fill}
d="M279.85,193.46a9.61,9.61,0,0,0-12.58,5.1A129,129,0,0,1,157.9,277.07V253.94a37.3,37.3,0,0,1,1.77-3.66c6-10.78,17.19-16.92,30.15-24,14.75-8.1,31.47-17.28,41.68-35.46a9.6,9.6,0,0,0-16.74-9.4c-7.52,13.39-20.47,20.51-34.18,28-7.77,4.26-15.68,8.62-22.68,14.22V209.83c0-19.74,13.07-31,29.61-45.23,20.16-17.36,43-37,43-76.47a9.6,9.6,0,0,0-19.2,0c0,19.54-7.18,32.79-17.23,44-9.82-13.55-16.64-31.08-16.64-44a9.6,9.6,0,0,0-19.2,0c0,17.84,8.74,40.29,21.9,57.45L175,150.06c-9.75,8.39-19.67,16.95-26.67,27.64-7-10.69-16.93-19.25-26.68-27.64l-5.17-4.48c13.16-17.16,21.9-39.6,21.9-57.45a9.6,9.6,0,0,0-19.2,0c0,12.94-6.82,30.46-16.63,44-10.06-11.22-17.24-24.47-17.24-44a9.6,9.6,0,0,0-19.2,0c0,39.43,22.85,59.11,43,76.47,16.53,14.24,29.6,25.49,29.6,45.23v13.82c-7-5.61-14.92-10-22.7-14.23-13.71-7.53-26.66-14.65-34.18-28a9.59,9.59,0,0,0-16.73,9.4C75.3,209,92,218.14,106.77,226.24c13,7.12,24.16,13.26,30.15,24a37,37,0,0,1,1.79,3.7v23.09A129.07,129.07,0,0,1,57,57a129.19,129.19,0,0,1,210.26,41A9.6,9.6,0,0,0,285,90.58a148.38,148.38,0,0,0-273.29,0A148.3,148.3,0,0,0,253.17,253.17,147.66,147.66,0,0,0,285,206,9.59,9.59,0,0,0,279.85,193.46Z"
/>
</svg>
</>
);
LogoHorizontal.defaultProps = {
fill: "#f77160",
};
export default withStyles(styles)(LogoHorizontal);
src/core/client/ui/components/Brand/__snapshots__/BrandIcon.spec.tsx.snap
-15
View File
@@ -1,15 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<BrandIcon
className="custom"
classes={
Object {
"base": "BrandIcon-base",
"lg": "BrandIcon-lg",
"md": "BrandIcon-md",
}
}
size="lg"
/>
`;
src/core/client/ui/components/Brand/__snapshots__/Logo.spec.tsx.snap
-13
View File
@@ -1,13 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<Logo
className="custom"
classes={
Object {
"icon": "Logo-icon",
"root": "Logo-root",
}
}
/>
`;
src/core/client/ui/components/Brand/index.ts
+2 -2
View File
@@ -1,3 +1,3 @@
export { default as BrandIcon } from "./BrandIcon";
export { default as BrandName } from "./BrandName";
export { default as Logo } from "./Logo";
export { default as BrandMark } from "./BrandMark";
export { default as LogoHorizontal } from "./LogoHorizontal";
src/core/client/ui/components/index.ts
+1 -1
View File
@@ -46,7 +46,7 @@ export {
Navigation as SubBarNavigation,
NavigationItem as SubBarNavigationItem,
} from "./SubBar";
export { BrandIcon, BrandName, Logo } from "./Brand";
export { BrandName, BrandMark, LogoHorizontal } from "./Brand";
export { default as Counter } from "./Counter";
export { Marker, Count as MarkerCount } from "./Marker";
export { default as Card, CardCloseButton } from "./Card";