Use tw style for some buttons. Improved deploy key UI

8 files changed, 45 insertions, 32 deletions

diff --git a/app/assets/stylesheets/gitlab_bootstrap/buttons.scss b/app/assets/stylesheets/gitlab_bootstrap/buttons.scss
index c838f3b2368..380fc3e3711 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/buttons.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/buttons.scss
@@ -1,8 +1,5 @@
 .btn {
-  background-image: -webkit-gradient(linear, 0 0, 0 26, color-stop(0.076, #f7f7f7), to(#d5d5d5));
-  background-image: -webkit-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
-  background-image: -moz-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
-  background-image: -o-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
+  @include bg-gradient(#f7f7f7, #d5d5d5);
   border-color:#aaa;
   &:hover {
     @include bg-gray-gradient;
@@ -12,10 +9,8 @@
 
   &.primary {
     background:#2a79A3;
+    @include bg-gradient(#47A7b7, #2585b5);
     border-color: #2A79A3;
-    background-image: -webkit-linear-gradient(#47A7b7 7.6%, #2585b5);
-    background-image: -moz-linear-gradient(#47A7b7 7.6%, #2585b5);
-    background-image: -o-linear-gradient(#47A7b7 7.6%, #2585b5);
     color:#fff;
     text-shadow: 0 1px 1px #268;
     &:hover {
@@ -30,16 +25,11 @@
   }
 
   &.success {
-    border-color: #4A4;
-    background-image: -webkit-linear-gradient(#82D482 7.6%, #22B442);
-    background-image: -moz-linear-gradient(#82D482 7.6%, #22B442);
-    background-image: -o-linear-gradient(#82D482 7.6%, #22B442);
-    color: #fff;
-    text-shadow: 0 1px 1px #141;
+    @extend .btn-success;
 
     &:hover {
-      background: #6C6;
-      color: #fff;
+      @extend .btn-success;
+      background: #51a351;
     }
 
     &.disabled {
@@ -62,10 +52,8 @@
     padding-right:30px;
   }
 
-  &.danger,
-  &.btn-danger {
-    color:#fff;
-    background: #DA4E49;
+  &.danger {
+    @extend .btn-danger;
     border-color: #BD362F;
 
     &:hover {
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index be27d754dfa..abd1ddf9bb8 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -56,6 +56,13 @@ $hover: #fdf5d9;
   border-radius: $radius;
 }
 
+@mixin bg-gradient($from, $to) {
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
+  background-image: -webkit-linear-gradient($from, $to);
+  background-image: -moz-linear-gradient($from, $to);
+  background-image: -o-linear-gradient($from, $to);
+}
+
 @mixin bg-gray-gradient {
   background:#eee;
   background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
diff --git a/app/views/deploy_keys/_form.html.haml b/app/views/deploy_keys/_form.html.haml
index 461f1f5d84a..6beba562a95 100644
--- a/app/views/deploy_keys/_form.html.haml
+++ b/app/views/deploy_keys/_form.html.haml
@@ -11,8 +11,13 @@
       .input= f.text_field :title
     .clearfix
       = f.label :key
-      .input= f.text_area :key, class: "xlarge"
+      .input
+        = f.text_area :key, class: [:xxlarge, :thin_area]
+        %p.hint
+          Paste a machine public key here. Read more about how generate it
+          = link_to "here", help_ssh_path
+
     .actions
-      = f.submit 'Save', class: "primary btn"
-      = link_to "Cancel", project_deploy_keys_path(@project), class: "btn"
+      = f.submit 'Save', class: "save-btn btn"
+      = link_to "Cancel", project_deploy_keys_path(@project), class: "btn cancel-btn"
 
diff --git a/app/views/deploy_keys/index.html.haml b/app/views/deploy_keys/index.html.haml
index 0ee9d03b0f5..b9c654a1abe 100644
--- a/app/views/deploy_keys/index.html.haml
+++ b/app/views/deploy_keys/index.html.haml
@@ -1,11 +1,17 @@
 = render "repositories/head"
-- if can? current_user, :admin_project, @project
-  .alert-message.block-message
-    Deploy keys allow read-only access to repository.
+
+%p.slead
+  Deploy keys allow read-only access to repository. It matches perfectly for CI, staging or production servers.
+
+  - if can? current_user, :admin_project, @project
     = link_to new_project_deploy_key_path(@project), class: "btn small", title: "New Deploy Key" do
       Add Deploy Key
-
 - if @keys.any?
   %table
+    %thead
+      %tr
+        %th Keys
+        %th
+        %th
     - @keys.each do |key|
       = render(partial: 'show', locals: {key: key})
diff --git a/app/views/deploy_keys/new.html.haml b/app/views/deploy_keys/new.html.haml
index a2f1010b454..e973cb7d305 100644
--- a/app/views/deploy_keys/new.html.haml
+++ b/app/views/deploy_keys/new.html.haml
@@ -1,6 +1,6 @@
 = render "repositories/head"
 
-%h3 New Deploy key
+%h3.page_title New Deploy key
 %hr
 
 = render 'form'
diff --git a/app/views/deploy_keys/show.html.haml b/app/views/deploy_keys/show.html.haml
index b1e0dc5ce27..c94cf10dde0 100644
--- a/app/views/deploy_keys/show.html.haml
+++ b/app/views/deploy_keys/show.html.haml
@@ -1,7 +1,14 @@
 = render "repositories/head"
-%h3= @key.title
+%h3.page_title
+  Deploy key:
+  = @key.title
+  %small
+    created at
+    = @key.created_at.stamp("Aug 21, 2011")
+.back_link
+  = link_to project_deploy_keys_path(@project) do
+    ← To keys list
 %hr
 %pre= @key.key
-.actions
+.right
   = link_to 'Remove', project_deploy_key_path(@key.project, @key), confirm: 'Are you sure?', method: :delete, class: "danger btn delete-key"
-  .clear
diff --git a/app/views/keys/show.html.haml b/app/views/keys/show.html.haml
index ffd52b96e5a..a8cba6c8f9e 100644
--- a/app/views/keys/show.html.haml
+++ b/app/views/keys/show.html.haml
@@ -10,5 +10,5 @@
 %hr
 
 %pre= @key.key
-.actions
+.right
   = link_to 'Remove', @key, confirm: 'Are you sure?', method: :delete, class: "btn danger delete-key"
diff --git a/app/views/team_members/show.html.haml b/app/views/team_members/show.html.haml
index 89662309ba3..3b5c78a87c7 100644
--- a/app/views/team_members/show.html.haml
+++ b/app/views/team_members/show.html.haml
@@ -3,7 +3,7 @@
 
 .team_member_show
   - if can? current_user, :admin_project, @project
-    = link_to 'Remove from team', project_team_member_path(project_id: @project, id: @team_member.id), confirm: 'Are you sure?', method: :delete, class: "right btn btn-danger"
+    = link_to 'Remove from team', project_team_member_path(project_id: @project, id: @team_member.id), confirm: 'Are you sure?', method: :delete, class: "right btn danger"
   .profile_avatar_holder
     = image_tag gravatar_icon(user.email, 60), class: "borders"
   %h3