refactor: zindex layers of major components (#7279)

Co-authored-by: Cadence <[email protected]>
electricitymaps · Oct 7, 2024 · fb9efb0 · fb9efb0
1 parent 61e263d
commit fb9efb0
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 8 deletions.
diff --git a/web/src/components/MapOverlays.tsx b/web/src/components/MapOverlays.tsx
@@ -35,7 +35,7 @@ export default function MapOverlays() {
     : () => undefined;
 
   return (
-    <div className="pointer-events-none fixed top-12 z-20 m-3 flex flex-col items-end space-y-3 sm:bottom-0 sm:right-0 sm:top-auto ">
+    <div className="pointer-events-none fixed top-12 z-10 m-3 flex flex-col items-end space-y-3 sm:bottom-0 sm:right-0 sm:top-auto ">
       {isBiggerThanMobile && (
         <>
           {showManager && (

diff --git a/web/src/components/Toast.tsx b/web/src/components/Toast.tsx
@@ -95,7 +95,7 @@ export const Toast = forwardRef<ToastController, ToastProps>(function Toast(
         duration={duration}
         type="background"
         className={twMerge(
-          'fixed left-1/2 top-16 z-50 flex w-11/12 min-w-fit max-w-sm -translate-x-1/2 transform rounded-lg shadow',
+          'fixed left-1/2 top-16 z-40 flex w-11/12 min-w-fit max-w-sm -translate-x-1/2 transform rounded-lg shadow',
           'border border-solid border-neutral-50 bg-white/80 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-900',
           "before:content[''] before:absolute before:block before:h-full before:w-1 before:rounded-bl-md before:rounded-tl-md",
           color,

diff --git a/web/src/components/modals/OnboardingModalInner.tsx b/web/src/components/modals/OnboardingModalInner.tsx
@@ -56,7 +56,7 @@ function Modal({
   return (
     <>
       <div
-        className="absolute inset-0 z-40 bg-gray-800/20"
+        className="absolute inset-0 z-50 bg-gray-800/20"
         onClick={onDismiss}
         onKeyDown={onDismiss}
         role="presentation"

diff --git a/web/src/features/header/Header.tsx b/web/src/features/header/Header.tsx
@@ -63,7 +63,7 @@ export default function Header(): JSX.Element {
   return (
     <header
       className={twMerge(
-        'z-30 hidden w-full items-center justify-between bg-white px-4 shadow-[0_4px_6px_-2px_rgba(0,0,0,0.1)] dark:bg-gray-800 dark:shadow-[0_4px_6px_-2px_rgba(0,0,0,0.25)] md:pr-4',
+        'z-40 hidden w-full items-center justify-between bg-white px-4 shadow-[0_4px_6px_-2px_rgba(0,0,0,0.1)] dark:bg-gray-800 dark:shadow-[0_4px_6px_-2px_rgba(0,0,0,0.25)] md:pr-4',
         !isMobileApp && 'sm:block md:flex'
       )}
     >

diff --git a/web/src/features/map-controls/MapControls.tsx b/web/src/features/map-controls/MapControls.tsx
@@ -109,7 +109,7 @@ function DesktopMapControls() {
   };
 
   return (
-    <div className="pointer-events-none absolute right-3 top-2 z-30 hidden flex-col items-end md:flex">
+    <div className="pointer-events-none absolute right-3 top-2 z-20 hidden flex-col items-end md:flex">
       <div className="pointer-events-auto mb-16 flex flex-col items-end space-y-2">
         <ConsumptionProductionToggle />
         <SpatialAggregatesToggle />

diff --git a/web/src/features/panels/LeftPanel.tsx b/web/src/features/panels/LeftPanel.tsx
@@ -74,7 +74,7 @@ function CollapseButton({ isCollapsed, onCollapse }: CollapseButtonProps) {
     <button
       data-test-id="left-panel-collapse-button"
       className={
-        'absolute left-full top-2 z-10 h-12 w-6 cursor-pointer rounded-r bg-zinc-50 shadow-[6px_2px_10px_-3px_rgba(0,0,0,0.1)] hover:bg-zinc-100 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800'
+        'absolute left-full top-2 z-[21] h-12 w-6 cursor-pointer rounded-r bg-zinc-50 shadow-[6px_2px_10px_-3px_rgba(0,0,0,0.1)] hover:bg-zinc-100 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800'
       }
       onClick={onCollapse}
       aria-label={
@@ -105,7 +105,7 @@ function OuterPanel({ children }: { children: React.ReactNode }) {
   return (
     <div
       data-test-id="left-panel"
-      className={`absolute left-0 top-0 z-20 h-full w-full bg-zinc-50 shadow-xl transition-all duration-500 dark:bg-gray-900 dark:[color-scheme:dark] sm:flex sm:w-[calc(14vw_+_16rem)] ${
+      className={`absolute left-0 top-0 z-[21] h-full w-full bg-zinc-50 shadow-xl transition-all duration-500 dark:bg-gray-900 dark:[color-scheme:dark] sm:flex sm:w-[calc(14vw_+_16rem)] ${
         location.pathname === '/map' ? 'hidden' : ''
       } ${isOpen ? '' : '-translate-x-full'}`}
     >

diff --git a/web/src/features/time/TimeControllerWrapper.tsx b/web/src/features/time/TimeControllerWrapper.tsx
@@ -39,7 +39,7 @@ function BottomSheetWrappedTimeController() {
 
 function FloatingTimeController() {
   return (
-    <div className="fixed bottom-3 left-3 z-20 w-[calc(14vw_+_16rem)] rounded-xl bg-white px-4 py-3 shadow-xl drop-shadow-2xl dark:bg-gray-800 min-[780px]:w-[calc((14vw_+_16rem)_-_30px)] xl:px-5">
+    <div className="fixed bottom-3 left-3 z-30 w-[calc(14vw_+_16rem)] rounded-xl bg-white px-4 py-3 shadow-xl drop-shadow-2xl dark:bg-gray-800 min-[780px]:w-[calc((14vw_+_16rem)_-_30px)] xl:px-5">
       <TimeController />
     </div>
   );