more UX enhancements

NEAR-DevHub · Dec 30, 2024 · 6bcdfa7 · 6bcdfa7
1 parent f9234d6
commit 6bcdfa7
Show file tree

Hide file tree

Showing 28 changed files with 542 additions and 494 deletions.
diff --git a/instances/treasury-devdao.near/widget/app.jsx b/instances/treasury-devdao.near/widget/app.jsx
@@ -11,6 +11,7 @@ const { AppLayout } = VM.require(
 ) || { AppLayout: () => <></> };
 
 const instance = "${REPL_INSTANCE}";
+const treasuryDaoID = "${REPL_TREASURY}";
 
 const { Theme } = VM.require(`${instance}/widget/config.css`) || {
   Theme: () => <></>,
@@ -84,7 +85,7 @@ function Page() {
 
 return (
   <Theme>
-    <AppLayout page={page} instance={instance}>
+    <AppLayout page={page} instance={instance} treasuryDaoID={treasuryDaoID}>
       <Page />
     </AppLayout>
   </Theme>

diff --git a/instances/treasury-devdao.near/widget/components/Approvers.jsx b/instances/treasury-devdao.near/widget/components/Approvers.jsx
@@ -20,15 +20,7 @@ const Container = styled.div`
   .grey-circle {
     width: 40px;
     height: 40px;
-    background-color: #e2e6ec;
-  }
-
-  .reject {
-    color: #d20000;
-  }
-
-  .approve {
-    color: #089968;
+    background-color: var(--grey-04);
   }
 `;
 
@@ -139,11 +131,12 @@ return (
                         <div className="d-flex">
                           {voted ? (
                             <span
-                              className={
-                                votesStatus === "Approved"
-                                  ? "approve"
-                                  : "reject"
-                              }
+                              style={{
+                                color:
+                                  votesStatus === "Approved"
+                                    ? "#3CB179"
+                                    : "#D95C4A",
+                              }}
                             >
                               {votesStatus}{" "}
                             </span>
@@ -159,6 +152,7 @@ return (
             </div>
           ),
           children: ApproversComponent,
+          instance: props.instance,
         }}
       />
     ) : (

diff --git a/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx b/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
@@ -95,7 +95,7 @@ const Container = styled.div`
   }
 
   .selected {
-    background-color: var(--grey-05);
+    background-color: var(--grey-04);
   }
 
   .cursor-pointer {

diff --git a/instances/treasury-devdao.near/widget/components/HistoryStatus.jsx b/instances/treasury-devdao.near/widget/components/HistoryStatus.jsx
@@ -3,23 +3,23 @@ const isPaymentsPage = props.isPaymentsPage;
 const Container = styled.div`
   text-align: center;
   .reject {
-    background-color: rgba(0, 0, 0, 0.08);
-    color: #1b1b18;
+    background-color: var(--grey-04);
+    color: var(--text-color);
   }
 
   .approve {
     background-color: rgba(0, 202, 134, 0.16);
-    color: #089968;
+    color: var(--other-green);
   }
 
   .expire {
     background-color: rgba(255, 122, 0, 0.16);
-    color: #de6a00;
+    color: var(--other-warning);
   }
 
   .failed {
     background-color: rgba(239, 56, 38, 0.1);
-    color: #ef3826;
+    color: var(--other-red);
   }
 `;
 

diff --git a/instances/treasury-devdao.near/widget/components/OverlayTrigger.jsx b/instances/treasury-devdao.near/widget/components/OverlayTrigger.jsx
@@ -1,4 +1,12 @@
-const config = Near.view("${REPL_TREASURY}", "get_config");
+const { instance } = props;
+
+if (!instance) {
+  return <></>;
+}
+
+const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
+
+const config = Near.view(treasuryDaoID, "get_config");
 const metadata = JSON.parse(atob(config.metadata ?? ""));
 
 const isDarkTheme = metadata.theme === "dark";
@@ -23,14 +31,13 @@ State.init({
   show: false,
 });
 
-const overlayClassName =
-  props.overlayClassName ?? "border m-3 p-3 rounded-4 shadow";
+const overlayClassName = props.overlayClassName ?? "m-3 p-2 rounded-3 shadow";
 const overlayStyle = props.overlayStyle ?? {
   maxWidth: "24em",
   zIndex: 1070,
   backgroundColor: isDarkTheme ? "#222222" : "#f4f4f4",
   color: isDarkTheme ? "#CACACA" : "#1B1B18",
-  borderColor: isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)",
+  border: "1px solid " + (isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)"),
 };
 
 const overlay = (

diff --git a/instances/treasury-devdao.near/widget/components/ProposalStatus.jsx b/instances/treasury-devdao.near/widget/components/ProposalStatus.jsx
@@ -2,12 +2,12 @@ const status = props.status;
 const Container = styled.div`
   .reject {
     background-color: rgba(220, 102, 102, 0.16);
-    color: #d20000;
+    color: var(--other-red);
   }
 
   .approve {
     background-color: rgba(0, 202, 134, 0.16);
-    color: #089968;
+    color: var(--other-green);
   }
 `;
 

diff --git a/instances/treasury-devdao.near/widget/components/ReceiverAccount.jsx b/instances/treasury-devdao.near/widget/components/ReceiverAccount.jsx
@@ -91,6 +91,7 @@ return (
         props={{
           popup: verificationStatus && <HoverCard />,
           children: ReceiverAccountComponent,
+          instance: props.instance,
         }}
       />
     ) : (

diff --git a/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx b/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx
@@ -160,7 +160,7 @@ const Container = styled.div`
   }
 
   .selected {
-    background-color: var(--grey-05);
+    background-color: var(--grey-04);
   }
 
   .cursor-pointer {

diff --git a/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx b/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
@@ -71,7 +71,7 @@ const Container = styled.div`
   }
 
   .selected {
-    background-color: var(--grey-05);
+    background-color: var(--grey-04);
   }
 
   .cursor-pointer {

diff --git a/instances/treasury-devdao.near/widget/components/Votes.jsx b/instances/treasury-devdao.near/widget/components/Votes.jsx
@@ -8,9 +8,9 @@ const getPercentage = (value) =>
 
 const Container = styled.div`
   .bar {
-    background-color: #e2e6ec;
+    background-color: var(--grey-04);
     width: 100px;
-    height: 20px;
+    height: 10px;
     overflow: hidden;
   }
   .flex-item {