refactor(ui): Replace Label component with Badge component in vote-la…

…bel.tsx, dao-status-label.tsx, and proposal-card.tsx
renlabs-dev · Oct 2, 2024 · d80219a · d80219a
1 parent 54fa2b9
commit d80219a
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 132 deletions.
diff --git a/apps/commune-governance/src/app/components/dao/dao-status-label.tsx b/apps/commune-governance/src/app/components/dao/dao-status-label.tsx
@@ -1,6 +1,5 @@
 import type { DaoApplicationStatus } from "@commune-ts/types";
-
-import { Label } from "../label";
+import { Badge } from "@commune-ts/ui";
 
 interface StatusLabelProps {
   daoStatus: DaoApplicationStatus;
@@ -10,24 +9,24 @@ export const DaoStatusLabel = (props: StatusLabelProps): JSX.Element => {
   const { daoStatus } = props;
   const votingStatus = {
     Pending: (
-      <Label className="w-auto border border-yellow-500 bg-yellow-500/10 py-1.5 text-center text-yellow-500 lg:text-left">
+      <Badge className="border-yellow-500 bg-yellow-500/10 text-yellow-500">
         Active
-      </Label>
+      </Badge>
     ),
     Accepted: (
-      <Label className="w-auto border border-green-500 bg-green-500/10 py-1.5 text-center text-green-500 lg:text-left">
+      <Badge className="border-green-500 bg-green-500/10 text-green-500">
         Accepted
-      </Label>
+      </Badge>
     ),
     Refused: (
-      <Label className="w-auto border border-red-500 bg-red-500/10 py-1.5 text-center text-red-500 lg:text-left">
+      <Badge className="border-red-500 bg-red-500/10 text-red-500">
         Refused
-      </Label>
+      </Badge>
     ),
     Removed: (
-      <Label className="w-auto border border-rose-500 bg-rose-500/10 py-1.5 text-center text-rose-500 lg:text-left">
+      <Badge className="border-rose-500 bg-rose-500/10 text-rose-500">
         Removed
-      </Label>
+      </Badge>
     ),
   };
   return votingStatus[daoStatus];

diff --git a/apps/commune-governance/src/app/components/label.tsx b/apps/commune-governance/src/app/components/label.tsx
diff --git a/apps/commune-governance/src/app/components/proposal/proposal-card.tsx b/apps/commune-governance/src/app/components/proposal/proposal-card.tsx
@@ -6,6 +6,8 @@ import { ArrowRightIcon } from "@heroicons/react/20/solid";
 
 import type { ProposalState } from "@commune-ts/types";
 import { useCommune } from "@commune-ts/providers/use-commune";
+import { Badge } from "@commune-ts/ui";
+import { MarkdownView } from "@commune-ts/ui/markdown-view";
 import { removeEmojis, smallAddress } from "@commune-ts/utils";
 
 import type { VoteStatus } from "../vote-label";
@@ -16,12 +18,10 @@ import {
   handleProposalStakeVoted,
 } from "../../../utils";
 import { Card } from "../card";
-import { Label } from "../label";
 import { StatusLabel } from "../status-label";
 import { VoteLabel } from "../vote-label";
 import { ProposalTypeLabel } from "./proposal-type-label";
 import { RewardLabel } from "./reward-label";
-import { MarkdownView } from "@commune-ts/ui/markdown-view";
 
 export interface ProposalCardProps {
   proposalState: ProposalState;
@@ -93,9 +93,9 @@ export function ProposalCard(props: ProposalCardProps): JSX.Element {
             <div className="mb-2 flex w-full flex-col justify-center gap-2 md:flex-row lg:mb-0 lg:ml-auto lg:w-auto lg:flex-row lg:justify-end lg:pl-4">
               <VoteLabel vote={voted} />
               <ProposalTypeLabel result={proposalState.data} />
-              <Label className="border border-gray-200 bg-white/5 text-gray-200">
+              <Badge className="border-gray-200 bg-white/5 text-gray-200">
                 {netuid !== "GLOBAL" ? `Subnet ${netuid}` : "Global"}
-              </Label>
+              </Badge>
               <RewardLabel
                 result={proposalState.status}
                 proposalId={proposalState.id}

diff --git a/apps/commune-governance/src/app/components/proposal/proposal-type-label.tsx b/apps/commune-governance/src/app/components/proposal/proposal-type-label.tsx
@@ -1,8 +1,7 @@
 import { match } from "rustie";
 
 import type { ProposalData } from "@commune-ts/types";
-
-import { Label } from "../label";
+import { Badge } from "@commune-ts/ui";
 
 interface ProposalTypeLabelProps {
   result: ProposalData;
@@ -13,47 +12,37 @@ export function ProposalTypeLabel(props: ProposalTypeLabelProps): JSX.Element {
   return match(result)({
     globalCustom() {
       return (
-        <Label
-          className={`w-auto border border-emerald-500 bg-emerald-500/10 py-1.5 text-center text-emerald-500 lg:text-left`}
-        >
+        <Badge className="border-emerald-500 bg-emerald-500/10 text-emerald-500">
           Global Custom
-        </Label>
+        </Badge>
       );
     },
     globalParams() {
       return (
-        <Label
-          className={`w-auto border border-blue-500 bg-blue-500/10 py-1.5 text-center  text-blue-500 lg:text-left`}
-        >
+        <Badge className="border-blue-500 bg-blue-500/10 text-blue-500">
           Global Params
-        </Label>
+        </Badge>
       );
     },
     subnetCustom() {
       return (
-        <Label
-          className={`w-auto border border-sky-500 bg-sky-500/10 py-1.5 text-center text-sky-500 lg:text-left`}
-        >
+        <Badge className="border-sky-500 bg-sky-500/10 text-sky-500">
           Subnet Custom
-        </Label>
+        </Badge>
       );
     },
     subnetParams() {
       return (
-        <Label
-          className={`w-auto border border-cyan-500 bg-cyan-500/10 py-1.5 text-center text-cyan-500 lg:text-left`}
-        >
+        <Badge className="border-cyan-500 bg-cyan-500/10 text-cyan-500">
           Subnet Params
-        </Label>
+        </Badge>
       );
     },
     transferDaoTreasury() {
       return (
-        <Label
-          className={`w-auto border border-teal-500 bg-teal-500/10 py-1.5 text-center text-teal-500 lg:text-left`}
-        >
+        <Badge className="border-teal-500 bg-teal-500/10 text-teal-500">
           Transfer DAO Treasury
-        </Label>
+        </Badge>
       );
     },
   });

diff --git a/apps/commune-governance/src/app/components/proposal/reward-label.tsx b/apps/commune-governance/src/app/components/proposal/reward-label.tsx
@@ -2,8 +2,7 @@ import { match } from "rustie";
 
 import type { ProposalStatus } from "@commune-ts/types";
 import { useCommune } from "@commune-ts/providers/use-commune";
-
-import { Label } from "../label";
+import { Badge } from "@commune-ts/ui";
 
 interface RewardLabelProps {
   result: ProposalStatus;
@@ -17,54 +16,46 @@ export function RewardLabel(props: RewardLabelProps): JSX.Element {
 
   const isUnrewarded = unrewardedProposals?.includes(proposalId);
 
-  return match(result)({
-    open() {
-      return (
-        <Label
-          className={`w-auto border border-purple-500 bg-purple-500/10 py-1.5 text-center text-purple-500 lg:text-left ${className}`}
-        >
-          Unrewarded
-        </Label>
-      );
-    },
-    accepted() {
-      return (
-        <Label
-          className={`w-auto border ${
-            isUnrewarded
-              ? "border-purple-500 bg-purple-500/10 text-purple-500"
-              : "border-green-500 bg-green-500/10 text-green-500"
-          } py-1.5 text-center lg:text-left ${className}`}
-        >
-          {isUnrewarded ? "Unrewarded" : "Rewarded"}
-        </Label>
-      );
-    },
-    expired() {
-      return (
-        <Label
-          className={`w-auto border ${
-            isUnrewarded
-              ? "border-purple-500 bg-purple-500/10 text-purple-500"
-              : "border-green-500 bg-green-500/10 text-green-500"
-          } py-1.5 text-center lg:text-left ${className}`}
-        >
-          {isUnrewarded ? "Unrewarded" : "Rewarded"}
-        </Label>
-      );
-    },
-    refused() {
-      return (
-        <Label
-          className={`w-auto border ${
-            isUnrewarded
-              ? "border-purple-500 bg-purple-500/10 text-purple-500"
-              : "border-green-500 bg-green-500/10 text-green-500"
-          } py-1.5 text-center lg:text-left ${className}`}
-        >
-          {isUnrewarded ? "Unrewarded" : "Rewarded"}
-        </Label>
-      );
-    },
-  });
+  const getRewardStatus = () => {
+    return match(result)({
+      open: () => ({
+        text: "Unrewarded",
+        className: "border-purple-500 bg-purple-500/10 text-purple-500",
+      }),
+      accepted: () =>
+        isUnrewarded
+          ? {
+              text: "Unrewarded",
+              className: "border-purple-500 bg-purple-500/10 text-purple-500",
+            }
+          : {
+              text: "Rewarded",
+              className: "border-green-500 bg-green-500/10 text-green-500",
+            },
+      expired: () =>
+        isUnrewarded
+          ? {
+              text: "Unrewarded",
+              className: "border-purple-500 bg-purple-500/10 text-purple-500",
+            }
+          : {
+              text: "Rewarded",
+              className: "border-green-500 bg-green-500/10 text-green-500",
+            },
+      refused: () =>
+        isUnrewarded
+          ? {
+              text: "Unrewarded",
+              className: "border-purple-500 bg-purple-500/10 text-purple-500",
+            }
+          : {
+              text: "Rewarded",
+              className: "border-green-500 bg-green-500/10 text-green-500",
+            },
+    });
+  };
+
+  const { text, className: statusClassName } = getRewardStatus();
+
+  return <Badge className={`${statusClassName} ${className}`}>{text}</Badge>;
 }
diff --git a/apps/commune-governance/src/app/components/status-label.tsx b/apps/commune-governance/src/app/components/status-label.tsx
@@ -1,52 +1,42 @@
 import { match } from "rustie";
 
 import type { ProposalStatus } from "@commune-ts/types";
-
-import { Label } from "./label";
+import { Badge } from "@commune-ts/ui";
 
 interface StatusLabelProps {
   result: ProposalStatus;
-  className?: string;
 }
 
 export function StatusLabel(props: StatusLabelProps): JSX.Element {
-  const { result, className = "" } = props;
+  const { result } = props;
 
   return match(result)({
     open() {
       return (
-        <Label
-          className={`w-auto border border-yellow-500 bg-yellow-500/10 py-1.5 text-center text-yellow-500 lg:text-left ${className}`}
-        >
+        <Badge className="border-yellow-500 bg-yellow-500/10 text-yellow-500">
           Active
-        </Label>
+        </Badge>
       );
     },
     accepted() {
       return (
-        <Label
-          className={`w-auto border border-green-500 bg-green-500/10 py-1.5 text-center  text-green-500 lg:text-left ${className}`}
-        >
+        <Badge className="border-green-500 bg-green-500/10 text-green-500">
           Accepted
-        </Label>
+        </Badge>
       );
     },
     expired() {
       return (
-        <Label
-          className={`w-auto border border-gray-500 bg-gray-500/10 py-1.5 text-center text-gray-500 lg:text-left ${className}`}
-        >
+        <Badge className="border-gray-500 bg-gray-500/10 text-gray-500">
           Expired
-        </Label>
+        </Badge>
       );
     },
     refused() {
       return (
-        <Label
-          className={`w-auto border border-red-500 bg-red-500/10 py-1.5 text-center text-red-500 lg:text-left ${className}`}
-        >
+        <Badge className="border-red-500 bg-red-500/10 text-red-500">
           Refused
-        </Label>
+        </Badge>
       );
     },
   });

diff --git a/apps/commune-governance/src/app/components/vote-label.tsx b/apps/commune-governance/src/app/components/vote-label.tsx
@@ -1,4 +1,4 @@
-import { Label } from "./label";
+import { Badge } from "@commune-ts/ui";
 
 export type VoteStatus = "FAVORABLE" | "AGAINST" | "UNVOTED";
 
@@ -12,14 +12,14 @@ export function VoteLabel(props: VoteLabelProps): JSX.Element {
   const votingStatus = {
     UNVOTED: <></>,
     FAVORABLE: (
-      <Label className="border border-green-500 bg-green-500/10 text-green-500">
+      <Badge className="border-green-500 bg-green-500/10 text-green-500">
         Favorable
-      </Label>
+      </Badge>
     ),
     AGAINST: (
-      <Label className="border border-red-500 bg-red-500/10 text-red-500">
+      <Badge className="border-red-500 bg-red-500/10 text-red-500">
         Against
-      </Label>
+      </Badge>
     ),
   };
 

diff --git a/apps/commune-governance/src/app/proposal/[id]/_components/proposal-expanded-view.tsx b/apps/commune-governance/src/app/proposal/[id]/_components/proposal-expanded-view.tsx
@@ -4,6 +4,7 @@ import { ArrowPathIcon } from "@heroicons/react/20/solid";
 
 import type { ProposalStatus, SS58Address } from "@commune-ts/types";
 import { useCommune } from "@commune-ts/providers/use-commune";
+import { Badge } from "@commune-ts/ui";
 import { MarkdownView } from "@commune-ts/ui/markdown-view";
 import {
   getExpirationTime,
@@ -14,7 +15,6 @@ import {
 import type { VoteStatus } from "../../../components/vote-label";
 import { CreateComment } from "~/app/components/comments/create-comment";
 import { ViewComment } from "~/app/components/comments/view-comment";
-import { Label } from "~/app/components/label";
 import { ProposalTypeLabel } from "~/app/components/proposal/proposal-type-label";
 import { ProposalVoteCard } from "~/app/components/proposal/proposal-vote-card";
 import { RewardLabel } from "~/app/components/proposal/reward-label";
@@ -179,13 +179,13 @@ export function ProposalExpandedView(props: CustomContent): JSX.Element {
         <div className="w-full">
           <ViewComment modeType="PROPOSAL" proposalId={content.id} />
         </div>
-        <div className="m-2 hidden h-fit min-h-max animate-fade-down flex-col items-center justify-between border border-white/20 bg-[#898989]/5 p-6 text-white backdrop-blur-md  animate-delay-200 md:flex">
+        <div className="m-2 hidden h-fit min-h-max animate-fade-down flex-col items-center justify-between border border-white/20 bg-[#898989]/5 p-6 text-white backdrop-blur-md animate-delay-200 md:flex">
           <CreateComment proposalId={content.id} ModeType="PROPOSAL" />
         </div>
       </div>
 
       <div className="flex flex-col lg:w-1/3">
-        <div className="m-2 animate-fade-down border border-white/20 bg-[#898989]/5 p-6 text-gray-400  backdrop-blur-md animate-delay-200">
+        <div className="m-2 animate-fade-down border border-white/20 bg-[#898989]/5 p-6 text-gray-400 backdrop-blur-md animate-delay-200">
           <div className="flex flex-col gap-3">
             <div>
               <span>ID</span>
@@ -219,9 +219,9 @@ export function ProposalExpandedView(props: CustomContent): JSX.Element {
         <div className="m-2 animate-fade-down border border-white/20 bg-[#898989]/5 p-6 text-gray-400 backdrop-blur-md animate-delay-300">
           <SectionHeaderText text="Subnet / Status / Reward Status / Type" />
           <div className="flex w-full flex-col items-center gap-2 md:flex-row">
-            <Label className="border border-white bg-white/5 text-white">
+            <Badge className="border-white bg-white/5 text-white">
               {content.netuid}
-            </Label>
+            </Badge>
             <StatusLabel result={content.status} />
             <RewardLabel proposalId={content.id} result={content.status} />
             <ProposalTypeLabel result={content.data} />