styling left navbar. fix card container paddings

NEAR-DevHub · Jan 15, 2025 · 4402f4e · 4402f4e
1 parent 5693dc7
commit 4402f4e
Show file tree

Hide file tree

Showing 13 changed files with 44 additions and 48 deletions.
diff --git 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
@@ -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/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
@@ -295,15 +295,15 @@ 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 && (
           <Widget
             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
@@ -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/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
@@ -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
@@ -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" })
@@ -386,7 +385,7 @@ async function voteOnProposal({
     methodName: "act_proposal",
   });
   await expect(
-    await page.locator("div").filter({ hasText: /^Stake Delegation$/ })
+    await page.locator("div").filter({ hasText: "Stake Delegation" })
   ).toBeVisible({ timeout: 20_000 });
   await mockTransactionSubmitRPCResponses(
     page,
@@ -436,7 +435,7 @@ test.describe("Have valid staked requests and sufficient token balance", functio
 
     await page.goto(`/${instanceAccount}/widget/app?page=stake-delegation`);
     await expect(
-      await page.locator("div").filter({ hasText: /^Stake Delegation$/ })
+      await page.locator("div").filter({ hasText: "Stake Delegation" })
     ).toBeVisible();
     await page.waitForTimeout(5_000);
   });
@@ -621,7 +620,7 @@ test.describe("Withdraw request", function () {
     await page.goto(`/${instanceAccount}/widget/app?page=stake-delegation`);
     await mockStakedPools({ daoAccount, page, havePools: true });
     await expect(
-      await page.locator("div").filter({ hasText: /^Stake Delegation$/ })
+      await page.locator("div").filter({ hasText: "Stake Delegation" })
     ).toBeVisible();
   });
 
@@ -879,7 +878,7 @@ test.describe("Lockup staking", function () {
 
     await page.goto(`/${instanceAccount}/widget/app?page=stake-delegation`);
     await expect(
-      await page.locator("div").filter({ hasText: /^Stake Delegation$/ })
+      await page.locator("div").filter({ hasText: "Stake Delegation" })
     ).toBeVisible();
   });
 
@@ -1351,7 +1350,7 @@ test.describe("Insufficient balance ", function () {
 
     await page.goto(`/${instanceAccount}/widget/app?page=stake-delegation`);
     await expect(
-      await page.locator("div").filter({ hasText: /^Stake Delegation$/ })
+      await page.locator("div").filter({ hasText: "Stake Delegation" })
     ).toBeVisible();
   });