Add previews in preferences

4 files changed, 75 insertions, 4 deletions

diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index 305feaacaa1..c197494b152 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,3 +1,67 @@
+@mixin application-theme-preview($color-1, $color-2, $color-3, $color-4) {
+  .one {
+    background-color: $color-1;
+    border-top-left-radius: $border-radius-default;
+  }
+
+  .two {
+    background-color: $color-2;
+    border-top-right-radius: $border-radius-default;
+  }
+
+  .three {
+    background-color: $color-3;
+    border-bottom-left-radius: $border-radius-default;
+  }
+
+  .four {
+    background-color: $color-4;
+    border-bottom-right-radius: $border-radius-default;
+  }
+}
+
+.application-theme {
+  label {
+    margin-right: 20px;
+    text-align: center;
+  }
+
+  .preview {
+    font-size: 0;
+    margin-bottom: 10px;
+
+    &.indigo {
+      @include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500);
+    }
+
+    &.dark {
+      @include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600);
+    }
+
+    &.light {
+      @include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100);
+    }
+
+    &.blue {
+      @include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500);
+    }
+
+    &.green {
+      @include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500);
+    }
+  }
+
+  .preview-row {
+    display: block;
+  }
+
+  .quadrant {
+    display: inline-block;
+    height: 50px;
+    width: 80px;
+  }
+}
+
 .syntax-theme {
   label {
     margin-right: 20px;
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 9787a567b4d..2b72eeab8d6 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -5,11 +5,18 @@
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
   .col-lg-4.application-theme
     %h4.prepend-top-0
-      GitLab theme
+      GitLab navigation theme
+    %p Customize the appearance of the application header and navigation sidebar.
   .col-lg-8.application-theme
     - Gitlab::Themes.each do |theme|
       = label_tag do
-        .preview{ class: theme.css_class }
+        .preview{ class: theme.name.downcase }
+          .preview-row
+            .quadrant.one
+            .quadrant.two
+          .preview-row
+            .quadrant.three
+            .quadrant.four
         = f.radio_button :theme_id, theme.id
         = theme.name
 
diff --git a/lib/gitlab/themes.rb b/lib/gitlab/themes.rb
index 5e1e65854a3..e871557e243 100644
--- a/lib/gitlab/themes.rb
+++ b/lib/gitlab/themes.rb
@@ -16,7 +16,7 @@ module Gitlab
       Theme.new(2, 'Dark', 'ui_dark'),
       Theme.new(3, 'Light', 'ui_light'),
       Theme.new(4, 'Blue', 'ui_blue'),
-      Theme.new(5, 'Green', 'ui_green'),
+      Theme.new(5, 'Green', 'ui_green')
     ].freeze
 
     # Convenience method to get a space-separated String of all the theme
diff --git a/spec/lib/gitlab/themes_spec.rb b/spec/lib/gitlab/themes_spec.rb
index cc8da6774b2..ecacea6bb35 100644
--- a/spec/lib/gitlab/themes_spec.rb
+++ b/spec/lib/gitlab/themes_spec.rb
@@ -14,7 +14,7 @@ describe Gitlab::Themes, lib: true do
   describe '.by_id' do
     it 'returns a Theme by its ID' do
       expect(described_class.by_id(1).name).to eq 'Indigo'
-      expect(described_class.by_id(3).name).to eq 'Blue'
+      expect(described_class.by_id(3).name).to eq 'Light'
     end
   end