changes description titles to reflect light/dark mode changes.

jasonhawkharris · jasonhawkharris · commit a36928009cd7 · 2021-09-16T11:42:29.000-05:00
diff --git a/src/Components/Command/GeneratedCommand.css b/src/Components/Command/GeneratedCommand.css
@@ -13,15 +13,20 @@
     font-family: "Source Code Pro", monospace;
     font-weight: normal;
     font-size: .9rem;
-    background-color: var(--sg-bg-dark-3);
+    background-color: #000000;
     padding-top: 25px;
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 25px;
-    color: #ffffff;
+    color: var(--sg-mint);
     border-radius: 3px;
 }
 
+.generated-command.dark {
+    background-color: var(--sg-bg-dark-3);
+    color: #ffffff;
+}
+
 .btns-container {
     width: 100%;
     max-width: 800px;
diff --git a/src/Components/Command/GeneratedCommand.jsx b/src/Components/Command/GeneratedCommand.jsx
@@ -28,7 +28,7 @@ export default function GeneratedCommand({
 
     return (
         <div className="generated-command-container">
-            <div className="generated-command">
+            <div className={`generated-command ${mode === "dark" ? "dark" : "light"}`}>
                 {selectedDeployment === 'select-deployment' ? (
                     <>
                         [SELECT DEPLOYMENT TYPE and FUNCTION]
diff --git a/src/Components/Descriptions/Descriptions.css b/src/Components/Descriptions/Descriptions.css
@@ -11,7 +11,7 @@
     flex-flow: column nowrap;
 }
 
-.desc-item {
+.desc-item.dark {
     color: white;
 }
 
