From 361b00d1f18bbad6897dcec8c0c554525b755684 Mon Sep 17 00:00:00 2001
From: Jeremy <jeremyasuncion808@gmail.com>
Date: Mon, 16 Sep 2024 13:29:05 -0700
Subject: [PATCH] replace missing colors

---
 .../app/components/Download/TomogramSelectorLabel.tsx     | 2 +-
 .../app/components/Download/TomogramSelectorOption.tsx    | 8 ++++----
 .../data-portal/app/components/Filters/RegexFilter.tsx    | 2 +-
 .../app/components/Run/AnnotationOveriewTable.tsx         | 6 +++---
 .../app/components/Run/TomogramMetadataDrawer.tsx         | 2 +-
 .../data-portal/app/components/TablePageLayout.tsx        | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/Download/TomogramSelectorLabel.tsx b/frontend/packages/data-portal/app/components/Download/TomogramSelectorLabel.tsx
index fe539ca39..e57befdcd 100644
--- a/frontend/packages/data-portal/app/components/Download/TomogramSelectorLabel.tsx
+++ b/frontend/packages/data-portal/app/components/Download/TomogramSelectorLabel.tsx
@@ -22,7 +22,7 @@ export function TomogramSelectorInputLabel({
         tomogram.reconstruction_method,
         tomogram.processing,
       )}
-      <span className="text-sds-gray-500 ml-sds-xxs">
+      <span className="text-sds-color-primitive-gray-500 ml-sds-xxs">
         {t('unitAngstrom', { value: tomogram.voxel_spacing })}
       </span>
     </div>
diff --git a/frontend/packages/data-portal/app/components/Download/TomogramSelectorOption.tsx b/frontend/packages/data-portal/app/components/Download/TomogramSelectorOption.tsx
index b938e0f8e..fc8d3a912 100644
--- a/frontend/packages/data-portal/app/components/Download/TomogramSelectorOption.tsx
+++ b/frontend/packages/data-portal/app/components/Download/TomogramSelectorOption.tsx
@@ -20,18 +20,18 @@ export function TomogramSelectorOption({
           tomogram.processing,
         )}
       </div>
-      <div className="text-sds-body-xxs text-sds-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
         {t('tomogramId')}: {tomogram.id}
       </div>
-      <div className="text-sds-body-xxs text-sds-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
         {t('tomogramSampling')}:{' '}
         {t('unitAngstrom', { value: tomogram.voxel_spacing })} (
         {tomogram.size_x}, {tomogram.size_y}, {tomogram.size_z})px
       </div>
-      <div className="text-sds-body-xxs text-sds-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
         {t('reconstructionMethod')}: {tomogram.reconstruction_method}
       </div>
-      <div className="text-sds-body-xxs text-sds-gray-500 capitalize">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 capitalize">
         {t('postProcessing')}: {tomogram.processing}
       </div>
     </div>
diff --git a/frontend/packages/data-portal/app/components/Filters/RegexFilter.tsx b/frontend/packages/data-portal/app/components/Filters/RegexFilter.tsx
index 931de82ee..345304309 100644
--- a/frontend/packages/data-portal/app/components/Filters/RegexFilter.tsx
+++ b/frontend/packages/data-portal/app/components/Filters/RegexFilter.tsx
@@ -50,7 +50,7 @@ export function RegexFilter({
             {title}
           </p>
 
-          <p className="text-sds-gray-600 text-sds-body-xxs leading-sds-body-xxs">
+          <p className="text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-body-xxs">
             {`(${t('limitOneValuePerField')})`}
           </p>
         </>
diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
index 86617d8ad..e602e91ad 100644
--- a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
+++ b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
@@ -62,7 +62,7 @@ export function AnnotationOverviewTable() {
                 values: ['Deposition Name'],
                 renderValue: () => (
                   <Link
-                    className="text-sds-primary-400"
+                    className="text-sds-color-primitive-blue-400"
                     to={`/deposition/${annotation.deposition?.id}`}
                   >
                     {annotation.deposition?.title}
@@ -117,14 +117,14 @@ export function AnnotationOverviewTable() {
                             className="text-sds-header-s leading-sds-header-s whitespace-nowrap overflow-hidden text-ellipsis"
                             linkProps={{
                               className:
-                                'text-sds-info-400 overflow-hidden text-ellipsis',
+                                'text-sds-color-primitive-blue-400 overflow-hidden text-ellipsis',
                             }}
                           />
                         </li>
                       ))}
                     </ul>
                   ) : (
-                    <p className="text-sds-body-s leading-sds-body-s text-sds-gray-500">
+                    <p className="text-sds-body-s leading-sds-body-s text-sds-color-primitive-gray-500">
                       {t('notSubmitted')}
                     </p>
                   ),
diff --git a/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
index f1253aee0..bd8a71ef6 100644
--- a/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
+++ b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
@@ -65,7 +65,7 @@ export function TomogramMetadataDrawer() {
             values: [tomogram.deposition?.title ?? ''],
             renderValue: (value: string) => (
               <Link
-                className="text-sds-primary-400"
+                className="text-sds-color-primitive-blue-400"
                 to={`/deposition/${tomogram.deposition?.id}`}
               >
                 {value}
diff --git a/frontend/packages/data-portal/app/components/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
index ea3ea173a..1a9b68bc2 100644
--- a/frontend/packages/data-portal/app/components/TablePageLayout.tsx
+++ b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
@@ -184,7 +184,7 @@ function TablePageTabContent({
                 'ml-sds-xl p-sds-m flex items-center gap-x-sds-xl  screen-1024:mr-sds-xl',
                 // NOTE: The title background color is gray on the browse datasets and browse depositions pages
                 // If we want to add a description to the single deposition or single run pages, we may need to update this
-                !!description && 'bg-sds-gray-100',
+                !!description && 'bg-sds-color-primitive-gray-100',
               )}
             >
               <p className="text-sds-header-l leading-sds-header-l font-semibold">
@@ -201,7 +201,7 @@ function TablePageTabContent({
                 {learnMoreLink && (
                   <Link
                     to={learnMoreLink}
-                    className="text-sds-primary-400 ml-sds-xxs"
+                    className="text-sds-color-primitive-blue-400 ml-sds-xxs"
                   >
                     {t('learnMore')}
                   </Link>