From 9332e8421790c0c81388e1cb081d1cb8bcde8220 Mon Sep 17 00:00:00 2001
From: rohitmalhotra1420 <rohit.malhotra1420@gmail.com>
Date: Wed, 13 Nov 2024 16:26:40 +0530
Subject: [PATCH] ui fixes done

---
 blocks/spinner/Spinner.tsx | 24 +++++++++++++++---------
 blocks/table/Table.tsx     | 31 +++++++++++++++++++++----------
 theme/globalStyles.ts      |  5 ++++-
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/blocks/spinner/Spinner.tsx b/blocks/spinner/Spinner.tsx
index 31eb925..1c80388 100644
--- a/blocks/spinner/Spinner.tsx
+++ b/blocks/spinner/Spinner.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import styled, { FlattenSimpleInterpolation, keyframes } from 'styled-components';
+import styled, {
+  FlattenSimpleInterpolation,
+  keyframes,
+} from 'styled-components';
 import { SpinnerSize, SpinnerVariant } from './Spinner.types';
 import { getSpinnerSize, getSpinnerColor } from './Spinner.utils';
 import { Ellipse } from '../icons';
@@ -19,7 +22,11 @@ const spin = keyframes`
         transform:rotate(360deg);
     }
 `;
-const Container = styled.div<{ css?: FlattenSimpleInterpolation; size: SpinnerSize; variant?: SpinnerVariant }>`
+const Container = styled.div<{
+  css?: FlattenSimpleInterpolation;
+  size: SpinnerSize;
+  variant?: SpinnerVariant;
+}>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -45,14 +52,13 @@ const Container = styled.div<{ css?: FlattenSimpleInterpolation; size: SpinnerSi
   /* Custom CSS applied via styled component css prop */
   ${(props) => props.css || ''};
 `;
-const Spinner: React.FC<SpinnerProps> = ({ size = 'small', css, variant }) => {
+const Spinner: React.FC<SpinnerProps> = ({
+  size = 'small',
+  css,
+  variant = 'primary',
+}) => {
   return (
-    <Container
-      size={size}
-      css={css}
-      variant={variant}
-      role="spinner"
-    >
+    <Container size={size} css={css} variant={variant} role="spinner">
       <Ellipse size={getSpinnerSize(size)} />
     </Container>
   );
diff --git a/blocks/table/Table.tsx b/blocks/table/Table.tsx
index 2f58001..5789f4a 100644
--- a/blocks/table/Table.tsx
+++ b/blocks/table/Table.tsx
@@ -30,7 +30,9 @@ export type TableProps = {
   retrying?: boolean;
 };
 
-const StyledHeaderCell = styled(HeaderCell)<{ headerAlignment?: Column['headerAlignment'] }>`
+const StyledHeaderCell = styled(HeaderCell)<{
+  headerAlignment?: Column['headerAlignment'];
+}>`
   ${({ headerAlignment }) =>
     headerAlignment
       ? `
@@ -113,7 +115,9 @@ const Table: FC<TableProps> = ({
   retrying = false,
 }) => {
   const columnData = useMemo(() => {
-    const columnWidths = columns.map((col) => col.width || `${100 / columns.length}%`);
+    const columnWidths = columns.map(
+      (col) => col.width || `${100 / columns.length}%`
+    );
 
     const leftRightPositionCSS = columns
       .map((col, index) => {
@@ -127,7 +131,9 @@ const Table: FC<TableProps> = ({
         if (col?.fixed == 'right') {
           return `
             &:nth-of-type(${index + 1}) {
-              right: ${index + 1 === columns.length ? '0px' : columnWidths[index]};
+              right: ${
+                index + 1 === columns.length ? '0px' : columnWidths[index]
+              };
             };
           `;
         }
@@ -191,19 +197,22 @@ const Table: FC<TableProps> = ({
     <TableContainer>
       {loading && !error && (
         <OverlayContainer blur>
-          <Spinner
-            size="medium"
-            variant="primary"
-          />
+          <Spinner size="medium" variant="primary" />
           <LoadingText>Loading</LoadingText>
         </OverlayContainer>
       )}
       {!loading && !dataSource.length && (
         <OverlayContainer>
           <NullStateContainer>
-            {error ? <ErrorFilled size={24} /> : <Search size={24} />}
+            {error ? (
+              <ErrorFilled size={24} color="icon-primary" />
+            ) : (
+              <Search size={24} color="icon-primary" />
+            )}
             <NullStateTextContainer>
-              <NullStateHeading>{error ? 'Trouble Fetching Data' : 'No Results Found'}</NullStateHeading>
+              <NullStateHeading>
+                {error ? 'Trouble Fetching Data' : 'No Results Found'}
+              </NullStateHeading>
               <NullStateDescription>
                 {error
                   ? 'Please try again in a few minutes or reload the page.'
@@ -263,7 +272,9 @@ const Table: FC<TableProps> = ({
                         pinLeft={column?.fixed === 'left'}
                         pinRight={column?.fixed === 'right'}
                       >
-                        {column.render ? column.render(cellValue, record) : cellValue}
+                        {column.render
+                          ? column.render(cellValue, record)
+                          : cellValue}
                       </StyledRowCell>
                     );
                   })}
diff --git a/theme/globalStyles.ts b/theme/globalStyles.ts
index 6b998eb..060b576 100644
--- a/theme/globalStyles.ts
+++ b/theme/globalStyles.ts
@@ -11,6 +11,7 @@ export const GlobalStyles = createGlobalStyle`
     url('${basePath}/static/fonts/FKGroteskNeue-Regular.woff') format('woff');
   font-weight: 100 400;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -20,6 +21,7 @@ export const GlobalStyles = createGlobalStyle`
 
   font-weight: 500 600;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -28,6 +30,7 @@ export const GlobalStyles = createGlobalStyle`
     url('${basePath}/static/fonts/FKGroteskNeue-Bold.woff') format('woff');
   font-weight: 700 800;
   font-style: normal;
+  font-display: swap;
 }
 
   body {
@@ -43,7 +46,7 @@ export const GlobalStyles = createGlobalStyle`
  
   :root {
     /* Font Family */
-    --font-family: 'FK Grotesk Neu';
+    --font-family: 'FK Grotesk Neu', Arial, sans-serif;
     
     ${(props) => getBlocksCSSVariables(props.theme.blocksTheme)}
   }