Merge pull request #2932 from Hyperkid123/dark-mode

Fix all services dropdown and preview banner offset.
RedHatInsights · Sep 17, 2024 · 1861a45 · 1861a45
2 parents 3e365d1 + 930c32b
commit 1861a45
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/AllServicesDropdown/AllServicesDropdown.scss b/src/components/AllServicesDropdown/AllServicesDropdown.scss
@@ -14,10 +14,18 @@
   @media screen and (min-width: $pf-v5-global--breakpoint--2xl) {
     top: 70px;
     height: 100vh;
+    &.preview-offset {
+      // consider the preview banner
+      top: calc(70px + 32px);
+    }
   }
   @media screen and (max-width: $pf-v5-global--breakpoint--2xl) {
     top: 118px;
     height: 100vh;
+    &.preview-offset {
+      // consider the preview banner
+      top: calc(118px + 32px);
+    }
   }
 
   // pos has to be important to override PF styles that get lazy loaded!

diff --git a/src/components/AllServicesDropdown/AllServicesMenu.tsx b/src/components/AllServicesDropdown/AllServicesMenu.tsx
@@ -7,6 +7,8 @@ import { Panel, PanelMain } from '@patternfly/react-core/dist/dynamic/components
 import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core/dist/dynamic/components/Sidebar';
 import { TabContent } from '@patternfly/react-core/dist/dynamic/components/Tabs';
 import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
+import { useAtomValue } from 'jotai';
+import classNames from 'classnames';
 
 import TimesIcon from '@patternfly/react-icons/dist/dynamic/icons/times-icon';
 import type { AllServicesSection } from '../AllServices/allServicesLinks';
@@ -16,6 +18,7 @@ import AllServicesGallery from './AllServicesGallery';
 import { ServiceTileProps } from '../FavoriteServices/ServiceTile';
 import QuickAccess from '../FavoriteServices/QuickAccess';
 import { AllServicesDropdownContext } from './common';
+import { hidePreviewBannerAtom } from '../../state/atoms/releaseAtom';
 
 export type AllServicesMenuProps = {
   setIsOpen: (isOpen: boolean) => void;
@@ -32,6 +35,7 @@ const AllServicesMenu = ({ setIsOpen, isOpen, menuRef, linkSections, favoritedSe
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(FAVORITE_TAB_ID);
   const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
   const [selectedService, setSelectedService] = React.useState<AllServicesSection>(linkSections[0]);
+  const hideBanner = useAtomValue(hidePreviewBannerAtom);
 
   // Toggle currently active tab
   const handleTabClick = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, tabIndex: string | number) => {
@@ -69,7 +73,9 @@ const AllServicesMenu = ({ setIsOpen, isOpen, menuRef, linkSections, favoritedSe
     >
       <div
         ref={menuRef}
-        className="pf-v5-u-w-100 chr-c-page__services-nav-dropdown-menu"
+        className={classNames('pf-v5-u-w-100 chr-c-page__services-nav-dropdown-menu', {
+          'preview-offset': !hideBanner,
+        })}
         data-testid="chr-c__find-app-service"
         onClick={handleClickOutside}
       >