Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › f3ab5712
Use proper color for verdict badge icon
Open rudolfs opened 1 year ago

check check-e2e

👉 Workflow runs 👉 Branch on GitHub

Activity Changes +36 -26
5 files changed +36 -26 4add00d6 → 15bb0353
modified src/components/Review.svelte
@@ -165,7 +165,7 @@
        <div class="metadata-section-title">Verdict</div>

        {#if !!roles.isDelegateOrAuthor( config.publicKey, repo.delegates.map(delegate => delegate.did), review.author.did, )}

          <VerdictButton
- 
            {verdict}
+ 
            selectedVerdict={verdict}

            summaryMissing={review.summary === undefined ||

              review.summary.trim() === ""}

            onSelect={async newVerdict => {
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";
@@ -14,12 +14,12 @@
  import VerdictBadge from "@app/components/VerdictBadge.svelte";



  interface Props {
- 
    onSelect: (verdict: Review["verdict"]) => Promise<void>;
+ 
    onSelect: (selectedVerdict: Review["verdict"]) => Promise<void>;

    summaryMissing: boolean;
- 
    verdict: Review["verdict"];
+ 
    selectedVerdict: Review["verdict"];

  }
- 
  const { onSelect, summaryMissing, verdict }: Props = $props();
+ 
  const { onSelect, summaryMissing, selectedVerdict }: Props = $props();

</script>



<style>
@@ -34,12 +34,23 @@
    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">

  {#snippet toggle(onclick)}

    <button {onclick}>
- 
      <VerdictBadge {verdict} hoverable>
+ 
      <VerdictBadge verdict={selectedVerdict} hoverable>

        <Icon name="chevron-down" />

      </VerdictBadge>

    </button>
@@ -47,20 +58,24 @@
  {#snippet popover()}

    <Border variant="ghost">

      <DropdownList items={[undefined, "accept", "reject"] as const}>
- 
        {#snippet item(action)}
+ 
        {#snippet item(verdict)}

          <DropdownListItem
- 
            title={action === undefined && summaryMissing
+ 
            title={verdict === undefined && summaryMissing

              ? "Set a summary to select verdict None"

              : undefined}
- 
            disabled={action === undefined && summaryMissing}
- 
            selected={verdict === action}
+ 
            disabled={verdict === undefined && summaryMissing}
+ 
            selected={selectedVerdict === verdict}

            onclick={async () => {
- 
              await onSelect(action);
+ 
              await onSelect(verdict);

              closeFocused();

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

            </span>

          </DropdownListItem>

        {/snippet}
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)";
- 
  }
- 
}