Added theme page and dark theme (#196)

Resolves #124 #197 - Dark theme preview https://github.com/user-attachments/assets/76441ab7-516b-41b1-96c9-dd18770aaece - Theme tests [video.webm](https://github.com/user-attachments/assets/bf013269-017e-4f0e-9c5b-d8d71266300f) [video.webm](https://github.com/user-attachments/assets/6b2b54c5-9cce-4897-aaf2-eeac2d59c29c) [video.webm](https://github.com/user-attachments/assets/49e9a986-7ed4-4660-b967-7cd66fd408a9) - Added permission check to all settings config pages, along with tests.
NEAR-DevHub · Jan 8, 2025 · 8f0ae28 · 8f0ae28
1 parent 22087f0
commit 8f0ae28
Show file tree

Hide file tree

Showing 87 changed files with 3,252 additions and 1,886 deletions.
diff --git a/instances/treasury-devdao.near/aliases.mainnet.json b/instances/treasury-devdao.near/aliases.mainnet.json
@@ -9,10 +9,6 @@
   "REPL_SOCIAL_CONTRACT": "social.near",
   "REPL_RPC_URL": "https://rpc.mainnet.near.org",
   "REPL_PROPOSALS_CACHE_URL": "https://devhub-cache-api-rs.fly.dev",
-  "REPL_NEAR_TOKEN_ICON": "https://ipfs.near.social/ipfs/bafkreifnyxk6cssapw7j5vc6zuzwl7vt6o5ddspoo5lcmbvtdrcmfozqyu",
   "REPL_PIKESPEAK_KEY": "36f2b87a-7ee6-40d8-80b9-5e68e587a5b5",
-  "REPL_NEARBLOCKS_KEY": "DA2570E26C0242FF897A463F4DCAACA6",
-  "REPL_STAKE_ICON": "https://ipfs.near.social/ipfs/bafkreic7bmyuz7wixpmuxi4z37r3vwaix3ad2jlcl4dhes2djj22zmbez4",
-  "REPL_UNSTAKE_ICON": "https://ipfs.near.social/ipfs/bafkreihrvzrhxeggkcozrmwt7kfiqw4hy56clamfxuq7agownukcn6lfxe",
-  "REPL_WITHDRAW_ICON": "https://ipfs.near.social/ipfs/bafkreiedu2yjz7abf7b75qsq3e3yqzelyimvowkwc3hy3s4cziohjrxt2m"
+  "REPL_NEARBLOCKS_KEY": "DA2570E26C0242FF897A463F4DCAACA6"
 }
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,12 @@ function Page() {
 
 return (
   <Theme>
-    <AppLayout page={page} instance={instance}>
+    <AppLayout
+      page={page}
+      instance={instance}
+      treasuryDaoID={treasuryDaoID}
+      accountId={context.accountId}
+    >
       <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);
   }
 `;
 
@@ -95,7 +87,7 @@ return (
   <Container className="d-flex justify-content-center">
     {showHover ? (
       <Widget
-        src="${REPL_MOB}/widget/N.Common.OverlayTrigger"
+        src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
         props={{
           popup: (
             <div className="p-1">
@@ -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/BalanceBanner.jsx b/instances/treasury-devdao.near/widget/components/BalanceBanner.jsx
@@ -0,0 +1,88 @@
+const { getNearBalances } = VM.require(
+  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common"
+);
+
+const Container = styled.div`
+  .low-balance-warning {
+    background: rgba(255, 158, 0, 0.1);
+    color: var(--other-warning);
+    padding-inline: 0.8rem;
+    padding-block: 0.5rem;
+    font-weight: 500;
+    font-size: 13px;
+
+    h5 {
+      color: var(--other-warning) !important;
+    }
+  }
+
+  .insufficient-balance-warning {
+    background-color: rgba(217, 92, 74, 0.08);
+    color: var(--other-red);
+    padding-inline: 0.8rem;
+    padding-block: 0.5rem;
+    font-weight: 500;
+    font-size: 13px;
+
+    h5 {
+      color: var(--other-red) !important;
+    }
+  }
+`;
+
+function formatNearAmount(amount) {
+  return parseFloat(
+    Big(amount ?? "0")
+      .div(Big(10).pow(24))
+      .toFixed(2)
+  );
+}
+
+function BalanceBanner({ accountId, treasuryDaoID }) {
+  if (!treasuryDaoID || typeof getNearBalances !== "function" || !accountId) {
+    return <></>;
+  }
+
+  const nearBalances = getNearBalances(accountId);
+
+  const LOW_BALANCE_LIMIT = 0.7; // 0.7N
+  const INSUFFICIENT_BALANCE_LIMIT = 0.1; // 0.1N
+
+  const profile = Social.getr(`${accountId}/profile`);
+  const name = profile.name ?? accountId;
+
+  return (
+    <Container>
+      {!nearBalances ||
+      !nearBalances.availableParsed ||
+      nearBalances.availableParsed === "0.00" ||
+      parseFloat(nearBalances.availableParsed) > LOW_BALANCE_LIMIT ? (
+        <></>
+      ) : parseFloat(nearBalances.availableParsed) <
+        INSUFFICIENT_BALANCE_LIMIT ? (
+        <div className="insufficient-balance-warning d-flex gap-3 p-3 rounded-3 m-3">
+          <i class="bi bi-exclamation-octagon error-icon h4 mb-0"></i>
+          <div>
+            <h5>Insufficient Funds</h5>
+            Hey {name}, you don't have enough NEAR to complete actions on your
+            treasury. You need at least {INSUFFICIENT_BALANCE_LIMIT}N. Please
+            add more funds to your account and try again
+          </div>
+        </div>
+      ) : (
+        <div className="low-balance-warning d-flex gap-3 p-3 rounded-3 m-3">
+          <i class="bi bi-exclamation-triangle warning-icon h4 mb-0"></i>
+          <div>
+            <h5>Low Balance</h5>
+            Hey {name}, your NEAR balance is {nearBalances.availableParsed}N,
+            which is getting low. The minimum balance required is{" "}
+            {INSUFFICIENT_BALANCE_LIMIT}N. Please add more NEAR to your account
+            soon to avoid any issues completing actions on your treasury.
+          </div>
+        </div>
+      )}
+    </Container>
+  );
+}
+
+return { BalanceBanner };
diff --git a/instances/treasury-devdao.near/widget/components/Date.jsx b/instances/treasury-devdao.near/widget/components/Date.jsx
@@ -23,6 +23,6 @@ const formattedTime = date.toLocaleTimeString("en-GB", {
 return (
   <div className="text-left">
     <div className="bold">{formattedTime}</div>
-    <div className="text-muted text-sm">{formattedDate}</div>
+    <div className="text-secondary text-sm">{formattedDate}</div>
   </div>
 );
diff --git a/instances/treasury-devdao.near/widget/components/DropDown.jsx b/instances/treasury-devdao.near/widget/components/DropDown.jsx
@@ -18,30 +18,16 @@ const StyledDropdown = styled.div`
     padding-inline: 10px;
   }
 
