fix: remove nested backdrop-filter on chrome (#213)

* fix: remove nested backdrop-filter on chrome Unfortunately due to a chromium bug that is 3 years old. Some UI features will need to be disabled on chrome completely. https://bugs.chromium.org/p/chromium/issues/detail?id=1318678&q=backdrop-filter%20nested&can=2 * add: toast for compatibility warning
emoss08 · Jan 18, 2024 · c159ea3 · c159ea3
1 parent 863c0aa
commit c159ea3
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to Trenova will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+> **Note:** Section for upcoming changes not yet released.
+
+## [0.0.2] - 2024-01-18
+
+### Changed
+- Disabled nested backdrop-filter on Chrome due to Chromium bug.
+    - Related Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1318678&q=backdrop-filter%20nested&can=2
+- Add toast to notify users of unsupported browsers.
+
+## [0.0.1] - 2024-01-16
+
+### Changed
+- Initial release.
+    - Changelog will be updated moving forward from this release. If you'd like to see the changes made prior to this release, refer to the [commit history](https://github.com/emoss08/Trenova/commits/master/) or [issue tracking system](https://github.com/emoss08/Trenova/issues).
+
+---
+
+For more details on each change, refer to the [Trenova](https://github.com/emoss08/trenova) or issue tracking system.
diff --git a/client/package.json b/client/package.json
@@ -57,6 +57,7 @@
     "react-colorful": "^5.6.1",
     "react-datepicker": "^4.25.0",
     "react-day-picker": "^8.10.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
     "react-hook-form": "^7.49.3",

diff --git a/client/src/components/layout/layout.tsx b/client/src/components/layout/layout.tsx
@@ -21,10 +21,13 @@ import { SiteSearch, SiteSearchInput } from "@/components/layout/site-search";
 import TeamSwitcher from "@/components/layout/team-switcher";
 import { RainbowTopBar } from "@/components/layout/topbar";
 import { UserAvatarMenu } from "@/components/layout/user-avatar-menu";
+import { TOAST_STYLE } from "@/lib/constants";
 import { useUserStore } from "@/stores/AuthStore";
-import React from "react";
-import { Toaster } from "react-hot-toast";
+import React, { useEffect } from "react";
+import { isChrome } from "react-device-detect";
+import toast, { Toaster } from "react-hot-toast";
 import { useLocation } from "react-router-dom";
+import { Button } from "../ui/button";
 import { AppGridMenu } from "./app-grid";
 import { AsideMenuSheet } from "./aside-menu";
 import { Breadcrumb } from "./breadcrumb";
@@ -42,11 +45,51 @@ export function Layout({ children }: { children: React.ReactNode }) {
   const hideHeader = queryParams.get("hideHeader") === "true";
   // useQueryInvalidationListener();
 
+  // React useEffect hook to show a warning that some UI features are disabled in Chrome. With Button that sets a value in local storage to hide the warning.
+  useEffect(() => {
+    const hideWarning = localStorage.getItem("hideChromeWarning");
+
+    if (isChrome && !hideWarning) {
+      toast(
+        (t) => (
+          <div className="text-foreground group pointer-events-auto relative flex w-full items-center justify-between space-x-2">
+            <div className="grid gap-1">
+              <div className="text-sm font-semibold [&+div]:text-xs">
+                Compatibility Warning
+              </div>
+              <div className="text-sm opacity-90">
+                Some UI features are disabled in Chrome
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              className="h-8 px-3 text-sm font-medium"
+              onClick={() => {
+                localStorage.setItem("hideChromeWarning", "true");
+                toast.dismiss(t.id);
+              }}
+            >
+              Acknowledge
+            </Button>
+          </div>
+        ),
+        {
+          style: TOAST_STYLE,
+          duration: Infinity,
+          ariaProps: {
+            role: "status",
+            "aria-live": "polite",
+          },
+        },
+      );
+    }
+  }, []);
+
   return (
     <div className="bg-background flex h-screen flex-col" id="app">
       <Toaster position="bottom-right" />
       {!hideHeader && (
-        <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <header className="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur">
           <RainbowTopBar />
           <div className="flex h-14 w-full items-center justify-between px-4">
             <div className="flex items-center gap-x-4">

diff --git a/client/src/components/layout/nav-links.tsx b/client/src/components/layout/nav-links.tsx
@@ -130,7 +130,7 @@ export function LinksComponent({ linkData }: LinksComponentProps) {
 
   return (
     <ul
-      className={`relative grid w-[400px] gap-3 bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/80 ${
+      className={`relative grid w-[400px] gap-3 p-4 ${
         activeSubLinks ? "pt-8" : ""
       } md:w-[500px] md:grid-cols-2 lg:w-[700px]`}
     >

diff --git a/client/src/components/layout/navbar.tsx b/client/src/components/layout/navbar.tsx
@@ -40,6 +40,7 @@ import {
 import { cn } from "@/lib/utils";
 import { useHeaderStore } from "@/stores/HeaderStore";
 import React from "react";
+import { isChrome } from "react-device-detect";
 import { Link, useLocation } from "react-router-dom";
 import { FooterContainer } from "../common/footer";
 import { LinksComponent } from "./nav-links";
@@ -97,7 +98,12 @@ const NavigationMenuItemWithPermission = React.memo(
               >
                 {data.label}
               </NavigationMenuTrigger>
-              <NavigationMenuContent>
+              <NavigationMenuContent
+                className={`bg-background ${
+                  !isChrome &&
+                  "bg-background/95 supports-[backdrop-filter]:bg-background/60 backdrop-blur"
+                }`}
+              >
                 {data.content}
                 {data.footerContent && (
                   <FooterContainer className="p-3">