feat: Update view tomogram button icons (#1170)

closes #1095 Now that we've upgraded to the latest SDS icon set! <img width="1650" alt="image" src="https://github.com/user-attachments/assets/a09ad291-15e4-48dc-9f41-381b27a619a4"> <img width="453" alt="image" src="https://github.com/user-attachments/assets/2598db62-bc9c-478c-8b91-966f18d2a424"> <img width="415" alt="image" src="https://github.com/user-attachments/assets/03b7a1a5-3c93-4f8c-8eb1-a7e45392e719">
chanzuckerberg · Sep 23, 2024 · 087d1aa · 087d1aa
1 parent bad73bb
commit 087d1aa
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 
+import { Icon } from '@czi-sds/components'
 import Skeleton from '@mui/material/Skeleton'
 import { useNavigate, useSearchParams } from '@remix-run/react'
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table'
@@ -234,6 +235,9 @@ export function RunsTable() {
                   buttonProps={{
                     sdsType: 'secondary',
                     sdsStyle: 'square',
+                    startIcon: (
+                      <Icon sdsIcon="Cube" sdsType="button" sdsSize="s" />
+                    ),
                   }}
                   event={{
                     datasetId: dataset.id,

diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -76,7 +76,7 @@ export function RunHeader() {
             buttonProps={{
               sdsStyle: 'rounded',
               sdsType: 'primary',
-              startIcon: <Icon sdsIcon="Table" sdsType="button" sdsSize="s" />,
+              startIcon: <Icon sdsIcon="Cube" sdsType="button" sdsSize="s" />,
             }}
             tooltipPlacement="bottom"
             event={{

diff --git a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
@@ -162,7 +162,7 @@ export function TomogramsTable() {
                       sdsType: 'primary',
                       className: '!text-sds-body-xxs !h-sds-icon-xl',
                       startIcon: (
-                        <Icon sdsIcon="Table" sdsType="button" sdsSize="xs" />
+                        <Icon sdsIcon="Cube" sdsType="button" sdsSize="xs" />
                       ),
                     }}
                     tooltipPlacement="top"
@@ -178,7 +178,7 @@ export function TomogramsTable() {
               <Button
                 sdsType="primary"
                 sdsStyle="minimal"
-                className="!justify-start !ml-sds-l !text-sds-body-xxs"
+                className="!justify-start !ml-sds-m !text-sds-body-xxs"
                 onClick={() => openMetadataDrawer(original)}
                 startIcon={
                   <Icon sdsIcon="InfoCircle" sdsSize="xs" sdsType="button" />
@@ -189,7 +189,7 @@ export function TomogramsTable() {
               <Button
                 sdsType="primary"
                 sdsStyle="minimal"
-                className="!justify-start !ml-sds-l !text-sds-body-xxs"
+                className="!justify-start !ml-sds-m !text-sds-body-xxs"
                 onClick={() => {
                   openTomogramDownloadModal({
                     tomogramId: original.id,

diff --git a/frontend/packages/data-portal/app/constants/table.ts b/frontend/packages/data-portal/app/constants/table.ts
@@ -48,7 +48,7 @@ export const RunTableWidths = {
   name: { min: 400 },
   tiltSeriesQuality: { min: 183, max: 210 },
   annotatedObjects: { min: 250, max: 400 },
-  actions: { min: 150, max: 200 },
+  actions: { min: 175, max: 200 },
 }
 
 export const DepositionTableWidths = {