Refactor profile.scss to use utility class

Resolve the stylelint-gitlab/utility-classes error by
removing the .description class in profile.scss and
replacing its usage in gpg_keys and keys views with
the .text-truncate utility class.

app/assets/stylesheets/pages/profile.scss

@@ -17,12 +17,6 @@
   display: inline-block;
 }
 
-.account-btn-link,
-.profile-settings-sidebar a,
-.settings-sidebar a {
-  color: $blue-600;
-}
-
 .private-tokens-reset div.reset-action:not(:first-child) {
   padding-top: 15px;
 }
@@ -122,24 +116,12 @@
       float: left;
     }
   }
-
-  .description {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
 }
 
 .key-created-at {
   line-height: 42px;
 }
 
-.profile-settings-content {
-  a {
-    color: $blue-600;
-  }
-}
-
 .provider-btn-group {
   display: inline-block;
   margin-right: 10px;
@@ -169,10 +151,6 @@
   margin-left: -3px;
   line-height: 22px;
   background-color: $gray-light;
-
-  &.not-active {
-    color: $blue-500;
-  }
 }
 
 .oauth-applications {
@@ -292,10 +270,6 @@ table.u2f-registrations {
 }
 
 .oauth-application-show {
-  .scope-name {
-    font-weight: $gl-font-weight-bold;
-  }
-
   .scopes-list {
     padding-left: 18px;
   }
@@ -317,52 +291,52 @@ table.u2f-registrations {
 
   .landing {
     padding: 32px;
+  }
 
-    .close {
-      position: absolute;
-      top: 20px;
-      right: 20px;
-      opacity: 1;
+  .close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    opacity: 1;
 
-      .dismiss-icon {
-        float: right;
-        cursor: pointer;
-        color: $blue-300;
-      }
+    .dismiss-icon {
+      float: right;
+      cursor: pointer;
+      color: $blue-300;
+    }
 
-      &:hover {
-        background-color: transparent;
-        border: 0;
+    &:hover {
+      background-color: transparent;
+      border: 0;
 
-        .dismiss-icon {
-          color: $blue-400;
-        }
+      .dismiss-icon {
+        color: $blue-400;
       }
     }
+  }
 
-    .svg-container {
-      margin-right: 30px;
-      display: inline-block;
+  .svg-container {
+    margin-right: 30px;
+    display: inline-block;
 
-      svg {
-        height: 110px;
-        vertical-align: top;
-      }
+    svg {
+      height: 110px;
+      vertical-align: top;
+    }
 
-      &.devops {
-        margin: 0 0 0 30px;
+    &.convdev {
+      margin: 0 0 0 30px;
 
-        svg {
-          height: 127px;
-        }
+      svg {
+        height: 127px;
       }
     }
+  }
 
-    .user-callout-copy {
-      display: inline-block;
-      vertical-align: top;
-      max-width: 570px;
-    }
+  .user-callout-copy {
+    display: inline-block;
+    vertical-align: top;
+    max-width: 570px;
   }
 
   @include media-breakpoint-down(xs) {
@@ -372,43 +346,26 @@ table.u2f-registrations {
       display: block;
     }
 
-    .landing {
-      .svg-container,
-      .user-callout-copy {
-        margin: 0 auto;
-        display: block;
+    .svg-container,
+    .user-callout-copy {
+      margin: 0 auto;
+      display: block;
 
-        svg {
-          height: 75px;
-        }
+      svg {
+        height: 75px;
+      }
 
-        &.devops {
-          margin: $gl-padding auto 0;
+      &.convdev {
+        margin: $gl-padding auto 0;
 
-          svg {
-            height: 120px;
-          }
+        svg {
+          height: 120px;
         }
       }
     }
   }
 }
 
-.nav-wip {
-  border: 1px solid $blue-500;
-  background: $blue-50;
-  padding: $gl-padding;
-  margin-bottom: $gl-padding;
-
-  a {
-    color: $blue-500;
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .email-badge {
   display: inline;
   margin-right: $gl-padding / 2;
@@ -433,10 +390,8 @@ table.u2f-registrations {
 }
 
 .edit-user {
-  .clear-user-status {
-    svg {
-      fill: $gl-text-color-secondary;
-    }
+  svg {
+    fill: $gl-text-color-secondary;
   }
 
   .form-group > label {
@@ -453,10 +408,6 @@ table.u2f-registrations {
 
     .no-emoji-placeholder {
       position: relative;
-
-      svg {
-        fill: $gl-text-color-secondary;
-      }
     }
   }
 

app/assets/stylesheets/utilities.scss

@@ -31,3 +31,4 @@
 
 .gl-w-64 { width: px-to-rem($grid-size * 8); }
 .gl-h-64 { height: px-to-rem($grid-size * 8); }
+.gl-bg-blue-500 { @include gl-bg-blue-500; }

app/views/profiles/accounts/_providers.html.haml

@@ -16,6 +16,6 @@
             %a.provider-btn
               = s_('Profiles|Active')
         - elsif link_allowed
-          = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'provider-btn not-active' do
+          = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'provider-btn gl-bg-blue-500' do
             = s_('Profiles|Connect')
   = render_if_exists 'profiles/accounts/group_saml_unlink_buttons', group_saml_identities: group_saml_identities

app/views/profiles/gpg_keys/_key.html.haml

@@ -5,7 +5,7 @@
     - key.emails_with_verified_status.map do |email, verified|
       = render partial: 'shared/email_with_badge', locals: { email: email, verified: verified }
 
-    .description
+    %span.text-truncate
       %code= key.fingerprint
     - if key.subkeys.present?
       .subkeys

app/views/profiles/keys/_key.html.haml

@@ -10,7 +10,7 @@
   .key-list-item-info
     = link_to path_to_key(key, is_admin), class: "title" do
       = key.title
-    .description
+    %span.text-truncate
       = key.fingerprint
     .last-used-at
       last used:

app/views/profiles/passwords/edit.html.haml

@@ -32,4 +32,4 @@
       .prepend-top-default.append-bottom-default
         = f.submit _('Save password'), class: "btn btn-success append-right-10", data: { qa_selector: 'save_password_button' }
         - unless @user.password_automatically_set?
-          = link_to _('I forgot my password'), reset_profile_password_path, method: :put, class: "account-btn-link"
+          = link_to _('I forgot my password'), reset_profile_password_path, method: :put

app/views/shared/tokens/_scopes_list.html.haml

@@ -9,5 +9,5 @@
     %ul.scopes-list.append-bottom-0
       - token.scopes.each do |scope|
         %li
-          %span.scope-name= scope
+          %span.bold= scope
           = "(#{t(scope, scope: [:doorkeeper, :scopes])})"