Merge pull request #113 from NEARBuilders/proposals

Add css variables and props for custom styling
NEARBuilders · Jan 29, 2024 · 87f29eb · 87f29eb
2 parents 5454e5e + 07e1908
commit 87f29eb
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 46 deletions.
diff --git a/apps/builddao/widget/components/Modal.jsx b/apps/builddao/widget/components/Modal.jsx
@@ -14,17 +14,17 @@ 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`
   min-width: 500px;
   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
@@ -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,8 @@ return (
             props={{
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -135,6 +140,8 @@ return (
             props={{
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -146,6 +153,8 @@ return (
             props={{
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -158,6 +167,8 @@ return (
               roles: roles,
               selectedDAO: selectedDAO,
               item: props.item,
+              bootstrapTheme: bootstrapTheme,
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -170,6 +181,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
@@ -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
@@ -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
@@ -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/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",
+            },
           })
         }
       >

diff --git 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,
+                },
+              },
+            },
           })
         }
       >