Fix commits.scss style-lint errors

Updating class names, and using existing utility classes.

app/assets/javascripts/diffs/components/commit_item.vue

@@ -113,9 +113,10 @@ export default {
         <commit-pipeline-status
           v-if="commit.pipeline_status_path"
           :endpoint="commit.pipeline_status_path"
+          class="d-inline-flex"
         />
         <div class="commit-sha-group">
-          <div class="label label-monospace" v-text="commit.short_id"></div>
+          <div class="label label-monospace monospace" v-text="commit.short_id"></div>
           <clipboard-button
             :text="commit.id"
             :title="__('Copy commit SHA to clipboard')"

app/assets/javascripts/serverless/components/url.vue

@@ -20,7 +20,7 @@ export default {
 
 <template>
   <div class="clipboard-group">
-    <div class="url-text-field label label-monospace">{{ uri }}</div>
+    <div class="url-text-field label label-monospace monospace">{{ uri }}</div>
     <clipboard-button
       :text="uri"
       :title="s__('ServerlessURL|Copy URL to clipboard')"

app/assets/javascripts/vue_shared/components/commit.vue

@@ -133,7 +133,7 @@ export default {
 };
 </script>
 <template>
-  <div class="branch-commit">
+  <div class="branch-commit cgray">
     <template v-if="shouldShowRefInfo">
       <div class="icon-container">
         <icon v-if="tag" name="tag" />
@@ -174,7 +174,7 @@ export default {
           :tooltip-text="author.username"
           class="avatar-image-container"
         />
-        <gl-link :href="commitUrl" class="commit-row-message"> {{ title }} </gl-link>
+        <gl-link :href="commitUrl" class="commit-row-message cgray"> {{ title }} </gl-link>
       </span>
       <span v-else> Can't find HEAD commit for this branch </span>
     </div>

app/assets/stylesheets/pages/commits.scss

@@ -58,14 +58,6 @@
     display: inline-block;
     vertical-align: middle;
 
-    .stage-cell .stage-container {
-      margin: 0 3px 3px 0;
-    }
-
-    .stage-container:last-child {
-      margin-right: 0;
-    }
-
     .dropdown-menu {
       margin-top: 11px;
     }
@@ -128,18 +120,9 @@
 }
 
 .commit-row-title {
-  .notes_count {
-    float: right;
-    margin-right: 10px;
-  }
-
   .str-truncated {
     max-width: 70%;
   }
-
-  .commit-row-message {
-    color: $gl-text-color;
-  }
 }
 
 .text-expander {
@@ -185,7 +168,7 @@
   flex-grow: 1;
   min-width: 0;
 
-  .project_namespace {
+  .project-namespace {
     color: $gl-text-color-secondary;
   }
 }
@@ -208,10 +191,6 @@
     }
   }
 
-  .ci-status-link {
-    display: inline-flex;
-  }
-
   .ci-status-icon svg {
     vertical-align: text-bottom;
   }
@@ -239,7 +218,6 @@
   }
 
   .label-monospace {
-    @extend .monospace;
     user-select: text;
     color: $gl-text-color;
     background-color: $gray-light;
@@ -266,7 +244,7 @@
 }
 
 .commit,
-.generic_commit_status {
+.generic-commit-status {
   a,
   button {
     vertical-align: baseline;
@@ -278,37 +256,22 @@
     &.autodevops-badge {
       color: $white-light;
     }
-
-    &.autodevops-link {
-      color: $blue-600;
-    }
   }
 
   .commit-row-description {
     @extend %commit-description-base;
     display: none;
     flex: 1;
-
-    a {
-      color: $gl-text-color;
-    }
   }
 
   &.inline-commit {
     .commit-row-title {
       font-size: 13px;
     }
-
-    .committed_ago {
-      @extend .cgray;
-      float: right;
-    }
   }
 }
 
 .branch-commit {
-  color: $gl-text-color;
-
   .commit-icon {
     text-align: center;
     display: inline-block;
@@ -320,14 +283,15 @@
       fill: $gl-text-color-secondary;
     }
   }
+}
 
