fix: improved account page layout (#1088)

* Improved account page layout

* Updated PayButton Pro html table style to match other tables

* Fixed app crash

* Updated headers to use consistent font weight style on /account page

Author: Klakurka

components/Account/ProDisplay.tsx

@@ -9,7 +9,7 @@ const ProConfig = (): JSX.Element => {
   const [isPro, setIsPro] = useState<boolean | null>()
 
   const showLimit = (configLimit: number | 'Inf'): string => {
-    return configLimit === 'Inf' ? 'Unlimited' : configLimit.toString()
+    return configLimit === 'Inf' || configLimit === Infinity ? 'Unlimited' : configLimit.toString()
   }
 
   useEffect(() => {
@@ -35,37 +35,38 @@ const ProConfig = (): JSX.Element => {
   }, [])
 
   return <>
-    <h3>PayButton Pro</h3>
+    <h4 className={style.section_header}>PayButton Pro</h4>
     <div className={style.pro_ctn}>
       <div className={stylep.label}>
         {text}
       </div>
       {isPro === false && <ProPurchase/>}
-      <div className={stylep.public_key_info_ctn}>
+      <div className="paybutton-table-ctn">
         <table>
           <thead>
             <tr>
-              <th></th>
+              <th>Account Limits</th>
               <th>Standard</th>
               <th>Pro</th>
             </tr>
+            <tr className="header-spacer"></tr>
           </thead>
           <tbody>
             <tr>
               <td>Outgoing Emails on Payment</td>
               <td>{showLimit(config.proSettings.standardDailyEmailLimit)} / day</td>
               <td>{showLimit(config.proSettings.proDailyEmailLimit)} / day</td>
             </tr>
-            <tr>
-              <td>Addresses Per Button</td>
-              <td>{showLimit(config.proSettings.standardAddressesPerButtonLimit)}</td>
-              <td>{showLimit(config.proSettings.proAddressesPerButtonLimit)}</td>
-            </tr>
             <tr>
               <td>Outgoing Server-to-Server Messages On Payment</td>
               <td>{showLimit(config.proSettings.standardDailyPostLimit)} / day</td>
               <td>{showLimit(config.proSettings.proDailyPostLimit)} / day</td>
             </tr>
+            <tr>
+              <td>Addresses Per Button</td>
+              <td>{showLimit(config.proSettings.standardAddressesPerButtonLimit)}</td>
+              <td>{showLimit(config.proSettings.proAddressesPerButtonLimit)}</td>
+            </tr>
           </tbody>
         </table>
       </div>

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;
+}

components/Organization/ViewOrganization.tsx

@@ -23,7 +23,7 @@ const ViewOrganization = ({ user, orgMembers, setOrgMembers, organization }: IPr
   const [loading, setLoading] = useState(false)
 
   return <>
-    <h3 className={style.config_title}>Organization</h3>
+    <h4 className={style.config_title}>Organization</h4>
     <div className={style.org_ctn}>
       {org !== null && org.creatorId === user.userProfile.id
         ? (

components/Organization/organization.module.css

@@ -1,7 +1,6 @@
 .org_ctn  {
   width: 100%;
   background-color: #fff;
-  max-width: 700px;
   padding: 20px;
   border-radius: 10px;
 }

pages/account/account.module.css

@@ -4,10 +4,36 @@
   --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;
+}
+
 .account_card {
   width: 100%;
   background-color: var(--secondary-bg-color);
-  max-width: var(--max-width);
   padding: 30px;
   border-radius: 8px;
   word-wrap: break-word;
@@ -234,26 +260,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;
-}
-
-.public_key_info_ctn th,
-.public_key_info_ctn td {
-  border: none;
-  width: 100%;
-}
-
-.public_key_info_ctn th {
-  background-color: black;
-  color: white;
-}
-
-.public_key_info_ctn tr:nth-child(even) {
-  background-color: var(--secondary-bg-color);
-}

pages/account/index.tsx

@@ -103,10 +103,13 @@ export default function Account ({ user, userPublicKey, organization, orgMembers
     }
   }
 
-  if (user !== null) {
+  if (user != null) {
     return (
       <div className={style.account_ctn}>
         <TopBar title="Account" user={user.stUser?.email} />
+        <div className={style.account_columns}>
+        <div className={style.account_column}>
+        <h4 className={style.section_header}>General</h4>
         <div className={style.account_card}>
           <div className={style.account_row}>
             <div className={style.label}>Email</div>
@@ -189,11 +192,13 @@ export default function Account ({ user, userPublicKey, organization, orgMembers
 
           </div>
         </div>
+        </div>
 
-        <div>
+        <div className={style.account_column}>
           {config.proSettings.enabled && <ProDisplay/>}
           <ViewOrganization user={user} orgMembers={orgMembers} setOrgMembers={setOrgMembers} organization={organization}/>
         </div>
+        </div>
       </div>)
   }
   return <Page />