Improve overview page button state styles (#180)

mongodb-js · Oct 9, 2020 · 30a5503 · 30a5503
1 parent 1c49830
commit 30a5503
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/views/webview-app/components/connect-helper/connect-helper.less b/src/views/webview-app/components/connect-helper/connect-helper.less
@@ -30,21 +30,32 @@
   height: 32px;
   border-radius: 3px;
   color: #ffffff;
+  transition: 250ms all;
 
   &:hover {
     cursor: pointer;
   }
 }
 
 .connect-helper-connection-string-button {
-  background-color: rgb(41, 41, 41);
+  background-color: #292929;
   border-color: transparent;
+
+  &:hover {
+    background-color: #393939;
+  }
 }
 
 .connect-helper-connection-form-button {
   background: none;
   color: var(--vscode-editor-foreground);
   border-color: var(--vscode-editor-foreground);
+  transition: 250ms all;
+
+  &:hover {
+    background-color: #FFFFFF;
+    color: #292929;
+  }
 }
 
 .connect-connection-string-area {

diff --git a/src/views/webview-app/components/connection-status/connection-status.less b/src/views/webview-app/components/connection-status/connection-status.less
@@ -26,8 +26,10 @@
   width: 161px;
   color: white;
   background-color: #13AA52;
+  transition: 250ms all;
 
   &:hover {
     cursor: pointer;
+    background-color: #3F864B;
   }
 }
diff --git a/src/views/webview-app/components/info-sprinkle/info-sprinkle.less b/src/views/webview-app/components/info-sprinkle/info-sprinkle.less
@@ -4,15 +4,16 @@
   text-rendering: auto;
   margin: 0;
   margin-top: 3px;
-  vertical-align: middle;
 }
 
 .info-sprinkle {
   cursor: pointer;
-  color: rgba(170, 170, 170, 0.7);
+  color: var(--vscode-editor-foreground);
   padding: 0px 5px;
+  vertical-align: top;
+  transition: 250ms all;
 
   &:hover {
-    color: #fbb129;
+    color: #C3E7CA;
   }
 }