[@kadena/react-ui] Fix TrackerCard styling

kadena-community · Aug 10, 2023 · d1b6b85 · d1b6b85 · vercel · Aug 10, 2023
1 parent d665c86
commit d1b6b85
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/packages/libs/react-ui/package.json b/packages/libs/react-ui/package.json
@@ -60,8 +60,8 @@
     "@rushstack/eslint-config": "~3.3.0",
     "@rushstack/heft": "~0.50.6",
     "@rushstack/heft-jest-plugin": "~0.5.12",
-    "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-a11y": "7.1.0",
+    "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-controls": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",

diff --git a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts
@@ -1,5 +1,5 @@
-import { sprinkles } from '../../styles';
-
+import { sprinkles } from '@theme/sprinkles.css';
+import { darkThemeClass, vars } from '@theme/vars.css';
 import { style, styleVariants } from '@vanilla-extract/css';
 
 export const layoutVariant = styleVariants({
@@ -77,13 +77,24 @@ export const CardContainer = style([
   sprinkles({
     display: 'grid',
     padding: '$3',
-    gap: '$4',
+    gap: '$2',
     marginTop: '$sm',
     borderRadius: '$sm',
     alignItems: 'flex-start',
     fontSize: '$sm',
-    background: '$background',
+    background: {
+      lightMode: '$white',
+      darkMode: '$gray100',
+    },
   }),
+  {
+    border: `1px solid ${vars.colors.$borderDefault}`,
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        border: `1px solid ${vars.colors.$gray60}`,
+      },
+    },
+  },
 ]);
 
 export const ContentContainer = style([

diff --git a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.tsx b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.tsx
@@ -23,7 +23,7 @@ export interface ITrackerCardProps {
   helperText?: string;
   helperTextType?: 'mild' | 'severe';
   icon?: (typeof ProductIcon)[keyof typeof ProductIcon];
-  variant: keyof typeof layoutVariant;
+  variant?: keyof typeof layoutVariant;
 }
 
 export interface ILabelValue {
@@ -40,7 +40,7 @@ export const TrackerCard: FC<ITrackerCardProps> = ({
   icon,
   helperText,
   helperTextType = 'mild',
-  variant,
+  variant = 'vertical',
 }): JSX.Element => {
   const classCardContainer = classNames(
     CardContainer,
@@ -64,7 +64,7 @@ export const TrackerCard: FC<ITrackerCardProps> = ({
 
   return (
     <div className={classCardContainer} data-testid="kda-tracker-card">
-      {Icon ? <Icon data-testid="kda-icon" /> : <div />}
+      {Icon ? <Icon data-testid="kda-icon" size="xl" /> : null}
       <div className={ContentContainer}>
         <div className={DataContainer} data-testid="kda-data-container">
           {labelValues?.map((item, index) => {