From 13f6c07421cd0b03582c95936bfa97c85630c1fb Mon Sep 17 00:00:00 2001
From: rubycop <saychuk.andriy@gmail.com>
Date: Fri, 10 Jan 2025 08:42:22 +0200
Subject: [PATCH 1/7] Style fixes

---
 .../widget/components/Navbar.jsx              | 19 ++++++++++--------
 .../widget/components/Tabs.jsx                |  8 ++++----
 .../widget/components/TokenAmount.jsx         |  4 ++--
 .../widget/components/templates/AppLayout.jsx |  3 +--
 .../widget/pages/dashboard/Portfolio.jsx      | 20 +++++++++----------
 .../widget/pages/dashboard/index.jsx          |  6 +++---
 .../widget/pages/payments/History.jsx         |  2 +-
 .../widget/pages/payments/Table.jsx           |  4 ++--
 8 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/instances/treasury-devdao.near/widget/components/Navbar.jsx b/instances/treasury-devdao.near/widget/components/Navbar.jsx
index 05564451..4025e706 100644
--- a/instances/treasury-devdao.near/widget/components/Navbar.jsx
+++ b/instances/treasury-devdao.near/widget/components/Navbar.jsx
@@ -48,7 +48,7 @@ const Navbar = styled.div`
   .account-container {
     color: var(--theme-color) !important;
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 500;
   }
 
   .text-sm {
@@ -134,7 +134,7 @@ const treasuryLogo = metadata?.flagLogo ? metadata?.flagLogo : logo;
 return (
   <Navbar className="position-relative d-flex justify-content-between gap-2">
     <div className="d-flex flex-column gap-2">
-      <div className="d-flex gap-2 align-items-center">
+      <div className="d-flex gap-3 align-items-center">
         {/* logo can be svg or src */}
         {treasuryLogo && typeof treasuryLogo === "string" ? (
           <img
@@ -146,12 +146,15 @@ return (
         ) : (
           treasuryLogo
         )}
-        <div className="h3 mb-0">{getTitle(page ?? "dashboard")}</div>
-        {isTesting && <div>(Testing)</div>}
-      </div>
-      <div>
-        <span className="text-sm">Treasury Wallet: </span>
-        <span className="account-container">{treasuryDaoID}</span>
+        <div className="d-flex flex-column">
+          <div className="h4 mb-0">{getTitle(page ?? "dashboard")}</div>
+          {isTesting && <div>(Testing)</div>}
+
+          <div>
+            <span className="text-sm">Treasury Wallet: </span>
+            <span className="account-container">{treasuryDaoID}</span>
+          </div>
+        </div>
       </div>
     </div>
     <div className="d-flex gap-3 align-items-center">
diff --git a/instances/treasury-devdao.near/widget/components/Tabs.jsx b/instances/treasury-devdao.near/widget/components/Tabs.jsx
index e7744ad7..e3484367 100644
--- a/instances/treasury-devdao.near/widget/components/Tabs.jsx
+++ b/instances/treasury-devdao.near/widget/components/Tabs.jsx
@@ -25,18 +25,18 @@ const Container = styled.div`
 const NavUnderline = styled.ul`
   cursor: pointer;
   font-size: 16px;
+  font-weight: 500;
+
   .nav-link {
     color: var(--text-secondary-color) !important;
     padding-bottom: 19px;
   }
   .active {
-    font-weight: bolder;
     color: var(--text-color) !important;
     border-bottom: 3px solid var(--theme-color);
   }
   .nav-link:hover {
     color: var(--text-color) !important;
-    font-weight: bolder;
   }
 `;
 
