Merge pull request #793 from nimbleghost/pwa-action-bar

Make action bar match theme colour when run as PWA

web/src/components/ActionBar.jsx

@@ -19,11 +19,14 @@ import Navigation from "./Navigation";
 import accountApi from "../app/AccountApi";
 import PopupMenu from "./PopupMenu";
 import { SubscriptionPopup } from "./SubscriptionPopup";
+import { useIsLaunchedPWA } from "./hooks";
 
 const ActionBar = (props) => {
   const theme = useTheme();
   const { t } = useTranslation();
   const location = useLocation();
+  const isLaunchedPWA = useIsLaunchedPWA();
+
   let title = "ntfy";
   if (props.selected) {
     title = topicDisplayName(props.selected);
@@ -32,6 +35,22 @@ const ActionBar = (props) => {
   } else if (location.pathname === routes.account) {
     title = t("action_bar_account");
   }
+
+  const getActionBarBackground = () => {
+    if (isLaunchedPWA) {
+      return "#317f6f";
+    }
+
+    switch (theme.palette.mode) {
+      case "dark":
+        return "linear-gradient(150deg, #203631 0%, #2a6e60 100%)";
+
+      case "light":
+      default:
+        return "linear-gradient(150deg, #338574 0%, #56bda8 100%)";
+    }
+  };
+
   return (
     <AppBar
       position="fixed"
@@ -44,10 +63,7 @@ const ActionBar = (props) => {
       <Toolbar
         sx={{
           pr: "24px",
-          background:
-            theme.palette.mode === "light"
-              ? "linear-gradient(150deg, #338574 0%, #56bda8 100%)"
-              : "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
+          background: getActionBarBackground(),
         }}
       >
         <IconButton

web/src/components/Navigation.jsx

@@ -132,7 +132,7 @@ const NavList = (props) => {
   return (
     <>
       <Toolbar sx={{ display: { xs: "none", sm: "block" } }} />
-      <List component="nav" sx={{ paddingTop: alertVisible ? "0" : "" }}>
+      <List component="nav" sx={{ paddingTop: { xs: 0, sm: alertVisible ? 0 : "" } }}>
         {showNotificationPermissionRequired && <NotificationPermissionRequired refreshPermissions={refreshPermissions} />}
         {showNotificationPermissionDenied && <NotificationPermissionDeniedAlert />}
         {showNotificationBrowserNotSupportedBox && <NotificationBrowserNotSupportedAlert />}