From f37a095ef9a4329e6bc79f4797fb59ae5f8d650b Mon Sep 17 00:00:00 2001
From: mmeigs <matt.meigs@mongodb.com>
Date: Thu, 3 Oct 2024 12:06:09 -0400
Subject: [PATCH] DOP-5044: deprecated sites dark mode dropdown direction fixed
 (#1264)

---
 src/components/ActionBar/ActionBar.js        | 2 +-
 src/components/ActionBar/DarkModeDropdown.js | 5 ++++-
 src/components/ActionBar/styles.js           | 6 +++---
 tests/unit/DarkModeDropdown.test.js          | 6 ++++++
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
index d921a7a46..160a4183b 100644
--- 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
index 1090b2a6f..79e31c986 100644
--- 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
index b8063c62f..0614f330a 100644
--- 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
index 42b8f9431..2cc8491e0 100644
--- 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(() => ({}));