fix target reward font flickering (#1120)

packages/web-app/package.json

@@ -88,8 +88,8 @@
     "@fortawesome/react-fontawesome": "0.2.0",
     "@novu/notification-center": "0.22.0",
     "@novu/shared": "0.22.0",
-    "@saladtechnologies/garden-components": "1.3.5",
-    "@saladtechnologies/garden-fonts": "1.0.3",
+    "@saladtechnologies/garden-components": "1.3.6",
+    "@saladtechnologies/garden-fonts": "1.0.4",
     "@saladtechnologies/garden-icons": "1.0.16",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-actions": "6.5.16",

packages/web-app/src/SaladTheme.tsx

@@ -63,11 +63,11 @@ export const DefaultTheme: SaladTheme = {
   xxLarge: '5rem',
 
   // Font Family
-  fontGroteskBook19: 'sharpGroteskBook19',
-  fontGroteskBook25: 'sharpGroteskBook25',
-  fontGroteskLight05: 'SharpGroteskLight05',
-  fontGroteskLight09: 'SharpGroteskLight09',
-  fontGroteskLight25: 'SharpGroteskLight25',
-  fontGroteskMedium25: 'sharpGroteskMedium25',
+  fontGroteskBook19: 'SharpGrotesk-Book19',
+  fontGroteskBook25: 'SharpGrotesk-Book25',
+  fontGroteskLight05: 'SharpGrotesk-Light05',
+  fontGroteskLight09: 'SharpGrotesk-Light09',
+  fontGroteskLight25: 'SharpGrotesk-Light25',
+  fontGroteskMedium25: 'SharpGrotesk-Medium25',
   fontMallory: 'Mallory',
 }

packages/web-app/src/components/Button.tsx

@@ -17,7 +17,7 @@ const styles = (theme: SaladTheme) => ({
     userSelect: 'none',
     color: theme.lightGreen,
     fontSize: '.625rem',
-    fontFamily: 'sharpGroteskLight25',
+    fontFamily: theme.fontGroteskLight25,
     '&:hover': {
       opacity: 0.8,
     },

packages/web-app/src/components/Checkbox.tsx

@@ -52,7 +52,7 @@ const styles = (theme: SaladTheme) => ({
     position: 'absolute',
   },
   text: {
-    fontFamily: 'sharpGroteskBook19',
+    fontFamily: theme.fontGroteskBook19,
     margin: 0,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -70,7 +70,7 @@ const styles = (theme: SaladTheme) => ({
   errorText: {
     margin: '.25rem',
     color: theme.red,
-    fontFamily: 'sharpGroteskBook25',
+    fontFamily: theme.fontGroteskBook25,
     fontSize: theme.small,
   },
 })

packages/web-app/src/components/ErrorPage.tsx

@@ -12,15 +12,15 @@ const styles = (theme: SaladTheme) => ({
     padding: '0 3rem',
   },
   title: {
-    fontFamily: 'SharpGroteskLight09',
+    fontFamily: theme.fontGroteskLight09,
     fontSize: theme.xLarge,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     paddingBottom: '1rem',
     whiteSpace: 'nowrap',
   },
   description: {
-    fontFamily: 'sharpGroteskBook19',
+    fontFamily: theme.fontGroteskBook19,
     fontSize: theme.small,
   },
   bugButton: {
@@ -29,7 +29,7 @@ const styles = (theme: SaladTheme) => ({
     backgroundColor: theme.darkBlue,
     color: theme.green,
     marginLeft: '1rem',
-    fontFamily: 'sharpGroteskLight25',
+    fontFamily: theme.fontGroteskLight25,
     fontSize: theme.small,
     cursor: 'pointer',
     '&:hover': {

packages/web-app/src/components/LoadingPage.tsx

@@ -31,7 +31,7 @@ const styles = (theme: SaladTheme) => ({
     textAlign: 'center',
     color: theme.lightGreen,
     fontSize: theme.large,
-    fontFamily: 'SharpGroteskLight25',
+    fontFamily: theme.fontGroteskLight25,
   },
 })
 

packages/web-app/src/components/OnboardingPage.tsx

@@ -57,12 +57,12 @@ const styles = (theme: SaladTheme) => ({
   },
   title: {
     paddingTop: '2rem',
-    fontFamily: 'SharpGroteskLight09',
+    fontFamily: theme.fontGroteskLight09,
     fontSize: theme.xxLarge,
     lineHeight: '54px',
   },
   subtitle: {
-    fontFamily: 'sharpGroteskLight25',
+    fontFamily: theme.fontGroteskLight25,
     fontSize: '18px',
     lineHeight: '32px',
     paddingTop: '3rem',

packages/web-app/src/components/SettingsPage.styles.tsx

@@ -81,7 +81,7 @@ export const styles = (theme: SaladTheme) => ({
     backgroundColor: theme.darkBlue,
     color: theme.green,
     marginLeft: '1rem',
-    fontFamily: 'sharpGroteskLight25',
+    fontFamily: theme.fontGroteskLight25,
     fontSize: theme.small,
     cursor: 'pointer',
 

packages/web-app/src/components/TextField.tsx

@@ -16,7 +16,7 @@ const styles = (theme: SaladTheme) => ({
     padding: '.5rem',
     color: theme.lightGreen,
     fontSize: '.625rem',
-    fontFamily: 'sharpGroteskLight25',
+    fontFamily: theme.fontGroteskLight25,
     '&::placeholder': {
       opacity: 0.5,
       color: theme.lightGreen,
@@ -34,7 +34,7 @@ const styles = (theme: SaladTheme) => ({
   errorText: {
     margin: '.25rem',
     color: theme.red,
-    fontFamily: 'sharpGroteskBook25',
+    fontFamily: theme.fontGroteskBook25,
     fontSize: theme.small,
   },
 })

packages/web-app/src/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, FunctionComponent } from 'react'
+import type { FunctionComponent, ReactNode } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import type { SaladTheme } from '../SaladTheme'
@@ -16,14 +16,14 @@ const styles = (theme: SaladTheme) => ({
     maxWidth: 250,
   },
   title: {
-    fontFamily: 'sharpGroteskLight09',
+    fontFamily: theme.fontGroteskLight09,
     fontSize: theme.xLarge,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
   text: {
-    fontFamily: 'sharpGroteskBook19',
+    fontFamily: theme.fontGroteskBook19,
     fontSize: theme.small,
     textTransform: 'capitalize',
     whiteSpace: 'pre-wrap',

packages/web-app/src/components/primitives/content/ErrorText.tsx

@@ -9,7 +9,7 @@ const styles = (theme: SaladTheme) => ({
   errorText: {
     margin: '.25rem',
     color: theme.red,
-    fontFamily: 'sharpGroteskBook25',
+    fontFamily: theme.fontGroteskBook25,
     fontSize: theme.small,
   },
 })

packages/web-app/src/index.css

@@ -13,31 +13,31 @@ body {
 }
 
 @font-face {
-  font-family: 'sharpGroteskBook19';
-  src: url('./assets/fonts/SharpGroteskBook19.woff');
+  font-family: 'SharpGrotesk-Book19';
+  src: url('../src/assets/fonts/SharpGrotesk-Book19.woff2') format('woff2'), url('../src/assets/fonts/SharpGrotesk-Book19.woff') format('woff');
 }
 
 @font-face {
-  font-family: 'sharpGroteskBook25';
-  src: url('./assets/fonts/SharpGroteskBook25.woff');
+  font-family: 'SharpGrotesk-Book25';
+  src: url('../src/assets/fonts/SharpGrotesk-Book25.woff2') format('woff2'), url('../src/assets/fonts/SharpGrotesk-Book25.woff') format('woff');
 }
 
 @font-face {
-  font-family: 'SharpGroteskLight05';
-  src: url('./assets/fonts/SharpGroteskLight05.woff');
+  font-family: 'SharpGrotesk-Light05';
+  src: url('../src/assets/fonts/SharpGrotesk-Light05.woff2') format('woff2'), url('../src/assets/fonts/SharpGrotesk-Light05.woff') format('woff');
 }
 
 @font-face {
-  font-family: 'sharpGroteskLight09';
-  src: url('./assets/fonts/SharpGroteskLight09.woff');
+  font-family: 'SharpGrotesk-Light09';
+  src: url('../src/assets/fonts/SharpGrotesk-Light09.woff2') format('woff2'), url('../src/assets/fonts/SharpGrotesk-Light09.woff') format('woff');
 }
 
 @font-face {
-  font-family: 'sharpGroteskLight25';
-  src: url('./assets/fonts/SharpGroteskLight25.woff');
+  font-family: 'SharpGrotesk-Light25';
+  src: url('../src/assets/fonts/SharpGrotesk-Light25.woff2') format('woff2'), url('../src/assets/fonts/SharpGrotesk-Light25.woff') format('woff');
 }
 
 @font-face {
-  font-family: 'sharpGroteskMedium25';
-  src: url('./assets/fonts/SharpGroteskMedium25.woff');
+  font-family: 'SharpGrotesk-Medium25';
+  src: url('../src/assets/fonts/SharpGrotesk-Medium25.woff2') format('woff2'), url('../src/assets/fonts/SharpGrotesk-Medium25.woff') format('woff');
 }

packages/web-app/yarn.lock

@@ -3402,8 +3402,8 @@ __metadata:
     "@fortawesome/react-fontawesome": "npm:0.2.0"
     "@novu/notification-center": "npm:0.22.0"
     "@novu/shared": "npm:0.22.0"
-    "@saladtechnologies/garden-components": "npm:1.3.5"
-    "@saladtechnologies/garden-fonts": "npm:1.0.3"
+    "@saladtechnologies/garden-components": "npm:1.3.6"
+    "@saladtechnologies/garden-fonts": "npm:1.0.4"
     "@saladtechnologies/garden-icons": "npm:1.0.16"
     "@storybook/addon-a11y": "npm:6.5.16"
     "@storybook/addon-actions": "npm:6.5.16"
@@ -3501,9 +3501,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@saladtechnologies/garden-components@npm:1.3.5":
-  version: 1.3.5
-  resolution: "@saladtechnologies/garden-components@npm:1.3.5"
+"@saladtechnologies/garden-components@npm:1.3.6":
+  version: 1.3.6
+  resolution: "@saladtechnologies/garden-components@npm:1.3.6"
   peerDependencies:
     "@emotion/react": 11.x
     "@emotion/styled": 11.x
@@ -3518,14 +3518,14 @@ __metadata:
     react-intl: 6.x
     react-range: 1.x
     react-responsive: 9.x
-  checksum: 93ddb32530043fd6f060748843b3e4bd842ab21b1ba29a31db598acae4d503daac124b32add588671aeac7c600afe2e6d8cfbed55b1a910207859cef7b8a675b
+  checksum: d84bfda3935bb15b3e578923fb2c6567a0a953dd0cb210507b720349fd3e5e4eff9adec24e90a8b7f8e8ce903fcc25e10f197aa8eba0ce2a802659f9c14b4b90
   languageName: node
   linkType: hard
 
-"@saladtechnologies/garden-fonts@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@saladtechnologies/garden-fonts@npm:1.0.3"
-  checksum: 67ae46cdd48823b8c3fb41e11f6a0128041612350f283803e1a51b1c157cb8041c3d7e5499d51e2a175df4792c502d4492ce5a014e6953ab7699b943e3a63a05
+"@saladtechnologies/garden-fonts@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@saladtechnologies/garden-fonts@npm:1.0.4"
+  checksum: 038d9cae196d814af10c32c7f1aa378e812eb45dfcb74214a12c65150e3b4ffd74636f07aeaa979732856b957fcdadd14dc1d328f8271802912e84bf4e25dab8
   languageName: node
   linkType: hard