From 54d6b9d209994391d2b4515f36d0411ddc3a1abf Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Tue, 3 Dec 2024 14:44:02 -0500
Subject: [PATCH 1/2] fix: group creation form theme

---
 .../groups/forms/groups/ConfirmationForm.tsx  | 33 +++++++++++--------
 .../groups/forms/groups/GroupDetailsForm.tsx  |  2 +-
 .../groups/forms/groups/GroupPolicyForm.tsx   |  7 ++--
 .../groups/forms/groups/MemberInfoForm.tsx    |  9 +++--
 components/groups/forms/groups/Success.tsx    | 31 ++++++++---------
 5 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/components/groups/forms/groups/ConfirmationForm.tsx b/components/groups/forms/groups/ConfirmationForm.tsx
index b3eaedaa..b329e956 100644
--- a/components/groups/forms/groups/ConfirmationForm.tsx
+++ b/components/groups/forms/groups/ConfirmationForm.tsx
@@ -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
@@ -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} />
@@ -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} />
                   ) : (
@@ -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>
@@ -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
diff --git a/components/groups/forms/groups/GroupDetailsForm.tsx b/components/groups/forms/groups/GroupDetailsForm.tsx
index e575694b..94499a86 100644
--- a/components/groups/forms/groups/GroupDetailsForm.tsx
+++ b/components/groups/forms/groups/GroupDetailsForm.tsx
@@ -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>
diff --git a/components/groups/forms/groups/GroupPolicyForm.tsx b/components/groups/forms/groups/GroupPolicyForm.tsx
index ee8ee768..ccea8587 100644
--- a/components/groups/forms/groups/GroupPolicyForm.tsx
+++ b/components/groups/forms/groups/GroupPolicyForm.tsx
@@ -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
@@ -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
diff --git a/components/groups/forms/groups/MemberInfoForm.tsx b/components/groups/forms/groups/MemberInfoForm.tsx
index fefb6fd2..5b9be037 100644
--- a/components/groups/forms/groups/MemberInfoForm.tsx
+++ b/components/groups/forms/groups/MemberInfoForm.tsx
@@ -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
@@ -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">
@@ -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
diff --git a/components/groups/forms/groups/Success.tsx b/components/groups/forms/groups/Success.tsx
index 92205e9d..8038d91f 100644
--- a/components/groups/forms/groups/Success.tsx
+++ b/components/groups/forms/groups/Success.tsx
@@ -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} />
           ) : (
@@ -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} />
           ) : (
@@ -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>
@@ -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>
@@ -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>
               ))}
@@ -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 text-white">
+            Back to Groups Page
+          </button>
         </Link>
         <Link
           href={`/groups${recentGroup?.policies[0]?.address ? `?policyAddress=${recentGroup.policies[0].address}` : ''}`}

From 75f20257de48d8a4b461638716a65767343ae406 Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Tue, 3 Dec 2024 14:47:14 -0500
Subject: [PATCH 2/2] fix: duplicate property

---
 components/groups/forms/groups/Success.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/groups/forms/groups/Success.tsx b/components/groups/forms/groups/Success.tsx
index 8038d91f..a500204c 100644
--- a/components/groups/forms/groups/Success.tsx
+++ b/components/groups/forms/groups/Success.tsx
@@ -99,7 +99,7 @@ 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 text-black dark:text-white w-full text-white">
+          <button className="btn btn-neutral text-black dark:text-white w-full">
             Back to Groups Page
           </button>
         </Link>