+.commit,
+.generic-commit-status,
+.branch-commit {
+  .autodevops-link,
   .commit-sha {
     color: $blue-600;
   }
-
-  .commit-row-message {
-    color: $gl-text-color;
-  }
 }
 
 .gpg-status-box {

app/helpers/ci_status_helper.rb

@@ -113,7 +113,7 @@ module CiStatusHelper
   end
 
   def render_status_with_link(type, status, path = nil, tooltip_placement: 'left', cssclass: '', container: 'body', icon_size: 16)
-    klass = "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}"
+    klass = "ci-status-link ci-status-icon-#{status.dasherize} d-inline-flex #{cssclass}"
     title = "#{type.titleize}: #{ci_label_for_status(status)}"
     data = { toggle: 'tooltip', placement: tooltip_placement, container: container }
 

app/views/admin/applications/show.html.haml

@@ -11,7 +11,7 @@
       %td
         .clipboard-group
           .input-group
-            %input.label.label-monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
+            %input.label.label-monospace.monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
             .input-group-append
               = clipboard_button(target: '#application_id', title: _("Copy ID to clipboard"), class: "btn btn btn-default")
     %tr
@@ -20,7 +20,7 @@
       %td
         .clipboard-group
           .input-group
-            %input.label.label-monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
+            %input.label.label-monospace.monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
             .input-group-append
               = clipboard_button(target: '#secret', title: _("Copy secret to clipboard"), class: "btn btn btn-default")
     %tr

app/views/doorkeeper/applications/show.html.haml

@@ -14,7 +14,7 @@
       %td
         .clipboard-group
           .input-group
-            %input.label.label-monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
+            %input.label.label-monospace.monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
             .input-group-append
               = clipboard_button(target: '#application_id', title: _("Copy ID to clipboard"), class: "btn btn btn-default")
     %tr
@@ -23,7 +23,7 @@
       %td
         .clipboard-group
           .input-group
-            %input.label.label-monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
+            %input.label.label-monospace.monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
             .input-group-append
               = clipboard_button(target: '#secret', title: _("Copy secret to clipboard"), class: "btn btn btn-default")
     %tr

app/views/projects/branches/_commit.html.haml

-.branch-commit
+.branch-commit.cgray
   .icon-container.commit-icon
     = custom_icon("icon_commit")
   = link_to commit.short_id, project_commit_path(project, commit.id), class: "commit-sha"
   ·
   %span.str-truncated
-    = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message"
+    = link_to_markdown commit.title, project_commit_path(project, commit.id), class: "commit-row-message cgray"
   ·
   #{time_ago_with_tooltip(commit.committed_date)}

app/views/projects/ci/builds/_build.html.haml

@@ -12,7 +12,7 @@
   %td.status
     = render "ci/status/badge", status: job.detailed_status(current_user), title: job.status_title
 
-  %td.branch-commit
+  %td.branch-commit.cgray
     - if can?(current_user, :read_build, job)
       = link_to project_job_path(job.project, job) do
         %span.build-link ##{job.id}

app/views/projects/commits/_commit.html.haml

@@ -49,7 +49,7 @@
       .js-commit-pipeline-status{ data: { endpoint: pipelines_project_commit_path(project, commit.id, ref: ref) } }
 
       .commit-sha-group.d-none.d-sm-flex
-        .label.label-monospace
+        .label.label-monospace.monospace
           = commit.short_id
         = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard"), class: "btn btn-default", container: "body")
         = link_to_browse_code(project, commit)

app/views/projects/commits/_inline_commit.html.haml

@@ -3,6 +3,6 @@
     = link_to commit.short_id, project_commit_path(project, commit), class: "commit-sha"
      
     %span.str-truncated
-      = link_to_markdown_field(commit, :title, project_commit_path(project, commit.id), class: "commit-row-message")
+      = link_to_markdown_field(commit, :title, project_commit_path(project, commit.id), class: "commit-row-message cgray")
     .float-right
       #{time_ago_with_tooltip(commit.committed_date)}

app/views/projects/deployments/_commit.html.haml

 .table-mobile-content
-  .branch-commit
+  .branch-commit.cgray
     - if deployment.ref
       %span.icon-container
         = deployment.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite')
@@ -12,6 +12,6 @@
       %span.flex-truncate-child
         - if commit_title = deployment.commit_title
           = author_avatar(deployment.commit, size: 20)
-          = link_to_markdown commit_title, project_commit_path(@project, deployment.sha), class: "commit-row-message"
+          = link_to_markdown commit_title, project_commit_path(@project, deployment.sha), class: "commit-row-message cgray"
         - else
           = _("Can't find HEAD commit for this branch")

app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml

@@ -5,11 +5,11 @@
 - pipeline_link = local_assigns.fetch(:pipeline_link, false)
 - stage = local_assigns.fetch(:stage, false)
 
-%tr.generic_commit_status{ class: ('retried' if retried) }
+%tr.generic-commit-status{ class: ('retried' if retried) }
   %td.status
     = render 'ci/status/badge', status: generic_commit_status.detailed_status(current_user)
 
-  %td.generic_commit_status-link
+  %td.generic-commit-status-link
     - if can?(current_user, :read_commit_status, generic_commit_status) && generic_commit_status.target_url
       = link_to generic_commit_status.target_url do
         %span.build-link ##{generic_commit_status.id}

app/views/shared/_mini_pipeline_graph.html.haml

@@ -4,7 +4,7 @@
       - detailed_status = stage.detailed_status(current_user)
       - icon_status = "#{detailed_status.icon}_borderless"
 
-      .stage-container.dropdown{ class: klass }
+      .stage-container.mt-0.ml-1.dropdown{ class: klass }
         %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_ajax_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
           = sprite_icon(icon_status)