styling left navbar. fix card container paddings

NEAR-DevHub · Jan 14, 2025 · 0ea95e9 · 0ea95e9
1 parent 5693dc7
commit 0ea95e9
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 31 deletions.
diff --git 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,18 +37,15 @@ 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;
           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -349,19 +349,19 @@ 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
             src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"}
           />
         </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
@@ -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
@@ -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
@@ -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" }}