Implement @jschatz1's comments.

- No hardcoded colors in any SCSS file except `variables.scss`
- Don't allow choosing a date in the past
- Use the same table as in the "Applications" tab
- The button should say "Create Personal Access Token"
- Float the revoke button to the right of the table cell
- Change the revocation message to be more explicit.
- Date shouldn't look selected on page load
- Don't use a panel for the created token
    - Use a normal flash for "Your new personal access token has been created"
    - Show the input (with the token) below it full width.
    - Put the "Make sure you save it - you won't be able to access it again." message near the input
- Have the created token's input highlight all on single click

1 files changed, 3 insertions, 15 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index a2bbe734d2a..88e062d156f 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -192,24 +192,12 @@
   }
 }
 
-.personal-access-tokens-revoked-label {
-  color: #bbb;
-}
-
 .personal-access-tokens-never-expires-label {
-  color: #bbb;
+  color: $personal-access-tokens-disabled-label-color;
 }
 
-.personal-access-tokens-token-column {
-  max-width: 500px
-}
-
-.created-personal-access-token {
-  margin: 15px 15px 0 0;
-  pre {
-    max-width: 400px;
-    display: inline;
-  }
+.datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
+  text-align: center;
 }
 
 .user-profile {