Merge pull request #219 from zimmerman-team/feat/DX-1678

feat: DX-1678 - update fonts fallback
zimmerman-team · Aug 27, 2024 · db32d54 · db32d54
2 parents 4d03ffb + 914ac07
commit db32d54
Show file tree

Hide file tree

Showing 81 changed files with 229 additions and 203 deletions.
diff --git a/src/app/components/Dialogs/CookieDialog/index.tsx b/src/app/components/Dialogs/CookieDialog/index.tsx
@@ -37,12 +37,12 @@ const BaseSnackbar = styled((props) => (
     height: 32px;
   }
   & [class*="MuiTypography-root"] {
-    font-weight: bold;
+    font-weight: 400;
     font-size: 18px;
-    font-family: "GothamNarrow-Bold", sans-serif;
+    font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
 
     > a {
-      font-family: "GothamNarrow-Bold", sans-serif;
+      font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
     }
   }
 
@@ -54,7 +54,7 @@ const BaseSnackbar = styled((props) => (
 
   & [class*="MuiSnackbarContent-action"] {
     padding-left: 64px;
-    font-family: "GothamNarrow-Bold", sans-serif;
+    font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
   }
 `;
 

diff --git a/src/app/components/Dialogs/EmbedChartDialog/chartContainer.tsx b/src/app/components/Dialogs/EmbedChartDialog/chartContainer.tsx
@@ -50,15 +50,15 @@ export default function ChartContainer(props: {
             p:nth-of-type(1) {
               color: #e75656;
               text-align: center;
-              font-family: "GothamNarrow-Bold", sans-serif;
+              font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
               font-size: 18px;
               margin-top: 16px;
               margin-bottom: 0;
             }
             p:nth-of-type(2) {
               color: #e75656;
               text-align: center;
-              font-family: "GothamNarrow-Book", sans-serif;
+              font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif;
               font-size: 14px;
               margin-top: 16px;
             }

diff --git a/src/app/components/Dialogs/EmbedChartDialog/copyButton.tsx b/src/app/components/Dialogs/EmbedChartDialog/copyButton.tsx
@@ -17,7 +17,7 @@ export default function CopyButton(props: {
         align-items: center;
         color: #fff;
         text-transform: uppercase;
-        font-family: "GothamNarrow-Bold", sans-serif;
+        font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
         font-size: 14px;
         border: none;
         outline: none;

diff --git a/src/app/components/Dialogs/EmbedChartDialog/embedOptions.tsx b/src/app/components/Dialogs/EmbedChartDialog/embedOptions.tsx
@@ -32,7 +32,7 @@ export default function EmbedOptions(props: {
         <p
           css={`
             color: #231d2c;
-            font-family: "GothamNarrow-Bold", sans-serif;
+            font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
             font-size: 16px;
             margin: 0;
             margin-bottom: 14px;
@@ -59,7 +59,7 @@ export default function EmbedOptions(props: {
             <p
               css={`
                 color: #231d2c;
-                font-family: "GothamNarrow-Medium", sans-serif;
+                font-family: "GothamNarrow-Medium", "Helvetica Neue", sans-serif;
                 font-size: 14px;
               `}
             >
@@ -84,7 +84,7 @@ export default function EmbedOptions(props: {
             <p
               css={`
                 color: #231d2c;
-                font-family: "GothamNarrow-Medium", sans-serif;
+                font-family: "GothamNarrow-Medium", "Helvetica Neue", sans-serif;
                 font-size: 14px;
               `}
             >
@@ -111,7 +111,7 @@ export default function EmbedOptions(props: {
             height: 41px;
             display: flex;
             align-items: end;
-            font-family: "GothamNarrow-Medium", sans-serif;
+            font-family: "GothamNarrow-Medium", "Helvetica Neue", sans-serif;
             font-size: 14px;
           `}
         >

diff --git a/src/app/components/Dialogs/EmbedChartDialog/index.tsx b/src/app/components/Dialogs/EmbedChartDialog/index.tsx
@@ -169,7 +169,7 @@ export default function EmbedChartDialog(props: {
                 width: 73%;
                 > p {
                   color: #231d2c;
-                  font-family: "GothamNarrow-Bold", sans-serif;
+                  font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
                   font-size: 14px;
                   overflow: hidden;
                   text-overflow: ellipsis;
@@ -210,14 +210,16 @@ export default function EmbedChartDialog(props: {
                   margin: 0;
                   span:nth-of-type(1) {
                     color: #70777e;
-                    font-family: "GothamNarrow-Medium", sans-serif;
+                    font-family: "GothamNarrow-Medium", "Helvetica Neue",
+                      sans-serif;
                     font-size: 12px;
                     margin: 0;
                     line-height: 14.52px;
                   }
                   span:nth-of-type(2) {
                     color: #231d2c;
-                    font-family: "GothamNarrow-Medium", sans-serif;
+                    font-family: "GothamNarrow-Medium", "Helvetica Neue",
+                      sans-serif;
                     font-size: 12px;
                     margin: 0;
                     line-height: 14.52px;

diff --git a/src/app/components/Dialogs/EmbedChartDialog/linkOptions.tsx b/src/app/components/Dialogs/EmbedChartDialog/linkOptions.tsx
@@ -19,7 +19,7 @@ export default function LinkOptions(props: {
         justify-content: center;
         align-items: center;
         p {
-          font-family: "GothamNarrow-Medium", sans-serif;
+          font-family: "GothamNarrow-Medium", "Helvetica Neue", sans-serif;
           font-size: 14px;
         }
       `}

diff --git a/src/app/components/Dialogs/EmbedChartDialog/shareContent.tsx b/src/app/components/Dialogs/EmbedChartDialog/shareContent.tsx
@@ -19,7 +19,7 @@ export default function ShareContent(props: {
         border-radius: 8px;
         line-height: 16px;
         background: #f5f5f7;
-        font-family: "GothamNarrow-Medium", sans-serif;
+        font-family: "GothamNarrow-Medium", "Helvetica Neue", sans-serif;
         color: #000;
         font-size: 14px;
       `}

diff --git a/src/app/components/Dialogs/TourGuide/rowFrameIntro.tsx b/src/app/components/Dialogs/TourGuide/rowFrameIntro.tsx
@@ -37,7 +37,7 @@ export default function RowFrameIntro(props: {
           border-radius: 8px;
           background: #231d2c;
           color: #fff;
-          font-family: "GothamNarrow-Medium", sans-serif;
+          font-family: "GothamNarrow-Medium", "Helvetica Neue", sans-serif;
           font-size: 12px;
           font-style: normal;
           font-weight: 350;

diff --git a/src/app/components/Dialogs/TourGuide/selectStructure.tsx b/src/app/components/Dialogs/TourGuide/selectStructure.tsx
@@ -33,7 +33,7 @@ export default function SelectStructure(props: {
           border-radius: 8px;
           background: #231d2c;
           color: #fff;
-          font-family: "GothamNarrow-Medium", sans-serif;
+          font-family: "GothamNarrow-Medium", "Helvetica Neue", sans-serif;
           font-size: 12px;
           font-style: normal;
           font-weight: 350;

diff --git a/src/app/components/Dialogs/TourGuide/tourEnd.tsx b/src/app/components/Dialogs/TourGuide/tourEnd.tsx
@@ -42,7 +42,7 @@ export default function TourEnd({
           border-radius: 8px;
           background: #231d2c;
           color: #fff;
-          font-family: "GothamNarrow-Medium", sans-serif;
+          font-family: "GothamNarrow-Medium", "Helvetica Neue", sans-serif;
           font-style: normal;
           font-weight: 350;
           line-height: 16px;

diff --git a/src/app/components/Styled/tabs.ts b/src/app/components/Styled/tabs.ts
@@ -22,7 +22,7 @@ export const Tab = {
     font-weight: ${(props) => (props.active ? "bold" : "normal")};
     font-family: ${(props) =>
         props.active ? "GothamNarrow-Bold" : "GothamNarrow-Book"},
-      sans-serif;
+      "Helvetica Neue", sans-serif;
 
     ::after {
       content: "";
@@ -44,7 +44,7 @@ export const Tab = {
     font-weight: ${(props) => (props.active ? "bold" : "normal")};
     font-family: ${(props) =>
         props.active ? "GothamNarrow-Bold" : "GothamNarrow-Book"},
-      sans-serif;
+      "Helvetica Neue", sans-serif;
 
     ::after {
       content: "";
@@ -69,7 +69,7 @@ export const Tab = {
     font-weight: ${(props) => (props.active ? "700" : "normal")};
     font-family: ${(props) =>
         props.active ? "GothamNarrow-Bold" : "GothamNarrow-Book"},
-      sans-serif;
+      "Helvetica Neue", sans-serif;
 
     ::after {
       content: "";

diff --git a/src/app/components/Table/Preview-table/style.ts b/src/app/components/Table/Preview-table/style.ts
@@ -23,7 +23,7 @@ export const previewTablecss = css`
     height: 35px;
     font-weight: 400;
     font-size: 14px;
-    font-family: "GothamNarrow-Book";
+    font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif;
   }
 
   tr {

diff --git a/src/app/modules/chart-module/components/chartSubheaderToolbar/index.tsx b/src/app/modules/chart-module/components/chartSubheaderToolbar/index.tsx
@@ -373,7 +373,8 @@ export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
                 <p
                   css={`
                     color: #70777e;
-                    font-family: "GothamNarrow-Book", sans-serif;
+                    font-family: "GothamNarrow-Book", "Helvetica Neue",
+                      sans-serif;
                     font-size: 12px;
                     font-weight: 325;
                     margin: 0px;
@@ -401,7 +402,8 @@ export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
                 <p
                   css={`
                     color: #70777e;
-                    font-family: "GothamNarrow-Book", sans-serif;
+                    font-family: "GothamNarrow-Book", "Helvetica Neue",
+                      sans-serif;
                     font-size: 12px;
                     font-weight: 325;
                     margin: 0px;
@@ -450,7 +452,8 @@ export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
                       css={`
                         color: #000;
 
-                        font-family: "GothamNarrow-Book", sans-serif;
+                        font-family: "GothamNarrow-Book", "Helvetica Neue",
+                          sans-serif;
                         font-size: 12px;
                         font-style: normal;
                         font-weight: 325;

diff --git a/src/app/modules/chart-module/components/chartSubheaderToolbar/styles.ts b/src/app/modules/chart-module/components/chartSubheaderToolbar/styles.ts
@@ -52,7 +52,7 @@ export const styles = {
     align-items: center;
     height: 32px;
     padding: 10px 20px;
-    font-family: "GothamNarrow-Bold", sans-serif;
+    font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
     gap: 10px;
     outline: none;
     border: none;

diff --git a/src/app/modules/chart-module/components/dialog/errrorComponent.tsx b/src/app/modules/chart-module/components/dialog/errrorComponent.tsx
@@ -31,7 +31,7 @@ export default function ErrorComponent(props: {
             font-size: 14px;
             line-height: 20px;
             font-weight: bold;
-            font-family: "GothamNarrow-Bold", sans-serif;
+            font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
             text-align: center;
             button {
               outline: none;
@@ -44,7 +44,7 @@ export default function ErrorComponent(props: {
               margin-top: 34px;
               white-space: pre-line;
               line-height: 11px;
-              font-family: "GothamNarrow-Bold", sans-serif;
+              font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
             }
           `}
         >

diff --git a/src/app/modules/chart-module/components/dialog/warningDialog.tsx b/src/app/modules/chart-module/components/dialog/warningDialog.tsx
@@ -18,7 +18,7 @@ export default function WarningDialog(props: { isMappingValid: boolean }) {
           font-size: 14px;
           line-height: 20px;
           font-weight: bold;
-          font-family: "GothamNarrow-Bold", sans-serif;
+          font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
           text-align: center;
           button {
             outline: none;

diff --git a/src/app/modules/chart-module/components/exporter/styles.ts b/src/app/modules/chart-module/components/exporter/styles.ts
@@ -13,43 +13,43 @@ export const styles = {
     flex-direction: row;
 
     > input {
-        width: 140px;
-        height: 32px;
-        font-size 14px;
-        background: #fff;
-        padding-left: 16px;
-        border-style: none;
-        border-radius: 16px 0px 0px 16px;
+      width: 140px;
+      height: 32px;
+      font-size: 14px;
+      background: #fff;
+      padding-left: 16px;
+      border-style: none;
+      border-radius: 16px 0px 0px 16px;
     }
 
     > button {
-        color: #fff;
-        width: 60px;
-        height: 32px;
-        font-size 14px;
-        cursor: pointer;
-        border-style: none;
-        background: #262C34;
-        border-radius: 0px 16px 16px 0px;
+      color: #fff;
+      width: 60px;
+      height: 32px;
+      font-size: 14px;
+      cursor: pointer;
+      border-style: none;
+      background: #262c34;
+      border-radius: 0px 16px 16px 0px;
 
-        > svg {
-            top: -2px;
-            margin-left: 5px;
-            position: relative;
-            transition: all 0.2s ease-in-out;
-            transform: rotate(${open ? 0 : 180}deg);
+      > svg {
+        top: -2px;
+        margin-left: 5px;
+        position: relative;
+        transition: all 0.2s ease-in-out;
+        transform: rotate(${open ? 0 : 180}deg);
 
-            > path {
-                fill: #fff;
-            }
+        > path {
+          fill: #fff;
         }
+      }
     }
   `,
   downloadBtn: css`
     color: #fff;
     width: 120px;
     height: 32px;
-    font-size 14px;
+    font-size: 14px;
     cursor: pointer;
     font-weight: bold;
     border-style: none;

diff --git a/src/app/modules/chart-module/components/toolbox/steps/index.tsx b/src/app/modules/chart-module/components/toolbox/steps/index.tsx
@@ -186,7 +186,7 @@ export function ChartToolBoxSteps(props: ChartToolBoxStepsProps) {
             align-items: center;
             justify-content: center;
             font-size: 14px;
-            font-family: "GothamNarrow-Bold", sans-serif;
+            font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
             cursor: ${props.isClickable ? "pointer" : "not-allowed"};
             /* pointer-events: ${props.isClickable ? "auto" : "none"}; */
             :nth-child(1) {

diff --git a/src/app/modules/chart-module/components/toolbox/steps/panels-content/ChartType.tsx b/src/app/modules/chart-module/components/toolbox/steps/panels-content/ChartType.tsx
@@ -116,7 +116,8 @@ export function ChartToolBoxChartType() {
                         font-size: 14px;
                         margin: 0px;
                         line-height: 20px;
-                        font-family: "GothamNarrow-Bold", sans-serif;
+                        font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                          sans-serif;
                       `}
                     >
                       {fChartType.label}
@@ -158,7 +159,8 @@ export function ChartToolBoxChartType() {
                   />
                   <p
                     css={`
-                      font-family: "GothamNarrow-Book", sans-serif;
+                      font-family: "GothamNarrow-Book", "Helvetica Neue",
+                        sans-serif;
                       font-size: 10px;
                       line-height: normal;
                       padding-bottom: 17px;

diff --git a/src/app/modules/chart-module/components/toolbox/steps/panels-content/Mapping.tsx b/src/app/modules/chart-module/components/toolbox/steps/panels-content/Mapping.tsx
@@ -532,7 +532,7 @@ const NonStaticDimensionContainer = (props: {
           <div
             css={`
               font-size: 14px;
-              font-family: "GothamNarrow-Bold", sans-serif;
+              font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
 
               color: #262c34;
             `}
@@ -1058,7 +1058,7 @@ const StaticDimensionContainer = (props: { dimension: any }) => {
             css={`
               font-size: 14px;
               color: #262c34;
-              font-family: "GothamNarrow-Bold", sans-serif; ;
+              font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
             `}
           >
             {props.dimension.name}

diff --git a/src/app/modules/chart-module/components/toolbox/steps/panels-content/SelectDataset.tsx b/src/app/modules/chart-module/components/toolbox/steps/panels-content/SelectDataset.tsx
@@ -99,7 +99,7 @@ function ChartToolBoxSelectDataset(props: { deselectDataset: () => void }) {
           margin-top: -8px;
           color: #231d2c;
           font-size: 14px;
-          font-family: "GothamNarrow-Bold", sans-serif;
+          font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
         }
 
         > label {
@@ -203,7 +203,7 @@ const ConnectData = () => {
           cursor: pointer;
         }
         p {
-          font-family: "GothamNarrow-Bold", sans-serif;
+          font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
           margin-bottom: 4px;
           margin-top: -8px;
           font-size: 14px;