DataTable: use next DropShadow

Author: Nina Benite

src/@next/DataTable/DataTableStyle.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Shadow } from '../../Utils/Shadow';
+import * as DropShadow from '../utilities/dropShadow';
 import { borderRadius8 } from '../utilities/borderRadius';
 import { Blue, Neutral } from '../utilities/colors';
 import { space16 } from '../utilities/spacing';
@@ -141,5 +141,5 @@ export const StyledSpinnerContainer = styled.div`
 export const StyledDataTableContainer = styled.div`
   overflow-x: auto;
   scroll-behavior: smooth;
-  box-shadow: ${Shadow.card};
+  box-shadow: ${DropShadow.card};
 `;

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), 

src/Utils/Shadow/index.ts

@@ -10,9 +10,6 @@ const down3 = '0 6px 12px 0 rgba(0, 0, 0, 0.10)';
 const up4 = '0 -12px 24px 0 rgba(0, 0, 0, 0.10)';
 const down4 = '0 12px 24px 0 rgba(0, 0, 0, 0.10)';
 
-const card =
-  '0px 0px 5px rgba(71, 71, 71, 0.1), 0px 1px 2px rgba(71, 71, 71, 0.2)';
-
 export const Shadow = {
   up1,
   down1,
@@ -22,7 +19,6 @@ export const Shadow = {
   down3,
   up4,
   down4,
-  card,
 } as const;
 
 export type ShadowValueType = typeof Shadow[keyof typeof Shadow];