style: update color references and layout to match updated design

annavik · annavik · commit b71c8e1b16dc · 2024-09-09T14:36:27.000+02:00
diff --git a/ui/src/components/blueprint-collection/blueprint-collection.module.scss b/ui/src/components/blueprint-collection/blueprint-collection.module.scss
@@ -13,10 +13,10 @@
   background-size: 20px 20px;
   background-image: linear-gradient(
       to right,
-      $color-neutral-100 1px,
+      $color-neutral-70 1px,
       transparent 1px
     ),
-    linear-gradient(to bottom, $color-neutral-100 1px, transparent 1px);
+    linear-gradient(to bottom, $color-neutral-70 1px, transparent 1px);
   box-sizing: border-box;
 }
 
diff --git a/ui/src/design-system/components/card/card.module.scss b/ui/src/design-system/components/card/card.module.scss
@@ -4,7 +4,6 @@
 .container {
   display: flex;
   flex-direction: column;
-  background-color: $color-generic-white;
   border: 1px solid $color-neutral-100;
   border-radius: 8px;
   overflow: hidden;
@@ -13,7 +12,7 @@
 
 .square {
   position: relative;
-  background-color: rgba($color: $color-primary-2-50, $alpha: 0.5);
+  background-color: $color-generic-white;
   border-bottom: 1px solid $color-neutral-100;
 }
 
@@ -41,6 +40,7 @@
   flex-direction: column;
   flex: 1;
   padding: 12px 16px;
+  background-color: $color-generic-white;
 }
 
 .title {
diff --git a/ui/src/design-system/components/checkbox/checkbox.module.scss b/ui/src/design-system/components/checkbox/checkbox.module.scss
@@ -3,6 +3,7 @@
 
 .wrapper {
   display: flex;
+  align-items: center;
 }
 
 .checkboxRoot {
@@ -16,7 +17,7 @@
   flex-shrink: 0;
 
   &.neutral {
-    border-color: $color-neutral-600;
+    border-color: $color-neutral-400;
   }
 
   &:focus-visible {
@@ -60,6 +61,6 @@
   }
 
   &.neutral {
-    color: $color-neutral-100;
+    color: $color-generic-white;
   }
 }
diff --git a/ui/src/design-system/components/combo-box/combo-box-simple/combo-box-simple.tsx b/ui/src/design-system/components/combo-box/combo-box-simple/combo-box-simple.tsx
@@ -51,7 +51,7 @@ export const ComboBoxSimple = ({
             onValueChange={setSearchString}
           />
           {loading && (
-            <div className={styles.loadingWrapper}>
+            <div className={styles.accessoryWrapper}>
               <LoadingSpinner size={12} />
             </div>
           )}
diff --git a/ui/src/design-system/components/select/select.module.scss b/ui/src/design-system/components/select/select.module.scss
@@ -101,7 +101,7 @@
   background-color: $color-generic-white;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
   overflow: hidden;
-  z-index: 2;
+  z-index: 3;
 }
 
 .selectViewport {
@@ -131,4 +131,6 @@
 
 .itemIndicator {
   margin-left: 32px;
+  display: inline-flex;
+  align-items: center;
 }
diff --git a/ui/src/design-system/components/slider/styles.module.scss b/ui/src/design-system/components/slider/styles.module.scss
@@ -86,15 +86,15 @@
     @include paragraph-xx-small();
     text-transform: uppercase;
     font-weight: 700;
-    color: $color-neutral-100;
+    color: $color-generic-white;
     margin: 0;
   }
 
   .value {
     display: block;
     @include paragraph-x-small();
     font-weight: 700;
-    color: $color-neutral-100;
+    color: $color-generic-white;
     width: 32px;
     text-align: right;
     overflow: hidden;
@@ -146,7 +146,7 @@
     justify-content: space-between;
 
     .label {
-      color: $color-neutral-400;
+      color: $color-neutral-300;
     }
   }
 
diff --git a/ui/src/design-system/components/wizard/wizard.module.scss b/ui/src/design-system/components/wizard/wizard.module.scss
@@ -3,15 +3,15 @@
 @import 'src/design-system/variables/variables.scss';
 
 .accordionRoot {
-  border: 2px solid $color-neutral-100;
+  border: 2px solid $color-neutral-70;
   border-radius: 4px;
 }
 
 .accordionItem {
   position: relative;
 
   &:not(:last-child) {
-    border-bottom: 2px solid $color-neutral-100;
+    border-bottom: 2px solid $color-neutral-70;
   }
 }
 
diff --git a/ui/src/design-system/components/wizard/wizard.stories.tsx b/ui/src/design-system/components/wizard/wizard.stories.tsx
@@ -21,7 +21,7 @@ const WizardTemplate: Story = () => (
     <Wizard.Item value="item-1">
       <Wizard.Trigger title="Object Detection">
         <StatusBullet
-          icon={IconType.Checkmark}
+          icon={IconType.RadixCheck}
           theme={StatusBulletTheme.Success}
         />
       </Wizard.Trigger>
diff --git a/ui/src/pages/auth/sign-up.tsx b/ui/src/pages/auth/sign-up.tsx
@@ -94,7 +94,7 @@ export const SignUp = () => {
           {isSuccess ? (
             <>
               <Icon
-                type={IconType.Checkmark}
+                type={IconType.RadixCheck}
                 size={12}
                 theme={IconTheme.Success}
               />
diff --git a/ui/src/pages/collection-details/capture-columns.tsx b/ui/src/pages/collection-details/capture-columns.tsx
@@ -18,8 +18,7 @@ export const columns: (projectId: string) => TableColumn<Capture>[] = (
   {
     id: 'thumbnail',
     name: translate(STRING.FIELD_LABEL_THUMBNAIL),
-    renderCell: (item: Capture, rowIndex: number) => {
-      const isOddRow = rowIndex % 2 == 0
+    renderCell: (item: Capture) => {
       const detailsRoute = getAppRoute({
         to: APP_ROUTES.SESSION_DETAILS({
           projectId: projectId,
@@ -33,7 +32,7 @@ export const columns: (projectId: string) => TableColumn<Capture>[] = (
       return (
         <ImageTableCell
           images={[{ src: item.src }]}
-          theme={isOddRow ? ImageCellTheme.Default : ImageCellTheme.Light}
+          theme={ImageCellTheme.Light}
           to={detailsRoute}
         />
       )
diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx
@@ -20,8 +20,7 @@ export const columns: (projectId: string) => TableColumn<Deployment>[] = (
   {
     id: 'snapshot',
     name: translate(STRING.FIELD_LABEL_IMAGE),
-    renderCell: (item: Deployment, rowIndex: number) => {
-      const isOddRow = rowIndex % 2 == 0
+    renderCell: (item: Deployment) => {
       const detailsRoute = getAppRoute({
         to: APP_ROUTES.DEPLOYMENT_DETAILS({ projectId, deploymentId: item.id }),
         keepSearchParams: true,
@@ -30,7 +29,7 @@ export const columns: (projectId: string) => TableColumn<Deployment>[] = (
       return (
         <ImageTableCell
           images={item.image ? [{ src: item.image }] : []}
-          theme={isOddRow ? ImageCellTheme.Default : ImageCellTheme.Light}
+          theme={ImageCellTheme.Light}
           to={detailsRoute}
         />
       )
diff --git a/ui/src/pages/job-details/job-details.tsx b/ui/src/pages/job-details/job-details.tsx
@@ -214,7 +214,7 @@ const JobStages = ({ job }: { job: Job }) => {
             <Wizard.Trigger title={stage.name}>
               {status === Status.Success ? (
                 <StatusBullet
-                  icon={IconType.Checkmark}
+                  icon={IconType.RadixCheck}
                   theme={StatusBulletTheme.Success}
                 />
               ) : (
diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx
@@ -36,8 +36,7 @@ export const columns: (
     styles: {
       textAlign: TextAlign.Center,
     },
-    renderCell: (item: Occurrence, rowIndex: number) => {
-      const isOddRow = rowIndex % 2 == 0
+    renderCell: (item: Occurrence) => {
       const detailsRoute = getAppRoute({
         to: APP_ROUTES.OCCURRENCE_DETAILS({
           projectId,
@@ -49,7 +48,7 @@ export const columns: (
       return (
         <ImageTableCell
           images={item.images}
-          theme={isOddRow ? ImageCellTheme.Default : ImageCellTheme.Light}
+          theme={ImageCellTheme.Light}
           to={detailsRoute}
         />
       )
diff --git a/ui/src/pages/overview/overview.module.scss b/ui/src/pages/overview/overview.module.scss
@@ -25,7 +25,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba($color: $color-primary-2-50, $alpha: 0.5);
+  background-color: $color-generic-white;
   border-right: 1px solid $color-neutral-100;
 
   img {
diff --git a/ui/src/pages/overview/storage/storage.module.scss b/ui/src/pages/overview/storage/storage.module.scss
@@ -14,7 +14,7 @@
   }
 
   .wizardContent {
-    border-top: 1px solid $color-neutral-100;
+    border-top: 1px solid $color-neutral-70;
     padding: 32px 64px;
   }
 
diff --git a/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx b/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx
@@ -5,12 +5,12 @@ import Plot from 'react-plotly.js'
 import { useDynamicPlotWidth } from './useDynamicPlotWidth'
 
 const fontFamily = 'Mazzard, sans-serif'
-const lineColorCaptures = '#4e5051'
-const lineColorDetections = '#5f8ac6'
-const textColor = '#222426'
+const lineColorCaptures = '#4E4F57'
+const lineColorDetections = '#5F8AC6'
+const textColor = '#303137'
 const tooltipBgColor = '#ffffff'
-const tooltipBorderColor = '#222426'
-const gridLineColor = '#f36399'
+const tooltipBorderColor = '#303137'
+const gridLineColor = '#4E4F57'
 
 export const ActivityPlot = ({
   session,
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-details.module.scss b/ui/src/pages/session-details/playback/capture-details/capture-details.module.scss
@@ -33,13 +33,13 @@
   @include paragraph-xx-small();
   text-transform: uppercase;
   font-weight: 700;
-  color: $color-neutral-400;
+  color: $color-neutral-300;
 }
 
 .value {
   display: block;
   @include paragraph-x-small();
-  color: $color-neutral-100;
+  color: $color-generic-white;
 }
 
 @media only screen and (max-width: $small-screen-breakpoint) {
diff --git a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss b/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss
@@ -16,6 +16,6 @@
 
   span {
     @include label();
-    color: $color-neutral-100;
+    color: $color-generic-white;
   }
 }
diff --git a/ui/src/pages/session-details/playback/playback.module.scss b/ui/src/pages/session-details/playback/playback.module.scss
@@ -11,6 +11,7 @@
 
 .sidebar {
   background-color: $color-neutral-700;
+  border-bottom: 1px solid $color-neutral-600;
   position: relative;
 }
 
@@ -36,7 +37,7 @@
   .title {
     display: block;
     @include label();
-    color: $color-neutral-100;
+    color: $color-generic-white;
   }
 }
 
diff --git a/ui/src/pages/sessions/session-columns.tsx b/ui/src/pages/sessions/session-columns.tsx
@@ -21,8 +21,7 @@ export const columns: (projectId: string) => TableColumn<Session>[] = (
     styles: {
       textAlign: TextAlign.Center,
     },
-    renderCell: (item: Session, rowIndex: number) => {
-      const isOddRow = rowIndex % 2 == 0
+    renderCell: (item: Session) => {
       const detailsRoute = APP_ROUTES.SESSION_DETAILS({
         projectId,
         sessionId: item.id,
@@ -33,7 +32,7 @@ export const columns: (projectId: string) => TableColumn<Session>[] = (
           images={item.exampleCaptures}
           total={item.numImages}
           to={detailsRoute}
-          theme={isOddRow ? ImageCellTheme.Default : ImageCellTheme.Light}
+          theme={ImageCellTheme.Light}
         />
       )
     },
diff --git a/ui/src/pages/species/species-columns.tsx b/ui/src/pages/species/species-columns.tsx
@@ -22,8 +22,7 @@ export const columns: (projectId: string) => TableColumn<Species>[] = (
     styles: {
       textAlign: TextAlign.Center,
     },
-    renderCell: (item: Species, rowIndex: number) => {
-      const isOddRow = rowIndex % 2 == 0
+    renderCell: (item: Species) => {
       const detailsRoute = getAppRoute({
         to: APP_ROUTES.SPECIES_DETAILS({ projectId, speciesId: item.id }),
         keepSearchParams: true,
@@ -33,7 +32,7 @@ export const columns: (projectId: string) => TableColumn<Species>[] = (
         <ImageTableCell
           images={item.images}
           total={item.numOccurrences}
-          theme={isOddRow ? ImageCellTheme.Default : ImageCellTheme.Light}
+          theme={ImageCellTheme.Light}
           to={detailsRoute}
         />
       )

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`
`4`	`4`	`.wrapper {`
`5`	`5`	`display: flex;`
	`6`	`+ align-items: center;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`.checkboxRoot {`
`@@ -16,7 +17,7 @@`
`16`	`17`	`flex-shrink: 0;`
`17`	`18`
`18`	`19`	`&.neutral {`
`19`		`- border-color: $color-neutral-600;`
	`20`	`+ border-color: $color-neutral-400;`
`20`	`21`	`}`
`21`	`22`
`22`	`23`	`&:focus-visible {`
`@@ -60,6 +61,6 @@`
`60`	`61`	`}`
`61`	`62`
`62`	`63`	`&.neutral {`
`63`		`- color: $color-neutral-100;`
	`64`	`+ color: $color-generic-white;`
`64`	`65`	`}`
`65`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@`
`101`	`101`	`background-color: $color-generic-white;`
`102`	`102`	`box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);`
`103`	`103`	`overflow: hidden;`
`104`		`- z-index: 2;`
	`104`	`+ z-index: 3;`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`.selectViewport {`
`@@ -131,4 +131,6 @@`
`131`	`131`
`132`	`132`	`.itemIndicator {`
`133`	`133`	`margin-left: 32px;`
	`134`	`+ display: inline-flex;`
	`135`	`+ align-items: center;`
`134`	`136`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,15 +3,15 @@`
`3`	`3`	`@import 'src/design-system/variables/variables.scss';`
`4`	`4`
`5`	`5`	`.accordionRoot {`
`6`		`- border: 2px solid $color-neutral-100;`
	`6`	`+ border: 2px solid $color-neutral-70;`
`7`	`7`	`border-radius: 4px;`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.accordionItem {`
`11`	`11`	`position: relative;`
`12`	`12`
`13`	`13`	`&:not(:last-child) {`
`14`		`- border-bottom: 2px solid $color-neutral-100;`
	`14`	`+ border-bottom: 2px solid $color-neutral-70;`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`