From e18a08fd89f59088db22208069370a85f6a33001 Mon Sep 17 00:00:00 2001
From: Timothy Andrew <mail@timothyandrew.net>
Date: Fri, 10 Jun 2016 08:49:05 +0530
Subject: [PATCH] Implement second round of comments from @jschatz1.

- Just use a link for the clipboard button. Having a non-clickable
  container (that looks like a button) is confusing.
- Use `text-danger` for the "you won't be able to access it again" message.
- Highlight the created token so people know to look there.
---
 app/assets/stylesheets/pages/profile.scss             | 11 +++++++++++
 .../profiles/personal_access_tokens/index.html.haml   | 11 ++++++-----
 spec/features/profiles/personal_access_tokens_spec.rb |  2 +-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 88e062d156f..46371ec6871 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -200,6 +200,17 @@
   text-align: center;
 }
 
+.created-personal-access-token-container {
+  #created-personal-access-token {
+    width: 90%;
+    display: inline;
+  }
+
+  .btn-clipboard {
+    margin-left: 5px;
+  }
+}
+
 .user-profile {
   @media (max-width: $screen-xs-max) {
     .cover-block {
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 4ad07df42dc..456e770dc80 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -9,14 +9,13 @@
   .col-lg-9
 
     - if flash[:personal_access_token]
-      .created-personal-access-token
+      .created-personal-access-token-container
         %h5.prepend-top-0
           Your New Personal Access Token
         .form-group
-          .input-group
-            = text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control", 'aria-describedby' => "created-personal-access-token-help-block"
-            .input-group-addon= clipboard_button(clipboard_text: flash[:personal_access_token])
-          %span#created-personal-access-token-help-block.help-block Make sure you save it - you won't be able to access it again.
+          = text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control", 'aria-describedby' => "created-personal-access-token-help-block"
+          = clipboard_button(clipboard_text: flash[:personal_access_token])
+          %span#created-personal-access-token-help-block.help-block.text-danger Make sure you save it - you won't be able to access it again.
 
       %hr
 
@@ -111,3 +110,5 @@
   $("#created-personal-access-token").click(function() {
     this.select();
   });
+
+  $("#created-personal-access-token").effect('highlight', { color: '#ffff99' }, 2000);
diff --git a/spec/features/profiles/personal_access_tokens_spec.rb b/spec/features/profiles/personal_access_tokens_spec.rb
index 105c5dae34e..d824e1d288d 100644
--- a/spec/features/profiles/personal_access_tokens_spec.rb
+++ b/spec/features/profiles/personal_access_tokens_spec.rb
@@ -12,7 +12,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
   end
 
   def created_personal_access_token
-    find(".created-personal-access-token input").value
+    find("#created-personal-access-token").value
   end
 
   def disallow_personal_access_token_saves!
-- 
GitLab