From 470b64c0f1c14ed25a480a18949eab7502a26e2c Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 30 Jan 2024 01:20:29 +0500
Subject: [PATCH 1/2] Add css variables and props for custom styling

---
 apps/builddao/widget/components/Modal.jsx     |  6 ++--
 .../components/modals/CreateProposal.jsx      | 14 ++++++++-
 .../components/modals/propose/AddMember.jsx   | 18 +++++++-----
 .../modals/propose/FunctionCall.jsx           | 29 ++++++++++---------
 .../modals/propose/RemoveMember.jsx           | 18 +++++++-----
 .../components/modals/propose/Transfer.jsx    | 20 +++++++------
 6 files changed, 63 insertions(+), 42 deletions(-)

diff --git a/apps/builddao/widget/components/Modal.jsx b/apps/builddao/widget/components/Modal.jsx
index 65d551f5..62c857ce 100644
--- a/apps/builddao/widget/components/Modal.jsx
+++ b/apps/builddao/widget/components/Modal.jsx
@@ -14,7 +14,7 @@ const Overlay = styled.div`
   z-index: 1000;
   width: 100vw;
   height: 100vh;
-  background: rgba(11, 12, 20, 0.5);
+  background: var(--modal-overlay-color, rgba(11, 12, 20, 0.5));
 `;
 
 const Content = styled.div`
@@ -22,9 +22,9 @@ const Content = styled.div`
   max-width: 1000px;
   padding: 24px;
   outline: none !important;
