Skip to content

Commit

Permalink
refactor: zindex layers of major components (#7279)
Browse files Browse the repository at this point in the history
Co-authored-by: Cadence <cadence@Cadences-MacBook-Pro.local>
  • Loading branch information
cadeban and Cadence authored Oct 7, 2024
1 parent 61e263d commit fb9efb0
Show file tree
Hide file tree
Showing 7 changed files with 8 additions and 8 deletions.
2 changes: 1 addition & 1 deletion web/src/components/MapOverlays.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/Toast.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/modals/OnboardingModalInner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion web/src/features/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
)}
>
Expand Down
2 changes: 1 addition & 1 deletion web/src/features/map-controls/MapControls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
4 changes: 2 additions & 2 deletions web/src/features/panels/LeftPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down Expand Up @@ -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'}`}
>
Expand Down
2 changes: 1 addition & 1 deletion web/src/features/time/TimeControllerWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit fb9efb0

Please sign in to comment.