fix(frontend): fix missing font-face (#2833)

kubeshop · Jun 28, 2023 · d3bdecd · d3bdecd
1 parent 8aa75f9
commit d3bdecd
Show file tree

Hide file tree

Showing 19 changed files with 24 additions and 156 deletions.
diff --git a/web/public/SF-Pro-Text-Bold.otf b/web/public/SF-Pro-Text-Bold.otf
diff --git a/web/public/SF-Pro-Text-Semibold.otf b/web/public/SF-Pro-Text-Semibold.otf
diff --git a/web/src/App.less b/web/src/App.less
@@ -2,9 +2,22 @@
 
 @font-face {
   font-family: SFPro;
+  font-weight: normal;
   src: url('../public/SF-Pro-Text-Regular.otf') format('opentype');
 }
 
+@font-face {
+  font-family: SFPro;
+  font-weight: 600;
+  src: url('../public/SF-Pro-Text-Semibold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: SFPro;
+  font-weight: bold;
+  src: url('../public/SF-Pro-Text-Bold.otf') format('opentype');
+}
+
 html,
 body {
   height: 100vh;

diff --git a/web/src/components/DocsBanner/DocsBanner.styled.ts b/web/src/components/DocsBanner/DocsBanner.styled.ts
@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import {Typography} from 'antd';
 import styled from 'styled-components';
 
 export const DocsBannerContainer = styled.div`
@@ -8,11 +8,11 @@ export const DocsBannerContainer = styled.div`
   padding: 12px 18px;
   border-radius: 2px;
   width: max-content;
-  background: ${({ theme }) => theme.color.backgroundInteractive};
+  background: ${({theme}) => theme.color.backgroundInteractive};
 `;
 
 export const Text = styled(Typography.Text)`
   a {
-    font-weight: 700;
+    font-weight: 600;
   }
 `;
diff --git a/web/src/components/EditTest/EditTest.styled.ts b/web/src/components/EditTest/EditTest.styled.ts
@@ -5,7 +5,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin-bottom: 25px;
-    font-weight: 700;
   }
 `;
 

diff --git a/web/src/components/EditTransaction/EditTransaction.styled.ts b/web/src/components/EditTransaction/EditTransaction.styled.ts
@@ -5,7 +5,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin-bottom: 25px;
-    font-weight: 700;
   }
 `;
 

diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts
@@ -9,7 +9,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin-bottom: 16px;
-    font-weight: 700;
   }
 `;
 

diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.styled.ts b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.styled.ts
@@ -20,7 +20,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin: 0;
-    font-weight: 700;
   }
 `;
 
@@ -87,11 +86,6 @@ export const Text = styled(Typography.Text)`
   font-size: ${({theme}) => theme.size.sm};
 `;
 
-export const StatusSpan = styled.span<{$isError: boolean}>`
-  color: ${({$isError, theme}) => ($isError ? theme.color.error : theme.color.success)};
-  font-weight: 700;
-`;
-
 export const HeadersList = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.styled.ts b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.styled.ts
@@ -20,7 +20,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin: 0;
-    font-weight: 700;
   }
 `;
 
@@ -83,7 +82,7 @@ export const Text = styled(Typography.Text)`
 
 export const StatusSpan = styled.span<{$isError: boolean}>`
   color: ${({$isError, theme}) => ($isError ? theme.color.error : theme.color.success)};
-  font-weight: 700;
+  font-weight: 600;
 `;
 
 export const HeadersList = styled.div`

diff --git a/web/src/components/RunEvents/RunEvents.styled.ts b/web/src/components/RunEvents/RunEvents.styled.ts
@@ -72,7 +72,7 @@ export const InfoIcon = styled(InfoCircleFilled)<{$isLarge?: boolean}>`
 `;
 
 export const Link = styled(Typography.Link)`
-  font-weight: bold;
+  font-weight: 600;
 `;
 
 export const ListContainer = styled.div`

diff --git a/web/src/components/Settings/DataStore/DataStore.styled.ts b/web/src/components/Settings/DataStore/DataStore.styled.ts
@@ -5,7 +5,7 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.md};
     margin-bottom: 16px;
-    font-weight: 700;
+    font-weight: 600;
   }
 `;
 

diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import {Typography} from 'antd';
-import { CheckCircleOutlined } from '@ant-design/icons';
+import {CheckCircleOutlined} from '@ant-design/icons';
 
 export const FormContainer = styled.div`
   display: grid;
@@ -73,7 +73,6 @@ export const DataStoreName = styled(Typography.Text)<{$isSelected: boolean}>`
 export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.md};
-    font-weight: 700;
     margin: 0 !important;
   }
 `;

diff --git a/web/src/components/Settings/DataStorePlugin/DataStorePluginForm.styled.ts b/web/src/components/Settings/DataStorePlugin/DataStorePluginForm.styled.ts
@@ -56,7 +56,6 @@ export const FormColumn = styled.div`
 export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.md};
-    font-weight: 700;
     margin: 0;
   }
 `;

diff --git a/web/src/components/TestSpecForm/Fields/AttributeField.styled.tsx b/web/src/components/TestSpecForm/Fields/AttributeField.styled.tsx
diff --git a/web/src/components/TestSpecForm/Fields/AttributeField.tsx b/web/src/components/TestSpecForm/Fields/AttributeField.tsx
diff --git a/web/src/components/TestSpecForm/Fields/useDropDownRenderComponent.tsx b/web/src/components/TestSpecForm/Fields/useDropDownRenderComponent.tsx
diff --git a/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts b/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts
@@ -98,7 +98,7 @@ export const EntryPointTag = styled(TextTag)`
 
 export const ExecutionStepStatus = styled.div`
   color: ${({theme}) => theme.color.textLight};
-  font-weight: 700;
+  font-weight: 600;
 `;
 
 export const ExecutionStepRunLink = styled(Link)`

diff --git a/web/src/pages/Environments/Environment.styled.tsx b/web/src/pages/Environments/Environment.styled.tsx
@@ -47,15 +47,9 @@ export const VariablesText = styled(Typography)`
   flex-basis: 50%;
 `;
 
-export const HeaderText = styled(Typography)`
+export const HeaderText = styled(Typography.Text)`
   flex-basis: 50%;
-  font-weight: bold;
-  padding-left: 8px;
-`;
-
-export const HeaderTextRight = styled(Typography)`
-  flex-basis: 50%;
-  font-weight: bold;
+  font-weight: 600;
 `;
 
 export const VariablesMainContainer = styled.div`

diff --git a/web/src/pages/Environments/EnvironmentCard.tsx b/web/src/pages/Environments/EnvironmentCard.tsx
@@ -90,7 +90,7 @@ export const EnvironmentCard = ({
           <E.VariablesMainContainer>
             <E.HeaderContainer>
               <E.HeaderText>Key</E.HeaderText>
-              <E.HeaderTextRight>Value</E.HeaderTextRight>
+              <E.HeaderText>Value</E.HeaderText>
             </E.HeaderContainer>
             <E.VariablesContainer>
               {values.map(value => (