Style panels and add blank container

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/base/gl_bootstrap.scss

@@ -157,8 +157,10 @@
  *
  */
 .panel {
+  box-shadow: none;
   .panel-heading {
-    font-weight: bold;
+    font-size: 17px;
+    line-height: 38px;
 
     .panel-head-actions {
       position: relative;
@@ -182,6 +184,10 @@
     .pagination {
       margin: 0;
     }
+
+    .btn {
+      min-width: 124px;
+    }
   }
 
   &.panel-small {
@@ -209,6 +215,12 @@
   }
 }
 
+.alert-help {
+  background-color: $background-color;
+  border: 1px solid $border-color;
+  color: $gl-gray;
+}
+
 // Typography =================================================================
 
 .text-primary,

app/assets/stylesheets/base/gl_variables.scss

@@ -114,11 +114,12 @@ $alert-border-radius:            0;
 //
 //##
 
-$panel-border-radius:            0;
+$panel-border-radius:         2px;
 $panel-default-text:       $text-color;
-$panel-default-border:        #E7E9ED;
+$panel-default-border:     $border-color;
-$panel-default-heading-bg:    #F8FAFC;
+$panel-default-heading-bg: $background-color;
-
+$panel-footer-bg:          $background-color;
+$panel-inner-border:       $border-color;
 
 //== Wells
 //

app/assets/stylesheets/generic/buttons.scss

@@ -10,7 +10,7 @@
   }
 
   &.btn-save {
-    @extend .btn-primary;
+    @extend .btn-success;
   }
 
   &.btn-remove {

app/assets/stylesheets/generic/sidebar.scss

@@ -28,6 +28,12 @@
     padding: $gl-padding;
     border: 1px solid #e7e9ed;
     min-height: 90vh;
+
+    &.container-blank {
+      background: none;
+      padding: 0;
+      border: none;
+    }
   }
 }
 

app/helpers/page_layout_helper.rb

@@ -31,4 +31,26 @@ module PageLayoutHelper
       @fluid_layout
     end
   end
+
+  def blank_container(enabled = false)
+    if @blank_container.nil?
+      @blank_container = enabled
+    else
+      @blank_container
+    end
+  end
+
+  def container_class
+    css_class = "container-fluid"
+
+    if fluid_layout
+      css_class += " container-limited"
+    end
+
+    if blank_container
+      css_class += " container-blank"
+    end
+
+    css_class
+  end
 end

app/views/layouts/_page.html.haml

@@ -19,7 +19,7 @@
           = current_user.username
   .content-wrapper
     = render "layouts/flash"
-    %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" }
+    %div{ class: container_class }
       .content
         .clearfix
           = yield

app/views/profiles/preferences/show.html.haml

@@ -1,11 +1,11 @@
 - page_title 'Preferences'
 - header_title page_title, profile_preferences_path
+- @blank_container = true
 
-.gray-content-block.top-block
+.alert.alert-help
   These settings allow you to customize the appearance and behavior of the site.
   They are saved with your account and will persist to any device you use to
   access the site.
-.prepend-top-default
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: {class: 'js-preferences-form form-horizontal'} do |f|
   .panel.panel-default.application-theme

app/views/projects/edit.html.haml

@@ -1,10 +1,11 @@
+- @blank_container = true
+
 .project-edit-container
   .project-edit-errors
   .project-edit-content
-    %div
+    .panel.panel-default
-      %h3.page-title
+      .panel-heading
         Project settings
-      %hr
       .panel-body
         = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit_project form-horizontal fieldset-form" }, authenticity_token: true do |f|