style: update webview green based on vscode theme type VSCODE-297 (#363)

Author: Anemy

src/views/webview-app/components/app.less

@@ -0,0 +1,23 @@
+@import "~../styles/_variables";
+
+:root {
+  // NOTE: This green is updated in the code dynamically
+  // and updates on the current color theme of vscode (light vs dark).
+  --mongodb-green: @green;
+}
+
+a {
+  color: var(--mongodb-green);
+}
+
+a:hover {
+  color: var(--mongodb-green);
+}
+
+*:focus {
+  outline-color: @green-selected;
+}
+
+a:focus {
+  outline-color: @green-selected;
+}

src/views/webview-app/components/app.tsx

@@ -17,6 +17,8 @@ import {
 
 const styles = require('../connect.module.less');
 
+import './app.less';
+
 type DispatchProps = {
   onConnectedEvent: (
     connectionAttemptId: string,
@@ -34,6 +36,23 @@ type DispatchProps = {
 };
 
 export class App extends React.Component<DispatchProps> {
+  constructor(props) {
+    super(props);
+
+    // Update the MongoDB green color we used based on the current
+    // theme kind of the VSCode user.
+    const element = document.querySelector('body');
+    if (element?.getAttribute('data-vscode-theme-kind') === 'vscode-light') {
+      document.documentElement.style.setProperty(
+        '--mongodb-green', '#00684A' // Forest green
+      );
+    } else {
+      document.documentElement.style.setProperty(
+        '--mongodb-green', '#00ED64' // Base green
+      );
+    }
+  }
+
   componentDidMount(): void {
     window.addEventListener('message', (event) => {
       const message: MESSAGE_FROM_EXTENSION_TO_WEBVIEW = event.data;

src/views/webview-app/components/atlas-cta/atlas-cta.less

@@ -15,10 +15,6 @@
   margin: 0 32px;
 }
 
-.atlas-cta-text-link {
-  color: @green;
-}
-
 .atlas-cta-logo {
   display: inline-block;
   margin-left: auto;

src/views/webview-app/components/connect-form/connection-form.less

@@ -77,7 +77,7 @@
   margin-bottom: -1px;
   pointer-events: none;
   outline: none;
-  background-color: @green;
+  background-color: var(--mongodb-green);
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   animation-name: selectedConnectionTabAnimation;

src/views/webview-app/components/connection-status/connection-status.less

@@ -25,7 +25,7 @@
 }
 
 .connection-status-dot-connected:before {
-  background-color: @green;
+  background-color: var(--mongodb-green);
 }
 
 .connection-status-dot-disconnected:before {
@@ -47,19 +47,24 @@
 
 .connection-status-create-playground-button {
   display: inline-block;
-  border: none;
+  border: 1px solid rgb(21, 130, 66);
   border-radius: 3px;
   margin: 0 20px;
   margin-top: 20px;
   height: 32px;
   width: 161px;
+  transition: 150ms all;
   color: white;
-  background-color: #13aa52;
-  transition: 250ms all;
+  background-color: var(--mongodb-green);
+  background-image: linear-gradient(rgb(19, 170, 82), rgb(24, 150, 76));
+  box-shadow: rgb(21, 130, 66) 0px -1px 0px inset;
 
   &:hover {
     cursor: pointer;
-    background-color: #3F864B;
+    color: white;
+    background-color: #109648;
+    background-image: linear-gradient(#129f4c, #148040);
+    border-color: rgb(21, 130, 66);
   }
 }
 

src/views/webview-app/components/form/form.less

@@ -114,7 +114,7 @@
 }
 
 .btn {
-  background-color: @green;
+  background-color: var(--mongodb-green);;
   padding: 9px 28px 10px;
   margin: 6px 0 0 0;
   display: inline-block;
@@ -142,8 +142,8 @@
 
 .btn-primary {
   color: white;
-  background-color: @green;
-  background-image: linear-gradient(@green, rgb(24, 150, 76));
+  background-color: var(--mongodb-green);
+  background-image: linear-gradient(rgb(19, 170, 82), rgb(24, 150, 76));
 
   border-color: rgb(21, 130, 66);
   box-shadow: rgb(21, 130, 66) 0px -1px 0px inset;
@@ -190,7 +190,7 @@
 
   &-success {
     color: white;
-    background: @green;
+    background: var(--mongodb-green);
     padding: 4px 10px;
     border-radius: 3px;
   }

src/views/webview-app/components/mongodb-logo/mongodb-logo.tsx

@@ -8,10 +8,18 @@ const styles = require('./mongodb-logo.less');
 
 class MongoDBLogo extends React.PureComponent {
   render(): React.ReactNode {
+    let darkMode = true;
+    // Update the MongoDB green color we used based on the current
+    // theme kind of the VSCode user.
+    const element = document.querySelector('body');
+    if (element?.getAttribute('data-vscode-theme-kind') === 'vscode-light') {
+      darkMode = false;
+    }
+
     return (
       <LeafyGreenMongoDBLogo
         className={styles['mdb-logo-svg']}
-        color={'green-base'}
+        color={darkMode ? 'green-base' : 'green-dark-2'}
       />
     );
   }

src/views/webview-app/components/resources-panel/resources-panel.less

@@ -76,7 +76,7 @@
 
 .resources-panel-header {
   font-size: 21px;
-  color: @green;
+  color: var(--mongodb-green);
   text-align: left;
 }
 

src/views/webview-app/connect.module.less

@@ -1,17 +1,5 @@
 @import "~./styles/_variables";
 
-a:hover {
-  color: @green;
-}
-
-*:focus {
-  outline-color: @green-selected;
-}
-
-a:focus {
-  outline-color: @green-selected;
-}
-
 .page {
   display: flex;
   flex-direction: row;
@@ -35,13 +23,6 @@ a:focus {
   }
 }
 
-label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
 .connect-form-help-panel {
   margin: 30px;
   display: inline-block;
@@ -51,8 +32,15 @@ label {
 .connect {
   min-width: 700px;
 
+  label {
+    display: inline-block;
+    max-width: 100%;
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
   &-is-connected {
-    border: 2px solid @green;
+    border: 2px solid var(--mongodb-green);
   }
 
   ::-webkit-scrollbar {