diff --git a/src/core/client/admin/App/Main.tsx b/src/core/client/admin/App/Main.tsx index 71bdaa49a..fa2ba2a5d 100644 --- a/src/core/client/admin/App/Main.tsx +++ b/src/core/client/admin/App/Main.tsx @@ -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 = ({ children, viewer }) => (
- - +
@@ -34,6 +33,7 @@ const Main: FunctionComponent = ({ children, viewer }) => ( {children} + ); diff --git a/src/core/client/admin/App/Version.css b/src/core/client/admin/App/Version.css index f9dd6f125..237804df6 100644 --- a/src/core/client/admin/App/Version.css +++ b/src/core/client/admin/App/Version.css @@ -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); } diff --git a/src/core/client/admin/App/__snapshots__/Main.spec.tsx.snap b/src/core/client/admin/App/__snapshots__/Main.spec.tsx.snap index 2bb59d29c..7a5a9c95f 100644 --- a/src/core/client/admin/App/__snapshots__/Main.spec.tsx.snap +++ b/src/core/client/admin/App/__snapshots__/Main.spec.tsx.snap @@ -14,8 +14,7 @@ exports[`renders correctly 1`] = `
- - +
child + `; diff --git a/src/core/client/admin/components/AuthBox.tsx b/src/core/client/admin/components/AuthBox.tsx index afe0403b0..7599e68b7 100644 --- a/src/core/client/admin/components/AuthBox.tsx +++ b/src/core/client/admin/components/AuthBox.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent } from "react"; import { - BrandIcon, + BrandMark, BrandName, Flex, HorizontalGutter, @@ -22,7 +22,7 @@ const AuthBox: FunctionComponent = ({ 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 9eab086d7..27cf28ad0 100644 --- a/src/core/client/admin/components/__snapshots__/AuthBox.spec.tsx.snap +++ b/src/core/client/admin/components/__snapshots__/AuthBox.spec.tsx.snap @@ -17,7 +17,7 @@ exports[`renders correctly 1`] = `
-
diff --git a/src/core/client/admin/routes/Invite/InviteLayout.tsx b/src/core/client/admin/routes/Invite/InviteLayout.tsx index 9246c7482..48533f0ee 100644 --- a/src/core/client/admin/routes/Invite/InviteLayout.tsx +++ b/src/core/client/admin/routes/Invite/InviteLayout.tsx @@ -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 }) => (
- - +
@@ -24,6 +23,7 @@ const InviteLayout: FunctionComponent = ({ children }) => ( > {children} +
); diff --git a/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap index a7d656e88..2fbcaf048 100644 --- a/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap +++ b/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap @@ -17,46 +17,16 @@ exports[`show restricted screen for commenters and staff 1`] = ` className="AuthBox-brandIcon" > - - - - - - - - - - logo mark2018 - - - - + @@ -152,46 +122,16 @@ exports[`show restricted screen for commenters and staff 2`] = ` className="AuthBox-brandIcon" > - - - - - - - - - - logo mark2018 - - - - + diff --git a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap index 00774f286..d3f29b635 100644 --- a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap +++ b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap @@ -394,46 +394,16 @@ exports[`renders sign in form 1`] = ` className="AuthBox-brandIcon" > - - - - - - - - - - logo mark2018 - - - - + diff --git a/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap b/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap index 8c7b2b9bd..1708f65be 100644 --- a/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap +++ b/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap @@ -17,62 +17,87 @@ exports[`renders form 1`] = `
-
- - - - - - - - - - - logo mark2018 - - - - - -

- Coral -

-
-

+ - vTest -

+ + Coral by Vox Media + + + + + + + + + + + + + + + + + +
@@ -211,6 +236,11 @@ exports[`renders form 1`] = ` +

+ vTest +

`; @@ -231,62 +261,87 @@ exports[`renders missing the token 1`] = `
-
- - - - - - - - - - - logo mark2018 - - - - - -

- Coral -

-
-

+ - vTest -

+ + Coral by Vox Media + + + + + + + + + + + + + + + + + +
@@ -316,5 +371,10 @@ exports[`renders missing the token 1`] = ` +

+ vTest +

`; diff --git a/src/core/client/ui/components/AppBar/AppBar.css b/src/core/client/ui/components/AppBar/AppBar.css index cab7f3420..5b0f7eaf4 100644 --- a/src/core/client/ui/components/AppBar/AppBar.css +++ b/src/core/client/ui/components/AppBar/AppBar.css @@ -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; } diff --git a/src/core/client/ui/components/Brand/BrandIcon.spec.tsx b/src/core/client/ui/components/Brand/BrandIcon.spec.tsx deleted file mode 100644 index 21e36cde8..000000000 --- a/src/core/client/ui/components/Brand/BrandIcon.spec.tsx +++ /dev/null @@ -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 = { - className: "custom", - size: "lg", - }; - const renderer = createRenderer(); - renderer.render(); - expect(renderer.getRenderOutput()).toMatchSnapshot(); -}); diff --git a/src/core/client/ui/components/Brand/BrandIcon.tsx b/src/core/client/ui/components/Brand/BrandIcon.tsx deleted file mode 100644 index 83fabb7b6..000000000 --- a/src/core/client/ui/components/Brand/BrandIcon.tsx +++ /dev/null @@ -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 = ({ - className, - classes, - size, - ...rest -}) => ( - - - - - - - - - - logo mark2018 - - - - -); -BrandIcon.defaultProps = { - size: "md", -}; - -export default withStyles(styles)(BrandIcon); diff --git a/src/core/client/ui/components/Brand/BrandIcon.css b/src/core/client/ui/components/Brand/BrandMark.css similarity index 100% rename from src/core/client/ui/components/Brand/BrandIcon.css rename to src/core/client/ui/components/Brand/BrandMark.css diff --git a/src/core/client/ui/components/Brand/BrandMark.tsx b/src/core/client/ui/components/Brand/BrandMark.tsx new file mode 100644 index 000000000..2cc2a9b30 --- /dev/null +++ b/src/core/client/ui/components/Brand/BrandMark.tsx @@ -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 = ({ + className, + classes, + size, + fill, + ...rest +}) => ( + + + +); +BrandMark.defaultProps = { + size: "md", + fill: "#f77160", +}; + +export default withStyles(styles)(BrandMark); diff --git a/src/core/client/ui/components/Brand/Logo.css b/src/core/client/ui/components/Brand/Logo.css deleted file mode 100644 index 465bfa40c..000000000 --- a/src/core/client/ui/components/Brand/Logo.css +++ /dev/null @@ -1,6 +0,0 @@ -.root { -} - -.icon { - margin-right: var(--mini-unit); -} diff --git a/src/core/client/ui/components/Brand/Logo.spec.tsx b/src/core/client/ui/components/Brand/Logo.spec.tsx deleted file mode 100644 index 932948dd8..000000000 --- a/src/core/client/ui/components/Brand/Logo.spec.tsx +++ /dev/null @@ -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 = { - className: "custom", - }; - const renderer = createRenderer(); - renderer.render(); - expect(renderer.getRenderOutput()).toMatchSnapshot(); -}); diff --git a/src/core/client/ui/components/Brand/Logo.tsx b/src/core/client/ui/components/Brand/Logo.tsx deleted file mode 100644 index ae77377e6..000000000 --- a/src/core/client/ui/components/Brand/Logo.tsx +++ /dev/null @@ -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 = ({ className, classes, ...rest }) => ( - - - - -); - -export default withStyles(styles)(Logo); diff --git a/src/core/client/ui/components/Brand/LogoHorizontal.css b/src/core/client/ui/components/Brand/LogoHorizontal.css new file mode 100644 index 000000000..314c00e26 --- /dev/null +++ b/src/core/client/ui/components/Brand/LogoHorizontal.css @@ -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 */ +} diff --git a/src/core/client/ui/components/Brand/LogoHorizontal.tsx b/src/core/client/ui/components/Brand/LogoHorizontal.tsx new file mode 100644 index 000000000..daa9d8503 --- /dev/null +++ b/src/core/client/ui/components/Brand/LogoHorizontal.tsx @@ -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 = ({ + className, + classes, + fill, + ...rest +}) => ( + <> + +

+ Coral +

+ + + Coral by Vox Media + + + + + + + + + + + + + + + + + + +); +LogoHorizontal.defaultProps = { + fill: "#f77160", +}; + +export default withStyles(styles)(LogoHorizontal); diff --git a/src/core/client/ui/components/Brand/__snapshots__/BrandIcon.spec.tsx.snap b/src/core/client/ui/components/Brand/__snapshots__/BrandIcon.spec.tsx.snap deleted file mode 100644 index 1b81b2b33..000000000 --- a/src/core/client/ui/components/Brand/__snapshots__/BrandIcon.spec.tsx.snap +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly 1`] = ` - -`; diff --git a/src/core/client/ui/components/Brand/__snapshots__/Logo.spec.tsx.snap b/src/core/client/ui/components/Brand/__snapshots__/Logo.spec.tsx.snap deleted file mode 100644 index 3fbcc07c3..000000000 --- a/src/core/client/ui/components/Brand/__snapshots__/Logo.spec.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly 1`] = ` - -`; diff --git a/src/core/client/ui/components/Brand/index.ts b/src/core/client/ui/components/Brand/index.ts index 748b9a839..213faa0e9 100644 --- a/src/core/client/ui/components/Brand/index.ts +++ b/src/core/client/ui/components/Brand/index.ts @@ -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"; diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts index 9b808acab..24d9fbfff 100644 --- a/src/core/client/ui/components/index.ts +++ b/src/core/client/ui/components/index.ts @@ -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";