-  .dropdown-item.active,
-  .dropdown-item:active {
-    background-color: #f0f0f0 !important;
-    color: black;
-  }
-
   .dropdown-toggle:after {
     position: absolute;
     top: 45%;
     right: 5%;
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .text-sm {
     font-size: 12px !important;
   }
 
-  .text-muted {
-    color: rgba(153, 153, 153, 1);
-  }
-
   .work-break {
     border-radius: 5px;
     white-space: normal;
@@ -58,7 +44,7 @@ return (
     <div className="dropdown w-100" data-testid="dropdown">
       <button
         disabled={disabled}
-        className="btn drop-btn text-truncate dropdown-toggle bg-white border rounded-2"
+        className="btn drop-btn text-truncate dropdown-toggle bg-dropdown border rounded-2"
         type="button"
         data-bs-toggle="dropdown"
         aria-expanded="false"
@@ -89,7 +75,7 @@ return (
         )}
       </ul>
       {selected?.description && (
-        <div classNameName="text-muted text-sm mt-1">
+        <div classNameName="text-secondary text-sm mt-1">
           {selected.description}
         </div>
       )}

diff --git a/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx b/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
@@ -85,12 +85,6 @@ const Container = styled.div`
     width: 100%;
   }
 
-  .dropdown-item.active,
-  .dropdown-item:active {
-    background-color: #f0f0f0 !important;
-    color: black;
-  }
-
   .custom-select {
     position: relative;
   }
@@ -101,15 +95,7 @@ const Container = styled.div`
   }
 
   .selected {
-    background-color: #f0f0f0;
-  }
-
-  input {
-    background-color: #f8f9fa;
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
+    background-color: var(--grey-04);
   }
 
   .text-wrap {
@@ -129,10 +115,10 @@ return (
         }, 0);
       }}
     >
-      <div className="dropdown-toggle bg-white border rounded-2 btn drop-btn">
+      <div className="dropdown-toggle bg-dropdown border rounded-2 btn drop-btn">
         <div
           className={`selected-option w-100 text-wrap ${
-            selectedOption.label === defaultLabel ? "text-muted" : ""
+            selectedOption.label === defaultLabel ? "text-secondary" : ""
           }`}
           onClick={toggleDropdown}
         >
@@ -182,7 +168,7 @@ return (
           )}
           {showManualRequest && (
             <div
-              className="btn cursor-pointer btn-link d-flex gap-2 align-items-center text-decoration-none mt-1"
+              className="btn primary-text-color cursor-pointer btn-link d-flex gap-2 align-items-center text-decoration-none mt-1"
               onClick={() => {
                 setSelectedOption(null);
                 onClickOfManualRequest();

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);
   }
 `;