Make upgrade banner bigger

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

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.role === "user" && account.tier && account.tier.name}
-                            <>{account.tier.name}</>
+                        {account.role === "user" && !account.tier && t("account_usage_tier_none")}
-                        }
-                        {account.role === "user" && !account.tier &&
-                            t("account_usage_tier_none")
-                        }
                         {config.enable_payments && account.role === "user" && (!account.tier || !account.tier.paid) &&
                             <Button
                                 variant="outlined"

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