From 0808ff261e83d4cc04cf95d8810e1cde10e3eabb Mon Sep 17 00:00:00 2001
From: Ed Castro <ed.sdr@outlook.com>
Date: Fri, 4 Oct 2024 19:34:19 -0300
Subject: [PATCH] refactor(ui): update cards, dialog and fields on governance

---
 .../src/app/components/balance-section.tsx    |  29 ++-
 .../src/app/components/dao/create-dao.tsx     | 199 ++++++++----------
 .../src/app/components/modal.tsx              | 131 +++++-------
 .../app/components/proposal-list-header.tsx   |  61 +++---
 .../components/proposal/create-proposal.tsx   | 165 +++++++--------
 .../create-transfer-dao-treasury-proposal.tsx | 190 +++++++----------
 .../commune-governance/src/styles/globals.css |   5 +-
 packages/ui/package.json                      |   1 +
 packages/ui/src/components/button.tsx         |   6 +-
 packages/ui/src/components/dialog.tsx         |   4 +-
 packages/ui/src/components/index.ts           |   1 +
 packages/ui/src/components/input.tsx          |   2 +-
 packages/ui/src/components/label.tsx          |   2 +-
 packages/ui/src/components/select.tsx         |   2 +-
 packages/ui/src/components/separator.tsx      |  31 +++
 packages/ui/src/components/tabs.tsx           |   4 +-
 packages/ui/src/components/text-area.tsx      |   2 +-
 pnpm-lock.yaml                                |  33 ++-
 tooling/tailwind/base.ts                      |   1 +
 19 files changed, 415 insertions(+), 454 deletions(-)
 create mode 100644 packages/ui/src/components/separator.tsx

diff --git a/apps/commune-governance/src/app/components/balance-section.tsx b/apps/commune-governance/src/app/components/balance-section.tsx
index d80e1ed8..4e64787c 100644
--- a/apps/commune-governance/src/app/components/balance-section.tsx
+++ b/apps/commune-governance/src/app/components/balance-section.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 
 import { useBalance } from "@commune-ts/providers/hooks";
 import { useCommune } from "@commune-ts/providers/use-commune";
