Repository: gitify-app/gitify
Pull request #1250 (2024-06-16 16:57:33)

style: opacity hierarchy
<img width="432" alt="image" src="https://github.com/gitify-app/gitify/assets/19473034/b3cdba01-7f33-430d-8507-69997ba8ea90">

Idea here is to try to make the notification the primary thing the user looks at. We can potentially experiment an use lower opacities instead of this 10 point jump.


Patch:
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index b11d05e5..188d8aec 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -61,6 +61,7 @@ export const AccountNotifications = (props: IProps) => {
               type="button"
               title="Open Profile"
               onClick={() => openAccountProfile(account)}
+              className="opacity-80"
             >
               @{account.user.login}
             </button>
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index ace1d48a..b8cdb9bd 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -42,7 +42,7 @@ export const RepositoryNotifications: FC<IProps> = ({
             <MarkGithubIcon size={18} />
           )}
           <span
-            className="cursor-pointer truncate"
+            className="cursor-pointer truncate opacity-90"
             onClick={() => openRepository(repoNotifications[0].repository)}
             onKeyDown={() => openRepository(repoNotifications[0].repository)}
           >


Test patch:
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index fbd8f916..d7d8d879 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </svg>
           </span>
           <button
+            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -88,6 +89,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </span>
         <button
+          class="opacity-80"
           title="Open Profile"
           type="button"
         >
@@ -204,6 +206,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </svg>
           </span>
           <button
+            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -260,6 +263,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </span>
         <button
+          class="opacity-80"
           title="Open Profile"
           type="button"
         >
@@ -373,6 +377,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
             </svg>
           </span>
           <button
+            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -428,6 +433,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
             </svg>
           </span>
           <button
+            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -487,6 +493,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
           </svg>
         </span>
         <button
+          class="opacity-80"
           title="Open Profile"
           type="button"
         >
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index d2e19b9d..ef0b33af 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
           <span
-            class="cursor-pointer truncate"
+            class="cursor-pointer truncate opacity-90"
           >
             gitify-app/notifications-test
           </span>
@@ -93,7 +93,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
         <span
-          class="cursor-pointer truncate"
+          class="cursor-pointer truncate opacity-90"
         >
           gitify-app/notifications-test
         </span>
@@ -235,7 +235,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
             />
           </svg>
           <span
-            class="cursor-pointer truncate"
+            class="cursor-pointer truncate opacity-90"
           >
             gitify-app/notifications-test
           </span>
@@ -320,7 +320,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
           />
         </svg>
         <span
-          class="cursor-pointer truncate"
+          class="cursor-pointer truncate opacity-90"
         >
           gitify-app/notifications-test
         </span>