Style fixes (#210)

- fixed table row paddings - add extra padding below table - line chart with black color - header alignment fixes - button height and paddings fixes - font weight fixes - Add hover on Graph tabs - style left nav bar - Fixed xAxis label formatting (for Y and "All") --------- Co-authored-by: Vlad Frolov <frolvlad@gmail.com>
NEAR-DevHub · Jan 15, 2025 · 3df4d08 · 3df4d08
1 parent b80b765
commit 3df4d08
Show file tree

Hide file tree

Showing 20 changed files with 120 additions and 101 deletions.
diff --git 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 {
@@ -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;
@@ -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,17 @@ return (
         ) : (
           treasuryLogo
         )}
-        <div className="h3 mb-0">{getTitle(page ?? "dashboard")}</div>
-        {isTesting && <div className="text-secondary">(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 d-flex flex-row gap-2 align-items-center">
+            <div>{getTitle(page ?? "dashboard")}</div>
+            {isTesting && <small className="badge">Testing</small>}
+          </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/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
@@ -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/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
@@ -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;
+    padding-bottom: 24px;
   }
   .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">
     <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
@@ -26,7 +26,7 @@ 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">
+      <span className="amount bolder mb-0">
         {amount.toLocaleString("en-US", {
           minimumFractionDigits: 2,
           maximumFractionDigits: 2,

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"};
@@ -110,27 +111,33 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
     }
 
     color: var(--text-color);
+    font-weight: 500;
 
     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;
       }
     }
 
+    button {
+      height: 40px;
+      font-weight: 500;
+    }
+
     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;
+
       i {
         color: var(--text-alt-color) !important;
       }
@@ -140,6 +147,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;
       }
@@ -255,8 +267,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;
@@ -292,6 +314,15 @@ 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 {
+      padding-left: 20px;
+    }
+
+    .table td:last-child {
+      padding-right: 20px;
     }
 
     .bg-white {
@@ -394,10 +425,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/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");
@@ -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
@@ -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);

diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
@@ -120,7 +120,7 @@ const BalanceDisplay = ({
               />
             )}
           </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} />
@@ -184,7 +184,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">
@@ -300,7 +300,7 @@ const isLoading =
 return (
   <div className="card flex-1 overflow-hidden border-bottom">
     {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 />

diff --git 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;
   }
 
@@ -252,7 +252,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>
@@ -280,7 +280,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/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;
@@ -245,7 +246,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`}
@@ -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" }}
@@ -517,7 +518,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 && (