css changes

chanzuckerberg · Sep 26, 2024 · edef56b · edef56b
1 parent dcad39b
commit edef56b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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',
       )}