From edef56b128cc5b95cec283850e14b2484cf4bd6c Mon Sep 17 00:00:00 2001
From: Bryan Chu <bchu@chanzuckerberg.com>
Date: Thu, 26 Sep 2024 16:00:27 -0700
Subject: [PATCH] css changes

---
 .../Download/Tomogram/TomogramSelector.tsx         |  7 ++++++-
 .../Download/Tomogram/TomogramSelectorLabel.tsx    |  2 +-
 .../Download/Tomogram/TomogramSelectorOption.tsx   | 14 +++++++++-----
 .../app/components/TomogramTypeBadge.tsx           |  3 ++-
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelector.tsx b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelector.tsx
index 388865985..c9008b0da 100644
--- a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelector.tsx
+++ b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelector.tsx
@@ -46,7 +46,12 @@ export function TomogramSelector({
       options={allTomograms.map((tomogram) => ({
         key: tomogram.id.toString(),
         value: tomogram.id.toString(),
-        component: <TomogramSelectorOption tomogram={tomogram} />,
+        component: (
+          <TomogramSelectorOption
+            tomogram={tomogram}
+            isSelected={tomogram.id === selectedTomogram?.id}
+          />
+        ),
       }))}
       onChange={onSelectTomogramId}
       showActiveValue={false}
diff --git a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorLabel.tsx b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorLabel.tsx
index 2d61458be..ba02bec28 100644
--- a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorLabel.tsx
+++ b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorLabel.tsx
@@ -21,7 +21,7 @@ export function TomogramSelectorInputLabel({
       <span className="shrink overflow-hidden text-ellipsis">
         {getTomogramName(tomogram)}
       </span>
-      <span className="text-sds-color-primitive-gray-500">
+      <span className="text-sds-color-primitive-gray-500 font-normal">
         {t('unitAngstrom', { value: tomogram.voxelSpacing })}
       </span>
       {tomogram.isStandardized && <TomogramTypeBadge type="standard" />}
diff --git a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx
index dedfe6a6a..d0edca039 100644
--- a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx
+++ b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx
@@ -6,31 +6,35 @@ import { getTomogramName } from 'app/utils/tomograms'
 
 export interface TomogramSelectorOptionProps {
   tomogram: TomogramV2
+  isSelected: boolean
 }
 
 export function TomogramSelectorOption({
   tomogram,
+  isSelected,
 }: TomogramSelectorOptionProps) {
   const { t } = useI18n()
 
   return (
     <div>
-      <div className="font-semibold">{getTomogramName(tomogram)}</div>
-      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
+      <div className={isSelected ? 'font-semibold' : ''}>
+        {getTomogramName(tomogram)}
+      </div>
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 font-normal">
         {t('tomogramId')}: {IdPrefix.Tomogram}-{tomogram.id}{' '}
         {tomogram.isStandardized && (
           <TomogramTypeBadge type="standard" size="small" />
         )}
       </div>
-      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 font-normal">
         {t('tomogramSampling')}:{' '}
         {t('unitAngstrom', { value: tomogram.voxelSpacing })} ({tomogram.sizeX},{' '}
         {tomogram.sizeY}, {tomogram.sizeZ})px
       </div>
-      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 font-normal">
         {t('reconstructionMethod')}: {tomogram.reconstructionMethod}
       </div>
-      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 capitalize">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 font-normal capitalize">
         {t('postProcessing')}: {tomogram.processing}
       </div>
     </div>
diff --git a/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx b/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx
index cf176779b..194bab3ec 100644
--- a/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx
+++ b/frontend/packages/data-portal/app/components/TomogramTypeBadge.tsx
@@ -20,7 +20,8 @@ export function TomogramTypeBadge({
   const badge = (
     <div
       className={cns(
-        'inline-flex items-center px-sds-xs py-sds-xxxs !text-sds-body-xxxs text-[#002660] leading-sds-body-xxxs rounded bg-[#e9f1ff]',
+        'inline-flex items-center px-sds-xs py-sds-xxxs',
+        '!text-sds-body-xxxs text-[#002660] font-normal leading-sds-body-xxxs rounded bg-[#e9f1ff]',
         size === 'small' ? 'h-[16px]' : 'h-[20px]',
         showTooltip && 'cursor-pointer',
       )}