Rows per Page:
-
+ o.value === rowsPerPage),
+ onUpdate: ({ value }) => onRowsChange(value),
+ }}
+ />
Showing: {currentPage * rowsPerPage - rowsPerPage + 1} - {currenPageLimit}{" "}
diff --git a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
index c8daafef..9ae74ce9 100644
--- a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
@@ -269,8 +269,8 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
.badge {
padding: 6px 8px;
- background: #f7dbff;
- color: var(--theme-color);
+ background: var(--grey-035);
+ color: var(--text-color);
rounded: 8px;
font-weight: 500;
font-size: 12px;
diff --git a/instances/widgets.treasury-factory.near/widget/pages/dashboard/Chart.jsx b/instances/widgets.treasury-factory.near/widget/pages/dashboard/Chart.jsx
index 4b67294d..142bf8f4 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/dashboard/Chart.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/dashboard/Chart.jsx
@@ -54,11 +54,11 @@ const metadata = JSON.parse(atob(config.metadata ?? ""));
const isDarkTheme = metadata.theme === "dark";
const bgPageColor = isDarkTheme ? "#222222" : "#FFFFFF";
-const borderColor = isDarkTheme ? "#3B3B3B" : "#000";
+const borderColor = isDarkTheme ? "#CACACA" : "#000";
const iconColor = isDarkTheme ? "#CACACA" : "#060606";
const textColor = isDarkTheme ? "#CACACA" : "#1B1B18";
const fillStyle = isDarkTheme
- ? "rgba(27, 27, 24, 0.1)"
+ ? "rgba(34, 34, 34, 0.7)"
: "rgba(255, 255, 255, 0.7)";
const code = `
@@ -95,9 +95,15 @@ const code = `
let hoverX = null;
let gradient = ctx.createLinearGradient(0, 0, 0, 350);
- gradient.addColorStop(0, "rgba(0,0,0, 0.3)")
- gradient.addColorStop(0.3, "rgba(0,0,0, 0.1)")
- gradient.addColorStop(1, "rgba(0,0,0, 0)")
+ if (${isDarkTheme}) {
+ gradient.addColorStop(0, "rgba(255,255,255, 0.2)")
+ gradient.addColorStop(0.3, "rgba(255,255,255, 0.1)")
+ gradient.addColorStop(1, "rgba(255,255,255, 0)")
+ } else {
+ gradient.addColorStop(0, "rgba(0,0,0, 0.3)")
+ gradient.addColorStop(0.3, "rgba(0,0,0, 0.1)")
+ gradient.addColorStop(1, "rgba(0,0,0, 0)")
+ }
// Plugin for drawing the tracking line
const trackingLinePlugin = {
diff --git a/instances/widgets.treasury-factory.near/widget/pages/settings/Thresholds.jsx b/instances/widgets.treasury-factory.near/widget/pages/settings/Thresholds.jsx
index ad0f39b3..03cd2929 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/settings/Thresholds.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/settings/Thresholds.jsx
@@ -178,7 +178,7 @@ const Container = styled.div`
}
.dropdown-toggle:after {
- top: 20% !important;
+ top: 30% !important;
}
`;
From 8979aa32f4c49b63dfc53301e071608aa191820a Mon Sep 17 00:00:00 2001
From: Megha <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:27:35 +0530
Subject: [PATCH 03/40] Button hover effect (#218)
- I have deleted `css.jsx` files and move the `themeColor` to config, so
we can utilise it as a constant and convert to hsl to get hover effect
cover, and also use it in theme page
- Added hover effects to all buttons
https://github.com/user-attachments/assets/eade6cfd-7feb-41db-9b6d-9885508de7bc
- Fixed some styling issues
---
instances/treasury-devdao.near/widget/app.jsx | 22 +--
.../widget/config/css.jsx | 5 -
.../widget/config/data.jsx | 1 +
.../treasury-infinex.near/widget/app.jsx | 22 +--
.../widget/config/css.jsx | 5 -
.../widget/config/data.jsx | 1 +
.../treasury-templar.near/widget/app.jsx | 22 +--
.../widget/config/css.jsx | 5 -
.../widget/config/data.jsx | 5 +
.../widget/app.jsx | 22 +--
.../widget/config/css.jsx | 5 -
.../widget/config/data.jsx | 1 +
.../treasury-testing.near/widget/app.jsx | 22 +--
.../widget/config/css.jsx | 5 -
.../widget/config/data.jsx | 1 +
.../widget/components/Modal.jsx | 4 +-
.../widget/components/Navbar.jsx | 7 +-
.../widget/components/SettingsDropdown.jsx | 6 +-
.../widget/components/templates/AppLayout.jsx | 150 +++++++++++++++---
.../pages/payments/CreatePaymentRequest.jsx | 6 +-
.../settings/DeleteModalConfirmation.jsx | 4 +-
.../widget/pages/settings/MembersEditor.jsx | 14 +-
.../widget/pages/settings/MembersPage.jsx | 2 +-
.../widget/pages/settings/Theme.jsx | 8 +-
.../widget/pages/settings/Thresholds.jsx | 2 +-
.../pages/settings/VotingDurationPage.jsx | 8 +-
.../pages/settings/feed/SettingsDropdown.jsx | 2 +-
.../stake-delegation/CreateStakeRequest.jsx | 2 +-
.../stake-delegation/CreateUnstakeRequest.jsx | 2 +-
.../CreateWithdrawRequest.jsx | 2 +-
.../stake-delegation/SettingsDropdown.jsx | 2 +-
.../payments/create-payment-request.spec.js | 6 +-
.../settings/create-member-request.spec.js | 4 +-
33 files changed, 218 insertions(+), 157 deletions(-)
delete mode 100644 instances/treasury-devdao.near/widget/config/css.jsx
delete mode 100644 instances/treasury-infinex.near/widget/config/css.jsx
delete mode 100644 instances/treasury-templar.near/widget/config/css.jsx
delete mode 100644 instances/treasury-testing-infinex.near/widget/config/css.jsx
delete mode 100644 instances/treasury-testing.near/widget/config/css.jsx
diff --git a/instances/treasury-devdao.near/widget/app.jsx b/instances/treasury-devdao.near/widget/app.jsx
index d2fcc990..593402b9 100644
--- a/instances/treasury-devdao.near/widget/app.jsx
+++ b/instances/treasury-devdao.near/widget/app.jsx
@@ -13,10 +13,6 @@ const { AppLayout } = VM.require(
const instance = "${REPL_INSTANCE}";
const treasuryDaoID = "${REPL_TREASURY}";
-const { Theme } = VM.require(`${instance}/widget/config.css`) || {
- Theme: () => <>,
-};
-
if (!page) {
// If no page is specified, we default to the feed page TEMP
page = "dashboard";
@@ -84,14 +80,12 @@ function Page() {
}
return (
-
-
-
-
+
+
);
diff --git a/instances/treasury-devdao.near/widget/config/css.jsx b/instances/treasury-devdao.near/widget/config/css.jsx
deleted file mode 100644
index aae9f279..00000000
--- a/instances/treasury-devdao.near/widget/config/css.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Theme = styled.div`
- --theme-color: #05a36e;
-`;
-
-return { Theme };
diff --git a/instances/treasury-devdao.near/widget/config/data.jsx b/instances/treasury-devdao.near/widget/config/data.jsx
index b749f175..c7819ecf 100644
--- a/instances/treasury-devdao.near/widget/config/data.jsx
+++ b/instances/treasury-devdao.near/widget/config/data.jsx
@@ -48,4 +48,5 @@ return {
),
+ themeColor: "#05a36e",
};
diff --git a/instances/treasury-infinex.near/widget/app.jsx b/instances/treasury-infinex.near/widget/app.jsx
index 4859aafb..116d3b6d 100644
--- a/instances/treasury-infinex.near/widget/app.jsx
+++ b/instances/treasury-infinex.near/widget/app.jsx
@@ -13,10 +13,6 @@ const { AppLayout } = VM.require(
const instance = "${REPL_INSTANCE}";
const treasuryDaoID = "${REPL_TREASURY}";
-const { Theme } = VM.require(`${instance}/widget/config.css`) || {
- Theme: () => <>,
-};
-
if (!page) {
// If no page is specified, we default to the feed page TEMP
page = "dashboard";
@@ -95,14 +91,12 @@ function Page() {
}
return (
-
-
-
-
+
+
);
diff --git a/instances/treasury-infinex.near/widget/config/css.jsx b/instances/treasury-infinex.near/widget/config/css.jsx
deleted file mode 100644
index f7a131f3..00000000
--- a/instances/treasury-infinex.near/widget/config/css.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Theme = styled.div`
- --theme-color: #f76218;
-`;
-
-return { Theme };
diff --git a/instances/treasury-infinex.near/widget/config/data.jsx b/instances/treasury-infinex.near/widget/config/data.jsx
index 47a3b183..ff1baf30 100644
--- a/instances/treasury-infinex.near/widget/config/data.jsx
+++ b/instances/treasury-infinex.near/widget/config/data.jsx
@@ -40,4 +40,5 @@ return {
),
lockupContract: "77fa9d86aca49e758a4cb72628972a0f3135d168.lockup.near",
+ themeColor: "#f76218",
};
diff --git a/instances/treasury-templar.near/widget/app.jsx b/instances/treasury-templar.near/widget/app.jsx
index d2fcc990..593402b9 100644
--- a/instances/treasury-templar.near/widget/app.jsx
+++ b/instances/treasury-templar.near/widget/app.jsx
@@ -13,10 +13,6 @@ const { AppLayout } = VM.require(
const instance = "${REPL_INSTANCE}";
const treasuryDaoID = "${REPL_TREASURY}";
-const { Theme } = VM.require(`${instance}/widget/config.css`) || {
- Theme: () => <>,
-};
-
if (!page) {
// If no page is specified, we default to the feed page TEMP
page = "dashboard";
@@ -84,14 +80,12 @@ function Page() {
}
return (
-
-
-
-
+
+
);
diff --git a/instances/treasury-templar.near/widget/config/css.jsx b/instances/treasury-templar.near/widget/config/css.jsx
deleted file mode 100644
index 42f7499e..00000000
--- a/instances/treasury-templar.near/widget/config/css.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Theme = styled.div`
- --theme-color: #8942d9;
-`;
-
-return { Theme };
diff --git a/instances/treasury-templar.near/widget/config/data.jsx b/instances/treasury-templar.near/widget/config/data.jsx
index b167d3ff..07ead66e 100644
--- a/instances/treasury-templar.near/widget/config/data.jsx
+++ b/instances/treasury-templar.near/widget/config/data.jsx
@@ -9,6 +9,10 @@ return {
title: "Payments",
href: "?page=payments",
},
+ {
+ title: "Stake Delegation",
+ href: "?page=stake-delegation",
+ },
{
title: "Settings",
href: "?page=settings",
@@ -24,4 +28,5 @@ return {
style={{ height: 40, width: 40 }}
/>
),
+ themeColor: "#8942d9",
};
diff --git a/instances/treasury-testing-infinex.near/widget/app.jsx b/instances/treasury-testing-infinex.near/widget/app.jsx
index 4859aafb..116d3b6d 100644
--- a/instances/treasury-testing-infinex.near/widget/app.jsx
+++ b/instances/treasury-testing-infinex.near/widget/app.jsx
@@ -13,10 +13,6 @@ const { AppLayout } = VM.require(
const instance = "${REPL_INSTANCE}";
const treasuryDaoID = "${REPL_TREASURY}";
-const { Theme } = VM.require(`${instance}/widget/config.css`) || {
- Theme: () => <>,
-};
-
if (!page) {
// If no page is specified, we default to the feed page TEMP
page = "dashboard";
@@ -95,14 +91,12 @@ function Page() {
}
return (
-
-
-
-
+
+
);
diff --git a/instances/treasury-testing-infinex.near/widget/config/css.jsx b/instances/treasury-testing-infinex.near/widget/config/css.jsx
deleted file mode 100644
index f7a131f3..00000000
--- a/instances/treasury-testing-infinex.near/widget/config/css.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Theme = styled.div`
- --theme-color: #f76218;
-`;
-
-return { Theme };
diff --git a/instances/treasury-testing-infinex.near/widget/config/data.jsx b/instances/treasury-testing-infinex.near/widget/config/data.jsx
index 54c94ffb..feff99d7 100644
--- a/instances/treasury-testing-infinex.near/widget/config/data.jsx
+++ b/instances/treasury-testing-infinex.near/widget/config/data.jsx
@@ -41,4 +41,5 @@ return {
),
isTesting: true,
+ themeColor: "#f76218",
};
diff --git a/instances/treasury-testing.near/widget/app.jsx b/instances/treasury-testing.near/widget/app.jsx
index d2fcc990..593402b9 100644
--- a/instances/treasury-testing.near/widget/app.jsx
+++ b/instances/treasury-testing.near/widget/app.jsx
@@ -13,10 +13,6 @@ const { AppLayout } = VM.require(
const instance = "${REPL_INSTANCE}";
const treasuryDaoID = "${REPL_TREASURY}";
-const { Theme } = VM.require(`${instance}/widget/config.css`) || {
- Theme: () => <>,
-};
-
if (!page) {
// If no page is specified, we default to the feed page TEMP
page = "dashboard";
@@ -84,14 +80,12 @@ function Page() {
}
return (
-
-
-
-
+
+
);
diff --git a/instances/treasury-testing.near/widget/config/css.jsx b/instances/treasury-testing.near/widget/config/css.jsx
deleted file mode 100644
index aae9f279..00000000
--- a/instances/treasury-testing.near/widget/config/css.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Theme = styled.div`
- --theme-color: #05a36e;
-`;
-
-return { Theme };
diff --git a/instances/treasury-testing.near/widget/config/data.jsx b/instances/treasury-testing.near/widget/config/data.jsx
index 9c5673ca..7df3c557 100644
--- a/instances/treasury-testing.near/widget/config/data.jsx
+++ b/instances/treasury-testing.near/widget/config/data.jsx
@@ -49,4 +49,5 @@ return {
),
+ themeColor: "#05a36e",
};
diff --git a/instances/widgets.treasury-factory.near/widget/components/Modal.jsx b/instances/widgets.treasury-factory.near/widget/components/Modal.jsx
index a058c59c..89ab9c35 100644
--- a/instances/widgets.treasury-factory.near/widget/components/Modal.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/Modal.jsx
@@ -129,7 +129,9 @@ return (
))}
-
-
+
+
setShowMenu(!showMenu)}>
{isOpen && (
diff --git a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
index 9ae74ce9..b04aca7d 100644
--- a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
@@ -2,6 +2,96 @@ const { BalanceBanner } = VM.require(
`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.BalanceBanner`
) || { BalanceBanner: () => <> };
+function hexToHsl(hex) {
+ // Remove # if present
+ hex = hex.startsWith("#") ? hex.slice(1) : hex;
+
+ // Extract RGB components
+ const r = parseInt(hex.slice(0, 2), 16);
+ const g = parseInt(hex.slice(2, 4), 16);
+ const b = parseInt(hex.slice(4, 6), 16);
+
+ // Normalize RGB values
+ const rNorm = r / 255;
+ const gNorm = g / 255;
+ const bNorm = b / 255;
+
+ const max = Math.max(rNorm, gNorm, bNorm);
+ const min = Math.min(rNorm, gNorm, bNorm);
+ const delta = max - min;
+
+ let h = 0;
+ let s = 0;
+ const l = (max + min) / 2;
+
+ if (delta !== 0) {
+ s = l < 0.5 ? delta / (max + min) : delta / (2 - max - min);
+
+ if (max === rNorm) {
+ h = (gNorm - bNorm) / delta + (gNorm < bNorm ? 6 : 0);
+ } else if (max === gNorm) {
+ h = (bNorm - rNorm) / delta + 2;
+ } else {
+ h = (rNorm - gNorm) / delta + 4;
+ }
+
+ h *= 60;
+ }
+
+ return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
+}
+
+// Function to convert HSL to HEX
+function hslToHex(h, s, l) {
+ s /= 100;
+ l /= 100;
+
+ const c = (1 - Math.abs(2 * l - 1)) * s;
+ const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+ const m = l - c / 2;
+
+ let r = 0,
+ g = 0,
+ b = 0;
+
+ if (h >= 0 && h < 60) {
+ r = c;
+ g = x;
+ b = 0;
+ } else if (h >= 60 && h < 120) {
+ r = x;
+ g = c;
+ b = 0;
+ } else if (h >= 120 && h < 180) {
+ r = 0;
+ g = c;
+ b = x;
+ } else if (h >= 180 && h < 240) {
+ r = 0;
+ g = x;
+ b = c;
+ } else if (h >= 240 && h < 300) {
+ r = x;
+ g = 0;
+ b = c;
+ } else if (h >= 300 && h < 360) {
+ r = c;
+ g = 0;
+ b = x;
+ }
+
+ r = Math.round((r + m) * 255);
+ g = Math.round((g + m) * 255);
+ b = Math.round((b + m) * 255);
+
+ const toHex = (value) => {
+ const hex = value.toString(16);
+ return hex.length === 1 ? `0${hex}` : hex;
+ };
+
+ return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
const AppHeader = ({ page, instance }) => (
(
);
function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
+ const { themeColor } = VM.require(`${instance}/widget/config.data`) || {
+ themeColor: "",
+ };
+
+ // Convert HEX to HSL
+ const [h, s, l] = hexToHsl(themeColor);
+
+ // Calculate hover color (darken by reducing lightness)
+ const hoverColor = hslToHex(h, s, Math.max(l - 10, 0));
+
const config = treasuryDaoID
? useCache(
() => Near.asyncView(treasuryDaoID, "get_config"),
@@ -26,8 +126,9 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
const gatewayURL = data?.body?.headers?.Origin ?? "";
const isDarkTheme = metadata.theme === "dark";
- const getColors = (isDarkTheme) => `
- ${metadata.primaryColor ? `--theme-color: ${metadata.primaryColor};` : ""}
+ const getColors = (isDarkTheme, themeColor, hoverColor) => `
+ --theme-color: ${metadata?.primaryColor ?? themeColor};
+ --theme-color-dark: ${hoverColor};
--bg-header-color: ${isDarkTheme ? "#222222" : "#2C3E50"};
--bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
--bg-system-color: ${isDarkTheme ? "#131313" : "#f4f4f4"};
@@ -54,7 +155,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
`;
const ParentContainer = styled.div`
- ${() => getColors(isDarkTheme)}
+ ${() => getColors(isDarkTheme, themeColor, hoverColor)}
width: 100%;
background: var(--bg-system-color) !important;
${() =>
@@ -149,7 +250,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
border: none !important;
&:hover {
- background: var(--theme-color-dark);
+ background: var(--theme-color-dark) !important;
}
i {
@@ -215,6 +316,23 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
.theme-btn.btn:hover {
color: white !important;
+ background: var(--theme-color-dark) !important;
+ }
+
+ .btn-outline-secondary {
+ border-color: var(--border-color) !important;
+ color: var(--text-color) !important;
+ border-width: 1px !important;
+
+ i {
+ color: var(--text-color) !important;
+ }
+
+ &:hover {
+ color: var(--text-color) !important;
+ border-color: var(--border-color) !important;
+ background: var(--grey-035) !important;
+ }
}
.toast-container {
@@ -291,18 +409,12 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
}
}
- h6,
- .h6,
- h5,
- .h5,
- h4,
- .h4,
- h3,
- .h3,
- h2,
- .h2,
h1,
- .h1 {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
color: var(--text-color) !important;
}
@@ -384,12 +496,8 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
color: inherit !important;
}
- .text-delete {
+ .text-red {
color: var(--other-red) !important;
-
- i {
- color: var(--other-red) !important;
- }
}
.btn-outline.btn:hover {
@@ -421,7 +529,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
}
`;
- return !config ? (
+ return !config || themeColor === null ? (
<>
) : (
diff --git a/instances/widgets.treasury-factory.near/widget/pages/payments/CreatePaymentRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/payments/CreatePaymentRequest.jsx
index 7457706c..92c09ba6 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/payments/CreatePaymentRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/payments/CreatePaymentRequest.jsx
@@ -227,10 +227,6 @@ const Container = styled.div`
color: var(--theme-color) !important;
}
- .btn:hover {
- color: black !important;
- }
-
.warning {
background-color: rgba(255, 158, 0, 0.1);
color: #ff9e00;
@@ -631,7 +627,7 @@ return (
src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
props={{
classNames: {
- root: "btn-outline shadow-none border-0",
+ root: "btn btn-outline-secondary shadow-none no-transparent",
},
label: "Cancel",
onClick: () => {
diff --git a/instances/widgets.treasury-factory.near/widget/pages/settings/DeleteModalConfirmation.jsx b/instances/widgets.treasury-factory.near/widget/pages/settings/DeleteModalConfirmation.jsx
index 015993fa..d7c5579c 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/settings/DeleteModalConfirmation.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/settings/DeleteModalConfirmation.jsx
@@ -249,7 +249,9 @@ return (
-
+
{(selectedMember || memberAlreadyExists) && (
-
- Delete
-
- ),
+ label: "Delete",
+
onClick: () => setShowDeleteModal(true),
disabled: isTxnCreated || !username,
}}
@@ -313,7 +309,7 @@ return (
src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
props={{
classNames: {
- root: "btn-outline shadow-none border-0",
+ root: "btn btn-outline-secondary shadow-none no-transparent",
},
label: "Cancel",
onClick: () => {
diff --git a/instances/widgets.treasury-factory.near/widget/pages/settings/MembersPage.jsx b/instances/widgets.treasury-factory.near/widget/pages/settings/MembersPage.jsx
index 9468485e..0d2761f3 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/settings/MembersPage.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/settings/MembersPage.jsx
@@ -217,7 +217,7 @@ const Members = () => {
src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.InsufficientBannerModal`}
props={{
ActionButton: () => (
-
+
),
checkForDeposit: true,
treasuryDaoID,
diff --git a/instances/widgets.treasury-factory.near/widget/pages/settings/Theme.jsx b/instances/widgets.treasury-factory.near/widget/pages/settings/Theme.jsx
index 0d0e67ae..2b7545db 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/settings/Theme.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/settings/Theme.jsx
@@ -14,7 +14,9 @@ if (!instance) {
return <>;
}
-const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
+const { treasuryDaoID, themeColor } = VM.require(
+ `${instance}/widget/config.data`
+);
const hasCreatePermission = hasPermission(
treasuryDaoID,
@@ -329,7 +331,7 @@ function onSubmitClick() {
function setDefault() {
setImage(metadata?.flagLogo ?? defaultImage);
- setColor(metadata?.primaryColor ?? defaultColor);
+ setColor(metadata?.primaryColor ?? themeColor ?? defaultColor);
setSelectedTheme(
ThemeOptions.find((i) => i.value === metadata?.theme) ?? ThemeOptions[0]
);
@@ -437,7 +439,7 @@ return (
src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
props={{
classNames: {
- root: "btn-outline shadow-none border-0",
+ root: "btn btn-outline-secondary shadow-none no-transparent",
},
label: "Cancel",
onClick: setDefault,
diff --git a/instances/widgets.treasury-factory.near/widget/pages/settings/Thresholds.jsx b/instances/widgets.treasury-factory.near/widget/pages/settings/Thresholds.jsx
index 03cd2929..de123747 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/settings/Thresholds.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/settings/Thresholds.jsx
@@ -472,7 +472,7 @@ return (
src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
props={{
classNames: {
- root: "btn-outline shadow-none border-0",
+ root: "btn btn-outline-secondary shadow-none no-transparent",
},
label: "Cancel",
onClick: () => {
diff --git a/instances/widgets.treasury-factory.near/widget/pages/settings/VotingDurationPage.jsx b/instances/widgets.treasury-factory.near/widget/pages/settings/VotingDurationPage.jsx
index b31f7237..f04437f1 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/settings/VotingDurationPage.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/settings/VotingDurationPage.jsx
@@ -449,7 +449,9 @@ return (
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
index d3b7b933..89397aa3 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
@@ -608,7 +608,7 @@ return (
src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
props={{
classNames: {
- root: "btn-outline shadow-none border-0",
+ root: "btn btn-outline-secondary shadow-none no-transparent",
},
label: "Cancel",
onClick: () => {
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
index 9fa39ba2..16b050db 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
@@ -591,7 +591,7 @@ return (
src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
props={{
classNames: {
- root: "btn-outline shadow-none border-0",
+ root: "btn btn-outline-secondary shadow-none no-transparent",
},
label: "Cancel",
onClick: () => {
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
index 4196a40f..09e4aae4 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
@@ -477,7 +477,7 @@ return (
src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
props={{
classNames: {
- root: "btn-outline shadow-none border-0",
+ root: "btn btn-outline-secondary shadow-none no-transparent",
},
label: "Cancel",
onClick: () => {
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/SettingsDropdown.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/SettingsDropdown.jsx
index cc4be62b..4f2582fd 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/SettingsDropdown.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/SettingsDropdown.jsx
@@ -115,7 +115,7 @@ return (
onBlur={() => setIsOpen(false)}
>
diff --git a/playwright-tests/tests/payments/create-payment-request.spec.js b/playwright-tests/tests/payments/create-payment-request.spec.js
index 5f798a2b..634a6556 100644
--- a/playwright-tests/tests/payments/create-payment-request.spec.js
+++ b/playwright-tests/tests/payments/create-payment-request.spec.js
@@ -626,9 +626,9 @@ test.describe("admin with function access keys", function () {
await totalAmountField.pressSequentially("20");
await totalAmountField.blur();
}
- const submitBtn = page.getByRole("button", { name: "Submit" });
- await expect(submitBtn).toBeAttached({ timeout: 10_000 });
- await submitBtn.scrollIntoViewIfNeeded({ timeout: 10_000 });
+ const submitBtn = await page.getByRole("button", { name: "Submit" });
+ await expect(submitBtn).toBeEnabled({ timeout: 20_000 });
+ await submitBtn.scrollIntoViewIfNeeded({ timeout: 20_000 });
await submitBtn.click();
const expectedTransactionModalObject = instanceConfig.showProposalSelection
diff --git a/playwright-tests/tests/settings/create-member-request.spec.js b/playwright-tests/tests/settings/create-member-request.spec.js
index 8e64d5f5..abe80642 100644
--- a/playwright-tests/tests/settings/create-member-request.spec.js
+++ b/playwright-tests/tests/settings/create-member-request.spec.js
@@ -441,7 +441,7 @@ test.describe("User is logged in", function () {
accountInput.fill("megha19.near");
await accountInput.blur();
await expect(page.getByText("This user is already a member")).toBeVisible();
- await expect(page.getByRole("button", { name: " Delete" })).toBeVisible();
+ await expect(page.getByRole("button", { name: "Delete" })).toBeVisible();
});
test("should update existing member permissions", async ({ page }) => {
@@ -610,7 +610,7 @@ test.describe("User is logged in", function () {
.locator(".offcanvas-body")
.getByText("Create Requests", { exact: true })
).toBeVisible();
- await page.getByRole("button", { name: " Delete" }).click();
+ await page.getByRole("button", { name: "Delete" }).click();
await expect(
page.getByRole("heading", { name: "Are you sure?" })
).toBeVisible();
From d275a199714f90ab2bd91b16160edf558d68dffc Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:31:48 +0530
Subject: [PATCH 04/40] minor css change
---
.../widget/components/Navbar.jsx | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/instances/widgets.treasury-factory.near/widget/components/Navbar.jsx b/instances/widgets.treasury-factory.near/widget/components/Navbar.jsx
index e7aefb8f..78b58a5c 100644
--- a/instances/widgets.treasury-factory.near/widget/components/Navbar.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/Navbar.jsx
@@ -55,6 +55,10 @@ const Navbar = styled.div`
font-size: 13px;
color: #999999;
}
+
+ .page-title {
+ color: var(--text-color);
+ }
`;
const LinksContainer = styled.div`
@@ -148,7 +152,7 @@ return (
)}
-
From ae9b40a4a33348d78a3c4328e00c38838df0c18c Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:42:48 +0530
Subject: [PATCH 05/40] fix the theme color
---
.../widget/components/templates/AppLayout.jsx | 28 +++++++++++--------
1 file changed, 17 insertions(+), 11 deletions(-)
diff --git a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
index b04aca7d..b7096f29 100644
--- a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
@@ -4,6 +4,7 @@ const { BalanceBanner } = VM.require(
function hexToHsl(hex) {
// Remove # if present
+ hex = hex ?? ''
hex = hex.startsWith("#") ? hex.slice(1) : hex;
// Extract RGB components
@@ -107,12 +108,6 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
themeColor: "",
};
- // Convert HEX to HSL
- const [h, s, l] = hexToHsl(themeColor);
-
- // Calculate hover color (darken by reducing lightness)
- const hoverColor = hslToHex(h, s, Math.max(l - 10, 0));
-
const config = treasuryDaoID
? useCache(
() => Near.asyncView(treasuryDaoID, "get_config"),
@@ -126,8 +121,21 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
const gatewayURL = data?.body?.headers?.Origin ?? "";
const isDarkTheme = metadata.theme === "dark";
+ if (!config) {
+ return <>;
+ }
+
+ const primaryColor = metadata?.primaryColor
+ ? metadata?.primaryColor
+ : themeColor;
+ // Convert HEX to HSL
+ const [h, s, l] = hexToHsl(primaryColor);
+
+ // Calculate hover color (darken by reducing lightness)
+ const hoverColor = hslToHex(h, s, Math.max(l - 10, 0));
+
const getColors = (isDarkTheme, themeColor, hoverColor) => `
- --theme-color: ${metadata?.primaryColor ?? themeColor};
+ --theme-color: ${themeColor};
--theme-color-dark: ${hoverColor};
--bg-header-color: ${isDarkTheme ? "#222222" : "#2C3E50"};
--bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
@@ -155,7 +163,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
`;
const ParentContainer = styled.div`
- ${() => getColors(isDarkTheme, themeColor, hoverColor)}
+ ${() => getColors(isDarkTheme, primaryColor, hoverColor)}
width: 100%;
background: var(--bg-system-color) !important;
${() =>
@@ -529,9 +537,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
}
`;
- return !config || themeColor === null ? (
- <>
- ) : (
+ return (
{getTitle(page ?? "dashboard")}
+ {getTitle(page ?? "dashboard")}
{isTesting && Testing}