From 66fe697e89795bb3c8b53a785fdb333b1658eced Mon Sep 17 00:00:00 2001 From: David Klakurka Date: Sat, 20 Dec 2025 16:52:51 -0800 Subject: [PATCH 1/4] Improved account page layout --- components/Account/ProDisplay.tsx | 14 +++--- components/Account/account.module.css | 6 ++- components/Organization/ViewOrganization.tsx | 2 +- .../Organization/organization.module.css | 1 - pages/account/account.module.css | 47 ++++++++++++++++++- pages/account/index.tsx | 7 ++- 6 files changed, 64 insertions(+), 13 deletions(-) diff --git a/components/Account/ProDisplay.tsx b/components/Account/ProDisplay.tsx index ab1d57309..7bed25cbe 100644 --- a/components/Account/ProDisplay.tsx +++ b/components/Account/ProDisplay.tsx @@ -9,7 +9,7 @@ const ProConfig = (): JSX.Element => { const [isPro, setIsPro] = useState() const showLimit = (configLimit: number | 'Inf'): string => { - return configLimit === 'Inf' ? 'Unlimited' : configLimit.toString() + return configLimit === 'Inf' || configLimit === Infinity ? 'Unlimited' : configLimit.toString() } useEffect(() => { @@ -35,7 +35,7 @@ const ProConfig = (): JSX.Element => { }, []) return <> -

PayButton Pro

+

PayButton Pro

{text} @@ -56,16 +56,16 @@ const ProConfig = (): JSX.Element => { {showLimit(config.proSettings.standardDailyEmailLimit)} / day {showLimit(config.proSettings.proDailyEmailLimit)} / day - - Addresses Per Button - {showLimit(config.proSettings.standardAddressesPerButtonLimit)} - {showLimit(config.proSettings.proAddressesPerButtonLimit)} - Outgoing Server-to-Server Messages On Payment {showLimit(config.proSettings.standardDailyPostLimit)} / day {showLimit(config.proSettings.proDailyPostLimit)} / day + + Addresses Per Button + {showLimit(config.proSettings.standardAddressesPerButtonLimit)} + {showLimit(config.proSettings.proAddressesPerButtonLimit)} +
diff --git a/components/Account/account.module.css b/components/Account/account.module.css index e37aabf5c..5688b5bb1 100644 --- a/components/Account/account.module.css +++ b/components/Account/account.module.css @@ -47,7 +47,6 @@ body[data-theme='dark'] .changepw_ctn input { .pro_ctn { width: 100%; background-color: #fff; - max-width: 700px; padding: 20px; border-radius: 10px; display: flex; @@ -74,3 +73,8 @@ body[data-theme="dark"] .pro_ctn input { .upgrade_btn a button { width: 100% } + +.section_header { + margin: 0 0 10px 0; + font-weight: 600; +} diff --git a/components/Organization/ViewOrganization.tsx b/components/Organization/ViewOrganization.tsx index cd244f73b..066521ae5 100644 --- a/components/Organization/ViewOrganization.tsx +++ b/components/Organization/ViewOrganization.tsx @@ -23,7 +23,7 @@ const ViewOrganization = ({ user, orgMembers, setOrgMembers, organization }: IPr const [loading, setLoading] = useState(false) return <> -

Organization

+

Organization

{org !== null && org.creatorId === user.userProfile.id ? ( diff --git a/components/Organization/organization.module.css b/components/Organization/organization.module.css index 18fe336cd..d8cbb602f 100644 --- a/components/Organization/organization.module.css +++ b/components/Organization/organization.module.css @@ -1,7 +1,6 @@ .org_ctn { width: 100%; background-color: #fff; - max-width: 700px; padding: 20px; border-radius: 10px; } diff --git a/pages/account/account.module.css b/pages/account/account.module.css index 9a99a6345..8224a3b50 100644 --- a/pages/account/account.module.css +++ b/pages/account/account.module.css @@ -4,10 +4,37 @@ --max-width: 700px; } +.account_columns { + display: flex; + flex-direction: column; + gap: 20px; +} + +@media (min-width: 1200px) { + .account_columns { + flex-direction: row; + align-items: flex-start; + } + + .account_column { + flex: 1; + min-width: 0; + } +} + +.account_column { + display: flex; + flex-direction: column; +} + +.section_header { + margin: 0 0 10px 0; + font-weight: 600; +} + .account_card { width: 100%; background-color: var(--secondary-bg-color); - max-width: var(--max-width); padding: 30px; border-radius: 8px; word-wrap: break-word; @@ -241,12 +268,28 @@ background-color: #434343; border-spacing: 0; margin: 0; border-radius: 6px; + table-layout: fixed; } .public_key_info_ctn th, .public_key_info_ctn td { border: none; - width: 100%; + padding: 8px 12px; + text-align: left; +} + +.public_key_info_ctn th:first-child, +.public_key_info_ctn td:first-child { + width: auto; +} + +.public_key_info_ctn th:nth-child(2), +.public_key_info_ctn td:nth-child(2), +.public_key_info_ctn th:nth-child(3), +.public_key_info_ctn td:nth-child(3) { + width: 100px; + text-align: right; + white-space: nowrap; } .public_key_info_ctn th { diff --git a/pages/account/index.tsx b/pages/account/index.tsx index 915d6d492..a1e00dd8a 100644 --- a/pages/account/index.tsx +++ b/pages/account/index.tsx @@ -107,6 +107,9 @@ export default function Account ({ user, userPublicKey, organization, orgMembers return (
+
+
+

General

Email
@@ -189,11 +192,13 @@ export default function Account ({ user, userPublicKey, organization, orgMembers
+
-
+
{config.proSettings.enabled && }
+
) } return From 84a5aac48d365127535694e5c683cf9ee63c6e22 Mon Sep 17 00:00:00 2001 From: David Klakurka Date: Sat, 20 Dec 2025 17:13:43 -0800 Subject: [PATCH 2/4] Updated PayButton Pro html table style to match other tables --- components/Account/ProDisplay.tsx | 5 ++-- pages/account/account.module.css | 39 ------------------------------- 2 files changed, 3 insertions(+), 41 deletions(-) diff --git a/components/Account/ProDisplay.tsx b/components/Account/ProDisplay.tsx index 7bed25cbe..b1eb168ee 100644 --- a/components/Account/ProDisplay.tsx +++ b/components/Account/ProDisplay.tsx @@ -41,14 +41,15 @@ const ProConfig = (): JSX.Element => { {text}
{isPro === false && } -
+
- + + diff --git a/pages/account/account.module.css b/pages/account/account.module.css index 8224a3b50..f58ce11d9 100644 --- a/pages/account/account.module.css +++ b/pages/account/account.module.css @@ -261,42 +261,3 @@ background-color: #434343; .public_key_info_ctn { width: 100%; } - -.public_key_info_ctn table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; - margin: 0; - border-radius: 6px; - table-layout: fixed; -} - -.public_key_info_ctn th, -.public_key_info_ctn td { - border: none; - padding: 8px 12px; - text-align: left; -} - -.public_key_info_ctn th:first-child, -.public_key_info_ctn td:first-child { - width: auto; -} - -.public_key_info_ctn th:nth-child(2), -.public_key_info_ctn td:nth-child(2), -.public_key_info_ctn th:nth-child(3), -.public_key_info_ctn td:nth-child(3) { - width: 100px; - text-align: right; - white-space: nowrap; -} - -.public_key_info_ctn th { - background-color: black; - color: white; -} - -.public_key_info_ctn tr:nth-child(even) { - background-color: var(--secondary-bg-color); -} From 4e1d581886f99334a0020b971e534f955aead485 Mon Sep 17 00:00:00 2001 From: David Klakurka Date: Sat, 20 Dec 2025 17:46:51 -0800 Subject: [PATCH 3/4] Fixed app crash --- pages/account/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/account/index.tsx b/pages/account/index.tsx index a1e00dd8a..2e6bde755 100644 --- a/pages/account/index.tsx +++ b/pages/account/index.tsx @@ -103,7 +103,7 @@ export default function Account ({ user, userPublicKey, organization, orgMembers } } - if (user !== null) { + if (user != null) { return (
From 73c68069216ee786aa4cf3a1187158c845328773 Mon Sep 17 00:00:00 2001 From: David Klakurka Date: Mon, 22 Dec 2025 22:33:39 -0800 Subject: [PATCH 4/4] Updated headers to use consistent font weight style on /account page --- pages/account/account.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/account/account.module.css b/pages/account/account.module.css index f58ce11d9..594b40309 100644 --- a/pages/account/account.module.css +++ b/pages/account/account.module.css @@ -29,7 +29,6 @@ .section_header { margin: 0 0 10px 0; - font-weight: 600; } .account_card {
Account Limits Standard Pro