Merge branch 'main' into DOP-5058-font-weight-step

mongodb · Oct 16, 2024 · 77c6aa6 · 77c6aa6
2 parents b4849a5 + 1502ac8
commit 77c6aa6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/src/components/Procedure/index.js b/src/components/Procedure/index.js
@@ -13,6 +13,12 @@ import Step from './Step';
 
 const StyledProcedure = styled('div')`
   margin-top: ${theme.size.default};
+
+  .dark-theme & {
+    color: ${palette.gray.light2};
+    background-color: ${palette.black};
+  }
+
   ${({ procedureStyle }) =>
     procedureStyle === 'connected' &&
     `
@@ -24,10 +30,6 @@ const StyledProcedure = styled('div')`
     }
  
   `}
-  ${({ darkMode }) =>
-    `
-    background-color: ${darkMode ? palette.black : 'initial'};
-    color: ${darkMode ? palette.gray.light2 : 'initial'};`}
 `;
 
 // Returns an array of all "step" nodes nested within the "procedure" node and nested "include" nodes

diff --git a/tests/unit/__snapshots__/Procedure.test.js.snap b/tests/unit/__snapshots__/Procedure.test.js.snap
@@ -4,8 +4,11 @@ exports[`renders correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin-top: 16px;
-  background-color: initial;
-  color: initial;
+}
+
+.dark-theme .emotion-0 {
+  color: #E8EDEB;
+  background-color: #001E2B;
 }
 
 @media only screen and (max-width: 1024px) {
@@ -226,8 +229,11 @@ exports[`renders steps nested in include nodes 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin-top: 16px;
-  background-color: initial;
-  color: initial;
+}
+
+.dark-theme .emotion-0 {
+  color: #E8EDEB;
+  background-color: #001E2B;
 }
 
 @media only screen and (max-width: 1024px) {
@@ -795,8 +801,11 @@ exports[`renders with "normal" or YAML steps styling 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin-top: 16px;
-  background-color: initial;
-  color: initial;
+}
+
+.dark-theme .emotion-0 {
+  color: #E8EDEB;
+  background-color: #001E2B;
 }
 
 .emotion-2 {