Redesign session detail view

ui/src/components/filtering/default-filter-control.tsx

@@ -49,20 +49,13 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => {
 }
 
 export const DefaultFiltersTooltip = ({
-  className,
   project,
 }: {
-  className?: string
   project: ProjectDetails
 }) => (
   <Popover.Root>
     <Popover.Trigger asChild>
-      <Button
-        aria-label={translate(STRING.INFO)}
-        className={className}
-        size="icon"
-        variant="ghost"
-      >
+      <Button aria-label={translate(STRING.INFO)} size="icon" variant="ghost">
         <InfoIcon className="w-4 h-4" />
       </Button>
     </Popover.Trigger>

ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss

@@ -14,10 +14,6 @@
   border: 1px solid var(--color-border);
   flex-shrink: 0;
 
-  &.neutral {
-    border-color: var(--color-neutral-400);
-  }
-
   &:focus-visible {
     box-shadow: 0 0 0 2px var(--color-generic-black);
   }
@@ -50,18 +46,6 @@
   color: var(--color-muted-foreground);
   margin-left: 6px;
 
-  &.success {
-    color: var(--color-success);
-  }
-
-  &.alert {
-    color: var(--color-accent);
-  }
-
-  &.neutral {
-    color: var(--color-generic-white);
-  }
-
   &.disabled {
     opacity: 0.5;
   }

ui/src/nova-ui-kit/components/checkbox/checkbox.tsx

@@ -3,19 +3,11 @@ import classNames from 'classnames'
 import { CheckIcon, MinusIcon } from 'lucide-react'
 import styles from './checkbox.module.scss'
 
-export enum CheckboxTheme {
-  Default = 'default',
-  Success = 'success',
-  Alert = 'alert',
-  Neutral = 'neutral',
-}
-
 interface CheckboxProps {
   checked: boolean | 'indeterminate'
   disabled?: boolean
   id?: string
   label?: string
-  theme?: CheckboxTheme
   onCheckedChange?: (checked: boolean) => void
 }
 
@@ -24,15 +16,12 @@ export const Checkbox = ({
   disabled,
   id,
   label,
-  theme = CheckboxTheme.Default,
   onCheckedChange,
 }: CheckboxProps) => (
   <div className={styles.wrapper}>
     <_Checkbox.Root
       checked={checked}
-      className={classNames(styles.checkboxRoot, {
-        [styles.neutral]: theme === CheckboxTheme.Neutral,
-      })}
+      className={styles.checkboxRoot}
       disabled={disabled}
       id={id}
       onCheckedChange={onCheckedChange}
@@ -48,9 +37,6 @@ export const Checkbox = ({
       <label
         htmlFor={id}
         className={classNames(styles.label, {
-          [styles.success]: theme === CheckboxTheme.Success,
-          [styles.alert]: theme === CheckboxTheme.Alert,
-          [styles.neutral]: theme === CheckboxTheme.Neutral,
           [styles.disabled]: disabled,
         })}
       >

ui/src/nova-ui-kit/components/info-block/info-block.tsx

@@ -62,7 +62,7 @@ export const InfoBlockFieldValue = ({
           </span>
         </Link>
       ) : (
-        <span className="body-base">{valueLabel}</span>
+        <span className="body-base break-all">{valueLabel}</span>
       )}
     </>
   )

ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss

@@ -1,6 +1,6 @@
 .statusMarker {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background-color: var(--color-border);
 }

ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx

@@ -1,7 +1,6 @@
 import { Columns3CogIcon } from 'lucide-react'
 import { BasicTooltip, Button, Checkbox, Popover } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
-import styles from './column-settings.module.scss'
 
 interface ColumnSettingsProps {
   columns: { id: string; name: string }[]
@@ -27,29 +26,27 @@ export const ColumnSettings = ({
         </Button>
       </Popover.Trigger>
     </BasicTooltip>
-    <Popover.Content className={styles.wrapper} align="end" side="bottom">
-      <div>
-        <span className={styles.description}>
-          {translate(STRING.TABLE_COLUMNS)}
-        </span>
-        <div className={styles.settings}>
-          {columns.map((column) =>
-            column.name.length ? (
-              <Checkbox
-                key={column.id}
-                checked={columnSettings[column.id]}
-                id={column.id}
-                label={column.name}
-                onCheckedChange={(checked) => {
-                  onColumnSettingsChange({
-                    ...columnSettings,
-                    [column.id]: checked,
-                  })
-                }}
-              />
-            ) : null
-          )}
-        </div>
+    <Popover.Content className="grid gap-4" align="end" side="bottom">
+      <span className="body-base font-semibold text-muted-foreground">
+        {translate(STRING.TABLE_COLUMNS)}
+      </span>
+      <div className="grid gap-2">
+        {columns.map((column) =>
+          column.name.length ? (
+            <Checkbox
+              key={column.id}
+              checked={columnSettings[column.id]}
+              id={column.id}
+              label={column.name}
+              onCheckedChange={(checked) => {
+                onColumnSettingsChange({
+                  ...columnSettings,
+                  [column.id]: checked,
+                })
+              }}
+            />
+          ) : null
+        )}
       </div>
     </Popover.Content>
   </Popover.Root>

ui/src/nova-ui-kit/components/tabs/tabs.tsx

@@ -43,13 +43,15 @@ const Trigger = ({ value, label }: { value: string; label: string }) => (
 )
 
 const Content = ({
-  value,
   children,
+  className,
+  value,
 }: {
-  value: string
   children: ReactNode
+  className?: string
+  value: string
 }) => (
-  <Tabs.Content value={value} tabIndex={-1}>
+  <Tabs.Content className={className} tabIndex={-1} value={value}>
     {children}
   </Tabs.Content>
 )

ui/src/nova-ui-kit/global.scss

@@ -89,5 +89,5 @@
 }
 
 .bubble-label {
-  @include body-number-small();
+  @include bubble-label();
 }

ui/src/nova-ui-kit/index.ts

@@ -9,7 +9,7 @@ export { Button } from './components/button/index'
 export { SaveButton } from './components/button/save-button'
 export { Calendar } from './components/calendar'
 export { Card, CardSize } from './components/card/card'
-export { Checkbox, CheckboxTheme } from './components/checkbox/checkbox'
+export { Checkbox } from './components/checkbox/checkbox'
 export { CodeBlock } from './components/code-block'
 export * as Collapsible from './components/collapsible'
 export { ComboBox } from './components/combo-box/combo-box'

ui/src/pages/deployments/deployment-columns.tsx

@@ -80,7 +80,7 @@ export const columns = ({
   },
   {
     id: 'status',
-    name: 'Latest job status',
+    name: translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS),
     tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
       type: translate(STRING.ENTITY_TYPE_DEPLOYMENT),
     }),

ui/src/pages/project/capture-sets/capture-set-columns.tsx

@@ -48,7 +48,7 @@ export const columns = ({
   },
   {
     id: 'status',
-    name: 'Latest job status',
+    name: translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS),
     tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
       type: translate(STRING.ENTITY_TYPE_CAPTURE_SET),
     }),

ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx → ui/src/pages/session-details/activity-plot/activity-plot.tsx

@@ -1,20 +1,29 @@
+import { SessionDetails } from 'data-services/models/session-details'
+import { TimelineTick } from 'data-services/models/timeline-tick'
 import { CONSTANTS } from 'nova-ui-kit'
 import { useRef } from 'react'
 import Plot from 'react-plotly.js'
 import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString'
 import { findClosestCaptureId } from '../utils'
-import { ActivityPlotProps } from './types'
 import { useDynamicPlotWidth } from './useDynamicPlotWidth'
 
-const fontFamily = 'Mazzard, sans-serif'
-const lineColorCaptures = CONSTANTS.COLORS.neutral[500]
-const lineColorDetections = CONSTANTS.COLORS.secondary[500]
-const spikeColor = CONSTANTS.COLORS.generic.white
-const textColor = CONSTANTS.COLOR_THEME.muted.foreground
-const tooltipBgColor = CONSTANTS.COLORS.generic.white
-const tooltipBorderColor = CONSTANTS.COLOR_THEME.muted.foreground
+const fontFamily = 'Mazzard'
+const fontSize = 14
+const lineColorCaptures = CONSTANTS.COLORS.neutral[300]
+const lineColorDetections = CONSTANTS.COLOR_THEME.secondary.DEFAULT
+const spikeColor = CONSTANTS.COLOR_THEME.foreground
+const textColor = CONSTANTS.COLOR_THEME.foreground
+const tooltipBgColor = CONSTANTS.COLOR_THEME.background
+const tooltipBorderColor = CONSTANTS.COLOR_THEME.border
 
-const ActivityPlot = ({
+export interface ActivityPlotProps {
+  session: SessionDetails
+  setActiveCaptureId: (captureId: string) => void
+  snapToDetections?: boolean
+  timeline: TimelineTick[]
+}
+
+export const ActivityPlot = ({
   session,
   snapToDetections,
   timeline,
@@ -130,7 +139,7 @@ const ActivityPlot = ({
               bordercolor: tooltipBorderColor,
               font: {
                 family: fontFamily,
-                size: 12,
+                size: fontSize,
                 color: textColor,
               },
             },

ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.tsx → ui/src/pages/session-details/activity-plot/lazy-activity-plot.tsx

@@ -1,15 +1,14 @@
 import { ErrorBoundary } from 'components/error-boundary/error-boundary'
 import { LoadingSpinner } from 'nova-ui-kit'
 import React, { Suspense } from 'react'
-import styles from './lazy-activity-plot.module.scss'
-import { ActivityPlotProps } from './types'
+import { ActivityPlotProps } from './activity-plot'
 
 const _ActivityPlot = React.lazy(() => import('./activity-plot'))
 
 export const ActivityPlot = (props: ActivityPlotProps) => (
   <Suspense
     fallback={
-      <div className={styles.loadingWrapper}>
+      <div>
         <LoadingSpinner size={32} />
       </div>
     }