create-appraisejs 0.3.1-alpha.0 → 0.3.1-alpha.1

package/templates/starter/src/app/(base)/reports/test-cases/test-cases-metric-table-columns.tsx

@@ -1,115 +1,114 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-import TableActions from '@/components/table/table-actions'
-import { Tag, TestCase, TestCaseMetrics } from '@prisma/client'
-import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
-import { formatDateTime } from '@/lib/utils'
-import { Checkbox } from '@/components/ui/checkbox'
-
-export const testCasesMetricTableCols: ColumnDef<TestCaseMetrics & { testCase: TestCase & { tags: Tag[] } }>[] =
-  [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-          className="mr-2"
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={value => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="mr-2"
-        />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-    },
-    {
-      id: 'testCase.title',
-      accessorKey: 'testCase.title',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Title" />,
-      cell: ({ row }) => {
-        const testCase = row.original.testCase
-        return <div>{testCase.title}</div>
-      },
-    },
-    {
-      accessorKey: 'testCase.description',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Description" />,
-      cell: ({ row }) => {
-        const testCase = row.original.testCase
-        return <div>{testCase.description}</div>
-      },
-    },
-    {
-      accessorKey: 'consecutiveFailures',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Consecutive Failures" />,
-    },
-    {
-      accessorKey: 'failureRate',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Failure Rate" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{((testCaseMetrics.failureRate as number) * 100).toFixed(2)}%</div>
-      },
-    },
-    {
-      accessorKey: 'totalRecentRuns',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Total Recent Runs" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.totalRecentRuns}</div>
-      },
-    },
-    {
-      accessorKey: 'failedRecentRuns',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Failed Recent Runs" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.failedRecentRuns}</div>
-      },
-    },
-    {
-      accessorKey: 'lastExecutedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.lastExecutedAt ? formatDateTime(testCaseMetrics.lastExecutedAt) : '-'}</div>
-      },
-    },
-    {
-      accessorKey: 'lastFailedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Failed At" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.lastFailedAt ? formatDateTime(testCaseMetrics.lastFailedAt) : '-'}</div>
-      },
-    },
-    {
-      accessorKey: 'lastPassedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Passed At" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.lastPassedAt ? formatDateTime(testCaseMetrics.lastPassedAt) : '-'}</div>
-      },
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => {
-        const testCaseId = row.original.testCaseId
-        return (
-          <TableActions
-            modifyLink={`/test-cases/modify/${testCaseId}`}
-            deleteHandler={() => deleteTestCaseAction([testCaseId])}
-          />
-        )
-      },
-    },
-  ]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+import TableActions from '@/components/table/table-actions'
+import { Tag, TestCase, TestCaseMetrics } from '@prisma/client'
+import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
+import { formatDateTime } from '@/lib/utils'
+import { Checkbox } from '@/components/ui/checkbox'
+
+export const testCasesMetricTableCols: ColumnDef<TestCaseMetrics & { testCase: TestCase & { tags: Tag[] } }>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    id: 'testCase.title',
+    accessorKey: 'testCase.title',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Title" />,
+    cell: ({ row }) => {
+      const testCase = row.original.testCase
+      return <div>{testCase.title}</div>
+    },
+  },
+  {
+    accessorKey: 'testCase.description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Description" />,
+    cell: ({ row }) => {
+      const testCase = row.original.testCase
+      return <div>{testCase.description}</div>
+    },
+  },
+  {
+    accessorKey: 'consecutiveFailures',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Consecutive Failures" />,
+  },
+  {
+    accessorKey: 'failureRate',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Failure Rate" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{((testCaseMetrics.failureRate as number) * 100).toFixed(2)}%</div>
+    },
+  },
+  {
+    accessorKey: 'totalRecentRuns',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Total Recent Runs" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.totalRecentRuns}</div>
+    },
+  },
+  {
+    accessorKey: 'failedRecentRuns',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Failed Recent Runs" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.failedRecentRuns}</div>
+    },
+  },
+  {
+    accessorKey: 'lastExecutedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.lastExecutedAt ? formatDateTime(testCaseMetrics.lastExecutedAt) : '-'}</div>
+    },
+  },
+  {
+    accessorKey: 'lastFailedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Failed At" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.lastFailedAt ? formatDateTime(testCaseMetrics.lastFailedAt) : '-'}</div>
+    },
+  },
+  {
+    accessorKey: 'lastPassedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Passed At" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.lastPassedAt ? formatDateTime(testCaseMetrics.lastPassedAt) : '-'}</div>
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const testCaseId = row.original.testCaseId
+      return (
+        <TableActions
+          modifyLink={`/test-cases/modify/${testCaseId}`}
+          deleteHandler={() => deleteTestCaseAction([testCaseId])}
+        />
+      )
+    },
+  },
+]

