DOP-5044: deprecated sites dark mode dropdown direction fixed (#1264)

mongodb · Oct 3, 2024 · f37a095 · f37a095
1 parent f25dc0d
commit f37a095
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -19,7 +19,7 @@ import DarkModeDropdown from './DarkModeDropdown';
 import SearchInput from './SearchInput';
 import { ActionBarSearchContainer, ActionsBox, actionBarStyling, getContainerStyling, overlineStyling } from './styles';
 
-const DEPRECATED_PROJECTS = ['atlas-app-services', 'datalake', 'realm'];
+export const DEPRECATED_PROJECTS = ['atlas-app-services', 'datalake', 'realm'];
 
 const ActionBar = ({ template, slug, sidenav, ...props }) => {
   const url = isBrowser ? window.location.href : null;

diff --git a/src/components/ActionBar/DarkModeDropdown.js b/src/components/ActionBar/DarkModeDropdown.js
@@ -7,7 +7,9 @@ import { DarkModeContext } from '../../context/dark-mode-context';
 import { theme } from '../../theme/docsTheme';
 import IconDarkmode from '../icons/DarkMode';
 import useScreenSize from '../../hooks/useScreenSize';
+import useSnootyMetadata from '../../utils/use-snooty-metadata';
 import DarkModeGuideCue from './DarkModeGuideCue';
+import { DEPRECATED_PROJECTS } from './ActionBar';
 
 const iconStyling = css`
   display: block;
@@ -31,6 +33,7 @@ const darkModeSvgStyle = {
 };
 
 const DarkModeDropdown = () => {
+  const metadata = useSnootyMetadata();
   const dropdownRef = useRef();
 
   // not using dark mode from LG/provider here to account for case of 'system' dark theme
@@ -47,7 +50,7 @@ const DarkModeDropdown = () => {
   );
 
   const { isTabletOrMobile } = useScreenSize();
-  const justify = isTabletOrMobile ? 'start' : 'end';
+  const justify = isTabletOrMobile || DEPRECATED_PROJECTS.includes(metadata.project) ? 'start' : 'end';
 
   return (
     <>

diff --git a/src/components/ActionBar/styles.js b/src/components/ActionBar/styles.js
@@ -212,16 +212,16 @@ export const ActionsBox = styled('div')`
   column-gap: ${theme.size.default};
   position: relative;
   top: 0;
-  padding: 0 ${theme.size.large} 0 ${theme.size.medium};
+  margin: 0 ${theme.size.large} 0 ${theme.size.medium};
   justify-self: flex-end;
   grid-column: -2/-1;
 
   @media ${theme.screenSize.upToLarge} {
-    padding-right: ${theme.size.medium};
+    margin-right: ${theme.size.medium};
   }
 
   @media ${theme.screenSize.upToMedium} {
-    padding-left: ${theme.size.small};
+    margin-left: ${theme.size.small};
     column-gap: ${theme.size.small};
   }
 `;

diff --git a/tests/unit/DarkModeDropdown.test.js b/tests/unit/DarkModeDropdown.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { DarkModeContext } from '../../src/context/dark-mode-context';
+import * as snootyMetadata from '../../src/utils/use-snooty-metadata';
 import * as MediaHooks from '../../src/hooks/use-media';
 import DarkModeDropdown from '../../src/components/ActionBar/DarkModeDropdown';
 
@@ -14,6 +15,11 @@ const setDarkModePref = jest.fn((value) => {
   darkModePref = value;
 });
 
+// mock useSnootyMetadata
+jest.spyOn(snootyMetadata, 'default').mockImplementation(() => ({
+  project: 'landing',
+}));
+
 // mock useMedia
 jest.spyOn(MediaHooks, 'default').mockImplementation(() => ({}));