Dark theme for the right sidebar

Web IDE right sidebar now supports dark theme

app/assets/javascripts/ide/components/jobs/detail.vue

@@ -79,7 +79,7 @@ export default {
         <icon name="chevron-left" /> {{ __('View jobs') }}
       </button>
     </header>
-    <div class="top-bar d-flex border-left-0">
+    <div class="top-bar d-flex border-left-0 mr-3">
       <job-description :job="detailJob" />
       <div class="controllers ml-auto">
         <a
@@ -97,7 +97,7 @@ export default {
         <scroll-button :disabled="isScrolledToBottom" direction="down" @click="scrollDown" />
       </div>
     </div>
-    <pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+    <pre ref="buildTrace" class="build-trace mb-0 h-100 mr-3" @scroll="scrollBuildLog">
       <code
         v-show="!detailJob.isLoading"
         class="bash"

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,11 +890,15 @@ $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;
   }
 
+  .ide-right-sidebar-jobs-detail {
+    padding-bottom: 0;
+  }
+
   .ide-right-sidebar-clientside {
     padding: 0;
   }
@@ -915,15 +919,12 @@ $ide-commit-header-height: 48px;
       margin: 0;
     }
   }
-
-  .build-trace {
-    margin-left: -$gl-padding;
-  }
 }
 
 .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

@@ -33,7 +33,7 @@
   $diff-insert: rgba(155, 185, 85, 0.2);
   $diff-remove: rgba(255, 0, 0, 0.2);
 
-  a {
+  a:not(.btn) {
     color: $link-color;
   }
 
@@ -57,27 +57,46 @@
   textarea,
   .md-area.is-focused,
   .ide-entry-dropdown-toggle,
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover,
   .dropdown-menu li button,
   .ide-merge-request-project-path,
   .dropdown-menu-selectable li a.is-active,
   .dropdown-menu-inner-title,
-  .dropdown-menu-inner-content {
+  .dropdown-menu-inner-content,
+  .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,
+  .ide-navigator-btn,
+  .ide-pipeline .top-bar,
+  .ide-pipeline .top-bar .controllers .controllers-buttons {
     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;
   }
@@ -118,7 +137,12 @@
   .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-pipeline .top-bar,
+  .ide-terminal .top-bar {
     background-color: $background;
   }
 
@@ -126,6 +150,18 @@
     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,
   .multi-file-tabs li {
     background-color: $background-hover;
@@ -144,7 +180,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;
   }
 
@@ -163,7 +202,12 @@
   .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,
+  .ide-pipeline .top-bar {
     border-color: $border-color;
   }
 
@@ -179,7 +223,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;
   }
 
@@ -201,7 +247,8 @@
     }
   }
 
-  .nav-links li.active a {
+  .nav-links li.active a,
+  .nav-links li a.active {
     border-color: $highlight-accent;
     color: $text-color;
   }
@@ -223,7 +270,7 @@
   input[type='search'],
   .filtered-search-box {
     border-color: $input-border;
-    background-color: $input-background;
+    background: $input-background !important;
   }
 
   input[type='text'],
@@ -252,16 +299,16 @@
     background: $gray-800;
   }
 
-  .btn:not(.btn-link):hover {
+  .btn:not(.btn-link):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/javascripts/ide/components/terminal/terminal.vue

@@ -90,7 +90,7 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex flex-column flex-fill min-height-0">
+  <div class="d-flex flex-column flex-fill min-height-0 pr-3">
     <div class="top-bar d-flex border-left-0 align-items-center">
       <div v-if="loadingText" data-qa-selector="loading_container">
         <gl-loading-icon :inline="true" />

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

@@ -2,7 +2,7 @@
 
 .ide-right-sidebar {
   .multi-file-commit-panel-inner.ide-right-sidebar-terminal {
-    padding-top: 0;
+    padding: 0;
   }
 }
 
@@ -10,7 +10,6 @@
   @include ide-trace-view();
 
   .terminal-wrapper {
-    margin-left: -$gl-padding;
     background: $black;
     color: $gray-darkest;
     overflow: hidden;