Merge pull request #713 from jay-hodgson/PORTALS-2943

PORTALS-2943: Sage branding update
Sage-Bionetworks · Feb 23, 2024 · 094e65b · 094e65b
2 parents 94e7402 + e29f1dc
commit 094e65b
Show file tree

Hide file tree

Showing 18 changed files with 100 additions and 110 deletions.
diff --git 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
@@ -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<ThemeOptions> = {
@@ -52,7 +54,7 @@ export const sageAccountWebThemeOverrides: PartialDeep<ThemeOptions> = {
         root: {
           width: '100%',
           '&.MuiInputLabel-root': {
-            fontFamily: latoFont,
+            fontFamily: fontDefinition,
             fontWeight: 700,
           },
         },
@@ -69,7 +71,7 @@ export const sageAccountWebThemeOverrides: PartialDeep<ThemeOptions> = {
   },
   typography: {
     allVariants: {
-      fontFamily: latoFont,
+      fontFamily: fontDefinition,
       fontSize: '14px',
     },
     button: {

diff --git 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
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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -33,7 +33,7 @@ const Tagline: StyledComponent<TypographyProps> = 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
@@ -176,7 +176,7 @@ export const UpsetPlot: React.FunctionComponent<UpsetPlotProps> = ({
                 // 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...t-client/test/containers/markdown/__snapshots__/MarkdownSynapse.integration.test.tsx.snap b/...t-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"
   >
     <span
-      class="MuiTypography-root MuiTypography-body1 css-1kkok3b-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-4ozm06-MuiTypography-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-1kkok3b-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-4ozm06-MuiTypography-root"
       >
         some more free
       </p>
@@ -25,7 +25,7 @@ exports[`MarkdownSynapse tests Snapshot tests works with a br statement and loos
       
 
       <p
-        class="MuiTypography-root MuiTypography-body1 css-1kkok3b-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-4ozm06-MuiTypography-root"
       >
         loose text
       </p>
@@ -42,7 +42,7 @@ exports[`MarkdownSynapse tests Snapshot tests works with header and a link 1`] =
     class="markdown"
   >
     <span
-      class="MuiTypography-root MuiTypography-body1 css-1kkok3b-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-4ozm06-MuiTypography-root"
     >
       <h1
         class="MuiTypography-root MuiTypography-headline1 css-1ix3kim-MuiTypography-root"
@@ -71,14 +71,14 @@ exports[`MarkdownSynapse tests Snapshot tests works with two inline widgets 1`]
     class="markdown"
   >
     <span
-      class="MuiTypography-root MuiTypography-body1 css-1kkok3b-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-4ozm06-MuiTypography-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-1kkok3b-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-4ozm06-MuiTypography-root"
       >
         <span>
           <a
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium  css-1bhx6gc-MuiButtonBase-root-MuiButton-root-WideButton"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium  css-1xe62cs-MuiButtonBase-root-MuiButton-root-WideButton"
             href="#/Help/How It Works"
             tabindex="0"
           >
@@ -87,7 +87,7 @@ exports[`MarkdownSynapse tests Snapshot tests works with two inline widgets 1`]
         </span>
         <span>
           <a
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium  css-1bhx6gc-MuiButtonBase-root-MuiButton-root-WideButton"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium  css-1xe62cs-MuiButtonBase-root-MuiButton-root-WideButton"
             href="#/Apply"
             tabindex="0"
           >