Skip to content

Commit

Permalink
fix: group creation form theme (#110)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fmorency
fmorency authored Dec 4, 2024
1 parent ca111aa commit 2f624b1
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 35 deletions.
33 changes: 19 additions & 14 deletions components/groups/forms/groups/ConfirmationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,25 +106,27 @@ export default function ConfirmationForm({
<div className="space-y-6">
{/* Group Information */}
<div>
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Group Information</h2>
<h2 className="text-xl font-semibold mb-4 text-gray-500 dark:text-gray-400">
Group Information
</h2>
<div className="grid grid-cols-2 gap-4">
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<div className="bg-base-300 p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Voting period</label>
<div className="dark:text-[#FFFFFF99]">
<div className="text-gray-500 dark:text-gray-400">
{secondsToHumanReadable(Number(formData.votingPeriod.seconds))}
</div>
</div>
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px] ">
<div className="bg-base-300 p-4 rounded-[12px] ">
<label className="text-sm dark:text-[#FFFFFF66]">Qualified Majority</label>
<div className="dark:text-[#FFFFFF99]">
<div className="text-gray-500 dark:text-gray-400">
{formData.votingThreshold} / {formData.members.length}
</div>
</div>
</div>
<div className="mt-4 dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<div className="mt-4 bg-base-300 p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Description</label>
<div
className="overflow-hidden text-ellipsis whitespace-nowrap dark:text-[#FFFFFF99]"
className="overflow-hidden text-ellipsis whitespace-nowrap text-gray-500 dark:text-gray-400"
title={formData.description}
>
{formData.description.length > 200
Expand All @@ -136,13 +138,13 @@ export default function ConfirmationForm({

{/* Authors */}
<div className="max-h-28 overflow-y-auto">
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Authors</h2>
<h2 className="text-xl font-semibold mb-4 text-gray-500 dark:text-gray-400">Authors</h2>
<div className=" grid grid-cols-3 gap-4">
{Array.isArray(formData.authors) ? (
formData.authors.map((author, index) => (
<div
key={index}
className="dark:bg-[#2A2A38] bg-[#FFFFFF] dark:text-[#FFFFFF99] p-4 rounded-lg flex items-center"
className="bg-base-300 text-gray-500 dark:text-gray-400 p-4 rounded-lg flex items-center"
>
{author.trim().startsWith('manifest1') ? (
<TruncatedAddressWithCopy address={author.trim()} slice={14} />
Expand All @@ -152,7 +154,7 @@ export default function ConfirmationForm({
</div>
))
) : (
<div className="bg-[#2A2A38] p-4 dark:text-[#FFFFFF99] rounded-lg flex items-center">
<div className="bg-[#2A2A38] p-4 text-gray-500 dark:text-gray-400 rounded-lg flex items-center">
{formData.authors.trim().startsWith('manifest1') ? (
<TruncatedAddressWithCopy address={formData.authors.trim()} slice={14} />
) : (
Expand All @@ -165,14 +167,14 @@ export default function ConfirmationForm({

{/* Members */}
<div className="max-h-44 overflow-y-auto">
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Members</h2>
<h2 className="text-xl font-semibold mb-4 text-gray-500 dark:text-gray-400">Members</h2>
<div className="grid grid-cols-3 gap-4">
{formData.members.map((member, index) => (
<div key={index} className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg">
<div key={index} className="bg-base-300 p-4 rounded-lg">
<div className="text-sm dark:text-[#FFFFFF66]">Address</div>
<TruncatedAddressWithCopy address={member.address} slice={14} />
<div className="text-sm dark:text-[#FFFFFF66] mt-2">Name</div>
<div className="dark:text-[#FFFFFF99]">{member.name}</div>
<div className="text-gray-500 dark:text-gray-400">{member.name}</div>
</div>
))}
</div>
Expand All @@ -182,7 +184,10 @@ export default function ConfirmationForm({
{/* Buttons */}
</div>
<div className="flex gap-6 mt-6 mx-auto w-full">
<button onClick={prevStep} className="btn btn-neutral w-[calc(50%-12px)]">
<button
onClick={prevStep}
className="btn btn-neutral text-black dark:text-white w-[calc(50%-12px)]"
>
Back: Member Info
</button>
<button
Expand Down
2 changes: 1 addition & 1 deletion components/groups/forms/groups/GroupDetailsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ export default function GroupDetails({

<div className="flex gap-6 mt-6 mx-auto w-full">
<Link href="/groups" legacyBehavior>
<button className="btn btn-neutral py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<button className="btn btn-neutral dark:text-white text-black py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<span className="hidden sm:inline">Back: Groups Page</span>
<span className="sm:hidden">Back: Groups</span>
</button>
Expand Down
7 changes: 5 additions & 2 deletions components/groups/forms/groups/GroupPolicyForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export default function GroupPolicyForm({
<div className="lg:flex mx-auto">
<div className="flex items-center mx-auto w-full dark:bg-[#FFFFFF0F] bg-[#FFFFFFCC] p-[24px] rounded-[24px]">
<div className="w-full">
<h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] dark:text-[#FFFFFF99] dark:border-[#FFFFFF99] border-b-[black] pb-4">
<h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] text-gray-500 dark:text-gray-400 dark:border-gray-400 border-gray-500 border-b-[black] pb-4">
Group Policy
</h1>
<Formik
Expand Down Expand Up @@ -183,7 +183,10 @@ export default function GroupPolicyForm({
</div>
</div>
<div className="flex gap-6 mt-6 mx-auto w-full">
<button onClick={prevStep} className="btn btn-neutral py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<button
onClick={prevStep}
className="btn btn-neutral text-black dark:text-white py-2.5 sm:py-3.5 w-[calc(50%-12px)]"
>
Back: Group Details
</button>
<button
Expand Down
9 changes: 6 additions & 3 deletions components/groups/forms/groups/MemberInfoForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function MemberInfoForm({
<div className="lg:flex mx-auto">
<div className="flex items-center mx-auto w-full dark:bg-[#FFFFFF0F] bg-[#FFFFFFCC] p-[24px] rounded-[24px]">
<div className="w-full">
<h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] dark:text-[#FFFFFF99] dark:border-[#FFFFFF99] border-b-[black] pb-4">
<h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] text-gray-500 dark:text-gray-400 dark:border-gray-400 border-gray-500 border-b-[black] pb-4">
Member Info
</h1>
<Formik
Expand Down Expand Up @@ -78,7 +78,7 @@ export default function MemberInfoForm({
{values.members.map((member, index) => (
<div
key={index}
className="flex relative flex-row dark:bg-[#FFFFFF0A] bg-[#FFFFFF] p-4 gap-2 mb-4 rounded-lg items-end"
className="flex relative flex-row bg-base-300 p-4 gap-2 mb-4 rounded-lg items-end"
>
{index > 0 && (
<div className=" absolute -top-2 left-2 text-xs">
Expand Down Expand Up @@ -269,7 +269,10 @@ export default function MemberInfoForm({
</div>

<div className="flex gap-6 mt-6 mx-auto w-full">
<button onClick={prevStep} className="btn btn-neutral py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<button
onClick={prevStep}
className="btn btn-neutral text-black dark:text-white py-2.5 sm:py-3.5 w-[calc(50%-12px)]"
>
Back: Group Details
</button>
<button
Expand Down
31 changes: 16 additions & 15 deletions components/groups/forms/groups/Success.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ export default function Success({
const renderAuthors = () => {
if (Array.isArray(formData.authors)) {
return formData.authors.map((author, index) => (
<div
key={index}
className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg flex items-center"
>
<div key={index} className="bg-base-300 p-4 rounded-lg flex items-center">
{author.trim().startsWith('manifest') ? (
<TruncatedAddressWithCopy address={author.trim()} slice={14} />
) : (
Expand All @@ -27,7 +24,7 @@ export default function Success({
));
} else {
return (
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg flex items-center">
<div className="bg-base-300 p-4 rounded-lg flex items-center">
{formData.authors.trim().startsWith('manifest') ? (
<TruncatedAddressWithCopy address={formData.authors.trim()} slice={14} />
) : (
Expand All @@ -50,11 +47,11 @@ export default function Success({

<div className="space-y-6">
<p className="text-lg mb-2">Your transaction was successfully signed and broadcasted.</p>
<p className="text-md text-gray-400 mb-6">
<p className="text-md text-gray-500 dark:text-gray-400 mb-6">
You may now interact with your group by adding members, submitting or voting on
proposals, and changing group parameters.
</p>
<div className="text-md text-gray-400 mb-6 flex-col flex gap-2 ">
<div className="text-md text-gray-500 dark:text-gray-400 mb-6 flex-col flex gap-2 ">
<span>Remember to fund your group by sending tokens to the policy address </span>
<TruncatedAddressWithCopy address={recentGroup?.policies[0].address} slice={24} />
</div>
Expand All @@ -63,12 +60,14 @@ export default function Success({
<div>
<h2 className="text-xl font-semibold mb-4">Group Information</h2>
<div className="grid grid-cols-2 gap-4">
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg">
<label className="text-sm text-gray-400">Voting period</label>
<div className="bg-base-300 p-4 rounded-lg">
<label className="text-sm text-gray-500 dark:text-gray-400">Voting period</label>
<div>{secondsToHumanReadable(Number(formData.votingPeriod.seconds))}</div>
</div>
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg">
<label className="text-sm text-gray-400">Qualified Majority</label>
<div className="bg-base-300 p-4 rounded-lg">
<label className="text-sm text-gray-500 dark:text-gray-400">
Qualified Majority
</label>
<div>
{formData.votingThreshold} / {formData.members.length}
</div>
Expand All @@ -87,10 +86,10 @@ export default function Success({
<h2 className="text-xl font-semibold mb-4">Members</h2>
<div className="grid grid-cols-3 gap-4">
{formData.members.map((member, index) => (
<div key={index} className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg">
<div className="text-sm text-gray-400">Address</div>
<div key={index} className="bg-base-300 p-4 rounded-lg">
<div className="text-sm text-gray-500 dark:text-gray-400">Address</div>
<TruncatedAddressWithCopy address={member.address} slice={14} />
<div className="text-sm text-gray-400 mt-2">Name</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-2">Name</div>
<div>{member.name}</div>
</div>
))}
Expand All @@ -100,7 +99,9 @@ export default function Success({
</div>
<div className="flex gap-6 mt-6 mx-auto w-full">
<Link href="/groups" className="w-[calc(50%-12px)]">
<button className="btn btn-neutral w-full text-white">Back to Groups Page</button>
<button className="btn btn-neutral text-black dark:text-white w-full">
Back to Groups Page
</button>
</Link>
<Link
href={`/groups${recentGroup?.policies[0]?.address ? `?policyAddress=${recentGroup.policies[0].address}` : ''}`}
Expand Down

0 comments on commit 2f624b1

Please sign in to comment.