package/templates/starter/src/app/(base)/reports/test-cases/test-cases-metric-table.tsx

@@ -1,27 +1,27 @@
-import { DataTable } from '@/components/ui/data-table'
-import { testCasesMetricTableCols } from './test-cases-metric-table-columns'
-import { TestCaseMetrics, TestCase, Tag } from '@prisma/client'
-import { getAllTestCaseMetricsAction } from '@/actions/reports/report-actions'
-import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
-
-const TestCasesMetricTable = async ({ filter }: { filter: 'repeatedlyFailing' | 'flaky' }) => {
-  const { data: testCaseMetrics, error: testCaseMetricsError } = await getAllTestCaseMetricsAction(filter)
-
-  if (testCaseMetricsError) {
-    return <div>Error: {testCaseMetricsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={testCasesMetricTableCols}
-        data={testCaseMetrics as (TestCaseMetrics & { testCase: TestCase & { tags: Tag[] } })[]}
-        filterColumn="testCase.title"
-        filterPlaceholder="Filter by name..."
-        deleteAction={deleteTestCaseAction}
-      />
-    </>
-  )
-}
-
-export default TestCasesMetricTable
+import { DataTable } from '@/components/ui/data-table'
+import { testCasesMetricTableCols } from './test-cases-metric-table-columns'
+import { TestCaseMetrics, TestCase, Tag } from '@prisma/client'
+import { getAllTestCaseMetricsAction } from '@/actions/reports/report-actions'
+import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
+
+const TestCasesMetricTable = async ({ filter }: { filter: 'repeatedlyFailing' | 'flaky' }) => {
+  const { data: testCaseMetrics, error: testCaseMetricsError } = await getAllTestCaseMetricsAction(filter)
+
+  if (testCaseMetricsError) {
+    return <div>Error: {testCaseMetricsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={testCasesMetricTableCols}
+        data={testCaseMetrics as (TestCaseMetrics & { testCase: TestCase & { tags: Tag[] } })[]}
+        filterColumn="testCase.title"
+        filterPlaceholder="Filter by name..."
+        deleteAction={deleteTestCaseAction}
+      />
+    </>
+  )
+}
+
+export default TestCasesMetricTable

package/templates/starter/src/app/(base)/reports/test-suites/test-suites-metric-table-columns.tsx

@@ -1,79 +1,80 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-import TableActions from '@/components/table/table-actions'
-import { Tag, TestCase, TestSuite, TestSuiteMetrics } from '@prisma/client'
-import { formatDateTime } from '@/lib/utils'
-import { Checkbox } from '@/components/ui/checkbox'
-import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-
-export const testSuitesMetricTableCols: ColumnDef<TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } }>[] =
-  [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-          className="mr-2"
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={value => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="mr-2"
-        />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-    },
-    {
-      id: 'testSuite.name',
-      accessorKey: 'testSuite.name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Name" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.name}</div>
-      },
-    },
-    {
-      accessorKey: 'testSuite.description',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Description" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.description}</div>
-      },
-    },
-    {
-      accessorKey: 'testSuite.testCases.length',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases" />,
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return <div>{testSuite.testCases.length}</div>
-      },
-    },
-    {
-      accessorKey: 'lastExecutedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
-      cell: ({ row }) => {
-        const testSuiteMetrics = row.original
-        return <div>{formatDateTime(testSuiteMetrics.lastExecutedAt)}</div>
-      },
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => {
-        const testSuite = row.original.testSuite
-        return (
-          <TableActions
-            modifyLink={`/test-suites/modify/${testSuite.id}`}
-            deleteHandler={() => deleteTestSuiteAction([testSuite.id])}
-          />
-        )
-      },
-    },
-  ]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+import TableActions from '@/components/table/table-actions'
+import { Tag, TestCase, TestSuite, TestSuiteMetrics } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { Checkbox } from '@/components/ui/checkbox'
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+
+export const testSuitesMetricTableCols: ColumnDef<
+  TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } }
+>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    id: 'testSuite.name',
+    accessorKey: 'testSuite.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Name" />,
+    cell: ({ row }) => {
+      const testSuite = row.original.testSuite
+      return <div>{testSuite.name}</div>
+    },
+  },
+  {
+    accessorKey: 'testSuite.description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Description" />,
+    cell: ({ row }) => {
+      const testSuite = row.original.testSuite
+      return <div>{testSuite.description}</div>
+    },
+  },
+  {
+    accessorKey: 'testSuite.testCases.length',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases" />,
+    cell: ({ row }) => {
+      const testSuite = row.original.testSuite
+      return <div>{testSuite.testCases.length}</div>
+    },
+  },
+  {
+    accessorKey: 'lastExecutedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
+    cell: ({ row }) => {
+      const testSuiteMetrics = row.original
+      return <div>{formatDateTime(testSuiteMetrics.lastExecutedAt)}</div>
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const testSuite = row.original.testSuite
+      return (
+        <TableActions
+          modifyLink={`/test-suites/modify/${testSuite.id}`}
+          deleteHandler={() => deleteTestSuiteAction([testSuite.id])}
+        />
+      )
+    },
+  },
+]

