Merge pull request #1727 from oodamien

* pr/1727:
  Update colors of the dependencies modal

Closes gh-1727

Author: mhalbritter

start-client/src/styles/_dark.scss

@@ -390,14 +390,29 @@ body.dark {
     color: $dark-color;
   }
   .dialog-dependencies ul li a.dependency.added {
-    background: darken($dark-primary, 10);
+    background: #145374;
+    color: $dark-color;
+  }
+  .dialog-dependencies ul li a.dependency.added:hover {
+    background: darken(#145374, 5%);
+    color: $dark-color;
+  }
+  .dialog-dependencies ul li a.dependency.added:hover strong {
+    color: $dark-color;
+  }
+  .dialog-dependencies ul li a.dependency.added .icon-enter {
+    fill: $dark-color;
   }
   .dialog-dependencies ul li.group-title span,
   .dialog-dependencies ul li a.dependency.selected,
   ul.dependencies-list li div span.group,
   .dialog-dependencies ul li a.dependency span.group {
     background: $dark-primary;
   }
+  .dialog-dependencies ul li a.dependency.added.selected {
+    background: darken(#145374, 5%);
+    color: $dark-color;
+  }
   .dialog-dependencies ul li a.dependency.selected span.group {
     background: white;
   }

start-client/src/styles/_main.scss

@@ -954,25 +954,28 @@ button.button {
           right: 15px;
         }
         &.added {
-          color: white;
-          background: darken($light-primary, 10);
+          color: $light-color;
+          background: #e8f5f9;
           margin-bottom: -1px;
           margin-top: -1px;
           padding: 13px 1rem;
           padding-right: 45px;
-          box-shadow: inset 0 1px 0 rgba(white, 0.2);
+          box-shadow: inset 0 1px 0 rgba(black, 0.1);
           &:hover {
+            color: $light-color;
+            background: darken(#e8f5f9, 5%);
             strong {
-              color: white;
+              color: $light-color;
+            }
+            .icon-enter {
+              display: block;
+              fill: $light-color;
             }
           }
           span.group {
             background: white;
             color: $light-color;
           }
-          .icon-enter {
-            display: block;
-          }
         }
         &.selected {
           color: white;
@@ -994,6 +997,20 @@ button.button {
           .icon-enter {
             display: block;
           }
+          &.added {
+            color: $light-color;
+            background: darken(#e8f5f9, 5%);
+            .icon-enter {
+              fill: $light-color;
+            }
+            &:hover {
+              color: $light-color;
+              background: darken(#e8f5f9, 5%);
+              strong {
+                color: $light-color;
+              }
+            }
+          }
         }
         &.disabled,
         &.disabled:hover,