From a4529617ccb95419755f3843c3cc088a27135ed0 Mon Sep 17 00:00:00 2001
From: binwiederhier <pheckel@datto.com>
Date: Mon, 9 Jan 2023 17:56:51 -0500
Subject: [PATCH] Make upgrade banner bigger

---
 server/server.go                 |  1 -
 web/src/components/Account.js    |  8 ++------
 web/src/components/Navigation.js | 10 ++++++++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/server/server.go b/server/server.go
index 4cc811c..5776080 100644
--- a/server/server.go
+++ b/server/server.go
@@ -42,7 +42,6 @@ import (
 		reset daily Limits for users
 		Make sure account endpoints make sense for admins
 		UI:
-		- Align size of message bar and upgrade banner
 		- flicker of upgrade banner
 		- JS constants
 		- useContext for account
diff --git a/web/src/components/Account.js b/web/src/components/Account.js
index 63e7338..c08e0d3 100644
--- a/web/src/components/Account.js
+++ b/web/src/components/Account.js
@@ -200,12 +200,8 @@ const Stats = () => {
                                 {" "}{account.tier ? `(with ${account.tier.name} tier)` : `(no tier)`}
                             </>
                         }
-                        {account.role === "user" && account.tier &&
-                            <>{account.tier.name}</>
-                        }
-                        {account.role === "user" && !account.tier &&
-                            t("account_usage_tier_none")
-                        }
+                        {account.role === "user" && account.tier && account.tier.name}
+                        {account.role === "user" && !account.tier && t("account_usage_tier_none")}
                         {config.enable_payments && account.role === "user" && (!account.tier || !account.tier.paid) &&
                             <Button
                                 variant="outlined"
diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js
index d5a20bf..0700466 100644
--- a/web/src/components/Navigation.js
+++ b/web/src/components/Navigation.js
@@ -182,20 +182,26 @@ const UpgradeBanner = () => {
             background: "linear-gradient(150deg, rgba(196, 228, 221, 0.46) 0%, rgb(255, 255, 255) 100%)",
         }}>
             <Divider/>
-            <ListItemButton onClick={() => setDialogOpen(true)}>
+            <ListItemButton onClick={() => setDialogOpen(true)} sx={{pt: 2, pb: 2}}>
                 <ListItemIcon><CelebrationIcon sx={{ color: "#55b86e" }} fontSize="large"/></ListItemIcon>
                 <ListItemText
                     sx={{ ml: 1 }}
                     primary={"Upgrade to ntfy Pro"}
-                    secondary={"Reserve topics, more messages & emails, bigger attachments"}
+                    secondary={"Reserve topics, more messages & emails, and larger attachments"}
                     primaryTypographyProps={{
                         style: {
                             fontWeight: 500,
+                            fontSize: "1.1rem",
                             background: "-webkit-linear-gradient(45deg, #09009f, #00ff95 80%)",
                             WebkitBackgroundClip: "text",
                             WebkitTextFillColor: "transparent"
                         }
                     }}
+                    secondaryTypographyProps={{
+                        style: {
+                            fontSize: "1rem"
+                        }
+                    }}
                 />
             </ListItemButton>
             <UpgradeDialog