diff --git a/apps/SageAccountWeb/src/App.scss b/apps/SageAccountWeb/src/App.scss index 8d4131a7d2..8c936e5d5d 100644 --- a/apps/SageAccountWeb/src/App.scss +++ b/apps/SageAccountWeb/src/App.scss @@ -8,7 +8,7 @@ @use './style/all'; .App { - font-family: 'Lato', sans-serif; + font-family: 'DM Sans', sans-serif; overflow: hidden; } diff --git a/apps/SageAccountWeb/src/style/theme.ts b/apps/SageAccountWeb/src/style/theme.ts index 5a7eca768b..97288b6c82 100644 --- a/apps/SageAccountWeb/src/style/theme.ts +++ b/apps/SageAccountWeb/src/style/theme.ts @@ -1,6 +1,8 @@ import { ThemeOptions } from '@mui/material' import { PartialDeep } from 'type-fest' -export const latoFont = ['Lato', 'Roboto', 'Helvetica', 'Arial'].join(',') +export const fontDefinition = ['DM Sans', 'Roboto', 'Helvetica', 'Arial'].join( + ',', +) // Merge the default theme (defined in synapse-react-client) with the SageAccountWeb overrides defined here. export const sageAccountWebThemeOverrides: PartialDeep = { @@ -52,7 +54,7 @@ export const sageAccountWebThemeOverrides: PartialDeep = { root: { width: '100%', '&.MuiInputLabel-root': { - fontFamily: latoFont, + fontFamily: fontDefinition, fontWeight: 700, }, }, @@ -69,7 +71,7 @@ export const sageAccountWebThemeOverrides: PartialDeep = { }, typography: { allVariants: { - fontFamily: latoFont, + fontFamily: fontDefinition, fontSize: '14px', }, button: { diff --git a/apps/portals/src/_Core.scss b/apps/portals/src/_Core.scss index 72e7971ccf..0084527edb 100644 --- a/apps/portals/src/_Core.scss +++ b/apps/portals/src/_Core.scss @@ -83,7 +83,7 @@ } body { - font-family: 'Lato', sans-serif; + font-family: 'DM Sans', sans-serif; button:focus { // bootstrap override outline: Portal.$primary-action-color; @@ -584,7 +584,7 @@ button.dropdown-toggle.nav-button:hover { margin-bottom: 0px; } #sage-logo { - margin-top: 10px; + width: 250px; } .logos { margin-top: 15px; diff --git a/apps/portals/src/configurations/challengeportal/style/SageLogo.svg b/apps/portals/src/configurations/challengeportal/style/SageLogo.svg index 04e41dcda2..e8d18dc756 100644 --- a/apps/portals/src/configurations/challengeportal/style/SageLogo.svg +++ b/apps/portals/src/configurations/challengeportal/style/SageLogo.svg @@ -1,26 +1,61 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/apps/portals/src/portal-components/csbc-home-page/assets/sage-logo.svg b/apps/portals/src/portal-components/csbc-home-page/assets/sage-logo.svg index 905d53e8fa..09a00ee790 100644 --- a/apps/portals/src/portal-components/csbc-home-page/assets/sage-logo.svg +++ b/apps/portals/src/portal-components/csbc-home-page/assets/sage-logo.svg @@ -1,26 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/apps/synapse-oauth-signin/src/App.scss b/apps/synapse-oauth-signin/src/App.scss index 71eae8ce7f..b16e399666 100644 --- a/apps/synapse-oauth-signin/src/App.scss +++ b/apps/synapse-oauth-signin/src/App.scss @@ -1,13 +1,13 @@ -@use "./style/variables" as Portal; +@use './style/variables' as Portal; -@use "synapse-react-client/dist/style/main.scss" with ( +@use 'synapse-react-client/dist/style/main.scss' with ( $primary-action-color: Portal.$primary-action-color, $secondary-action-color: Portal.$secondary-action-color, $primary-bgcolor-rgba: unset ); .App { - font-family: "Lato", sans-serif; + font-family: 'DM Sans', sans-serif; overflow: hidden; } @@ -16,7 +16,7 @@ align-items: center; justify-content: center; background: transparent - url("https://s3.amazonaws.com/static.synapse.org/images/SynapseLoginPageBackground.svg") + url('https://s3.amazonaws.com/static.synapse.org/images/SynapseLoginPageBackground.svg') no-repeat; background-size: cover; margin: 0; diff --git a/apps/synapse-oauth-signin/src/style/theme.ts b/apps/synapse-oauth-signin/src/style/theme.ts index 2e4cf8b0d7..0f77fb3d98 100644 --- a/apps/synapse-oauth-signin/src/style/theme.ts +++ b/apps/synapse-oauth-signin/src/style/theme.ts @@ -2,7 +2,9 @@ import 'synapse-react-client' import { ThemeOptions } from '@mui/material' import { Palettes } from 'synapse-react-client' -export const latoFont = ['Lato', 'Roboto', 'Helvetica', 'Arial'].join(',') +export const fontDefinition = ['DM Sans', 'Roboto', 'Helvetica', 'Arial'].join( + ',', +) const themeOptions: ThemeOptions = { palette: Palettes.palette, @@ -53,7 +55,7 @@ const themeOptions: ThemeOptions = { root: { width: '100%', '&.MuiInputLabel-root': { - fontFamily: latoFont, + fontFamily: fontDefinition, fontWeight: 700, }, }, @@ -104,7 +106,7 @@ const themeOptions: ThemeOptions = { }, typography: { allVariants: { - fontFamily: latoFont, + fontFamily: fontDefinition, fontSize: '14px', }, headline1: {}, diff --git a/packages/synapse-react-client/.storybook/manager.ts b/packages/synapse-react-client/.storybook/manager.ts index 2e8bd9a50d..3fef007898 100644 --- a/packages/synapse-react-client/.storybook/manager.ts +++ b/packages/synapse-react-client/.storybook/manager.ts @@ -5,7 +5,7 @@ import { palette } from '../src/theme/palette/Palettes' addons.setConfig({ theme: create({ base: 'light', - fontBase: '"Lato", sans-serif', + fontBase: '"DM Sans", sans-serif', brandImage: 'https://s3.amazonaws.com/static.synapse.org/images/synapse-logo-blue.svg', }), diff --git a/packages/synapse-react-client/.storybook/preview.tsx b/packages/synapse-react-client/.storybook/preview.tsx index 7e167be318..99ff5eccc6 100644 --- a/packages/synapse-react-client/.storybook/preview.tsx +++ b/packages/synapse-react-client/.storybook/preview.tsx @@ -109,7 +109,7 @@ initialize({ }) const fontLoader = async () => ({ - fonts: await Promise.all([document.fonts.load('700 1em Lato')]), + fonts: await Promise.all([document.fonts.load('700 1em "DM Sans"')]), }) export const loaders = [mswLoader] diff --git a/packages/synapse-react-client/src/components/Authentication/LoginPage.tsx b/packages/synapse-react-client/src/components/Authentication/LoginPage.tsx index 3e3a9ba78f..ede940cc78 100644 --- a/packages/synapse-react-client/src/components/Authentication/LoginPage.tsx +++ b/packages/synapse-react-client/src/components/Authentication/LoginPage.tsx @@ -33,7 +33,7 @@ const Tagline: StyledComponent = styled(Typography, { label: 'Tagline', })(({ theme }) => ({ marginBottom: theme.spacing(2), - font: '300 24px/34px Lato, sans-serif', + font: '300 24px/34px DM Sans, sans-serif', })) function BackupCodeInstructions(props: TypographyProps) { diff --git a/packages/synapse-react-client/src/components/Plot/UpsetPlot.tsx b/packages/synapse-react-client/src/components/Plot/UpsetPlot.tsx index 1ea6775323..deaa173a88 100644 --- a/packages/synapse-react-client/src/components/Plot/UpsetPlot.tsx +++ b/packages/synapse-react-client/src/components/Plot/UpsetPlot.tsx @@ -176,7 +176,7 @@ export const UpsetPlot: React.FunctionComponent = ({ // alternatingBackgroundColor={false} setName={setName?.toUpperCase()} combinationName={combinationName?.toUpperCase()} - fontFamily="Lato, sans-serif" + fontFamily="'DM Sans', sans-serif" fontSizes={updateFontSizes} exportButtons={false} notMemberColor="transparent" diff --git a/packages/synapse-react-client/src/style/base/_base.scss b/packages/synapse-react-client/src/style/base/_base.scss index 1d8a410c4b..04970dac7f 100755 --- a/packages/synapse-react-client/src/style/base/_base.scss +++ b/packages/synapse-react-client/src/style/base/_base.scss @@ -31,7 +31,7 @@ html { body { color: SRC.$gray-regular; - font-family: 'Lato'; + font-family: 'DM Sans'; } strong { diff --git a/packages/synapse-react-client/src/style/base/_fonts.scss b/packages/synapse-react-client/src/style/base/_fonts.scss index fed02a1b8f..57cab2c46f 100755 --- a/packages/synapse-react-client/src/style/base/_fonts.scss +++ b/packages/synapse-react-client/src/style/base/_fonts.scss @@ -3,30 +3,6 @@ // ----------------------------------------------------------------------------- ////////////////////////////////////////////////////////////// -// Google Lato Font // +// Google DM Sans Font // ////////////////////////////////////////////////////////////// -@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900'); - -/* latin-ext */ -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - src: local('Lato Regular'), local('Lato-Regular'), - url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) - format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, - U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - src: local('Lato Regular'), local('Lato-Regular'), - url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) - format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, - U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, - U+FEFF, U+FFFD; -} +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); diff --git a/packages/synapse-react-client/src/style/components/_cards.scss b/packages/synapse-react-client/src/style/components/_cards.scss index 13b1397a72..48c8174a47 100644 --- a/packages/synapse-react-client/src/style/components/_cards.scss +++ b/packages/synapse-react-client/src/style/components/_cards.scss @@ -17,7 +17,7 @@ $text-color-lighter: #898989; .SRC-portalCard { display: block; - font-family: 'Lato', sans-serif; + font-family: 'DM Sans', sans-serif; font-size: $text-size-base; line-height: $baseline-grid; diff --git a/packages/synapse-react-client/src/style/components/_login.scss b/packages/synapse-react-client/src/style/components/_login.scss index 72b1e82161..a398d6c584 100644 --- a/packages/synapse-react-client/src/style/components/_login.scss +++ b/packages/synapse-react-client/src/style/components/_login.scss @@ -4,7 +4,7 @@ .LoginComponent { max-width: 350px; background: white; - font-family: Lato, sans-serif; + font-family: 'DM Sans', sans-serif; .hide-component { visibility: hidden; @@ -102,7 +102,7 @@ $login-wrapper-height: 560px; } .panel-tagline { color: #1e4964; - font: 300 24px/34px Lato, sans-serif; + font: 300 24px/34px 'DM Sans', sans-serif; } .panel-left { .panel-tagline { @@ -148,7 +148,7 @@ $login-wrapper-height: 560px; .panel-tagline { display: block; margin: 6px 0 0; - font: normal 16px/26px Lato, sans-serif; + font: normal 16px/26px 'DM Sans', sans-serif; } } .panel-right { diff --git a/packages/synapse-react-client/src/style/components/_synapse-homepage.scss b/packages/synapse-react-client/src/style/components/_synapse-homepage.scss index 50447495c3..dc50bfcecf 100644 --- a/packages/synapse-react-client/src/style/components/_synapse-homepage.scss +++ b/packages/synapse-react-client/src/style/components/_synapse-homepage.scss @@ -230,14 +230,14 @@ } .Headline-Strong { - font-family: Lato; + font-family: 'DM Sans'; font-weight: 700; font-size: 24px; line-height: 34px; } .Headline-Light { - font-family: Lato; + font-family: 'DM Sans'; font-weight: 300; font-size: 24px; line-height: 34px; diff --git a/packages/synapse-react-client/src/theme/typography/Typography.ts b/packages/synapse-react-client/src/theme/typography/Typography.ts index 9bd6aaf897..28dfcc657c 100644 --- a/packages/synapse-react-client/src/theme/typography/Typography.ts +++ b/packages/synapse-react-client/src/theme/typography/Typography.ts @@ -1,7 +1,7 @@ import { TypographyOptions } from '@mui/material/styles/createTypography' import { Palette } from '@mui/material/styles/createPalette' -export const defaultFontFamily = ['Lato', 'sans-serif'].join(',') +export const defaultFontFamily = ['DM Sans', 'sans-serif'].join(',') export const monospaceFontFamily = [ 'Menlo', 'Courier New', diff --git a/packages/synapse-react-client/test/containers/markdown/__snapshots__/MarkdownSynapse.integration.test.tsx.snap b/packages/synapse-react-client/test/containers/markdown/__snapshots__/MarkdownSynapse.integration.test.tsx.snap index 6ec9b53968..af1b5ee15e 100644 --- a/packages/synapse-react-client/test/containers/markdown/__snapshots__/MarkdownSynapse.integration.test.tsx.snap +++ b/packages/synapse-react-client/test/containers/markdown/__snapshots__/MarkdownSynapse.integration.test.tsx.snap @@ -6,10 +6,10 @@ exports[`MarkdownSynapse tests Snapshot tests works with a br statement and loos class="markdown" >

some more free

@@ -25,7 +25,7 @@ exports[`MarkdownSynapse tests Snapshot tests works with a br statement and loos

loose text

@@ -42,7 +42,7 @@ exports[`MarkdownSynapse tests Snapshot tests works with header and a link 1`] = class="markdown" >

@@ -87,7 +87,7 @@ exports[`MarkdownSynapse tests Snapshot tests works with two inline widgets 1`]