fix: datatable text (#1050)

Author: paanSinghCoder

sdks/js/packages/core/react/components/organization/api-keys/columns.tsx

@@ -27,7 +27,8 @@ export const getColumns = ({
             }}
             style={{
               textDecoration: 'none',
-              color: 'var(--rs-color-foreground-base-primary)'
+              color: 'var(--rs-color-foreground-base-primary)',
+              fontSize: 'var(--rs-font-size-small)'
             }}
           >
             {getValue()}

sdks/js/packages/core/react/components/organization/api-keys/service-user/projects.tsx

@@ -35,6 +35,11 @@ const getColumns = ({
       header: '',
       accessorKey: 'id',
       enableSorting: false,
+      styles: {
+        cell: {
+          width: 'var(--rs-space-2)'
+        }
+      },
       cell: ({ getValue }) => {
         const projectId = getValue();
         const { value, isLoading } = permMap[projectId] || {};
@@ -57,7 +62,11 @@ const getColumns = ({
       accessorKey: 'title',
       cell: ({ getValue }) => {
         const value = getValue();
-        return <Flex direction="column">{value}</Flex>;
+        return (
+          <Flex direction="column">
+            <Text>{value}</Text>
+          </Flex>
+        );
       }
     },
     {

sdks/js/packages/core/react/components/organization/billing/invoices/index.tsx

@@ -53,10 +53,12 @@ export const getColumns: (
     cell: ({ row, getValue }) => {
       return (
         <Flex direction="column">
-          <Amount
-            currency={row?.original?.currency}
-            value={getValue() as number}
-          />
+          <Text>
+            <Amount
+              currency={row?.original?.currency}
+              value={getValue() as number}
+            />
+          </Text>
         </Flex>
       );
     }

sdks/js/packages/core/react/components/organization/domain/domain.columns.tsx

@@ -74,8 +74,9 @@ const DomainActions = ({
     <Flex align="center" justify="end" gap={9}>
       {domain.state === 'pending' ? (
         <Button
-          variant="solid"
+          variant="outline"
           color="neutral"
+          size="small"
           data-test-id="frontier-sdk-verify-domain-btn-verify"
           onClick={() =>
             navigate({
@@ -91,10 +92,11 @@ const DomainActions = ({
       ) : (
         <Flex
           gap={2}
+          align="center"
           style={{ color: 'var(--rs-color-foreground-success-primary)' }}
         >
           <CheckCircledIcon style={{ cursor: 'pointer' }} />
-          Verified
+          <Text variant="success">Verified</Text>
         </Flex>
       )}
 

sdks/js/packages/core/react/components/organization/members/member.columns.tsx

@@ -3,7 +3,6 @@ import {
   TrashIcon,
   UpdateIcon
 } from '@radix-ui/react-icons';
-import type { DataTableColumnDef } from '@raystack/apsara/v1';
 import { useNavigate } from '@tanstack/react-router';
 import {
   toast,
@@ -12,7 +11,8 @@ import {
   Avatar,
   Text,
   getAvatarColor,
-  DropdownMenu
+  DropdownMenu,
+  DataTableColumnDef
 } from '@raystack/apsara/v1';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import type { V1Beta1Policy, V1Beta1Role } from '~/src';
@@ -67,14 +67,18 @@ export const getColumns = (
     header: 'Roles',
     accessorKey: 'email',
     cell: ({ row }) => {
-      return row.original.invited
-        ? 'Pending Invite'
-        : (row.original?.id &&
-            memberRoles[row.original?.id] &&
-            memberRoles[row.original?.id]
-              .map((r: V1Beta1Role) => r.title || r.name)
-              .join(', ')) ??
-            'Inherited role';
+      return (
+        <Text>
+          {row.original.invited
+            ? 'Pending Invite'
+            : (row.original?.id &&
+                memberRoles[row.original?.id] &&
+                memberRoles[row.original?.id]
+                  .map((r: V1Beta1Role) => r.title || r.name)
+                  .join(', ')) ??
+                'Inherited role'}
+        </Text>
+      );
     }
   },
   {

sdks/js/packages/core/react/components/organization/project/projects.columns.tsx

@@ -23,7 +23,8 @@ export const getColumns: (
           }}
           style={{
             textDecoration: 'none',
-            color: 'var(--rs-color-foreground-base-primary)'
+            color: 'var(--rs-color-foreground-base-primary)',
+            fontSize: 'var(--rs-font-size-small)'
           }}
         >
           {getValue() as string}

sdks/js/packages/core/react/components/organization/teams/teams.columns.tsx

@@ -3,11 +3,10 @@ import {
   Pencil1Icon,
   TrashIcon
 } from '@radix-ui/react-icons';
-import { Text, DropdownMenu } from '@raystack/apsara/v1';
+import { Text, DropdownMenu, DataTableColumnDef } from '@raystack/apsara/v1';
 import { Link } from '@tanstack/react-router';
 import type { V1Beta1Group } from '~/src';
 import styles from '../organization.module.css';
-import type { DataTableColumnDef } from '@raystack/apsara/v1';
 
 export const getColumns: (
   userAccessOnTeam: Record<string, string[]>
@@ -23,7 +22,8 @@ export const getColumns: (
         }}
         style={{
           textDecoration: 'none',
-          color: 'var(--rs-color-foreground-base-primary)'
+          color: 'var(--rs-color-foreground-base-primary)',
+          fontSize: 'var(--rs-font-size-small)'
         }}
       >
         {getValue() as string}

sdks/js/packages/core/react/components/organization/tokens/transactions/columns.tsx

@@ -34,7 +34,7 @@ export const getColumns: (
       const value = getValue() as string;
       return (
         <Flex direction="column">
-          <Text variant="secondary" size="regular">
+          <Text variant="secondary">
             {dayjs(value).format(dateFormat)}
           </Text>
         </Flex>
@@ -49,7 +49,7 @@ export const getColumns: (
       const prefix = row?.original?.type === 'credit' ? '+' : '-';
       return (
         <Flex direction="column">
-          <Text variant="secondary" size="regular">
+          <Text variant="secondary">
             {prefix}
             {value}
           </Text>
@@ -72,7 +72,7 @@ export const getColumns: (
       ) as string;
       return (
         <Flex direction="column">
-          <Text variant="secondary" size="regular">
+          <Text variant="secondary">
             {eventName || '-'}
           </Text>
         </Flex>
@@ -96,7 +96,7 @@ export const getColumns: (
             radius="small"
             color={color}
           />
-          <Text size="regular">{userTitle}</Text>
+          <Text>{userTitle}</Text>
         </Flex>
       );
     }