@@ -60,7 +60,7 @@ useEffect(() => {
 }, [props]);
 
 return (
-  <Container className="card rounded-3 py-3 d-flex flex-column gap-3">
+  <Container className="card py-3 d-flex flex-column gap-3">
     <div
       className="d-flex justify-content-between gap-2 align-items-center border-bottom flex-wrap"
       style={{ paddingRight: "10px" }}
@@ -93,7 +93,7 @@ return (
       </div>
     </div>
     {currentTab && (
-      <div className="w-100 h-100 px-3" key={currentTab.title}>
+      <div className="w-100 h-100" key={currentTab.title}>
         <Widget src={currentTab.href} props={currentTabProps} />
       </div>
     )}
diff --git a/instances/treasury-devdao.near/widget/components/TokenAmount.jsx b/instances/treasury-devdao.near/widget/components/TokenAmount.jsx
index f97bf906..2fb9fb2f 100644
--- a/instances/treasury-devdao.near/widget/components/TokenAmount.jsx
+++ b/instances/treasury-devdao.near/widget/components/TokenAmount.jsx
@@ -26,8 +26,8 @@ if (amountWithoutDecimals !== undefined) {
 return (
   <div className="text-center">
     <div className="d-flex gap-1 align-items-center justify-content-end">
-      <span className="amount h6 bolder mb-0">
-        {amount.toLocaleString("en-US")}
+      <span className="amount bolder mb-0">
+        {parseFloat(amount).toFixed(2).toLocaleString("en-US")}
       </span>
       {isNEAR ? (
         <NearToken width={17} height={17} />
diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index 974cdd31..23f65534 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -114,15 +114,14 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
     a {
       text-decoration: none;
       color: var(--text-color) !important;
+      font-weight: 500;
       &.active {
         color: var(--text-color) !important;
-        font-weight: 700 !important;
       }
 
       &:hover {
         text-decoration: none;
         color: var(--text-color) !important;
-        font-weight: 700 !important;
       }
     }
 
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
index 9dfb9ba9..a678df77 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
@@ -97,10 +97,11 @@ const BalanceDisplay = ({
   setIsExpanded,
   expandedContent,
   hideTooltip,
+  last,
 }) => {
   return (
     <div className="d-flex flex-column">
-      <div className="border-bottom">
+      <div className={!last && "border-bottom"}>
         <div className="py-2 d-flex gap-2 align-items-center justify-content-between px-3">
           <div className="h6 mb-0">
             {label}
@@ -114,7 +115,7 @@ const BalanceDisplay = ({
               </OverlayTrigger>
             )}
           </div>
-          <div className="d-flex gap-3 align-items-center justify-content-end">
+          <div className="d-flex gap-2 align-items-center justify-content-end">
             <div className="d-flex flex-column align-items-end">
               <div className="h6 mb-0 d-flex align-items-center gap-1">
                 <NearToken height={20} width={20} />
@@ -159,10 +160,11 @@ const PortfolioCard = ({
   setIsExpanded,
   symbol,
   expandedContent,
+  last,
 }) => {
   return (
     <div className="d-flex flex-column">
-      <div className="border-bottom">
+      <div className={!last && "border-bottom"}>
         <div
           className={`py-2 d-flex gap-2 align-items-center justify-content-between px-3 ${
             !price ? "text-secondary" : ""
@@ -177,7 +179,7 @@ const PortfolioCard = ({
               </div>
             </div>
           </div>
-          <div className="d-flex gap-3 align-items-center justify-content-end">
+          <div className="d-flex gap-2 align-items-center justify-content-end">
             <div className="d-flex flex-column align-items-end">
               <div className="h6 mb-0">{formatToReadableDecimals(balance)}</div>
               <div className="text-sm text-secondary">
@@ -289,14 +291,9 @@ const isLoading =
   nearPrice === null;
 
 return (
-  <div
-    className="card flex-1 overflow-hidden"
-    style={{
-      borderBottom: isLoading ? "1px solid var(--border-color)" : "none",
-    }}
-  >
+  <div className="card flex-1 overflow-hidden">
     {heading}
-    <div className="my-2">
+    <div className="mb-2">
       {isLoading ? (
         <div className="d-flex justify-content-center align-items-center w-100 h-100">
           <Loading />
@@ -324,6 +321,7 @@ return (
                       balance={tokensNumber}
                       showExpand={false}
                       price={tokenPrice}
+                      last={index === ftTokens.length - 1}
                     />
                   );
                 })}
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
index 68c8ee31..6cfea898 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
@@ -54,7 +54,7 @@ const Wrapper = styled.div`
   }
 
   .flex-container {
-    min-width: 325px;
+    min-width: 400px;
     height: fit-content;
   }
 
@@ -254,7 +254,7 @@ return (
                 <div className="h5 mb-0">Sputnik DAO</div>
                 <div>
                   <span className="text-sm text-secondary">Wallet: </span>
-                  <span className="text-theme  text-sm fw-bold">
+                  <span className="text-theme text-sm fw-medium">
                     {treasuryDaoID}
                   </span>
                 </div>
@@ -281,7 +281,7 @@ return (
                   <div className="h5 mb-0">Lockup</div>
                   <div>
                     <span className="text-sm text-secondary">Wallet: </span>
-                    <span className="text-theme  text-sm fw-bold">
+                    <span className="text-theme text-sm fw-medium">
                       {lockupContract}
                     </span>
                   </div>
diff --git a/instances/treasury-devdao.near/widget/pages/payments/History.jsx b/instances/treasury-devdao.near/widget/pages/payments/History.jsx
index d6b3938e..b5c20f35 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/History.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/History.jsx
@@ -83,7 +83,7 @@ return (
       }}
     />
     {(proposals ?? [])?.length > 0 && (
-      <div>
+      <div className="px-3">
         <Widget
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Pagination`}
           props={{
diff --git a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
index 5e9f6939..f2891d86 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
@@ -245,7 +245,7 @@ const ProposalsComponent = () => {
                 : ""
             }
           >
-            <td className="fw-semi-bold">{item.id}</td>
+            <td className="fw-semi-bold px-3">{item.id}</td>
             <td className={isVisible("Created Date")}>
               <Widget
                 src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Date`}
@@ -517,7 +517,7 @@ return (
           <table className="table">
             <thead>
               <tr className="text-secondary">
-                <td>#</td>
+                <td className="px-3">#</td>
                 <td className={isVisible("Created Date")}>Created Date</td>
                 {!isPendingRequests && <td className="text-center">Status</td>}
                 {showReferenceProposal && (

From 7462d490587473cc60ec4fe985de673f9748878c Mon Sep 17 00:00:00 2001
From: rubycop <saychuk.andriy@gmail.com>
Date: Mon, 13 Jan 2025 13:44:22 +0200
Subject: [PATCH 2/7] change line chart color

---
 instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
index 333ea80d..f6c35528 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
@@ -54,7 +54,7 @@ const metadata = JSON.parse(atob(config.metadata ?? ""));
 
 const isDarkTheme = metadata.theme === "dark";
 const bgPageColor = isDarkTheme ? "#222222" : "#FFFFFF";
-const borderColor = isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)";
+const borderColor = isDarkTheme ? "#3B3B3B" : "#000";
 const iconColor = isDarkTheme ? "#CACACA" : "#060606";
 const textColor = isDarkTheme ? "#CACACA" : "#1B1B18";
 const fillStyle = isDarkTheme

From 16d02beb3ec605f00a15a2bc6a97bda747f95622 Mon Sep 17 00:00:00 2001
From: rubycop <saychuk.andriy@gmail.com>
Date: Mon, 13 Jan 2025 14:03:00 +0200
Subject: [PATCH 3/7] fix table styles

---
 .../widget/components/templates/AppLayout.jsx             | 8 ++++++++
 .../widget/pages/settings/MembersPage.jsx                 | 4 ++--
 .../widget/pages/settings/feed/History.jsx                | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index 23f65534..f1351de3 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -293,6 +293,14 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       color: var(--text-color) !important;
     }
 
+    .table td:first-child {
+      padding-left: 20px;
+    }
+
+    .table td:last-child {
+      padding-right: 20px;
+    }
+
     .bg-white {
       background-color: var(--bg-page-color) !important;
       color: var(--text-color) !important;
diff --git a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
index 59d5b4fb..9632093f 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
@@ -349,7 +349,7 @@ return (
         </div>
       ) : (
         <div
-          className="d-flex flex-column flex-1 justify-content-between px-2"
+          className="d-flex flex-column flex-1 justify-content-between"
           style={{ overflow: "auto" }}
         >
           <table className="table">
@@ -363,7 +363,7 @@ return (
             </thead>
             <Members />
           </table>
-          <div>
+          <div className="px-3">
             <Widget
               src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Pagination`}
               props={{
diff --git a/instances/treasury-devdao.near/widget/pages/settings/feed/History.jsx b/instances/treasury-devdao.near/widget/pages/settings/feed/History.jsx
index 52704f0d..08b30e82 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/feed/History.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/feed/History.jsx
@@ -91,7 +91,7 @@ return (
       }}
     />
     {(proposals ?? [])?.length > 0 && (
-      <div>
+      <div className="px-3">
         <Widget
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Pagination`}
           props={{

From ae99d392597b530168f1c577c39d3139e56b2265 Mon Sep 17 00:00:00 2001
From: rubycop <saychuk.andriy@gmail.com>
Date: Mon, 13 Jan 2025 19:00:05 +0200
Subject: [PATCH 4/7] style fixes

---
 .../widget/components/Navbar.jsx              |  8 +++--
 .../widget/components/Pagination.jsx          |  5 +--
 .../widget/components/SettingsDropdown.jsx    |  4 +--
 .../widget/components/Tabs.jsx                |  2 +-
 .../widget/components/templates/AppLayout.jsx | 36 ++++++++++++++++---
 .../widget/pages/payments/History.jsx         |  2 +-
 .../widget/pages/payments/index.jsx           |  4 +--
 .../widget/pages/settings/MembersPage.jsx     | 11 +++---
 .../widget/pages/settings/feed/History.jsx    |  2 +-
 .../pages/settings/feed/SettingsDropdown.jsx  |  1 +
 .../pages/stake-delegation/CreateButton.jsx   | 23 +++---------
 11 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/instances/treasury-devdao.near/widget/components/Navbar.jsx b/instances/treasury-devdao.near/widget/components/Navbar.jsx
index 4025e706..9bbba8dd 100644
--- a/instances/treasury-devdao.near/widget/components/Navbar.jsx
+++ b/instances/treasury-devdao.near/widget/components/Navbar.jsx
@@ -58,7 +58,7 @@ const Navbar = styled.div`
 `;
 
 const LinksContainer = styled.div`
-  font-size: 17px;
+  font-size: 15px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -147,8 +147,10 @@ return (
           treasuryLogo
         )}
         <div className="d-flex flex-column">
-          <div className="h4 mb-0">{getTitle(page ?? "dashboard")}</div>
-          {isTesting && <div>(Testing)</div>}
+          <div className="h4 mb-0 d-flex flex-row gap-2 align-items-center">
+            {getTitle(page ?? "dashboard")}
+            {isTesting && <small className="badge">Testing</small>}
+          </div>
 
           <div>
             <span className="text-sm">Treasury Wallet: </span>
diff --git a/instances/treasury-devdao.near/widget/components/Pagination.jsx b/instances/treasury-devdao.near/widget/components/Pagination.jsx
index 268bbb3d..97b2e0d5 100644
--- a/instances/treasury-devdao.near/widget/components/Pagination.jsx
+++ b/instances/treasury-devdao.near/widget/components/Pagination.jsx
@@ -13,10 +13,7 @@ const currenPageLimit =
     : currentPage * rowsPerPage;
 
 return (
-  <div
-    className="d-flex justify-content-between align-items-center gap-2 flex-wrap"
-    style={{ color: "#555555" }}
-  >
+  <div className="d-flex justify-content-between align-items-center gap-2 flex-wrap px-3">
     <div className="d-flex gap-2 align-items-center">
       Rows per Page:
       <select
diff --git a/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx b/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
index f2639117..60a76ce8 100644
--- a/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
@@ -130,12 +130,12 @@ return (
       tabIndex="0"
       onBlur={() => setIsOpen(false)}
     >
-      <div
+      <button
         className={"dropdown-toggle btn-outline-plain "}
         onClick={toggleDropdown}
       >
         <i class="bi bi-gear"></i>
-      </div>
+      </button>
 
       {isOpen && (
         <div className="dropdown-menu rounded-2 dropdown-menu-end dropdown-menu-lg-start px-2 shadow show w-100">
diff --git a/instances/treasury-devdao.near/widget/components/Tabs.jsx b/instances/treasury-devdao.near/widget/components/Tabs.jsx
index e3484367..5966c43e 100644
--- a/instances/treasury-devdao.near/widget/components/Tabs.jsx
+++ b/instances/treasury-devdao.near/widget/components/Tabs.jsx
@@ -29,7 +29,7 @@ const NavUnderline = styled.ul`
 
   .nav-link {
     color: var(--text-secondary-color) !important;
-    padding-bottom: 19px;
+    padding-bottom: 24px;
   }
   .active {
     color: var(--text-color) !important;
diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index 0c87f837..18ba9f3f 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -28,6 +28,8 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
 
   const getColors = (isDarkTheme) => `
   ${metadata.primaryColor ? `--theme-color: ${metadata.primaryColor};` : ""}
+  --theme-color-light: hsl(var(--theme-color, 40%));
+  --theme-color-dark: hsl(var(--theme-color, 25%));
   --bg-header-color: ${isDarkTheme ? "#222222" : "#2C3E50"};
   --bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
   --bg-system-color: ${isDarkTheme ? "#131313" : "#f4f4f4"};
@@ -110,6 +112,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
     }
 
     color: var(--text-color);
+    font-weight: 500;
 
     a {
       text-decoration: none;
@@ -125,11 +128,20 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       }
     }
 
+    button {
+      height: 40px;
+    }
+
     button.primary {
-      background: var(--theme-color) !important;
+      background: var(--theme-color);
       color: var(--text-alt-color) !important;
       border: none !important;
       padding-block: 0.7rem !important;
+
+      &:hover {
+        background: var(--theme-color-dark);
+      }
+
       i {
         color: var(--text-alt-color) !important;
       }
@@ -139,6 +151,11 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       background: var(--theme-color) !important;
       color: var(--text-alt-color) !important;
       border: none !important;
+
+      &:hover {
+        background: var(--theme-color-dark);
+      }
+
       i {
         color: var(--text-alt-color) !important;
       }
@@ -254,8 +271,18 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       color: inherit !important;
     }
 
+    .badge {
+      padding: 6px 8px;
+      background: #f7dbff;
+      color: var(--theme-color);
+      rounded: 8px;
+      font-weight: 500;
+      font-size: 12px;
+    }
+
     .btn-outline-plain {
-      padding-block: 8px !important;
+      height: 40px;
+      padding-block: 7px !important;
       padding-inline: 10px !important;
       border-radius: 0.375rem !important;
       border: 1.5px solid var(--border-color) !important;
@@ -291,6 +318,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
     .table {
       border-color: var(--border-color) !important;
       color: var(--text-color) !important;
+      margin-bottom: 20px;
     }
 
     .table td:first-child {
@@ -401,10 +429,10 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
     <></>
   ) : (
     <ParentContainer data-bs-theme={isDarkTheme ? "dark" : "light"}>
-      <Theme className="h-100 w-100">
+      <Theme className="min-h-100 w-100">
         <AppHeader page={page} instance={instance} />
         <BalanceBanner accountId={accountId} treasuryDaoID={treasuryDaoID} />
-        <div className="px-3 py-2 w-100 h-100">{children}</div>
+        <div className="px-3 pb-3 w-100 h-100">{children}</div>
       </Theme>
     </ParentContainer>
   );
diff --git a/instances/treasury-devdao.near/widget/pages/payments/History.jsx b/instances/treasury-devdao.near/widget/pages/payments/History.jsx
index b5c20f35..d6b3938e 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/History.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/History.jsx
@@ -83,7 +83,7 @@ return (
       }}
     />
     {(proposals ?? [])?.length > 0 && (
-      <div className="px-3">
+      <div>
         <Widget
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Pagination`}
           props={{
diff --git a/instances/treasury-devdao.near/widget/pages/payments/index.jsx b/instances/treasury-devdao.near/widget/pages/payments/index.jsx
index e1583adb..7655091a 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/index.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/index.jsx
@@ -25,14 +25,14 @@ const SidebarMenu = ({ currentTab }) => {
   return (
     <div
       className="d-flex gap-2 align-items-center"
-      style={{ paddingBottom: "7px" }}
+      style={{ paddingBottom: "16px" }}
     >
       {hasCreatePermission && (
         <Widget
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.InsufficientBannerModal`}
           props={{
             ActionButton: () => (
-              <button className="primary py-1 px-3 rounded-2 h6 fw-bold d-flex align-items-center gap-2 mb-0">
+              <button className="btn btn-primary primary d-flex align-items-center gap-2 mb-0">
                 <i class="bi bi-plus-lg h5 mb-0"></i>Create Request
               </button>
             ),
diff --git a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
index ff71167b..3d327bb5 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
@@ -55,7 +55,6 @@ const Container = styled.div`
   .card-title {
     font-size: 20px;
     font-weight: 600;
-    padding-block: 5px;
   }
 `;
 
@@ -296,15 +295,15 @@ return (
       }}
     />
 
-    <div className="card rounded-3 py-3 d-flex flex-column gap-2 flex-1 w-100">
-      <div className="d-flex justify-content-between gap-2 align-items-center border-bottom px-2">
-        <div className="card-title px-3 mb-0">All Members</div>
+    <div className="card rounded-3 py-3 d-flex flex-column flex-1 w-100">
+      <div className="d-flex justify-content-between gap-2 align-items-center border-bottom px-3 pb-3">
+        <div className="card-title mb-0">All Members</div>
         {hasCreatePermission && (
           <Widget
             src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.InsufficientBannerModal`}
             props={{
               ActionButton: () => (
-                <button className="primary py-1 px-3 rounded-2 h6 fw-bold d-flex align-items-center gap-2 ">
+                <button className="btn btn-primary primary d-flex align-items-center gap-2">
                   <i class="bi bi-plus-lg h5 mb-0"></i>New Member
                 </button>
               ),
@@ -339,7 +338,7 @@ return (
             </thead>
             <Members />
           </table>
-          <div className="px-3">
+          <div>
             <Widget
               src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Pagination`}
               props={{
diff --git a/instances/treasury-devdao.near/widget/pages/settings/feed/History.jsx b/instances/treasury-devdao.near/widget/pages/settings/feed/History.jsx
index 08b30e82..52704f0d 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/feed/History.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/feed/History.jsx
@@ -91,7 +91,7 @@ return (
       }}
     />
     {(proposals ?? [])?.length > 0 && (
-      <div className="px-3">
+      <div>
         <Widget
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Pagination`}
           props={{
diff --git a/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx b/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx
index 0fb8046d..09c6e755 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx
@@ -102,6 +102,7 @@ return (
       className="custom-select w-100"
       tabIndex="0"
       onBlur={() => setIsOpen(false)}
+      style={{ paddingBottom: "16px" }}
     >
       <div
         className={"dropdown-toggle btn-outline-plain "}
diff --git a/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx b/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
index 9c101231..adb47022 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
@@ -191,26 +191,11 @@ const CreateBtn = () => {
         tabIndex="0"
         onBlur={() => setCreateBtnOpen(false)}
       >
-        <div
-          className={
-            "primary-button select-header d-flex gap-1 align-items-center h-100"
-          }
-        >
-          <div
-            className="d-flex gap-2 align-items-center text-lg mb-0 fw-semi-bold"
-            style={{ padding: "0.8rem" }}
-          >
+        <button className={"btn btn-primary primary d-flex align-items-center"}>
+          <div className="d-flex gap-2 align-items-center ">
             <i class="bi bi-plus-lg h5 mb-0"></i>Create Request
           </div>
-          <div
-            className="h-100 d-flex"
-            style={{ borderLeft: "1px solid white" }}
-          >
-            <i
-              class={`p-2 bi bi-chevron-${isCreateBtnOpen ? "up" : "down"}`}
-            ></i>
-          </div>
-        </div>
+        </button>
 
         <div
           className={`options-card ${isCreateBtnOpen ? "visible" : "hidden"}`}
@@ -285,7 +270,7 @@ return (
 
     <div
       className="d-flex gap-2 align-items-center"
-      style={{ paddingBottom: "7px" }}
+      style={{ paddingBottom: "16px" }}
     >
       {hasCreatePermission && (
         <Widget

From bc25d2a16c2a3a835fb492a1533fc5bc07e699f7 Mon Sep 17 00:00:00 2001
From: rubycop <saychuk.andriy@gmail.com>
Date: Mon, 13 Jan 2025 19:04:31 +0200
Subject: [PATCH 5/7] style fixes

---
 .../treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
index dbebf755..72ed2ab0 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
@@ -329,7 +329,6 @@ return (
                       balance={tokensNumber}
                       showExpand={false}
                       price={tokenPrice}
-                      last={index === ftTokens.length - 1}
                     />
                   );
                 })}

From 5693dc726e51a2b01ee03cb9641b560f82f82652 Mon Sep 17 00:00:00 2001
From: rubycop <saychuk.andriy@gmail.com>
Date: Tue, 14 Jan 2025 10:31:26 +0200
Subject: [PATCH 6/7] Add period hover state

Add Y period by default
---
 .../widget/components/templates/AppLayout.jsx             | 7 +------
 .../treasury-devdao.near/widget/pages/dashboard/Chart.jsx | 8 +++++++-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index 18ba9f3f..c40d5d05 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -28,8 +28,6 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
 
   const getColors = (isDarkTheme) => `
   ${metadata.primaryColor ? `--theme-color: ${metadata.primaryColor};` : ""}
-  --theme-color-light: hsl(var(--theme-color, 40%));
-  --theme-color-dark: hsl(var(--theme-color, 25%));
   --bg-header-color: ${isDarkTheme ? "#222222" : "#2C3E50"};
   --bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
   --bg-system-color: ${isDarkTheme ? "#131313" : "#f4f4f4"};
@@ -130,6 +128,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
 
     button {
       height: 40px;
+      font-weight: 500;
     }
 
     button.primary {
@@ -138,10 +137,6 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       border: none !important;
       padding-block: 0.7rem !important;
 
-      &:hover {
-        background: var(--theme-color-dark);
-      }
-
       i {
         color: var(--text-alt-color) !important;
       }
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
index f6c35528..4b67294d 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
@@ -18,7 +18,7 @@ const [height, setHeight] = useState(350);
 const [history, setHistory] = useState([]);
 const [tokenAddresses, setTokenAddresses] = useState([]);
 const [selectedPeriod, setSelectedPeriod] = useState({
-  value: 1,
+  value: 24 * 30,
   interval: 12,
 });
 const [selectedToken, setSelectedToken] = useState("near");
@@ -274,6 +274,12 @@ const Period = styled.div`
   color: #999999;
   font-weight: 500;
 
+  &:hover {
+    background-color: var(--grey-04);
+    color: var(--text-color);
+    border-radius: 8px;
+  }
+
   &.selected {
     background-color: var(--grey-04);
     color: var(--text-color);

From eded7f94d802c51c2d5c91816b81465cf7dcedea Mon Sep 17 00:00:00 2001
From: rubycop <saychuk.andriy@gmail.com>
Date: Tue, 14 Jan 2025 18:15:00 +0200
Subject: [PATCH 7/7] styling left navbar. fix card container paddings

---
 .../widget/components/Navbar.jsx                  |  2 +-
 .../widget/components/SidebarAndMainLayout.jsx    | 15 ++++-----------
 .../widget/components/Tabs.jsx                    |  2 +-
 .../widget/components/templates/AppLayout.jsx     |  1 +
 .../widget/pages/payments/Table.jsx               |  5 +++--
 .../widget/pages/payments/index.jsx               |  2 +-
 .../widget/pages/settings/MembersPage.jsx         |  4 ++--
 .../widget/pages/settings/Theme.jsx               |  8 ++++----
 .../widget/pages/settings/Thresholds.jsx          | 15 ++++++++-------
 .../widget/pages/settings/VotingDurationPage.jsx  |  6 +++---
 .../pages/stake-delegation/CreateButton.jsx       | 12 ++++++------
 .../widget/pages/stake-delegation/Table.jsx       |  5 +++--
 .../stake-delegation/stake-delegation.spec.js     |  5 ++---
 13 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/instances/treasury-devdao.near/widget/components/Navbar.jsx b/instances/treasury-devdao.near/widget/components/Navbar.jsx
index 9bbba8dd..1e31b53f 100644
--- a/instances/treasury-devdao.near/widget/components/Navbar.jsx
+++ b/instances/treasury-devdao.near/widget/components/Navbar.jsx
@@ -148,7 +148,7 @@ return (
         )}
         <div className="d-flex flex-column">
           <div className="h4 mb-0 d-flex flex-row gap-2 align-items-center">
-            {getTitle(page ?? "dashboard")}
+            <div>{getTitle(page ?? "dashboard")}</div>
             {isTesting && <small className="badge">Testing</small>}
           </div>
 
diff --git a/instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx b/instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx
index 9d3a115c..95df9862 100644
--- a/instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx
@@ -10,15 +10,11 @@ const Container = styled.div`
   }
 
   .link.active {
-    font-weight: bolder;
-    color: var(--theme-color) !important;
-    background-color:var(--grey-04);
+    background-color: var(--grey-035);
   }
 
   .link:hover {
-    color: var(--theme-color)) !important;
-    color: var(--theme-color) !important;
-    background-color:var(--grey-04);
+    background-color: var(--grey-035);
   }
 
   .flex-1 {
@@ -41,10 +37,7 @@ const [currentTab, setCurrentTab] = useState(
 
 return (
   <Container className="d-flex gap-4 flex-wrap">
-    <div
-      className="card rounded-3 py-3 flex-1"
-      style={{ height: "max-content" }}
-    >
+    <div className="flex-1" style={{ height: "max-content" }}>
       <div className="d-flex gap-2 flex-column">
         {leftNavbarOptions.map((item) => {
           const { title } = item;
@@ -52,7 +45,7 @@ return (
             <div
               onClick={() => setCurrentTab(item)}
               className={[
-                "link d-inline-flex gap-2 p-2 px-3 rounded-2 pointer",
+                "link d-inline-flex gap-2 p-2 px-3 rounded-3 pointer",
                 currentTab.title === title ? "active" : "",
               ].join(" ")}
               key={title}
diff --git a/instances/treasury-devdao.near/widget/components/Tabs.jsx b/instances/treasury-devdao.near/widget/components/Tabs.jsx
index 5966c43e..b504cda8 100644
--- a/instances/treasury-devdao.near/widget/components/Tabs.jsx
+++ b/instances/treasury-devdao.near/widget/components/Tabs.jsx
@@ -60,7 +60,7 @@ useEffect(() => {
 }, [props]);
 
 return (
-  <Container className="card py-3 d-flex flex-column gap-3">
+  <Container className="card py-3 d-flex flex-column">
     <div
       className="d-flex justify-content-between gap-2 align-items-center border-bottom flex-wrap"
       style={{ paddingRight: "10px" }}
diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index c40d5d05..c8daafef 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -38,6 +38,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
   --grey-01: ${isDarkTheme ? "#F4F4F4" : "#1B1B18"};
   --grey-02: ${isDarkTheme ? "#B3B3B3" : "#555555"};
   --grey-03: ${isDarkTheme ? "#555555" : "#B3B3B3"};
+  --grey-035: ${isDarkTheme ? "#3E3E3E" : "#E6E6E6"};
   --grey-04: ${isDarkTheme ? "#323232" : "#F4F4F4"};
   --grey-05: ${isDarkTheme ? "#1B1B18" : "#F7F7F7"};
   --icon-color:  ${isDarkTheme ? "#CACACA" : "#060606"};
diff --git a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
index f2891d86..75f16ed4 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
@@ -57,6 +57,7 @@ const hasDeletePermission = (deleteGroup?.approverAccounts ?? []).includes(
 const Container = styled.div`
   font-size: 13px;
   min-height: 60vh;
+  display: flex;
 
   td {
     padding: 0.5rem;
@@ -489,13 +490,13 @@ return (
     transferApproversGroup === null ||
     !nearStakedTokens ||
     policy === null ? (
-      <div className="d-flex justify-content-center align-items-center w-100 h-100">
+      <div className="d-flex justify-content-center align-items-center w-100">
         <Widget
           src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"}
         />
       </div>
     ) : (
-      <div>
+      <div className="w-100">
         {proposals.length === 0 ? (
           <div
             style={{ height: "50vh" }}
diff --git a/instances/treasury-devdao.near/widget/pages/payments/index.jsx b/instances/treasury-devdao.near/widget/pages/payments/index.jsx
index 7655091a..f5d03df2 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/index.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/index.jsx
@@ -32,7 +32,7 @@ const SidebarMenu = ({ currentTab }) => {
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.InsufficientBannerModal`}
           props={{
             ActionButton: () => (
-              <button className="btn btn-primary primary d-flex align-items-center gap-2 mb-0">
+              <button className="btn primary-button d-flex align-items-center gap-2 mb-0">
                 <i class="bi bi-plus-lg h5 mb-0"></i>Create Request
               </button>
             ),
diff --git a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
index 3d327bb5..9468485e 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
@@ -295,7 +295,7 @@ return (
       }}
     />
 
-    <div className="card rounded-3 py-3 d-flex flex-column flex-1 w-100">
+    <div className="card rounded-4 py-3 d-flex flex-column flex-1 w-100">
       <div className="d-flex justify-content-between gap-2 align-items-center border-bottom px-3 pb-3">
         <div className="card-title mb-0">All Members</div>
         {hasCreatePermission && (
@@ -303,7 +303,7 @@ return (
             src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.InsufficientBannerModal`}
             props={{
               ActionButton: () => (
-                <button className="btn btn-primary primary d-flex align-items-center gap-2">
+                <button className="btn primary-button d-flex align-items-center gap-2">
                   <i class="bi bi-plus-lg h5 mb-0"></i>New Member
                 </button>
               ),
diff --git a/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx b/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
index de644a72..0d0e67ae 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
@@ -349,11 +349,11 @@ return (
       showError={showErrorToast}
       toggleToast={() => setShowErrorToast(false)}
     />
-    <div className="card rounded-3 w-100 h-100 py-3">
-      <div className="card-title px-3 mb-0">Theme & Logo</div>
+    <div className="card rounded-4 w-100 h-100 py-3">
+      <div className="card-title px-3 pb-3">Theme & Logo</div>
       {!metadata ? (
         <div
-          className=" d-flex justify-content-center align-items-center w-100 h-100"
+          className="d-flex justify-content-center align-items-center w-100 h-100"
           style={{ minHeight: 300 }}
         >
           <Widget
@@ -361,7 +361,7 @@ return (
           />
         </div>
       ) : (
-        <div className="d-flex flex-column gap-4 p-3">
+        <div className="d-flex flex-column gap-4 px-3 py-1">
           <div class="d-flex gap-2 align-items-center flex-wrap flex-md-nowrap">
             <img
               src={image ? image : defaultImage}
diff --git a/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx b/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
index 734840e0..ad0f39b3 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
@@ -145,6 +145,7 @@ const Container = styled.div`
 
   .selected-role {
     background-color: var(--grey-04);
+    font-weight: 600;
   }
 
   .tag {
@@ -311,7 +312,7 @@ return (
       toggleToast={() => setShowErrorToast(false)}
     />
     {Array.isArray(rolesData) && rolesData.length ? (
-      <div className="card rounded-3 d-flex flex-row px-0 flex-wrap">
+      <div className="card rounded-4 d-flex flex-row px-0 flex-wrap">
         <Widget
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Modal`}
           props={{
@@ -340,8 +341,8 @@ return (
           }}
         />
         <div className="flex-1 border-right py-3 ">
-          <div className="card-title px-3">Permission Groups</div>
-          <div className="d-flex flex-column gap-1" style={{ fontWeight: 600 }}>
+          <div className="card-title px-3 pb-3">Permission Groups</div>
+          <div className="d-flex flex-column gap-1 py-1">
             {rolesData.map((role) => {
               const name = role.roleName;
               return (
@@ -359,13 +360,13 @@ return (
           </div>
         </div>
         <div className="flex-1 border-right py-3 ">
-          <div className="card-title px-3">
+          <div className="card-title px-3 pb-3">
             Members{" "}
             <span className="tag rounded-pill px-3">
               {selectedGroup.members.length}
             </span>
           </div>
-          <div className="d-flex flex-column gap-1">
+          <div className="d-flex flex-column gap-1 py-1">
             {Array.isArray(selectedGroup.members) &&
               selectedGroup.members.map((member) => (
                 <div
@@ -381,8 +382,8 @@ return (
           </div>
         </div>
         <div className="flex-1 border-right py-3 ">
-          <div className="card-title px-3">Voting Policy</div>
-          <div className="d-flex flex-column gap-3 px-3 w-100">
+          <div className="card-title px-3 pb-3">Voting Policy</div>
+          <div className="d-flex flex-column gap-3 px-3 w-100 py-1">
             <div className="text-md">
               How many votes are needed for decisions in the `
               {selectedGroup.roleName}` permission group?
diff --git a/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
index 4e314371..b31f7237 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
@@ -309,9 +309,9 @@ return (
       showError={showErrorToast}
       toggleToast={() => setShowErrorToast(false)}
     />
-    <div className="card rounded-3 py-3" style={{ maxWidth: "50rem" }}>
-      <div className="card-title px-3 mb-0">Voting Duration</div>
-      <div className="p-3 d-flex flex-column gap-2">
+    <div className="card rounded-4 py-3" style={{ maxWidth: "50rem" }}>
+      <div className="card-title px-3 pb-3">Voting Duration</div>
+      <div className="px-3 py-1 d-flex flex-column gap-2">
         <div className="fw-semi-bold text-lg">
           Set the number of days a vote is active. A decision expires if voting
           is not completed within this period.
diff --git a/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx b/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
index adb47022..ae9dff9e 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
@@ -117,11 +117,9 @@ const CreateBtn = () => {
       border: 1px solid var(--border-color);
       background-color: var(--bg-page-color) !important;
       color: var(--text-color) !important;
-      padding: 0.5rem;
       z-index: 99;
-      font-size: 13px;
-      border-radius:0.375rem !important;
       opacity: 0;
+      font-size: 14px;
       transform: translateY(-10px);
       transition: opacity 0.2s ease, transform 0.2s ease;
   
@@ -191,20 +189,22 @@ const CreateBtn = () => {
         tabIndex="0"
         onBlur={() => setCreateBtnOpen(false)}
       >
-        <button className={"btn btn-primary primary d-flex align-items-center"}>
+        <button className={"btn primary-button d-flex align-items-center"}>
           <div className="d-flex gap-2 align-items-center ">
             <i class="bi bi-plus-lg h5 mb-0"></i>Create Request
           </div>
         </button>
 
         <div
-          className={`options-card ${isCreateBtnOpen ? "visible" : "hidden"}`}
+          className={`rounded-3 mt-1 options-card ${
+            isCreateBtnOpen ? "visible" : "hidden"
+          }`}
         >
           {btnOptions.map((option) => (
             <div key={option.value} className="option" onClick={option.onClick}>
               <div className="d-flex gap-2 align-items-center">
                 {option.icon}
-                <div className="fw-bold">{option.label}</div>
+                <div>{option.label}</div>
               </div>
             </div>
           ))}
diff --git a/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx b/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
index 50e2266a..27c1a10a 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
@@ -81,6 +81,7 @@ const hasDeletePermission = (deleteGroup?.approverAccounts ?? []).includes(
 const Container = styled.div`
   font-size: 13px;
   min-height: 60vh;
+  display: flex;
 
   td {
     padding: 0.5rem;
@@ -506,13 +507,13 @@ return (
     proposals === null ||
     functionCallApproversGroup === null ||
     policy === null ? (
-      <div className="d-flex justify-content-center align-items-center w-100 h-100">
+      <div className="d-flex justify-content-center align-items-center w-100">
         <Widget
           src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"}
         />
       </div>
     ) : (
-      <div>
+      <div className="w-100">
         {visibleProposals.length === 0 ? (
           <div
             style={{ height: "50vh" }}
diff --git a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
index 04c6ab98..759550aa 100644
--- a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
+++ b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
@@ -242,8 +242,7 @@ async function openWithdrawForm({
   lockupContract,
 }) {
   await expect(page.getByText("Create Request", { exact: true })).toBeVisible();
-  await page.locator(".h-100 > .p-2").click();
-
+  await page.locator(".primary-button").click();
   await page.locator(".options-card > div:nth-child(3)").click();
   await expect(
     page.getByRole("heading", { name: "Create Withdraw Request" })
@@ -256,7 +255,7 @@ async function openWithdrawForm({
 
 async function openUnstakeForm({ page, isLockup, daoAccount, lockupContract }) {
   await expect(page.getByText("Create Request", { exact: true })).toBeVisible();
-  await page.locator(".h-100 > .p-2").click();
+  await page.locator(".primary-button").click();
   await page.getByText("Unstake", { exact: true }).click();
   await expect(
     page.getByRole("heading", { name: "Create Unstake Request" })