Merge branch 'issue-weight-alignment-color' into 'master'

Fixes weight icon alignment and color

See merge request gitlab-org/gitlab!35710

app/assets/javascripts/boards/components/issue_due_date.vue

@@ -87,11 +87,7 @@ export default {
 <template>
   <span>
     <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
-      <icon
-        :class="{ 'text-danger': isPastDue }"
-        class="board-card-info-icon align-top"
-        name="calendar"
-      />
+      <icon :class="{ 'text-danger': isPastDue }" class="board-card-info-icon" name="calendar" />
       <time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
         body
       }}</time>

app/assets/javascripts/boards/components/issue_time_estimate.vue

@@ -34,10 +34,9 @@ export default {
 <template>
   <span>
     <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <icon name="hourglass" class="board-card-info-icon align-top" /><time
-        class="board-card-info-text"
-        >{{ timeEstimate }}</time
-      >
+      <icon name="hourglass" class="board-card-info-icon" /><time class="board-card-info-text">{{
+        timeEstimate
+      }}</time>
     </span>
     <gl-tooltip
       :target="() => $refs.issueTimeEstimate"

app/assets/stylesheets/pages/boards.scss

@@ -521,7 +521,7 @@
   }
 
   &.board-card-weight {
-    color: $gl-text-color;
+    color: $gl-text-color-secondary;
     cursor: pointer;
 
     &:hover {
@@ -531,8 +531,9 @@
   }
 
   .board-card-info-icon {
-    color: $gray-600;
+    color: $gray-700;
     margin-right: $gl-padding-4;
+    vertical-align: text-top;
   }
 
   @include media-breakpoint-down(md) {

changelogs/unreleased/issue-weight-alignment-color.yml

+---
+title: Fix icon alignment on board cards
+merge_request: 35710
+author: carolcarvalhosa
+type: fixed