package/templates/starter/src/app/(base)/reports/test-suites/test-suites-metric-table.tsx

@@ -1,27 +1,29 @@
-import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-import { DataTable } from '@/components/ui/data-table'
-import { TestCase, Tag, TestSuiteMetrics, TestSuite } from '@prisma/client'
-import { getAllTestSuiteMetricsAction } from '@/actions/reports/report-actions'
-import { testSuitesMetricTableCols } from './test-suites-metric-table-columns'
-
-const TestSuitesMetricTable = async ({ filter }: { filter: 'notExecutedRecently' }) => {
-  const { data: testSuiteMetrics, error: testSuiteMetricsError } = await getAllTestSuiteMetricsAction(filter)
-
-  if (testSuiteMetricsError) {
-    return <div>Error: {testSuiteMetricsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={testSuitesMetricTableCols}
-        data={testSuiteMetrics as (TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } })[]}
-        filterColumn="testSuite.name"
-        filterPlaceholder="Filter by name..."
-        deleteAction={deleteTestSuiteAction}
-      />
-    </>
-  )
-}
-
-export default TestSuitesMetricTable
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { TestCase, Tag, TestSuiteMetrics, TestSuite } from '@prisma/client'
+import { getAllTestSuiteMetricsAction } from '@/actions/reports/report-actions'
+import { testSuitesMetricTableCols } from './test-suites-metric-table-columns'
+
+const TestSuitesMetricTable = async ({ filter }: { filter: 'notExecutedRecently' }) => {
+  const { data: testSuiteMetrics, error: testSuiteMetricsError } = await getAllTestSuiteMetricsAction(filter)
+
+  if (testSuiteMetricsError) {
+    return <div>Error: {testSuiteMetricsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={testSuitesMetricTableCols}
+        data={
+          testSuiteMetrics as (TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } })[]
+        }
+        filterColumn="testSuite.name"
+        filterPlaceholder="Filter by name..."
+        deleteAction={deleteTestSuiteAction}
+      />
+    </>
+  )
+}
+
+export default TestSuitesMetricTable

package/templates/starter/src/app/(base)/settings/settings-sync-panel-helpers.test.tsx

@@ -2,11 +2,7 @@
 
 import { describe, expect, it } from 'vitest'
 
