7089e99 Use proper color for verdict badge icon — radicle-desktop

Radicle desktop app

Use proper color for verdict badge icon

Rūdolfs Ošiņš committed 1 year ago

commit 7089e992e9ac6bfd74a76210f11412c87b33c67e
parent 4add00d682f7fbca3dc2ed2d70dae0cefe5c92d9

4 files changed +24 -14

modified src/components/ReviewTeaser.svelte

@@ -73,14 +73,17 @@

   .accepted {
     background-color: var(--color-fill-diff-green-light);
     color: var(--color-foreground-success);
   }
   .rejected {
     background-color: var(--color-fill-diff-red-light);
     color: var(--color-foreground-red);
   }
   .no-verdict {
     background-color: var(--color-fill-ghost);
     color: var(--color-foreground-dim);
   }
 </style>

modified src/components/VerdictBadge.svelte

@@ -3,7 +3,7 @@

   import type { Snippet } from "svelte";
   import capitalize from "lodash/capitalize.js";
   import { verdictIcon, verdictIconColor } from "@app/lib/utils";
   import { verdictIcon } from "@app/lib/utils";
   import Icon from "@app/components/Icon.svelte";

@@ -23,6 +23,7 @@

   }
   .no-verdict {
     background-color: var(--color-fill-ghost);
     color: var(--color-foreground-dim);
   }
   .no-verdict.hoverable:hover {
     background-color: var(--color-fill-ghost-hover);

@@ -30,6 +31,7 @@

   .accepted {
     background-color: var(--color-fill-diff-green-light);
     color: var(--color-foreground-success);
   }
   .accepted.hoverable:hover {
     background-color: var(--color-fill-diff-green);

@@ -37,6 +39,7 @@

   .rejected {
     background-color: var(--color-fill-diff-red-light);
     color: var(--color-foreground-red);
   }
   .rejected.hoverable:hover {
     background-color: var(--color-fill-diff-red);

@@ -45,7 +48,6 @@

 <span
   class="global-counter badge"
   style:color={verdictIconColor(verdict)}
   class:hoverable
   class:no-verdict={verdict === undefined}
   class:accepted={verdict === "accept"}

modified src/components/VerdictButton.svelte

@@ -4,7 +4,7 @@

   import capitalize from "lodash/capitalize.js";
   import { closeFocused } from "./Popover.svelte";
   import { verdictIcon, verdictIconColor } from "@app/lib/utils";
   import { verdictIcon } from "@app/lib/utils";
   import Border from "@app/components/Border.svelte";
   import DropdownList from "@app/components/DropdownList.svelte";

@@ -34,6 +34,17 @@

     justify-content: center;
     font-size: var(--font-size-small);
   }
   .accepted {
     color: var(--color-foreground-success);
   }
   .rejected {
     color: var(--color-foreground-red);
   }
   .no-verdict {
     color: var(--color-foreground-dim);
   }
 </style>
 <Popover popoverPadding="0" popoverPositionLeft="0" popoverPositionTop="2rem">

@@ -58,7 +69,11 @@

               await onSelect(action);
               closeFocused();
             }}>
             <span class="global-flex" style:color={verdictIconColor(action)}>
             <span
               class="global-flex"
               class:accepted={action === "accept"}
               class:rejected={action === "reject"}
               class:no-verdict={action === undefined}>
               <Icon name={verdictIcon(action)} />
               {action ? capitalize(`${action}ed`) : "None"}
             </span>

modified src/lib/utils.ts

@@ -248,13 +248,3 @@ export function verdictIcon(verdict: Review["verdict"]) {

     return "comment";
   }
 }
 export function verdictIconColor(verdict: Review["verdict"]) {
   if (verdict === "accept") {
     return "var(--color-foreground-success)";
   } else if (verdict === "reject") {
     return "var(--color-foreground-red)";
   } else {
     return "var(--color-foreground-dim)";
   }
 }