Skip to content

Commit

Permalink
refactor(ui): update cards, dialog and fields on governance
Browse files Browse the repository at this point in the history
  • Loading branch information
@EdSDR
EdSDR committed Oct 4, 2024
1 parent 354bc0e commit 0808ff2
Show file tree
Hide file tree
Showing 19 changed files with 415 additions and 454 deletions.
29 changes: 12 additions & 17 deletions apps/commune-governance/src/app/components/balance-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -93,19 +92,17 @@ 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"
height={40}
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) ? (
Expand All @@ -128,19 +125,17 @@ 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"
height={40}
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>
);
}
199 changes: 91 additions & 108 deletions apps/commune-governance/src/app/components/dao/create-dao.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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>(
{
Expand Down Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit 0808ff2

Please sign in to comment.