-import {
-  formatExecutionSummary,
-  formatFailureSummary,
-  formatExecutionOrder,
-} from './settings-sync-panel-helpers'
+import { formatExecutionSummary, formatFailureSummary, formatExecutionOrder } from './settings-sync-panel-helpers'
 
 describe('settings-sync-panel helpers', () => {
   it('formats the sync-all execution summary', () => {
@@ -35,6 +31,8 @@ describe('settings-sync-panel helpers', () => {
   })
 
   it('formats the requested execution order labels', () => {
-    expect(formatExecutionOrder('sync-test-cases')).toBe('Modules -> Tags -> Test Suites -> Template Step Groups -> Template Steps -> Test Cases')
+    expect(formatExecutionOrder('sync-test-cases')).toBe(
+      'Modules -> Tags -> Test Suites -> Template Step Groups -> Template Steps -> Test Cases',
+    )
   })
 })

package/templates/starter/src/app/(base)/settings/settings-sync-panel.tsx

@@ -1,8 +1,6 @@
 'use client'
 
-import {
-  RefreshCw,
-} from 'lucide-react'
+import { RefreshCw } from 'lucide-react'
 import { AppDrawerItemColor } from '@/app/(dashboard-components)/app-drawer'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -14,11 +12,7 @@ import {
   syncScriptDefinitions,
 } from '@/lib/sync/sync-registry'
 import type { SyncPendingCounts } from '@/lib/sync/sync-pending-counts'
-import {
-  getSyncTooltipCopy,
-  syncPanelInfo,
-  syncPresentation,
-} from './settings-sync-panel-helpers'
+import { getSyncTooltipCopy, syncPanelInfo, syncPresentation } from './settings-sync-panel-helpers'
 import { useSettingsSync } from './use-settings-sync'
 
 function SyncRow({
@@ -66,16 +60,22 @@ function SyncRow({
       </TooltipTrigger>
       <TooltipContent className="max-w-xs">
         <p>{definition.description}</p>
-        <p className="mt-1 text-primary-foreground/80">{getSyncTooltipCopy(definition.id)}</p>
+        <p className="text-primary-foreground/80 mt-1">{getSyncTooltipCopy(definition.id)}</p>
       </TooltipContent>
     </Tooltip>
   )
 }
 
 export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendingCounts }) {
-  const { activeRequestId, isRunning, pendingCounts: currentPendingCounts, runSync } = useSettingsSync({
+  const {
+    activeRequestId,
+    isRunning,
+    pendingCounts: currentPendingCounts,
+    runSync,
+  } = useSettingsSync({
     initialPendingCounts: pendingCounts,
   })
+  const syncAllColor = AppDrawerItemColor.emerald
 
   return (
     <TooltipProvider>
@@ -85,13 +85,9 @@ export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendin
             <CardTitle className="text-primary">Sync</CardTitle>
             <Tooltip>
               <TooltipTrigger asChild>
-                <span className="cursor-help text-muted-foreground">
-                  {syncPanelInfo.helpIcon}
-                </span>
+                <span className="cursor-help text-muted-foreground">{syncPanelInfo.helpIcon}</span>
               </TooltipTrigger>
-              <TooltipContent className="max-w-xs">
-                Runs all sync targets with prerequisites.
-              </TooltipContent>
+              <TooltipContent className="max-w-xs">Runs all sync targets with prerequisites.</TooltipContent>
             </Tooltip>
           </div>
         </CardHeader>
@@ -99,27 +95,30 @@ export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendin
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
+                variant="outline"
                 disabled={isRunning}
                 aria-label="Sync All"
                 onClick={() => runSync(SYNC_ALL_REQUEST_ID)}
-                className="inline-flex h-24 w-44 flex-none flex-col items-start justify-start whitespace-normal rounded-2xl border-none bg-emerald-500/10 px-3 py-2.5 text-left text-emerald-950 hover:bg-emerald-500/20 hover:text-emerald-950"
+                className={`inline-flex h-24 w-44 flex-none flex-col items-start justify-start whitespace-normal rounded-2xl border-none px-3 py-2.5 text-left hover:text-foreground ${syncAllColor.buttonColor}`}
               >
                 <div className="flex w-full items-center justify-between gap-3">
-                  <div className="text-emerald-500 [&_svg]:!h-5 [&_svg]:!w-5">
+                  <div className={`${syncAllColor.iconColor} shrink-0 [&_svg]:!h-5 [&_svg]:!w-5`}>
                     {activeRequestId === SYNC_ALL_REQUEST_ID ? <RefreshCw className="animate-spin" /> : <RefreshCw />}
                   </div>
                   {currentPendingCounts[SYNC_ALL_REQUEST_ID] > 0 ? (
-                    <div className="rounded-full bg-emerald-400 px-2 py-1 text-[10px] font-semibold text-emerald-900">
+                    <div
+                      className={`flex min-w-7 shrink-0 items-center justify-center rounded-full px-2 py-1 text-[10px] font-semibold ${syncAllColor.badgeColor}`}
+                    >
                       {currentPendingCounts[SYNC_ALL_REQUEST_ID]}
                     </div>
                   ) : null}
                 </div>
-                <p className="mt-3 text-xs font-medium leading-4">Sync All</p>
+                <div className="mt-3 min-w-0">
+                  <p className="break-words text-xs font-medium leading-4 text-foreground">Sync All</p>
+                </div>
               </Button>
             </TooltipTrigger>
-            <TooltipContent className="max-w-xs">
-              {getSyncTooltipCopy(SYNC_ALL_REQUEST_ID)}
-            </TooltipContent>
+            <TooltipContent className="max-w-xs">{getSyncTooltipCopy(SYNC_ALL_REQUEST_ID)}</TooltipContent>
           </Tooltip>
           <div className="flex flex-wrap items-start gap-4">
             {syncScriptDefinitions.map(definition => (