UI cleanup (part 1)

ui/package.json

@@ -28,7 +28,7 @@
     "cmdk": "^0.2.0",
     "leaflet": "^1.9.3",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.454.0",
+    "lucide-react": "^1.0.1",
     "nova-ui-kit": "^1.1.33",
     "plotly.js": "^2.25.2",
     "react": "^18.2.0",

ui/src/components/blueprint-collection/blueprint-collection.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames'
 import { LicenseInfo } from 'components/license-info/license-info'
-import { Icon, IconType } from 'design-system/components/icon/icon'
 import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
 import { EyeIcon } from 'lucide-react'
 import { buttonVariants } from 'nova-ui-kit'
@@ -54,12 +53,6 @@ export const BlueprintItem = ({
   return (
     <div className={classNames(styles.blueprintItem, 'group')}>
       <div className={styles.blueprintInfo} style={{ width: size.width }}>
-        {item.countLabel?.length ? (
-          <span className={styles.count}>
-            <Icon type={IconType.Detections} size={12} />
-            <span>{item.countLabel}</span>
-          </span>
-        ) : null}
         <span className="grow text-muted-foreground text-right">
           {item.timeLabel}
         </span>

ui/src/components/cookie-dialog/cookie-dialog.module.scss

@@ -47,7 +47,7 @@
 
 .actions {
   display: flex;
-  gap: 16px;
+  gap: 8px;
 }
 
 @media only screen and (max-width: $small-screen-breakpoint) {
@@ -58,8 +58,4 @@
     padding: 16px;
     border-radius: 0;
   }
-
-  .actions {
-    gap: 8px;
-  }
 }

ui/src/components/cookie-dialog/cookie-dialog.tsx

@@ -1,6 +1,6 @@
 import * as Dialog from '@radix-ui/react-dialog'
-import { Button, ButtonTheme } from 'design-system/components/button/button'
 import { Checkbox } from 'design-system/components/checkbox/checkbox'
+import { Button } from 'nova-ui-kit'
 import { useState } from 'react'
 import { useCookieConsent } from 'utils/cookieConsent/cookieConsentContext'
 import { CookieCategory } from 'utils/cookieConsent/types'
@@ -56,30 +56,38 @@ const IntroContent = ({
       </div>
       <div className={styles.actions}>
         <Button
-          label="Set cookies"
           onClick={() => onSectionChange(CookieDialogSection.SetCookies)}
-        />
+          size="small"
+          variant="outline"
+        >
+          <span>Set cookies</span>
+        </Button>
         <Button
-          label="Refuse cookies"
           onClick={() =>
             setSettings({
               [CookieCategory.Necessary]: true,
               [CookieCategory.Functionality]: false,
               [CookieCategory.Performance]: false,
             })
           }
-        />
+          size="small"
+          variant="outline"
+        >
+          <span>Refuse</span>
+        </Button>
         <Button
-          label="Accept cookies"
-          theme={ButtonTheme.Success}
           onClick={() =>
             setSettings({
               [CookieCategory.Necessary]: true,
               [CookieCategory.Functionality]: true,
               [CookieCategory.Performance]: true,
             })
           }
-        />
+          size="small"
+          variant="success"
+        >
+          <span>Accept</span>
+        </Button>
       </div>
     </div>
   )
@@ -135,14 +143,19 @@ const SetCookiesContent = ({
       </div>
       <div className={styles.actions}>
         <Button
-          label={translate(STRING.CANCEL)}
           onClick={() => onSectionChange(CookieDialogSection.Intro)}
-        />
+          size="small"
+          variant="outline"
+        >
+          <span>{translate(STRING.CANCEL)}</span>
+        </Button>
         <Button
-          label={translate(STRING.SAVE)}
-          theme={ButtonTheme.Success}
           onClick={() => setSettings(formValues)}
-        />
+          size="small"
+          variant="success"
+        >
+          <span>{translate(STRING.SAVE)}</span>
+        </Button>
       </div>
     </div>
   )

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

@@ -5,15 +5,9 @@ import {
 } from 'components/form/layout/layout'
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
 import { ProjectDetails } from 'data-services/models/project-details'
-import {
-  IconButton,
-  IconButtonShape,
-  IconButtonTheme,
-} from 'design-system/components/icon-button/icon-button'
-import { IconType } from 'design-system/components/icon/icon'
 import { InputValue } from 'design-system/components/input/input'
-import { ChevronRightIcon } from 'lucide-react'
-import { buttonVariants, Popover, Switch } from 'nova-ui-kit'
+import { ChevronRightIcon, InfoIcon } from 'lucide-react'
+import { Button, buttonVariants, Popover, Switch } from 'nova-ui-kit'
 import { Link, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
@@ -53,19 +47,22 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => {
 }
 
 export const DefaultFiltersPopover = ({
-  buttonTheme = IconButtonTheme.Plain,
+  className,
   project,
 }: {
-  buttonTheme?: IconButtonTheme
+  className?: string
   project: ProjectDetails
 }) => (
   <Popover.Root>
     <Popover.Trigger asChild>
-      <IconButton
-        icon={IconType.Info}
-        shape={IconButtonShape.Round}
-        theme={buttonTheme}
-      />
+      <Button
+        aria-label={translate(STRING.INFO)}
+        className={className}
+        size="icon"
+        variant="ghost"
+      >
+        <InfoIcon className="w-4 h-4" />
+      </Button>
     </Popover.Trigger>
     <Popover.Content className="p-0">
       <FormSection

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

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import { ChevronRightIcon, InfoIcon, XIcon } from 'lucide-react'
 import { Button, buttonVariants, Tooltip } from 'nova-ui-kit'
 import { Link } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
 import { useFilters } from 'utils/useFilters'
 import { AlgorithmFilter, NotAlgorithmFilter } from './filters/algorithm-filter'
 import { BooleanFilter } from './filters/boolean-filter'
@@ -92,6 +93,7 @@ export const FilterControl = ({
         />
         {clearable && filter.value && (
           <Button
+            aria-label={translate(STRING.CLEAR)}
             className="shrink-0 text-muted-foreground"
             onClick={() => clearFilter(field)}
             size="icon"
@@ -114,7 +116,12 @@ export const FilterInfo = ({ text, to }: { text: string; to?: string }) => (
   <Tooltip.Provider delayDuration={0}>
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <Button className="text-muted-foreground" size="icon" variant="ghost">
+        <Button
+          aria-label={translate(STRING.INFO)}
+          className="text-muted-foreground"
+          size="icon"
+          variant="ghost"
+        >
           <InfoIcon className="w-4 h-4" />
         </Button>
       </Tooltip.Trigger>

ui/src/components/filtering/filter-section.tsx

@@ -2,6 +2,7 @@ import { BREAKPOINTS } from 'components/constants'
 import { ChevronsUpDown } from 'lucide-react'
 import { Box, Button, Collapsible } from 'nova-ui-kit'
 import { ReactNode } from 'react'
+import { STRING, translate } from 'utils/language'
 
 interface FilterSectionProps {
   children?: ReactNode
@@ -22,7 +23,11 @@ export const FilterSection = ({
       <div className="flex items-center justify-between">
         <span className="body-overline font-bold">{title}</span>
         <Collapsible.Trigger asChild>
-          <Button size="icon" variant="ghost">
+          <Button
+            aria-label={translate(STRING.EXPAND)}
+            size="icon"
+            variant="ghost"
+          >
             <ChevronsUpDown className="h-4 w-4" />
           </Button>
         </Collapsible.Trigger>

ui/src/components/taxon-tags/tags-form.tsx

@@ -30,7 +30,12 @@ export const TagsForm = ({ species }: { species: Species }) => {
       }}
     >
       <Popover.Trigger asChild>
-        <Button size="icon" variant="ghost" disabled={tags.length === 0}>
+        <Button
+          aria-label={translate(STRING.EDIT)}
+          size="icon"
+          variant="ghost"
+          disabled={tags.length === 0}
+        >
           <PenIcon className="w-4 h-4" />
         </Button>
       </Popover.Trigger>

ui/src/components/terms-of-service-info/terms-of-service-info.tsx

@@ -1,11 +1,9 @@
-import {
-  IconButton,
-  IconButtonTheme,
-} from 'design-system/components/icon-button/icon-button'
-import { IconType } from 'design-system/components/icon/icon'
+import { XIcon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
 import { useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
+import { STRING, translate } from 'utils/language'
 import { useUserPreferences } from 'utils/userPreferences/userPreferencesContext'
 import styles from './terms-of-service-info.module.scss'
 
@@ -30,13 +28,16 @@ export const TermsOfServiceInfo = () => {
         <Link to={APP_ROUTES.TERMS_OF_SERVICE}>Terms of Service.</Link>
       </p>
       <div className={styles.iconContainer}>
-        <IconButton
-          icon={IconType.Cross}
-          theme={IconButtonTheme.Plain}
+        <Button
+          aria-label={translate(STRING.CLOSE)}
           onClick={() =>
             setUserPreferences({ ...userPreferences, termsMessageSeen: true })
           }
-        />
+          size="icon"
+          variant="ghost"
+        >
+          <XIcon className="w-4 h-4" />
+        </Button>
       </div>
     </div>
   )

ui/src/data-services/models/algorithm.ts

@@ -1,31 +1,15 @@
-import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { snakeCaseToSentenceCase } from 'utils/snakeCaseToSentenceCase'
+import { Entity } from './entity'
 
 export type ServerAlgorithm = any // TODO: Update this type
 
-export class Algorithm {
+export class Algorithm extends Entity {
   protected readonly _algorithm: ServerAlgorithm
 
   public constructor(algorithm: ServerAlgorithm) {
-    this._algorithm = algorithm
-  }
-
-  get createdAt(): string {
-    return getFormatedDateTimeString({
-      date: new Date(this._algorithm.created_at),
-    })
-  }
-
-  get description(): string | undefined {
-    return this._algorithm.description
-  }
+    super(algorithm)
 
-  get id(): string {
-    return `${this._algorithm.id}`
-  }
-
-  get name(): string {
-    return this._algorithm.name
+    this._algorithm = algorithm
   }
 
   get key(): string {
@@ -40,16 +24,6 @@ export class Algorithm {
     return this._algorithm.uri
   }
 
-  get updatedAt(): string | undefined {
-    if (!this._algorithm.updated_at) {
-      return undefined
-    }
-
-    return getFormatedDateTimeString({
-      date: new Date(this._algorithm.updated_at),
-    })
-  }
-
   get taskType(): string {
     return snakeCaseToSentenceCase(this._algorithm.task_type)
   }

ui/src/data-services/models/capture-details.ts

@@ -25,10 +25,10 @@ export class CaptureDetails extends Capture {
     }
 
     return this._jobs.sort((j1: Job, j2: Job) => {
-      const date1 = new Date(j1.updatedAt as string)
-      const date2 = new Date(j2.updatedAt as string)
+      const time1 = j1.updatedAt?.getTime() ?? 0
+      const time2 = j2.updatedAt?.getTime() ?? 0
 
-      return date2.getTime() - date1.getTime()
+      return time1 - time2
     })[0]
   }
 

ui/src/data-services/models/capture-set.ts

@@ -29,10 +29,10 @@ export class CaptureSet extends Entity {
     }
 
     return this._jobs.sort((j1: Job, j2: Job) => {
-      const date1 = new Date(j1.updatedAt as string)
-      const date2 = new Date(j2.updatedAt as string)
+      const time1 = j1.updatedAt?.getTime() ?? 0
+      const time2 = j2.updatedAt?.getTime() ?? 0
 
-      return date2.getTime() - date1.getTime()
+      return time1 - time2
     })[0]
   }
 

ui/src/data-services/models/deployment.ts

@@ -35,10 +35,10 @@ export class Deployment extends Entity {
     }
 
     return this._jobs.sort((j1: Job, j2: Job) => {
-      const date1 = new Date(j1.updatedAt as string)
-      const date2 = new Date(j2.updatedAt as string)
+      const time1 = j1.updatedAt?.getTime() ?? 0
+      const time2 = j2.updatedAt?.getTime() ?? 0
 
-      return date2.getTime() - date1.getTime()
+      return time1 - time2
     })[0]
   }