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

---
 .../widget/components/SidebarAndMainLayout.jsx    | 15 ++++-----------
 .../widget/components/Tabs.jsx                    |  2 +-
 .../widget/components/templates/AppLayout.jsx     |  1 +
 .../widget/pages/payments/Table.jsx               |  5 +++--
 .../widget/pages/settings/MembersPage.jsx         |  2 +-
 .../widget/pages/settings/Theme.jsx               |  8 ++++----
 .../widget/pages/settings/Thresholds.jsx          | 15 ++++++++-------
 .../widget/pages/settings/VotingDurationPage.jsx  |  6 +++---
 .../widget/pages/stake-delegation/Table.jsx       |  5 +++--
 9 files changed, 28 insertions(+), 31 deletions(-)

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/settings/MembersPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
index 3d327bb5..53678544 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 && (
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/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" }}