Merge pull request #789 from glints-dev/feature/data-table-style-adjustments

feat: Data Table style adjustments

Author: ninariccimarie

src/@next/DataTable/DataTable.tsx

@@ -139,9 +139,7 @@ const DataTableComponent = React.forwardRef<HTMLTableElement, DataTableProps>(
           <tbody>
             <LoadingRow />
             {totalsRowMarkup && hasRows && (
-              <StyledTableRow data-total="true">
-                {totalsRowMarkup}
-              </StyledTableRow>
+              <StyledTableRow>{totalsRowMarkup}</StyledTableRow>
             )}
             {rowsMarkup}
           </tbody>

src/@next/DataTable/DataTableStyle.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import * as DropShadow from '../utilities/dropShadow';
 import { borderRadius8 } from '../utilities/borderRadius';
 import { Blue, Neutral } from '../utilities/colors';
 import { space16 } from '../utilities/spacing';
@@ -27,6 +28,10 @@ export const StyledTable = styled.table`
   max-width: 100vw;
   border-bottom: 0;
 
+  thead tr {
+    background: ${Neutral.B99};
+  }
+
   &[data-has-footer='true'] {
     border-bottom: 1px solid ${Neutral.B85};
   }
@@ -50,9 +55,6 @@ export const StyledTableRow = styled.tr`
   &:hover {
     background: ${Neutral.B99};
   }
-  &[data-total='true'] {
-    background: ${Neutral.B99};
-  }
 `;
 
 export const StyledTabledHeader = styled.th`
@@ -67,6 +69,7 @@ export const StyledTabledHeader = styled.th`
     height: auto;
     border: none;
     box-shadow: none;
+    background: ${Neutral.B99};
   }
 
   button:hover {
@@ -99,7 +102,7 @@ export const StyledTableCell = styled.td`
 `;
 
 export const StyledTableFooterRow = styled.tr`
-  background: ${Neutral.B99};
+  background: ${Neutral.B100};
   border-top: 0;
   border-radius: 0px 0px ${borderRadius8} ${borderRadius8};
   td {
@@ -138,4 +141,5 @@ export const StyledSpinnerContainer = styled.div`
 export const StyledDataTableContainer = styled.div`
   overflow-x: auto;
   scroll-behavior: smooth;
+  box-shadow: ${DropShadow.card};
 `;

src/@next/DataTable/TableHeader.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
 import { SortDirection } from './DataTable';
 import { StyledTabledHeader } from './DataTableStyle';
 
@@ -31,7 +32,12 @@ export const TableHeader = ({
 
   const iconMarkup = sortDirection ? <Icon name={iconName} /> : null;
   const titleMarkup = (
-    <Typography as="span" variant="body1" style={{ whiteSpace: 'nowrap' }}>
+    <Typography
+      as="span"
+      variant="body2"
+      color={Neutral.B18}
+      style={{ whiteSpace: 'nowrap' }}
+    >
       {title}
     </Typography>
   );

src/@next/utilities/dropShadow/DropShadow.ts

@@ -7,8 +7,7 @@ export const deep = `0 0 0 1px rgba(6, 44, 82, 0.1),
 export const button = '0 1px 0 rgba(0, 0, 0, 0.05)';
 export const buttonFocused = '0px 0px 0px 2px rgba(106, 201, 236, 1)';
 export const topBar = '0 2px 2px -1px rgba(0, 0, 0, 0.15)';
-export const card = `0 0 5px rgba(23, 24, 24, 0.05), 
-  0 1px 2px rgba(0, 0, 0, 0.15)`;
+export const card = `0px 1px 2px 0px rgb(71 71 71 / 20%), 0px 0px 5px 0px rgb(71 71 71 / 10%)`;
 export const popOver = `0 3px 6px -3px rgba(23, 24, 24, 0.08), 
   0 8px 20px -4px rgba(23, 24, 24, 0.12)`;
 export const layer = `0 31px 41px 0 rgba(32, 42, 53, 0.2),