From 47ebc4cd5799a3fc371ed647ecb012158d39fe00 Mon Sep 17 00:00:00 2001
From: Lawrence Owen <lawrence.owen@terria.io>
Date: Thu, 13 Feb 2025 11:16:07 +1000
Subject: [PATCH] Adjust navigation and map control positions Change trainer
 bar background color

---
 .../Map/MapNavigation/MapNavigation.tsx           |  2 +-
 lib/ReactViews/Map/MenuBar/menu-bar.scss          |  2 +-
 .../Notification/NotificationWindow.jsx           |  1 +
 .../TrainerBar/TrainerBar.tsx                     | 15 ++++++++++-----
 lib/Sass/common/_variables.scss                   |  2 +-
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/lib/ReactViews/Map/MapNavigation/MapNavigation.tsx b/lib/ReactViews/Map/MapNavigation/MapNavigation.tsx
index d7d63e8570..c231b1cde8 100644
--- a/lib/ReactViews/Map/MapNavigation/MapNavigation.tsx
+++ b/lib/ReactViews/Map/MapNavigation/MapNavigation.tsx
@@ -46,7 +46,7 @@ const StyledMapNavigation = styled.div<StyledMapNavigationProps>`
   @media (min-width: ${(props) => props.theme.sm}px) {
     top: 80px;
     bottom: 50px;
-    right: 16px;
+    right: 21px;
   }
   @media (max-width: ${(props) => props.theme.mobile}px) {
     & > div {
diff --git a/lib/ReactViews/Map/MenuBar/menu-bar.scss b/lib/ReactViews/Map/MenuBar/menu-bar.scss
index 0f2252a83c..4ca811f9d4 100644
--- a/lib/ReactViews/Map/MenuBar/menu-bar.scss
+++ b/lib/ReactViews/Map/MenuBar/menu-bar.scss
@@ -5,7 +5,7 @@
   z-index: 108;
   top: variables.$map-button-top;
   left: variables.$work-bench-width;
-  right: variables.$padding;
+  right: variables.$padding * 2;
 
   // todo: find some non-layout-change animation technique for
   // this flex-menu-bar-workbench problem
diff --git a/lib/ReactViews/Notification/NotificationWindow.jsx b/lib/ReactViews/Notification/NotificationWindow.jsx
index d2bca5c373..3cc38c678c 100644
--- a/lib/ReactViews/Notification/NotificationWindow.jsx
+++ b/lib/ReactViews/Notification/NotificationWindow.jsx
@@ -70,6 +70,7 @@ const NotificationWindow = createReactClass({
       height: defined(this.props.height) ? this.props.height : "auto",
       width: defined(this.props.width) ? this.props.width : "500px"
     };
+    const isStory = type === "story";
 
     return (
       <div className={classNames(Styles.wrapper, `${type}`)}>
diff --git a/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx b/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx
index 81e86e8956..bc74d7c26d 100644
--- a/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx
+++ b/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx
@@ -28,7 +28,10 @@ import CloseButton from "../../Generic/CloseButton";
 
 const TrainerBarWrapper = styled(Box)<{ isMapFullScreen: boolean }>`
   top: 0;
-  left: ${(p) => (p.isMapFullScreen ? 0 : Number(p.theme.workbenchWidth))}px;
+  left: ${(p) =>
+    p.isMapFullScreen
+      ? 0
+      : Number(p.theme.workbenchWidth) + Number(p.theme.workbenchMargin) * 2}px;
   z-index: ${(p) => Number(p.theme.frontComponentZIndex) + 100};
 `;
 
@@ -205,7 +208,7 @@ class StepAccordionRaw extends React.Component<
               // the relative width in its clone
               padding-right: 60px;
             `}
-            backgroundColor={theme.textBlack}
+            backgroundColor={theme.darkMid}
             ref={(component: any) => (this.refToMeasure = component)}
           >
             {renderStep(
@@ -265,7 +268,7 @@ class StepAccordionRaw extends React.Component<
           <BoxTrainerExpandedSteps
             column
             position="absolute"
-            backgroundColor={theme.textBlack}
+            backgroundColor={theme.darkMid}
             fullWidth
             paddedRatio={4}
             overflowY={"auto"}
@@ -346,7 +349,9 @@ export const TrainerBar = observer((props: TrainerBarProps) => {
       styledWidth={
         isMapFullScreen
           ? "100%"
-          : `calc(100% - ${Number(theme.workbenchWidth)}px)`
+          : `calc(100% - ${Number(
+              Number(theme.workbenchWidth) + Number(theme.workbenchMargin) * 2
+            )}px)`
       }
       isMapFullScreen={isMapFullScreen}
       onClick={() => viewState.setTopElement("TrainerBar")}
@@ -356,7 +361,7 @@ export const TrainerBar = observer((props: TrainerBarProps) => {
         fullHeight
         centered
         justifySpaceBetween
-        backgroundColor={theme.textBlack}
+        backgroundColor={theme.darkMid}
       >
         {/* Trainer Items Dropdown */}
         <Box css={"min-height: 64px;"}>
diff --git a/lib/Sass/common/_variables.scss b/lib/Sass/common/_variables.scss
index f05142f746..43849977e1 100644
--- a/lib/Sass/common/_variables.scss
+++ b/lib/Sass/common/_variables.scss
@@ -142,7 +142,7 @@ $font-weight-normal: 400;
 $font-weight-light: 100;
 
 $map-button-color: #9ca1aa;
-$map-button-top: 18px;
+$map-button-top: 21px;
 $trainer-height: 64px;
 $map-button-border-radius: 4px;
 $work-bench-width: 350px;