From 6b4c04c390c45b16b72729ba1f7ac8198bd2fc10 Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Thu, 29 Jun 2023 00:22:58 +0200
Subject: [PATCH] Make action bar match theme colour when run as PWA

---
 web/src/components/ActionBar.jsx  | 24 ++++++++++++++++++++----
 web/src/components/Navigation.jsx |  2 +-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/src/components/ActionBar.jsx b/web/src/components/ActionBar.jsx
index 62a16286..1f41aac0 100644
--- a/web/src/components/ActionBar.jsx
+++ b/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
diff --git a/web/src/components/Navigation.jsx b/web/src/components/Navigation.jsx
index 41b2b0ce..855fd63b 100644
--- a/web/src/components/Navigation.jsx
+++ b/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 />}