Dark theme for the right sidebar

Web IDE right sidebar now supports dark theme

app/assets/stylesheets/page_bundles/_ide_mixins.scss

@@ -9,7 +9,6 @@
     top: 0;
     font-size: 12px;
     border-top-right-radius: $border-radius-default;
-    margin-left: -$gl-padding;
 
     .controllers {
       @include build-controllers(15px, center, false, 0, inline, 0);

app/assets/stylesheets/page_bundles/ide.scss

@@ -890,7 +890,7 @@ $ide-commit-header-height: 48px;
 
   .multi-file-commit-panel-inner {
     width: 350px;
-    padding: $grid-size $gl-padding;
+    padding: $grid-size 0;
     background-color: $white;
     border-left: 1px solid $white-dark;
   }
@@ -924,6 +924,7 @@ $ide-commit-header-height: 48px;
 .ide-pipeline-list {
   flex: 1;
   overflow: auto;
+  padding: 0 $gl-padding;
 }
 
 .ide-pipeline-header {
@@ -966,6 +967,7 @@ $ide-commit-header-height: 48px;
 
 .ide-job-header {
   min-height: 60px;
+  padding: 0 $gl-padding;
 }
 
 .ide-nav-form {

app/assets/stylesheets/page_bundles/themes/_dark.scss

@@ -27,10 +27,13 @@
   $btn-disabled-border: rgba(223, 223, 223, 0.24);
   $btn-disabled-color: rgba(145, 145, 145, 0.48);
 
+  $dropdown-background: #404040;
+  $dropdown-hover-background: #525252;
+
   $diff-insert: rgba(155, 185, 85, 0.2);
   $diff-remove: rgba(255, 0, 0, 0.2);
 
-  a {
+  a:not(.btn) {
     color: $link-color;
   }
 
@@ -54,22 +57,38 @@
   textarea,
   .md-area.is-focused,
   .ide-entry-dropdown-toggle,
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill,
+  .badge.badge-pill,
+  .ide-navigator-button,
+  .bs-callout {
     color: $text-color;
   }
 
+  .drag-handle:hover,
+  .card-header .badge.badge-pill {
+    background-color: $dropdown-hover-background;
+  }
+
   .modal-body {
     color: $gl-text-color;
   }
 
   .dropdown-menu-toggle svg,
   .dropdown-menu-toggle svg:hover,
-  .ide-tree-header svg,
+  .ide-tree-header:not(.ide-pipeline-header) svg,
   .file-row .file-row-icon svg,
-  .file-row:hover .file-row-icon svg {
+  .file-row:hover .file-row-icon svg,
+  .controllers-buttons svg {
     fill: $text-color;
   }
 
+  .ide-pipeline svg {
+    --svg-status-bg: transparent;
+  }
+
   .multi-file-tab-close:hover {
     background-color: $input-border;
   }
@@ -104,14 +123,34 @@
   .ide-commit-editor-header,
   .ide-file-templates,
   .ide-entry-dropdown-toggle,
-  .ide-staged-action-btn {
+  .ide-staged-action-btn,
+  .badge.badge-pill,
+  .card-header,
+  .bs-callout,
+  .ide-terminal .top-bar {
     background-color: $background;
   }
 
+  .ide-terminal .top-bar {
+    margin-right: -1px; // collapse right margin of top bar and left margin of the right sidebar icons
+  }
+
   pre code {
     background-color: inherit;
   }
 
+  .bs-callout {
+    border-color: $dropdown-background;
+
+    code {
+      background-color: $dropdown-background;
+    }
+  }
+
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
+    border-color: $dropdown-hover-background;
+  }
+
   .ide-sidebar-link:hover {
     background-color: $background-hover;
   }
@@ -129,7 +168,10 @@
   .ide-sidebar-link.active::after,
   .ide-right-sidebar .multi-file-commit-panel-inner,
   .common-note-form .md-area,
-  .ide-commit-message-field {
+  .ide-commit-message-field,
+  .card,
+  .multi-file-commit-panel-success-message,
+  .ide-preview-header {
     background-color: $highlight-background;
   }
 
@@ -148,7 +190,11 @@
   .multi-file-tabs li,
   .ide-status-bar,
   .ide-commit-editor-header,
-  .ide-file-templates {
+  .ide-file-templates,
+  .card,
+  .card-header,
+  .ide-job-item:not(:last-child),
+  .ide-terminal .top-bar {
     border-color: $border-color;
   }
 
@@ -164,7 +210,9 @@
   .multi-file-commit-form > form,
   .multi-file-commit-form hr,
   .ide-commit-list-container.is-first,
-  .multi-file-commit-form .nav-links:not(.quick-links) {
+  .multi-file-commit-form .nav-links:not(.quick-links),
+  .ide-pipeline-list .nav-links:not(.quick-links),
+  .ide-preview-header {
     border-color: $background;
   }
 
@@ -186,7 +234,8 @@
     }
   }
 
-  .nav-links li.active a {
+  .nav-links li.active a,
+  .nav-links li a.active {
     border-color: $highlight-accent;
     color: $text-color;
   }
@@ -206,7 +255,7 @@
 
   input[type='text'] {
     border-color: $input-border;
-    background: $input-background;
+    background: $input-background !important;
   }
 
   input[type='text'],
@@ -218,16 +267,16 @@
     background: $gray-800;
   }
 
-  .btn:hover {
+  .btn:not([disabled]):hover {
     border-width: 2px;
     padding: 5px 9px;
   }
 
-  .btn.btn-sm:hover {
+  .btn:not([disabled]).btn-sm:hover {
     padding: 3px 9px;
   }
 
-  .btn.btn-block:hover {
+  .btn:not([disabled]).btn-block:hover {
     padding: 5px 0;
   }
 

ee/app/assets/javascripts/ide/components/terminal/empty_state.vue

@@ -40,7 +40,7 @@ export default {
 };
 </script>
 <template>
-  <div class="text-center">
+  <div class="text-center p-3">
     <div v-if="illustrationPath" class="svg-content svg-130"><img :src="illustrationPath" /></div>
     <h4>{{ __('Web Terminal') }}</h4>
     <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default" />

ee/app/assets/stylesheets/page_bundles/ide.scss

@@ -10,7 +10,6 @@
   @include ide-trace-view();
 
   .terminal-wrapper {
-    margin-left: -$gl-padding;
     background: $black;
     color: $gray-darkest;
     overflow: hidden;