Themes refactored

app/assets/stylesheets/common.scss

@@ -584,25 +584,6 @@ li.note {
   }
 }
 
-.themes_opts {
-  padding-left:20px;
-
-  label {
-    width:175px;
-    margin-right:40px;
-
-    .prev {
-      @extend .thumbnail;
-      height:120px;
-      width:175px;
-      margin-bottom:10px;
-      img {
-        width:180px;
-      }
-    }
-  }
-}
-
 .git_error_tips {
   @extend .span6;
   text-align:left;

app/assets/stylesheets/main.scss

@@ -118,14 +118,12 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono'
 @import "themes/ui_basic.scss";
 
 /**
- * UI mars theme
+ * UI themes:
  */
 @import "themes/ui_mars.scss";
-
-/**
- * UI Modern theme
- */
 @import "themes/ui_modern.scss";
+@import "themes/ui_gray.scss";
+@import "themes/ui_color.scss";
 
 /**
  * GitLab bootstrap.
@@ -159,6 +157,7 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono'
 @import "sections/merge_requests.scss";
 @import "sections/graph.scss";
 @import "sections/events.scss";
+@import "sections/themes.scss";
 
 /**
  * This scss file redefine chozen selectbox styles for

app/assets/stylesheets/sections/header.scss

@@ -39,15 +39,15 @@ header {
 
       h1 {
         width:90px;
-        background: url('logo_dark.png') no-repeat 0px -3px;
+        background: url('logo_dark.png') no-repeat 0px 2px;
         float:left;
-        margin-left:5px;
+        margin-left:2px;
         font-size:30px;
         line-height:48px;
         font-weight:normal;
         color:$style_color;
         text-shadow: 0 1px 1px #FFF;
-        padding-left:50px;
+        padding-left:45px;
         height:40px;
         font-family: 'Korolev', sans-serif;
       }
@@ -98,7 +98,7 @@ header {
       background-position: 10px;
       padding-left:25px;
       font-size: 13px;
-      @include border-radius(2px);
+      @include border-radius(3px);
       border:1px solid #c6c6c6;
       box-shadow:none;
       &:focus {
@@ -123,7 +123,7 @@ header {
     display: block;
     cursor: pointer;
     img {
-      @include border-radius(2px);
+      @include border-radius(3px);
       right: 5px;
       position: absolute;
       width: 28px;

app/assets/stylesheets/sections/themes.scss

+.themes_opts {
+  padding-left:20px;
+
+  label {
+    width:175px;
+    margin-right:40px;
+
+    .prev {
+      @extend .thumbnail;
+      height:30px;
+      width:175px;
+      margin-bottom:10px;
+
+      &.classic {
+        background: #31363e;
+      }
+
+      &.default {
+        background: #f1f1f1;
+      }
+
+      &.modern {
+        background: #567;
+      }
+
+      &.gray {
+        background: #708090;
+      }
+
+      &.violet {
+        background: #657;
+      }
+    }
+  }
+}
+
+.code_highlight_opts {
+  padding-left:20px;
+
+  label {
+    width:220px;
+    margin-right:40px;
+
+    .prev {
+      @extend .thumbnail;
+      height:151px;
+      width:220px;
+      margin-bottom:10px;
+    }
+  }
+}
+
+

app/assets/stylesheets/themes/ui_color.scss

+/**
+ * This file represent some UI that can be changed
+ * during web app restyle or theme select.
+ *
+ * Next items should be placed there
+ * - link colors
+ * - header restyles
+ *
+ */
+.ui_color {
+
+  /*
+   *  Application Header
+   *
+   */
+  header {
+
+    &.navbar-gitlab {
+      .navbar-inner {
+        background: #657;
+        border-bottom: 1px solid #AAA;
+
+        .nav > li > a {
+          color: #fff;
+          text-shadow: 0 1px 0 #111;
+        }
+      }
+    }
+
+    .search {
+      float: right;
+      margin-right: 45px;
+      .search-input {
+        border: 1px solid #aaa;
+        background-color: #D2D5DA;
+        background-color: rgba(255, 255, 255, 0.5);
+
+        &:focus {
+          background-color: white;
+        }
+      }
+    }
+    .search-input::-webkit-input-placeholder {
+      color: #666;
+    }
+    .app_logo {
+      a {
+        h1 {
+          background: url('logo_white.png') no-repeat 0px 2px;
+          color:#fff;
+          text-shadow: 0 1px 1px #111;
+        }
+      }
+      .separator {
+        display:none;
+      }
+
+    }
+    .project_name {
+      color:#fff;
+      text-shadow: 0 1px 1px #111;
+    }
+  }
+  /*
+   *  End of Application Header
+   *
+   */
+}

app/assets/stylesheets/themes/ui_gray.scss

+/**
+ * This file represent some UI that can be changed
+ * during web app restyle or theme select.
+ *
+ * Next items should be placed there
+ * - link colors
+ * - header restyles
+ *
+ */
+.ui_gray {
+
+  /*
+   *  Application Header
+   *
+   */
+  header {
+
+    &.navbar-gitlab {
+      .navbar-inner {
+        background: #708090;
+        border-bottom: 1px solid #AAA;
+
+        .nav > li > a {
+          color: #fff;
+          text-shadow: 0 1px 0 #111;
+        }
+      }
+    }
+
+    .search {
+      float: right;
+      margin-right: 45px;
+      .search-input {
+        border: 1px solid #aaa;
+        background-color: #D2D5DA;
+        background-color: rgba(255, 255, 255, 0.5);
+
+        &:focus {
+          background-color: white;
+        }
+      }
+    }
+    .search-input::-webkit-input-placeholder {
+      color: #666;
+    }
+    .app_logo {
+      a {
+        h1 {
+          background: url('logo_white.png') no-repeat 0px 2px;
+          color:#fff;
+          text-shadow: 0 1px 1px #111;
+        }
+      }
+      .separator {
+        display:none;
+      }
+
+    }
+    .project_name {
+      color:#fff;
+      text-shadow: 0 1px 1px #111;
+    }
+  }
+  /*
+   *  End of Application Header
+   *
+   */
+}

app/assets/stylesheets/themes/ui_mars.scss

@@ -46,7 +46,7 @@
     .app_logo {
       a {
         h1 {
-          background: url('logo_white.png') no-repeat 0px -3px;
+          background: url('logo_white.png') no-repeat 0px 2px;
           color:#eee;
           text-shadow: 0 1px 1px #111;
         }

app/assets/stylesheets/themes/ui_modern.scss

@@ -17,11 +17,11 @@
 
     &.navbar-gitlab {
       .navbar-inner {
-        background: #333;
-        border-bottom: 1px solid #111;
+        background: #567;
+        border-bottom: 1px solid #AAA;
 
         .nav > li > a {
-          color: #eee;
+          color: #fff;
           text-shadow: 0 1px 0 #111;
         }
       }
@@ -31,7 +31,7 @@
       float: right;
       margin-right: 45px;
       .search-input {
-        border: 1px solid rgba(0, 0, 0, 0.7);
+        border: 1px solid #aaa;
         background-color: #D2D5DA;
         background-color: rgba(255, 255, 255, 0.5);
 
@@ -46,8 +46,8 @@
     .app_logo {
       a {
         h1 {
-          background: url('logo_white.png') no-repeat 0px -3px;
-          color:#eee;
+          background: url('logo_white.png') no-repeat 0px 2px;
+          color:#fff;
           text-shadow: 0 1px 1px #111;
         }
       }
@@ -57,7 +57,7 @@
 
     }
     .project_name {
-      color:#eee;
+      color:#fff;
       text-shadow: 0 1px 1px #111;
     }
   }

app/views/profile/design.html.haml

@@ -3,28 +3,35 @@
     %legend Application theme
     .themes_opts
       = label_tag do
-        .prev
-          = image_tag "gitlab_default.png"
+        .prev.default
         = f.radio_button :theme_id, 1
         Default
 
       = label_tag do
-        .prev
-          = image_tag "gitlab_classic.png"
+        .prev.classic
         = f.radio_button :theme_id, 2
         Classic
 
       = label_tag do
-        .prev
-          = image_tag "gitlab_modern.png"
+        .prev.modern
         = f.radio_button :theme_id, 3
         Modern
+
+      = label_tag do
+        .prev.gray
+        = f.radio_button :theme_id, 4
+        SlateGray
+
+      = label_tag do
+        .prev.violet
+        = f.radio_button :theme_id, 5
+        Violet
     %br
     .clearfix
 
   %fieldset
     %legend Code review
-    .themes_opts
+    .code_highlight_opts
       = label_tag do
         .prev
           = image_tag "white.png"

lib/gitlab/theme.rb

 module Gitlab
   class Theme
     def self.css_class_by_id(id)
-      themes = { 
+      themes = {
         1 => "ui_basic",
         2 => "ui_mars",
-        3 => "ui_modern"
+        3 => "ui_modern",
+        4 => "ui_gray",
+        5 => "ui_color"
       }
 
       id ||= 1