Restyle colorful panel boxes

app/assets/stylesheets/generic/issue_box.scss

@@ -10,7 +10,7 @@
 .issue-box {
   color: #555;
   margin:20px 0;
-  background: #f9f9f9;
+  background: $box_bg;
   border-top-left-radius: 5px;
   @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
 

app/assets/stylesheets/gl_bootstrap.scss

@@ -233,8 +233,8 @@ $list-group-active-bg: $bg_primary;
     }
 
     .form-actions {
-      margin-bottom: 0;
-      background: #FFF;
+      margin: -15px;
+      margin-top: 18px;
     }
   }
 
@@ -262,53 +262,33 @@ $list-group-active-bg: $bg_primary;
 }
 
 .panel-danger {
-  border-color: $border_danger;
+  @include panel-colored;
   .panel-heading {
-    color: #ffffff;
-    background-color: $bg_danger;
+    color: $border_danger;
     border-color: $border_danger;
-    a {
-      color: #FFF;
-      text-decoration: underline;
-    }
   }
 }
 
 .panel-success {
-  border-color: $border_success;
+  @include panel-colored;
   .panel-heading {
-    color: #ffffff;
-    background-color: $bg_success;
+    color: $border_success;
     border-color: $border_success;
-    a {
-      color: #FFF;
-      text-decoration: underline;
-    }
   }
 }
 
 .panel-primary {
-  border-color: $border_primary;
+  @include panel-colored;
   .panel-heading {
-    color: #ffffff;
-    background-color: $bg_primary;
+    color: $border_primary;
     border-color: $border_primary;
-    a {
-      color: #FFF;
-      text-decoration: underline;
-    }
   }
 }
 
 .panel-warning {
-  border-color: $border_warning;
+  @include panel-colored;
   .panel-heading {
-    color: #ffffff;
-    background-color: $bg_warning;
+    color: $border_warning;
     border-color: $border_warning;
-    a {
-      color: #FFF;
-      text-decoration: underline;
-    }
   }
 }

app/assets/stylesheets/main/mixins.scss

@@ -132,3 +132,14 @@
   white-space: nowrap;
   max-width: $max_width;
 }
+
+@mixin panel-colored {
+  border: none;
+  background: $box_bg;
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
+
+  .panel-heading {
+    font-weight: bold;
+    background-color: $box_bg;
+  }
+}

app/assets/stylesheets/main/variables.scss

@@ -3,6 +3,7 @@
  */
 $style_color: #474D57;
 $hover: #FFECDB;
+$box_bg: #F9F9F9;
 
 /*
  * Link colors

app/assets/stylesheets/sections/merge_requests.scss

@@ -104,7 +104,7 @@
 }
 
 .mr-state-widget {
-  background: #f9f9f9;
+  background: $box_bg;
   margin-bottom: 20px;
   @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
 

app/views/projects/edit.html.haml

@@ -88,14 +88,11 @@
 
     .danger-settings
       - if can? current_user, :archive_project, @project
-        .panel.panel-default.panel.panel-warning
-          .panel-heading
-            - if @project.archived?
+        - if @project.archived?
+          .panel.panel-success
+            .panel-heading
               Unarchive project
-            - else
-              Archive project
-          .panel-body
-            - if @project.archived?
+            .panel-body
               %p
                 Unarchiving the project will mark its repository as active.
                 %br
@@ -105,7 +102,11 @@
               = link_to 'Unarchive', unarchive_project_path(@project),
                   data: { confirm: "Are you sure that you want to unarchive this project?\nWhen this project is unarchived it is active and can be committed to again." },
                   method: :post, class: "btn btn-success"
-            - else
+        - else
+          .panel.panel-warning
+            .panel-heading
+              Archive project
+            .panel-body
               %p
                 Archiving the project will mark its repository as read-only.
                 %br