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.

1 files changed, 6 insertions, 5 deletions

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);