-  background: #23242b;
+  background: var(--modal-background-color, #23242b);
   border-radius: 16px;
-  color: white;
+  color: var(--modal-text-color, #fff);
 
   @media screen and (max-width: 768px) {
     width: 80%;
diff --git a/apps/builddao/widget/components/modals/CreateProposal.jsx b/apps/builddao/widget/components/modals/CreateProposal.jsx
index 822a96ab..a32f224f 100644
--- a/apps/builddao/widget/components/modals/CreateProposal.jsx
+++ b/apps/builddao/widget/components/modals/CreateProposal.jsx
@@ -15,6 +15,9 @@ const { Modal, Button, User } = VM.require(
 const showModal = props.showModal;
 const toggleModal = props.toggleModal;
 const toggle = props.toggle;
+const bootstrapTheme = props.bootstrapTheme || "dark";
+const editorCSS = props.editorCSS;
+
 if (!showModal) {
   return "";
 }
@@ -102,7 +105,7 @@ return (
       <select
         name="proposal-type"
         id="proposal-type"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         class="form-select"
         onChange={(e) => setSelectedOption(e.target.value)}
         value={selectedOption}
@@ -124,6 +127,7 @@ return (
             props={{
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
             }}
           />
         </>
@@ -135,6 +139,8 @@ return (
             props={{
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -146,6 +152,8 @@ return (
             props={{
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -158,6 +166,8 @@ return (
               roles: roles,
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -170,6 +180,8 @@ return (
               roles: roles,
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
diff --git a/apps/builddao/widget/components/modals/propose/AddMember.jsx b/apps/builddao/widget/components/modals/propose/AddMember.jsx
index 266926df..ae08e83c 100644
--- a/apps/builddao/widget/components/modals/propose/AddMember.jsx
+++ b/apps/builddao/widget/components/modals/propose/AddMember.jsx
@@ -8,6 +8,8 @@ const selectedDAO = props.selectedDAO;
 
 const [text, setText] = useState("");
 const [editorKey, setEditorKey] = useState(0);
+
+const bootstrapTheme = props.bootstrapTheme;
 useEffect(() => {
   if (!props.item) {
     return;
@@ -167,7 +169,7 @@ return (
         name="accountId"
         id="accountId"
         className="form-control"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         value={accountId}
         onChange={(e) => setAccountId(e.target.value)}
       />
@@ -185,7 +187,7 @@ return (
       <select
         name="role"
         id="role"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         class="form-select"
         onChange={(e) => setRole(e.target.value)}
         selected={role}
@@ -207,10 +209,10 @@ return (
           src="mob.near/widget/MarkdownEditorIframe"
           props={{
             initialText: text,
-            embedCss: MarkdownEditor,
+            embedCss: props.customCSS || MarkdownEditor,
             onChange: (v) => {
               setText(v);
-            }
+            },
           }}
         />
       </TextareaWrapper>
@@ -228,10 +230,10 @@ return (
               kind: {
                 AddMemberToRole: {
                   member_id: accountId,
-                  role: role
-                }
-              }
-            }
+                  role: role,
+                },
+              },
+            },
           })
         }
       >
diff --git a/apps/builddao/widget/components/modals/propose/FunctionCall.jsx b/apps/builddao/widget/components/modals/propose/FunctionCall.jsx
index 2d661c87..7ed6ca9b 100644
--- a/apps/builddao/widget/components/modals/propose/FunctionCall.jsx
+++ b/apps/builddao/widget/components/modals/propose/FunctionCall.jsx
@@ -9,6 +9,9 @@ const [deposit, useDeposit] = useState(0);
 
 const [text, setText] = useState("");
 const [editorKey, setEditorKey] = useState(0);
+
+const bootstrapTheme = props.bootstrapTheme;
+
 useEffect(() => {
   if (!props.item) {
     return;
@@ -158,7 +161,7 @@ return (
       <input
         name="contract"
         id="contract"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         value={contract}
         onChange={(e) => setContract(e.target.value)}
         className="form-control"
@@ -171,7 +174,7 @@ return (
       <input
         name="method"
         id="method"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         value={method}
         onChange={(e) => setMethod(e.target.value)}
         className="form-control"
@@ -182,7 +185,7 @@ return (
       <textarea
         name="args"
         id="args"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         value={args}
         onChange={(e) => setArgs(e.target.value)}
         className="form-control"
@@ -194,7 +197,7 @@ return (
         name="gas"
         id="gas"
         type="number"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         value={gas}
         onChange={(e) => setGas(e.target.value)}
         className="form-control"
@@ -206,7 +209,7 @@ return (
         name="deposit"
         id="deposit"
         type="number"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         value={deposit}
         onChange={(e) => setDeposit(e.target.value)}
         className="form-control"
@@ -223,10 +226,10 @@ return (
           src="mob.near/widget/MarkdownEditorIframe"
           props={{
             initialText: text,
-            embedCss: MarkdownEditor,
+            embedCss: props.customCSS || MarkdownEditor,
             onChange: (v) => {
               setText(v);
-            }
+            },
           }}
         />
       </TextareaWrapper>
@@ -248,12 +251,12 @@ return (
                       method_name: method,
                       args: args,
                       deposit: deposit,
-                      gas: gas
-                    }
-                  ]
-                }
-              }
-            }
+                      gas: gas,
+                    },
+                  ],
+                },
+              },
+            },
           })
         }
       >
diff --git a/apps/builddao/widget/components/modals/propose/RemoveMember.jsx b/apps/builddao/widget/components/modals/propose/RemoveMember.jsx
index c8134e27..9b0a3eef 100644
--- a/apps/builddao/widget/components/modals/propose/RemoveMember.jsx
+++ b/apps/builddao/widget/components/modals/propose/RemoveMember.jsx
@@ -8,6 +8,8 @@ const selectedDAO = props.selectedDAO;
 
 const [text, setText] = useState("");
 const [editorKey, setEditorKey] = useState(0);
+
+const bootstrapTheme = props.bootstrapTheme;
 useEffect(() => {
   if (!props.item) {
     return;
@@ -167,7 +169,7 @@ return (
         name="accountId"
         id="accountId"
         className="form-control"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         value={accountId}
         onChange={(e) => setAccountId(e.target.value)}
       />
@@ -185,7 +187,7 @@ return (
       <select
         name="role"
         id="role"
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         class="form-select"
         onChange={(e) => setRole(e.target.value)}
         selected={role}
@@ -211,10 +213,10 @@ return (
           src="mob.near/widget/MarkdownEditorIframe"
           props={{
             initialText: text,
-            embedCss: MarkdownEditor,
+            embedCss: props.customCSS || MarkdownEditor,
             onChange: (v) => {
               setText(v);
-            }
+            },
           }}
         />
       </TextareaWrapper>
@@ -232,10 +234,10 @@ return (
               kind: {
                 RemoveMemberFromRole: {
                   member_id: accountId,
-                  role: role
-                }
-              }
-            }
+                  role: role,
+                },
+              },
+            },
           })
         }
       >
diff --git a/apps/builddao/widget/components/modals/propose/Transfer.jsx b/apps/builddao/widget/components/modals/propose/Transfer.jsx
index b132e97e..b1f0febe 100644
--- a/apps/builddao/widget/components/modals/propose/Transfer.jsx
+++ b/apps/builddao/widget/components/modals/propose/Transfer.jsx
@@ -7,6 +7,8 @@ const [amount, setAmount] = useState(0);
 const [description, setDescription] = useState("");
 const [validatedAddresss, setValidatedAddress] = useState(true);
 
+const bootstrapTheme = props.bootstrapTheme;
+
 const [text, setText] = useState("");
 const [editorKey, setEditorKey] = useState(0);
 useEffect(() => {
@@ -177,7 +179,7 @@ return (
         id="recipient"
         placeholder="NEAR Address"
         value={recipient}
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         onChange={(e) => setRecipient(e.target.value)}
       />
       {!validatedAddresss && (
@@ -195,7 +197,7 @@ return (
         name="token"
         id="token"
         value={token}
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         onChange={(e) => setToken(e.target.value)}
       >
         <option value="">Select a token</option>
@@ -216,7 +218,7 @@ return (
         id="amount"
         type="number"
         value={amount}
-        data-bs-theme="dark"
+        data-bs-theme={bootstrapTheme}
         onChange={(e) => setAmount(e.target.value)}
       />
     </div>
@@ -231,10 +233,10 @@ return (
           src="mob.near/widget/MarkdownEditorIframe"
           props={{
             initialText: text,
-            embedCss: MarkdownEditor,
+            embedCss: props.customCSS || MarkdownEditor,
             onChange: (v) => {
               setText(v);
-            }
+            },
           }}
         />
       </TextareaWrapper>
@@ -252,10 +254,10 @@ return (
                 Transfer: {
                   token_id: token,
                   reciever_id: recipient,
-                  amount: amount
-                }
-              }
-            }
+                  amount: amount,
+                },
+              },
+            },
           })
         }
       >

From 07e19082eedfd776f6852af3242f0ca2572169d3 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 30 Jan 2024 01:22:55 +0500
Subject: [PATCH 2/2] Add missing prop to text widget

---
 apps/builddao/widget/components/modals/CreateProposal.jsx | 1 +
 apps/builddao/widget/components/modals/propose/Text.jsx   | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/builddao/widget/components/modals/CreateProposal.jsx b/apps/builddao/widget/components/modals/CreateProposal.jsx
index a32f224f..68b433c2 100644
--- a/apps/builddao/widget/components/modals/CreateProposal.jsx
+++ b/apps/builddao/widget/components/modals/CreateProposal.jsx
@@ -128,6 +128,7 @@ return (
               selectedDAO: selectedDAO,
               item: props.item,
               bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
diff --git a/apps/builddao/widget/components/modals/propose/Text.jsx b/apps/builddao/widget/components/modals/propose/Text.jsx
index 29633005..a786f840 100644
--- a/apps/builddao/widget/components/modals/propose/Text.jsx
+++ b/apps/builddao/widget/components/modals/propose/Text.jsx
@@ -155,10 +155,10 @@ return (
         src="mob.near/widget/MarkdownEditorIframe"
         props={{
           initialText: text,
-          embedCss: MarkdownEditor,
+          embedCss: props.customCSS || MarkdownEditor,
           onChange: (v) => {
             setText(v);
-          }
+          },
         }}
       />
     </TextareaWrapper>
@@ -170,8 +170,8 @@ return (
           Near.call(selectedDAO, "add_proposal", {
             proposal: {
               description: text,
-              kind: "Vote"
-            }
+              kind: "Vote",
+            },
           })
         }
       >