Merge pull request #269 from mayuran-deriv/mayuran/font-token-style-issues

fix: font issues

Author: mayuran-deriv

src/features/Apiexplorer/styles.module.scss

@@ -46,7 +46,6 @@
           align-items: stretch;
           gap: 10px;
           z-index: 2;
-          p,
           span {
             color: var(--ifm-font-color-base);
           }

src/features/dashboard/components/api-token-table/api-table.module.scss

@@ -24,7 +24,7 @@
   flex-direction: column;
   border: 1px solid var(--opacity-black-100);
   border-radius: 32px;
-  p,
+
   h3 {
     color: var(--ifm-font-color-base);
   }

src/features/dashboard/components/api-token-table/responsive-table.tsx

@@ -14,19 +14,26 @@ type TResponsiveTableProps = {
 type TAccordionItemProps = {
   label: string;
   value: React.ReactNode;
+  isToken?: boolean;
 };
 
-const AccordionItem: React.FC<TAccordionItemProps> = ({ label, value }) => (
+const AccordionItem: React.FC<TAccordionItemProps> = ({ label, value, isToken }) => (
   <div className={`accordion_item accordion_item_column`}>
     <div className='accordion_item__label'>{label}</div>
-    <div className={`accordion_item__value accordion_item__value_column`}>{value}</div>
+    <div
+      className={`accordion_item__value accordion_item__value_column ${
+        isToken ? 'accordion_item__value_token' : ''
+      }`}
+    >
+      {value}
+    </div>
   </div>
 );
 
 const generateContent = (token: TTokenType) => {
   return (
     <div>
-      <AccordionItem label={translate({ message: 'Token' })} value={token.token} />
+      <AccordionItem label={translate({ message: 'Token' })} value={token.token} isToken />
       <AccordionItem label={translate({ message: 'Account type' })} value={<AccountTypeCell />} />
       <AccordionItem
         label={translate({ message: 'Token scopes' })}

src/features/dashboard/components/apps-table/responsive-table.scss

@@ -18,6 +18,9 @@
   &__value {
     text-align: end;
     justify-content: end;
+    &_token {
+      font-family: var(--ibm-font-family);
+    }
     &_row {
       text-align: start;
       justify-content: start;

src/features/dashboard/components/common-table/common-table.tsx

@@ -70,7 +70,16 @@ const CommonTable = <T extends object>({
                       maxWidth: cell.column.maxWidth > 1000 ? 'auto' : cell.column.maxWidth,
                     }}
                   >
-                    <Text>{cell.render('Cell', getCustomCellProps(cell))}</Text>
+                    <Text
+                      style={{
+                        fontFamily:
+                          cell.column.id === 'token'
+                            ? ' var(--ibm-font-family) !important'
+                            : 'inherit',
+                      }}
+                    >
+                      {cell.render('Cell', getCustomCellProps(cell))}
+                    </Text>
                   </td>
                 );
               })}

src/features/dashboard/components/token-register/token-register.scss

@@ -51,9 +51,6 @@
     width: 100%;
     z-index: 10;
     margin-bottom: 1.5rem;
-    p {
-      color: var(--ifm-font-color-base);
-    }
   }
   .token_register__scopes,
   .token_register__name {

src/styles/index.scss

@@ -1,6 +1,7 @@
 @use 'utility' as *;
 @use 'mixins' as *;
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');
 
 /**
  * Any CSS included here will be global. The classic template
@@ -13,6 +14,7 @@
 
 :root {
   --inter-font-family: 'Inter', sans-serif;
+  --ibm-font-family: 'IBM Plex Sans', sans-serif;
   --ifm-font-color-base: #181c25;
   --ifm-color-primary: #2e8555;
   --ifm-color-primary-dark: #29784c;