refactor: opacity enum

src/components/AccountNotifications.tsx

@@ -5,8 +5,9 @@ import {
 } from '@primer/octicons-react';
 import { type FC, type MouseEvent, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
-import { type Account, Size } from '../types';
+import { type Account, Opacity, Size } from '../types';
 import type { Notification } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import { openAccountProfile } from '../utils/links';
 import { HoverGroup } from './HoverGroup';
 import { NotificationRow } from './NotificationRow';
@@ -66,7 +67,11 @@ export const AccountNotifications: FC<IAccountNotifications> = (
     <>
       {showAccountHostname && (
         <div
-          className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+          className={cn(
+            'group flex items-center justify-between px-3 py-2 text-sm font-semibold',
+            'bg-gray-300 dark:bg-gray-darkest dark:text-white',
+            Opacity.LOW,
+          )}
           onClick={toggleAccountNotifications}
         >
           <div className="flex gap-3">

src/components/NotificationRow.tsx

@@ -17,7 +17,7 @@ import {
   useState,
 } from 'react';
 import { AppContext } from '../context/App';
-import { IconColor, Size } from '../types';
+import { IconColor, Opacity, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { cn } from '../utils/cn';
 import {
@@ -120,7 +120,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
         animateExit &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
-        showAsRead && 'opacity-50 dark:opacity-50',
+        showAsRead && Opacity.READ,
       )}
     >
       <div
@@ -134,12 +134,15 @@ export const NotificationRow: FC<INotificationRow> = ({
       </div>
 
       <div
-        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         onClick={() => handleNotification()}
       >
         {groupByDate && (
           <div
-            className="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            className={cn(
+              'mb-1 flex items-center gap-1 text-xs',
+              Opacity.MEDIUM,
+            )}
             title={repoSlug}
           >
             <span>
@@ -165,14 +168,19 @@ export const NotificationRow: FC<INotificationRow> = ({
         )}
 
         <div
-          className="mb-1 cursor-pointer truncate text-sm"
+          className="mb-1 truncate text-sm"
           role="main"
           title={notification.subject.title}
         >
           {notification.subject.title}
         </div>
 
-        <div className="flex flex-wrap items-center gap-1 text-xs capitalize">
+        <div
+          className={cn(
+            'flex flex-wrap items-center gap-1 text-xs capitalize',
+            Opacity.MEDIUM,
+          )}
+        >
           {notification.subject.user ? (
             <button
               type="button"

src/components/RepositoryNotifications.tsx

@@ -13,8 +13,9 @@ import {
   useState,
 } from 'react';
 import { AppContext } from '../context/App';
-import { Size } from '../types';
+import { Opacity, Size } from '../types';
 import type { Notification } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import { openRepository } from '../utils/links';
 import { HoverGroup } from './HoverGroup';
 import { NotificationRow } from './NotificationRow';
@@ -64,15 +65,20 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
         className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
         onClick={toggleRepositoryNotifications}
       >
-        <div className="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
+        <div
+          className={cn(
+            'flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium',
+            Opacity.MEDIUM,
+          )}
+        >
           <AvatarIcon
             title={repoName}
             url={avatarUrl}
             size={Size.LARGE}
             defaultIcon={MarkGithubIcon}
           />
           <span
-            className="cursor-pointer truncate opacity-90"
+            className="cursor-pointer truncate"
             onClick={(event: MouseEvent<HTMLElement>) => {
               // Don't trigger onClick of parent element.
               event.stopPropagation();