+import { Card, Label, Separator } from "@commune-ts/ui";
 import { formatToken } from "@commune-ts/utils";
 
 export function BalanceSection({
@@ -37,9 +38,9 @@ export function BalanceSection({
       className={`flex w-full flex-col items-center justify-center lg:mt-10 ${className ?? ""}`}
     >
       <div
-        className={`flex w-full flex-col divide-gray-500 border-white/20 text-2xl text-green-500 lg:flex-row lg:gap-6 lg:pb-5`}
+        className={`flex w-full flex-col text-2xl text-green-500 lg:flex-row lg:gap-6 lg:pb-5`}
       >
-        <div className="flex animate-fade-down flex-row items-center justify-between border-white/20 bg-[#898989]/5 p-6 pr-6 lg:w-1/3 lg:border lg:pr-10">
+        <Card className="flex animate-fade-down flex-row items-center justify-between p-6 lg:w-1/3">
           <div className="flex flex-col gap-1">
             {!daoTreasury && !isInitialized ? (
               <p className="animate-pulse text-gray-400">
@@ -52,14 +53,12 @@ export function BalanceSection({
                 <span className="text-lg text-white"> COMAI</span>
               </p>
             )}
-            <span className="text-base font-light text-gray-200">
-              DAO treasury funds
-            </span>
+            <Label className="text-gray-300">DAO treasury funds</Label>
           </div>
           <Image alt="Dao Icon" height={40} src="/dao-icon.svg" width={40} />
-        </div>
+        </Card>
 
-        <div className="flex animate-fade-down flex-row items-center justify-between border-t !border-white/20 bg-[#898989]/5 p-6 pr-6 animate-delay-100 lg:w-1/3 lg:border lg:pr-10">
+        <Card className="flex animate-fade-down flex-row items-center justify-between p-6 animate-delay-100 lg:w-1/3">
           <div className="flex flex-col items-start gap-1">
             {!isInitialized && (
               <p className="animate-pulse text-gray-400">
@@ -93,9 +92,7 @@ export function BalanceSection({
               </p>
             )}
 
-            <span className="text-base font-light text-gray-200">
-              Your total free balance
-            </span>
+            <Label className="text-gray-300">Your total free balance</Label>
           </div>
           <Image
             alt="Wallet Icon"
@@ -103,9 +100,9 @@ export function BalanceSection({
             src="/wallet-icon.svg"
             width={40}
           />
-        </div>
+        </Card>
 
-        <div className="flex animate-fade-down flex-row items-center justify-between border-t !border-white/20 bg-[#898989]/5 p-6 pr-6 animate-delay-200 lg:w-1/3 lg:border lg:pr-10">
+        <Card className="flex animate-fade-down flex-row items-center justify-between p-6 animate-delay-200 lg:w-1/3">
           <div className="flex flex-col items-start gap-1">
             {!isInitialized ||
             (selectedAccount?.meta.name && userStakeWeight == null) ? (
@@ -128,9 +125,7 @@ export function BalanceSection({
                 <span className="text-lg text-white"> COMAI</span>
               </p>
             )}
-            <span className="text-base font-light text-gray-200">
-              Your total Staked balance
-            </span>
+            <Label className="text-gray-300">Your total Staked balance</Label>
           </div>
           <Image
             alt="Globe Icon"
@@ -138,9 +133,9 @@ export function BalanceSection({
             src="/globe-icon.svg"
             width={40}
           />
-        </div>
+        </Card>
       </div>
-      <div className="flex w-full animate-fade border-b border-white/20 animate-delay-700" />
+      <Separator className="animate-fade animate-delay-700" />
     </div>
   );
 }
diff --git a/apps/commune-governance/src/app/components/dao/create-dao.tsx b/apps/commune-governance/src/app/components/dao/create-dao.tsx
index a82adcd9..bb6fa312 100644
--- a/apps/commune-governance/src/app/components/dao/create-dao.tsx
+++ b/apps/commune-governance/src/app/components/dao/create-dao.tsx
@@ -8,7 +8,18 @@ import { z } from "zod";
 import type { TransactionResult } from "@commune-ts/types";
 import { useCommune } from "@commune-ts/providers/use-commune";
 import { toast } from "@commune-ts/providers/use-toast";
-import { TransactionStatus } from "@commune-ts/ui";
+import {
+  Button,
+  Input,
+  Label,
+  Separator,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  TransactionStatus,
+} from "@commune-ts/ui";
 
 import { cairo } from "~/utils/fonts";
 
@@ -30,11 +41,7 @@ export function CreateDao(): JSX.Element {
   const [body, setBody] = useState("");
 
   const [uploading, setUploading] = useState(false);
-
-  const [editMode, setEditMode] = useState(true);
-  function toggleEditMode(): void {
-    setEditMode(!editMode);
-  }
+  const [activeTab, setActiveTab] = useState("edit");
 
   const [transactionStatus, setTransactionStatus] = useState<TransactionResult>(
     {
@@ -134,111 +141,87 @@ export function CreateDao(): JSX.Element {
   }
 
   return (
-    <form onSubmit={HandleSubmit}>
-      <div className="flex flex-col gap-4 pt-4">
-        <div className="flex gap-2">
-          <button
-            className={`border px-4 py-1 ${editMode ? "border-green-500 bg-green-500/5 text-green-500" : "border-gray-500 text-gray-400"} hover:border-green-600 hover:bg-green-600/5 hover:text-green-600`}
-            onClick={toggleEditMode}
-            type="button"
-          >
-            Edit
-          </button>
-          <button
-            className={`border px-4 py-1 ${!editMode ? "border-green-500 bg-green-500/5 text-green-500" : "border-gray-500 text-gray-400"} hover:border-green-600 hover:bg-green-600/5 hover:text-green-600`}
-            onClick={toggleEditMode}
-            type="button"
-          >
-            Preview
-          </button>
-        </div>
-        <div className="flex flex-col">
-          {editMode ? (
-            <div className="flex flex-col gap-3">
-              <input
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setApplicationKey(e.target.value);
-                }}
-                placeholder="Application Key (ss58)"
-                type="text"
-                value={applicationKey}
-              />
-              <input
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setDiscordId(e.target.value);
-                }}
-                placeholder="Discord ID"
-                type="text"
-                value={discordId}
-              />
-              <input
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setTitle(e.target.value);
-                }}
-                placeholder="Application title"
-                type="text"
-                value={title}
-              />
-              <textarea
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setBody(e.target.value);
-                }}
-                placeholder="Application body... (Markdown supported) / HTML tags are not supported)"
-                rows={5}
-                value={body}
-              />
-            </div>
+    <form
+      onSubmit={HandleSubmit}
+      className="flex flex-col gap-4 text-green-500"
+    >
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="edit">Edit Content</TabsTrigger>
+          <TabsTrigger value="preview">Preview Content</TabsTrigger>
+        </TabsList>
+        <TabsContent value="edit" className="flex flex-col gap-3">
+          <Input
+            onChange={(e) => setApplicationKey(e.target.value)}
+            placeholder="Application Key (ss58)"
+            type="text"
+            value={applicationKey}
+          />
+          <Input
+            onChange={(e) => setDiscordId(e.target.value)}
+            placeholder="Discord ID"
+            type="text"
+            value={discordId}
+          />
+          <Separator />
+          <Input
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Application title"
+            type="text"
+            value={title}
+          />
+          <Textarea
+            onChange={(e) => setBody(e.target.value)}
+            placeholder="Application body... (Markdown supported) / HTML tags are not supported)"
+            rows={5}
+            value={body}
+          />
+        </TabsContent>
+        <TabsContent value="preview" className="bg-muted p-4">
+          {body ? (
+            <MarkdownPreview
+              className={`${cairo.className} max-h-[40vh] overflow-auto`}
+              source={`# ${title}\n${body}`}
+              style={{
+                backgroundColor: "transparent",
+                color: "white",
+              }}
+            />
           ) : (
-            <div className="p-4">
-              {body ? (
-                <MarkdownPreview
-                  className={`${cairo.className} max-h-[40vh] overflow-auto`}
-                  source={`# ${title}\n${body}`}
-                  style={{
-                    backgroundColor: "transparent",
-                    color: "white",
-                  }}
-                />
-              ) : null}
-              {/* TODO: skeleton for markdown body */}
-            </div>
+            <Label className="text-sm text-white">
+              Fill the body to preview here :)
+            </Label>
           )}
-        </div>
-        <div className="flex flex-col gap-1">
-          <button
-            className={`relative w-full border px-4 py-2 font-semibold ${isConnected ? "border-green-500 text-green-500 hover:bg-green-500/5 active:top-1" : "border-gray-500 text-gray-500"}`}
-            disabled={!isConnected}
-            type="submit"
+        </TabsContent>
+      </Tabs>
+      <Button
+        size="xl"
+        type="submit"
+        variant="default-green"
+        disabled={!isConnected}
+      >
+        {uploading ? "Uploading..." : "Submit S2 Application"}
+      </Button>
+      {transactionStatus.status && (
+        <TransactionStatus
+          status={transactionStatus.status}
+          message={transactionStatus.message}
+        />
+      )}
+      <div className="flex flex-wrap items-center gap-1 text-sm text-white">
+        <InformationCircleIcon className="h-4 w-4 fill-green-500" />
+        <Label className="text-sm text-white">
+          Please make sure, that your application meets all of the criteria
+          defined in this{" "}
+          <Link
+            className="text-green-500 hover:underline"
+            href="https://mirror.xyz/0xD80E194aBe2d8084fAecCFfd72877e63F5822Fc5/FUvj1g9rPyVm8Ii_qLNu-IbRQPiCHkfZDLAmlP00M1Q"
+            target="_blank"
           >
-            {uploading ? "Uploading..." : "Submit S2 Application"}
-          </button>
-        </div>
-        {transactionStatus.status && (
-          <TransactionStatus
-            status={transactionStatus.status}
-            message={transactionStatus.message}
-          />
-        )}
-
-        <div className="mt-1 flex items-start gap-1 text-white">
-          <InformationCircleIcon className="mt-0.5 h-4 w-4 fill-green-500 text-sm" />
-          <span className="text-sm">
-            Please make sure, that your application meets all of the criteria
-            defined in this{" "}
-            <Link
-              className="text-blue-500 hover:underline"
-              href="https://mirror.xyz/0xD80E194aBe2d8084fAecCFfd72877e63F5822Fc5/SuhIlcUugotYhf2QmVTd3mI05RCycqSFrJfCxuEHet0"
-              target="_blank"
-            >
-              article
-            </Link>
-            , or you are at risk of getting denied by the Module Curation DAO.
-          </span>
-        </div>
+            article
+          </Link>
+          , or you are at risk of getting denied by the Module Curation DAO.
+        </Label>
       </div>
     </form>
   );
diff --git a/apps/commune-governance/src/app/components/modal.tsx b/apps/commune-governance/src/app/components/modal.tsx
index 40dd63f2..ebc409d9 100644
--- a/apps/commune-governance/src/app/components/modal.tsx
+++ b/apps/commune-governance/src/app/components/modal.tsx
@@ -1,94 +1,65 @@
 "use client";
 
 import { useState } from "react";
-import { XMarkIcon } from "@heroicons/react/20/solid";
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+} from "@commune-ts/ui";
+
+// Adjust the import path as needed
 
 import { CreateDao } from "./dao/create-dao";
 import { CreateProposal } from "./proposal/create-proposal";
 import { CreateTransferDaoTreasuryProposal } from "./proposal/create-transfer-dao-treasury-proposal";
 
 export function CreateModal() {
-  const [modalOpen, setModalOpen] = useState(false);
   const [selectedView, setSelectedView] = useState("proposal");
 
-  function toggleModalMenu() {
-    setModalOpen(!modalOpen);
-  }
-
   return (
-    <>
-      <button
-        className="min-w-auto h-full w-full animate-fade-down border border-white/20 bg-[#898989]/5 p-5 text-white transition duration-200 animate-delay-700 hover:border-green-500 hover:bg-green-500/10 hover:text-green-500"
-        onClick={toggleModalMenu}
-        type="button"
-      >
-        Propose Change
-      </button>
-      <div
-        className={`relative z-50 ${modalOpen ? "visible" : "hidden"} -mr-2`}
-        role="dialog"
-      >
-        {/* Backdrop */}
-        <div className="fixed inset-0 bg-black/60 bg-opacity-60 backdrop-blur-sm transition-opacity" />
-
-        {/* Modal */}
-        <div className="fixed inset-0 z-10 w-screen animate-fade-in-down overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <div className="relative w-[100%] max-w-screen-2xl transform overflow-hidden border border-white/20 bg-[#898989]/5 px-5 py-3 text-left text-white backdrop-blur-md md:w-[80%]">
-              {/* Modal Header */}
-              <div className="flex items-center justify-between gap-3 border-b border-gray-500 bg-cover bg-center bg-no-repeat p-6 md:flex-row">
-                <div className="flex flex-col items-center md:flex-row">
-                  <h3
-                    className="pl-2 text-xl font-bold leading-6"
-                    id="modal-title"
-                  >
-                    Propose Change
-                  </h3>
-                </div>
-
-                <button
-                  className="p-2 transition duration-200"
-                  onClick={toggleModalMenu}
-                  type="button"
-                >
-                  <XMarkIcon className="h-6 w-6" />
-                </button>
-              </div>
-
-              {/* View Selection */}
-              <div className="divide-y divide-white/20 p-6 pb-4">
-                <select
-                  value={selectedView}
-                  onChange={(e) => setSelectedView(e.target.value)}
-                  className="mb-4 w-full border-r-[16px] border-transparent bg-white/10 p-3 text-white"
-                >
-                  <option value="proposal" className="bg-gray-900">
-                    Create new Proposal
-                  </option>
-                  <option value="dao" className="bg-gray-900">
-                    Create new S2 Application
-                  </option>
-                  <option
-                    value="create-transfer-dao-treasury"
-                    className="bg-gray-900"
-                  >
-                    Create Transfer Dao Treasury Proposal
-                  </option>
-                </select>
-
-                {/* Modal Body */}
-                {selectedView === "proposal" ? (
-                  <CreateProposal />
-                ) : selectedView === "dao" ? (
-                  <CreateDao />
-                ) : (
-                  <CreateTransferDaoTreasuryProposal />
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="w-full" size="xl">
+          Propose Change
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="w-[100%] max-w-screen-xl md:w-[80%]">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-bold">
+            Propose Change
+          </DialogTitle>
+        </DialogHeader>
+        <Select value={selectedView} onValueChange={setSelectedView}>
+          <SelectTrigger className="w-full border-transparent bg-white/10 p-3 text-white">
+            <SelectValue placeholder="Select a view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="proposal">Create new Proposal</SelectItem>
+            <SelectItem value="dao">Create new S2 Application</SelectItem>
+            <SelectItem value="create-transfer-dao-treasury">
+              Create Transfer Dao Treasury Proposal
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <Separator />
+        {selectedView === "proposal" ? (
+          <CreateProposal />
+        ) : selectedView === "dao" ? (
+          <CreateDao />
+        ) : (
+          <CreateTransferDaoTreasuryProposal />
+        )}
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/commune-governance/src/app/components/proposal-list-header.tsx b/apps/commune-governance/src/app/components/proposal-list-header.tsx
index 4f9f6ee2..be247c25 100644
--- a/apps/commune-governance/src/app/components/proposal-list-header.tsx
+++ b/apps/commune-governance/src/app/components/proposal-list-header.tsx
@@ -2,10 +2,21 @@ import { LinkIcon } from "@heroicons/react/20/solid";
 
 import type { SS58Address } from "@commune-ts/types";
 import { toast } from "@commune-ts/providers/use-toast";
+import {
+  Button,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@commune-ts/ui";
 import { smallAddress } from "@commune-ts/utils";
 
 import { CreateModal } from "./modal";
 
+type ViewMode = "proposals" | "daos";
+
 interface ProposalListHeaderProps {
   viewMode: string;
   setViewMode: (mode: "proposals" | "daos") => void;
@@ -28,22 +39,17 @@ export function ProposalListHeader(
       });
   }
 
-  function handleViewChange(event: React.ChangeEvent<HTMLSelectElement>): void {
-    setViewMode(event.target.value as "proposals" | "daos");
-  }
+  const handleViewChange = (value: string) => {
+    setViewMode(value as ViewMode);
+  };
 
   return (
     <div className="mt-10 flex w-full flex-row justify-between gap-6 divide-gray-500 lg:mt-0 lg:max-w-screen-2xl lg:pt-5">
       <div
         className={`hidden w-full animate-fade-down flex-col justify-end gap-1 animate-delay-300 lg:flex`}
       >
-        <p className="flex items-center text-pretty text-base font-light text-gray-200">
-          DAO treasury address:
-        </p>
-        <button
-          className="hover:bg-green/20 flex h-full w-full items-center justify-center border border-white/20 bg-[#898989]/5 p-5 text-white transition duration-200 hover:border-green-500 hover:bg-green-500/10 hover:text-green-500 lg:flex-col xl:flex-row"
-          onClick={handleCopyClick}
-        >
+        <Label className="text-md">DAO treasury address:</Label>
+        <Button onClick={handleCopyClick} size="xl">
           {daoTreasury ? (
             <span className="flex text-pretty">
               <LinkIcon className="mr-2 h-5 w-5" />
@@ -55,29 +61,22 @@ export function ProposalListHeader(
               Loading address...
             </span>
           )}
-        </button>
+        </Button>
       </div>
-      <div className="flex w-full animate-fade-down flex-col items-start justify-start gap-1 pt-[1px] animate-delay-500">
-        <p className="flex items-center text-pretty pb-0.5 text-base font-light text-gray-200">
-          View mode:
-        </p>
-        <select
-          className="w-full border-r-[16px] border-transparent bg-[#898989]/5 py-[14px] pl-4 text-white outline-none outline-1 outline-white/20 transition duration-300 hover:bg-green-500/5 hover:text-green-500 hover:outline-green-500"
-          value={viewMode}
-          onChange={handleViewChange}
-        >
-          <option value="proposals" className="bg-gray-900">
-            Proposals View
-          </option>
-          <option value="daos" className="bg-gray-900">
-            S2 Applications
-          </option>
-        </select>
+      <div className="flex w-full animate-fade-down flex-col items-start justify-start gap-1 animate-delay-500">
+        <Label className="text-md">View mode:</Label>
+        <Select value={viewMode} onValueChange={handleViewChange}>
+          <SelectTrigger className="h-12 w-full">
+            <SelectValue placeholder="Select view mode" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="proposals">Proposals View</SelectItem>
+            <SelectItem value="daos">S2 Applications</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
-      <div className="hidden w-full flex-col items-start gap-1 lg:flex">
-        <p className="flex animate-fade-down items-center text-pretty text-base font-light text-gray-200 animate-delay-700">
-          Want to change something:
-        </p>
+      <div className="hidden w-full animate-fade-down flex-col items-start gap-1 animate-delay-700 lg:flex">
+        <Label className="text-md">Want to change something:</Label>
         <CreateModal />
       </div>
     </div>
diff --git a/apps/commune-governance/src/app/components/proposal/create-proposal.tsx b/apps/commune-governance/src/app/components/proposal/create-proposal.tsx
index 576e1b7c..5d5b2fa3 100644
--- a/apps/commune-governance/src/app/components/proposal/create-proposal.tsx
+++ b/apps/commune-governance/src/app/components/proposal/create-proposal.tsx
@@ -8,7 +8,17 @@ import { z } from "zod";
 import type { TransactionResult } from "@commune-ts/types";
 import { useCommune } from "@commune-ts/providers/use-commune";
 import { toast } from "@commune-ts/providers/use-toast";
-import { TransactionStatus } from "@commune-ts/ui";
+import {
+  Button,
+  Input,
+  Label,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  TransactionStatus,
+} from "@commune-ts/ui";
 
 import { cairo } from "~/utils/fonts";
 
@@ -23,12 +33,9 @@ export function CreateProposal(): JSX.Element {
 
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
-  const [uploading, setUploading] = useState(false);
 
-  const [editMode, setEditMode] = useState(true);
-  function toggleEditMode(): void {
-    setEditMode(!editMode);
-  }
+  const [uploading, setUploading] = useState(false);
+  const [activeTab, setActiveTab] = useState("edit");
 
   const [transactionStatus, setTransactionStatus] = useState<TransactionResult>(
     {
@@ -124,92 +131,72 @@ export function CreateProposal(): JSX.Element {
   }
 
   return (
-    <form onSubmit={HandleSubmit}>
-      <div className="mt-4 flex flex-col gap-4">
-        <div className="flex gap-2">
-          <button
-            className={`border px-4 py-1 ${editMode ? "border-green-500 bg-green-500/5 text-green-500" : "border-gray-500 text-gray-400"} hover:border-green-600 hover:bg-green-600/5 hover:text-green-600`}
-            onClick={toggleEditMode}
-            type="button"
-          >
-            Edit
-          </button>
-          <button
-            className={`border px-4 py-1 ${!editMode ? "border-green-500 bg-green-500/5 text-green-500" : "border-gray-500 text-gray-400"} hover:border-green-600 hover:bg-green-600/5 hover:text-green-600`}
-            onClick={toggleEditMode}
-            type="button"
-          >
-            Preview
-          </button>
-        </div>
-        <div className="flex flex-col">
-          {editMode ? (
-            <div className="flex flex-col gap-3">
-              <input
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setTitle(e.target.value);
-                }}
-                placeholder="Your proposal title here..."
-                type="text"
-                value={title}
-              />
-              <textarea
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setBody(e.target.value);
-                }}
-                placeholder="here... (Markdown supported / HTML tags are not supported)"
-                rows={5}
-                value={body}
-              />
-            </div>
+    <form
+      onSubmit={HandleSubmit}
+      className="flex flex-col gap-4 text-green-500"
+    >
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="edit">Edit Content</TabsTrigger>
+          <TabsTrigger value="preview">Preview Content</TabsTrigger>
+        </TabsList>
+        <TabsContent value="edit" className="flex flex-col gap-3">
+          <Input
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Your proposal title here..."
+            type="text"
+            value={title}
+          />
+          <Textarea
+            onChange={(e) => setBody(e.target.value)}
+            placeholder="Your proposal body here... (Markdown supported / HTML tags are not supported)"
+            rows={5}
+            value={body}
+          />
+        </TabsContent>
+        <TabsContent value="preview" className="bg-muted p-4">
+          {body ? (
+            <MarkdownPreview
+              className={`${cairo.className} max-h-[40vh] overflow-auto`}
+              source={`# ${title}\n${body}`}
+              style={{
+                backgroundColor: "transparent",
+                color: "white",
+              }}
+            />
           ) : (
-            <div className="p-4">
-              {body ? (
-                <MarkdownPreview
-                  className={`${cairo.className} max-h-[40vh] overflow-auto`}
-                  source={`# ${title}\n${body}`}
-                  style={{
-                    backgroundColor: "transparent",
-                    color: "white",
-                  }}
-                />
-              ) : null}
-              {/* TODO: skeleton for markdown body */}
-            </div>
+            <Label className="text-sm text-white">
+              Fill the body to preview here :)
+            </Label>
           )}
-        </div>
-        <div className="flex flex-col gap-1">
-          <button
-            className={`relative w-full border px-4 py-2 font-semibold ${isConnected ? "border-green-500 text-green-500 hover:bg-green-500/5 active:top-1" : "border-gray-500 text-gray-500"}`}
-            disabled={!isConnected}
-            type="submit"
+        </TabsContent>
+      </Tabs>
+      <Button
+        size="xl"
+        type="submit"
+        variant="default-green"
+        disabled={!isConnected}
+      >
+        {uploading ? "Uploading..." : "Submit Proposal"}
+      </Button>
+      {transactionStatus.status && (
+        <TransactionStatus
+          status={transactionStatus.status}
+          message={transactionStatus.message}
+        />
+      )}
+      <div className="flex flex-wrap items-center gap-1 text-sm text-white">
+        <InformationCircleIcon className="h-4 w-4 fill-green-500" />
+        <Label className="text-sm text-white">
+          Want a different approach?{" "}
+          <Link
+            className="text-green-500 hover:underline"
+            href="https://mirror.xyz/0xD80E194aBe2d8084fAecCFfd72877e63F5822Fc5/FUvj1g9rPyVm8Ii_qLNu-IbRQPiCHkfZDLAmlP00M1Q"
+            target="_blank"
           >
-            {uploading ? "Uploading..." : "Submit Proposal"}
-          </button>
-        </div>
-        {transactionStatus.status && (
-          <TransactionStatus
-            status={transactionStatus.status}
-            message={transactionStatus.message}
-          />
-        )}
-        <div className="flex flex-wrap items-center gap-1 pt-2 text-sm text-white">
-          <div className="flex items-center gap-1">
-            <InformationCircleIcon className="h-4 w-4 fill-green-500" />
-            <span>Want a different approach?</span>
-          </div>
-          <span>
-            <Link
-              className="text-blue-500 hover:underline"
-              href="https://mirror.xyz/0xD80E194aBe2d8084fAecCFfd72877e63F5822Fc5/FUvj1g9rPyVm8Ii_qLNu-IbRQPiCHkfZDLAmlP00M1Q"
-              target="_blank"
-            >
-              Check how to create a proposal with the CLI tool
-            </Link>
-          </span>
-        </div>
+            Check how to create a proposal with the CLI tool
+          </Link>
+        </Label>
       </div>
     </form>
   );
diff --git a/apps/commune-governance/src/app/components/proposal/create-transfer-dao-treasury-proposal.tsx b/apps/commune-governance/src/app/components/proposal/create-transfer-dao-treasury-proposal.tsx
index 17325fa6..06c0b871 100644
--- a/apps/commune-governance/src/app/components/proposal/create-transfer-dao-treasury-proposal.tsx
+++ b/apps/commune-governance/src/app/components/proposal/create-transfer-dao-treasury-proposal.tsx
@@ -8,7 +8,18 @@ import { z } from "zod";
 import type { TransactionResult } from "@commune-ts/types";
 import { useCommune } from "@commune-ts/providers/use-commune";
 import { toast } from "@commune-ts/providers/use-toast";
-import { TransactionStatus } from "@commune-ts/ui";
+import {
+  Button,
+  Input,
+  Label,
+  Separator,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  TransactionStatus,
+} from "@commune-ts/ui";
 
 import { cairo } from "~/utils/fonts";
 
@@ -28,11 +39,7 @@ export function CreateTransferDaoTreasuryProposal(): JSX.Element {
   const [body, setBody] = useState("");
 
   const [uploading, setUploading] = useState(false);
-
-  const [editMode, setEditMode] = useState(true);
-  function toggleEditMode(): void {
-    setEditMode(!editMode);
-  }
+  const [activeTab, setActiveTab] = useState("edit");
 
   const [transactionStatus, setTransactionStatus] = useState<TransactionResult>(
     {
@@ -131,114 +138,73 @@ export function CreateTransferDaoTreasuryProposal(): JSX.Element {
   }
 
   return (
-    <form onSubmit={HandleSubmit}>
-      <div className="flex flex-col gap-4 pt-4">
-        <div className="flex gap-2">
-          <button
-            className={`border px-4 py-1 ${editMode ? "border-green-500 bg-green-500/5 text-green-500" : "border-gray-500 text-gray-400"} hover:border-green-600 hover:bg-green-600/5 hover:text-green-600`}
-            onClick={toggleEditMode}
-            type="button"
-          >
-            Edit
-          </button>
-          <button
-            className={`border px-4 py-1 ${!editMode ? "border-green-500 bg-green-500/5 text-green-500" : "border-gray-500 text-gray-400"} hover:border-green-600 hover:bg-green-600/5 hover:text-green-600`}
-            onClick={toggleEditMode}
-            type="button"
-          >
-            Preview
-          </button>
-        </div>
-        <div className="flex flex-col">
-          {editMode ? (
-            <div className="flex flex-col gap-3">
-              <input
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setDest(e.target.value);
-                }}
-                placeholder="Destination"
-                type="text"
-                value={dest}
-              />
-              <input
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setValue(e.target.value);
-                }}
-                placeholder="Value"
-                type="text"
-                value={value}
-              />
-              <input
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setTitle(e.target.value);
-                }}
-                placeholder="Application title"
-                type="text"
-                value={title}
-              />
-              <textarea
-                className="w-full bg-white/10 p-3 text-white"
-                onChange={(e) => {
-                  setBody(e.target.value);
-                }}
-                placeholder="Application body... (Markdown supported) / HTML tags are not supported)"
-                rows={5}
-                value={body}
-              />
-            </div>
+    <form
+      onSubmit={HandleSubmit}
+      className="flex flex-col gap-4 text-green-500"
+    >
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="edit">Edit Content</TabsTrigger>
+          <TabsTrigger value="preview">Preview Content</TabsTrigger>
+        </TabsList>
+        <TabsContent value="edit" className="flex flex-col gap-3">
+          <Input
+            onChange={(e) => setDest(e.target.value)}
+            placeholder="Destination"
+            type="text"
+            value={dest}
+          />
+          <Input
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="Value"
+            type="text"
+            value={value}
+          />
+          <Separator />
+          <Input
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Application title"
+            type="text"
+            value={title}
+          />
+          <Textarea
+            onChange={(e) => setBody(e.target.value)}
+            placeholder="Application body... (Markdown supported) / HTML tags are not supported)"
+            rows={5}
+            value={body}
+          />
+        </TabsContent>
+        <TabsContent value="preview" className="bg-muted p-4">
+          {body ? (
+            <MarkdownPreview
+              className={`${cairo.className} max-h-[40vh] overflow-auto`}
+              source={`# ${title}\n${body}`}
+              style={{
+                backgroundColor: "transparent",
+                color: "white",
+              }}
+            />
           ) : (
-            <div className="p-4">
-              {body ? (
-                <MarkdownPreview
-                  className={`${cairo.className} max-h-[40vh] overflow-auto`}
-                  source={`# ${title}\n${body}`}
-                  style={{
-                    backgroundColor: "transparent",
-                    color: "white",
-                  }}
-                />
-              ) : null}
-              {/* TODO: skeleton for markdown body */}
-            </div>
+            <Label className="text-sm text-white">
+              Fill the body to preview here :)
+            </Label>
           )}
-        </div>
-        <div className="flex flex-col gap-1">
-          <button
-            className={`relative w-full border px-4 py-2 font-semibold ${isConnected ? "border-green-500 text-green-500 hover:bg-green-500/5 active:top-1" : "border-gray-500 text-gray-500"}`}
-            disabled={!isConnected}
-            type="submit"
-          >
-            {uploading
-              ? "Uploading..."
-              : "Submit transfer dao treasury proposal"}
-          </button>
-        </div>
-        {transactionStatus.status && (
-          <TransactionStatus
-            status={transactionStatus.status}
-            message={transactionStatus.message}
-          />
-        )}
-
-        {/* <div className="mt-1 flex items-start gap-1 text-white">
-          <InformationCircleIcon className="mt-0.5 h-4 w-4 fill-green-500 text-sm" />
-          <span className="text-sm">
-            Please make sure, that your application meets all of the criteria
-            defined in this{" "}
-            <Link
-              className="text-blue-500 hover:underline"
-              href="https://mirror.xyz/0xD80E194aBe2d8084fAecCFfd72877e63F5822Fc5/SuhIlcUugotYhf2QmVTd3mI05RCycqSFrJfCxuEHet0"
-              target="_blank"
-            >
-              article
-            </Link>
-            , or you are at risk of getting denied by the Module Curation DAO.
-          </span>
-        </div> */}
-      </div>
+        </TabsContent>
+      </Tabs>
+      <Button
+        size="xl"
+        type="submit"
+        variant="default-green"
+        disabled={!isConnected}
+      >
+        {uploading ? "Uploading..." : "Submit transfer dao treasury proposal"}
+      </Button>
+      {transactionStatus.status && (
+        <TransactionStatus
+          status={transactionStatus.status}
+          message={transactionStatus.message}
+        />
+      )}
     </form>
   );
 }
diff --git a/apps/commune-governance/src/styles/globals.css b/apps/commune-governance/src/styles/globals.css
index 3929483a..e29511d6 100644
--- a/apps/commune-governance/src/styles/globals.css
+++ b/apps/commune-governance/src/styles/globals.css
@@ -8,7 +8,8 @@
   :root {
     --background: 150, 11%, 7%;
     --foreground: 0 0% 95%;
-    --card: 24 9.8% 10%;
+    --background-green: 142 49% 11%;
+    --card: 120 9% 4%;
     --card-foreground: 0 0% 95%;
     --popover: 150, 11%, 7%;
     --popover-foreground: 0 0% 95%;
@@ -16,7 +17,7 @@
     --primary-foreground: 144.9 80.4% 10%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 15%;
+    --muted: 150 5% 16%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 135 12% 12%;
     --accent-foreground: 0 0% 98%;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index bd571570..af02f94d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,6 +36,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.1",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
     "@uiw/react-markdown-preview": "^5.1.1",
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index 0b9ae7b7..44d17122 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -6,13 +6,13 @@ import { cva } from "class-variance-authority";
 import { cn } from ".";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium backdrop-blur-md transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium backdrop-blur-md transition transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         base: "border",
         default:
-          "border border-white/20 bg-[#898989]/5 text-white hover:border-green-500 hover:bg-green-500/15 hover:text-green-500 active:bg-green-500/40",
+          "hover:bg-background-green border border-white/20 bg-[#898989]/5 bg-background text-white hover:border-green-500 hover:text-green-500 active:bg-green-500/40",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -33,7 +33,7 @@ const buttonVariants = cva(
         default: "h-9 px-4 py-2",
         sm: "h-8 px-3 text-xs",
         lg: "h-10 px-8",
-        xl: "h-12 px-10",
+        xl: "text- h-12 px-12",
         icon: "h-9 w-9",
       },
     },
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 61a00261..ceb9b4c2 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
+        <Cross2Icon className="h-4 w-4 text-white" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index f12ef24d..3a74ac10 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -134,3 +134,4 @@ export {
   TableCell,
   TableCaption,
 } from "./table";
+export { Separator } from "./separator";
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index 4fb1f69f..98a9ed9c 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full border border-input border-white/20 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full border border-input border-white/20 bg-transparent px-3 py-1 text-sm text-white shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
index c753e32f..521d8b56 100644
--- a/packages/ui/src/components/label.tsx
+++ b/packages/ui/src/components/label.tsx
@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority";
 import { cn } from ".";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 86b6737a..9982a841 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap border border-input border-white/20 bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "hover:bg-background-green flex h-9 w-full items-center justify-between whitespace-nowrap border border-input border-white/20 bg-background px-3 py-2 text-sm shadow-sm ring-offset-background transition duration-200 placeholder:text-muted-foreground hover:border-green-500 hover:text-green-500 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
new file mode 100644
index 00000000..d07810e3
--- /dev/null
+++ b/packages/ui/src/components/separator.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from ".";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-white/20",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 7af41c43..63f78bb4 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "inline-flex h-9 items-center justify-center bg-muted p-1 text-muted-foreground",
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/text-area.tsx b/packages/ui/src/components/text-area.tsx
index 478260e6..a00e7cca 100644
--- a/packages/ui/src/components/text-area.tsx
+++ b/packages/ui/src/components/text-area.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full border border-white/20 bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[60px] w-full border border-white/20 bg-transparent px-3 py-2 text-sm text-white shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 41156cd7..ec058f09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -951,6 +951,9 @@ importers:
       '@radix-ui/react-select':
         specifier: ^2.1.1
         version: 2.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.3)(react@18.3.1)
@@ -1091,7 +1094,7 @@ importers:
         version: 7.35.0(eslint@9.10.0(jiti@1.21.6))
       eslint-plugin-react-hooks:
         specifier: rc
-        version: 5.1.0-rc-d8c90fa4-20241001(eslint@9.10.0(jiti@1.21.6))
+        version: 5.1.0-rc-0751fac7-20241002(eslint@9.10.0(jiti@1.21.6))
       eslint-plugin-turbo:
         specifier: ^2.1.1
         version: 2.1.2(eslint@9.10.0(jiti@1.21.6))
@@ -2535,6 +2538,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.1.0':
+    resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.0.2':
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -3897,8 +3913,8 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
 
-  eslint-plugin-react-hooks@5.1.0-rc-d8c90fa4-20241001:
-    resolution: {integrity: sha512-QXbrGKwGhYTsC7Ss6cjPx9TN5rU7BiRtxStLIEJ9IVlTANKnJ62IXOpvHtTVx/Tlcv4MIU1vZo8bNXFsRMUBwA==}
+  eslint-plugin-react-hooks@5.1.0-rc-0751fac7-20241002:
+    resolution: {integrity: sha512-9CEhaksLMmjRIpLdm5xazaCvDYsLZ0OKgCBQTyuiP4LvtB1wiQVBVGgQVWF1iC2FZmilFsefdmxUJb0nQl80Yg==}
     engines: {node: '>=10'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
@@ -7724,6 +7740,15 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-separator@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.0
@@ -9273,7 +9298,7 @@ snapshots:
       safe-regex-test: 1.0.3
       string.prototype.includes: 2.0.0
 
-  eslint-plugin-react-hooks@5.1.0-rc-d8c90fa4-20241001(eslint@9.10.0(jiti@1.21.6)):
+  eslint-plugin-react-hooks@5.1.0-rc-0751fac7-20241002(eslint@9.10.0(jiti@1.21.6)):
     dependencies:
       eslint: 9.10.0(jiti@1.21.6)
 
diff --git a/tooling/tailwind/base.ts b/tooling/tailwind/base.ts
index 15fd759a..737c9249 100644
--- a/tooling/tailwind/base.ts
+++ b/tooling/tailwind/base.ts
@@ -10,6 +10,7 @@ export default {
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
+        "background-green": "hsl(var(--background-green))",
         foreground: "hsl(var(--foreground))",
         primary: {
           DEFAULT: "hsl(var(--primary))",