From 087d1aa7129bcc604c064136ad38d891b8c80f20 Mon Sep 17 00:00:00 2001
From: Bryan Chu <151689101+bchu1@users.noreply.github.com>
Date: Mon, 23 Sep 2024 16:33:20 -0700
Subject: [PATCH] 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">
---
 .../data-portal/app/components/Dataset/RunsTable.tsx        | 4 ++++
 .../packages/data-portal/app/components/Run/RunHeader.tsx   | 2 +-
 .../data-portal/app/components/Run/TomogramTable.tsx        | 6 +++---
 frontend/packages/data-portal/app/constants/table.ts        | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
index 14e34bd3e..0890e949b 100644
--- 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
index f6114f149..a5d1c8ce9 100644
--- 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
index c7c5cc3fc..1d6675832 100644
--- 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
index f508d3f34..e572b47b0 100644
--- 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 = {