Remove some issue CSS

app/assets/javascripts/related_issues/components/add_issuable_form.vue

@@ -197,7 +197,7 @@ export default {
     <p v-if="hasError" class="gl-field-error">
       {{ addRelatedErrorMessage }}
     </p>
-    <div class="add-issuable-form-actions clearfix">
+    <div class="gl-mt-5 gl-clearfix">
       <gl-button
         ref="addButton"
         category="primary"

app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue

@@ -82,8 +82,12 @@ export default {
     </div>
   </assignee-avatar-link>
   <div v-else>
-    <div class="user-list">
-      <div v-for="user in uncollapsedUsers" :key="user.id" class="user-item">
+    <div class="gl-display-flex gl-flex-wrap">
+      <div
+        v-for="user in uncollapsedUsers"
+        :key="user.id"
+        class="user-item gl-display-inline-block"
+      >
         <assignee-avatar-link :user="user" :issuable-type="issuableType" />
       </div>
     </div>

app/assets/javascripts/sidebar/components/participants/participants.vue

@@ -104,11 +104,11 @@ export default {
       <gl-loading-icon v-if="loading" size="sm" :inline="true" />
       {{ participantLabel }}
     </div>
-    <div class="participants-list hide-collapsed">
+    <div class="hide-collapsed gl-display-flex gl-flex-wrap">
       <div
         v-for="participant in visibleParticipants"
         :key="participant.id"
-        class="participants-author"
+        class="participants-author gl-display-inline-block gl-pr-3 gl-pb-3"
       >
         <a :href="participant.web_url || participant.webUrl" class="author-link">
           <user-avatar-image

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue

@@ -83,13 +83,15 @@ export default {
         :value="timeRemainingPercent"
         :variant="progressBarVariant"
       />
-      <div class="compare-display-container">
-        <div class="compare-display float-left">
-          <span class="compare-label">{{ s__('TimeTracking|Spent') }}</span>
+      <div
+        class="compare-display-container gl-display-flex gl-justify-content-space-between gl-mt-2"
+      >
+        <div class="gl-float-left">
+          <span class="gl-text-gray-400">{{ s__('TimeTracking|Spent') }}</span>
           <span class="compare-value spent">{{ timeSpentHumanReadable }}</span>
         </div>
-        <div class="compare-display estimated float-right">
-          <span class="compare-label">{{ s__('TimeTrackingEstimated|Est') }}</span>
+        <div class="estimated gl-float-right">
+          <span class="gl-text-gray-400">{{ s__('TimeTrackingEstimated|Est') }}</span>
           <span class="compare-value">{{ timeEstimateHumanReadable }}</span>
         </div>
       </div>

app/assets/stylesheets/framework/variables.scss

@@ -759,7 +759,6 @@ $help-shortcut-header-color: #333;
 */
 $issues-today-bg: #f3fff2 !default;
 $issues-today-border: #e1e8d5 !default;
-$compare-display-color: #888;
 
 /*
 * Label

app/assets/stylesheets/pages/issuable.scss

@@ -220,21 +220,12 @@
   }
 
   .cross-project-reference {
-    color: inherit;
-
     span {
-      white-space: nowrap;
       width: 85%;
-      overflow: hidden;
-      position: relative;
-      display: inline-block;
-      text-overflow: ellipsis;
     }
 
     button {
-      float: right;
       padding: 1px 5px;
-      background-color: $gray-light;
     }
   }
 
@@ -563,35 +554,17 @@
   }
 }
 
-.participants-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.user-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .participants-author {
-  display: inline-block;
-  padding: 0 $gl-padding-8 $gl-padding-8 0;
-
   &:nth-of-type(7n) {
     padding-right: 0;
   }
 
-  .author-link {
-    display: block;
-  }
-
   .avatar.avatar-inline {
     margin: 0;
   }
 }
 
 .user-item {
-  display: inline-block;
   padding: 5px;
   flex-basis: 20%;
 
@@ -803,10 +776,6 @@
   }
 }
 
-.add-issuable-form-actions {
-  margin-top: $gl-padding;
-}
-
 .time-tracker {
   .sidebar-collapsed-icon {
     > .stopwatch-svg {
@@ -839,18 +808,7 @@
   }
 
   .compare-display-container {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 5px;
-
-    .compare-display {
     font-size: 13px;
-      color: $compare-display-color;
-
-      .compare-value {
-        color: $gl-text-color;
-      }
-    }
   }
 
   .time-tracking-help-state {

app/views/shared/milestones/_sidebar.html.haml

@@ -164,8 +164,8 @@
         .sidebar-collapsed-icon.dont-change-state
           = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')
         .cross-project-reference.hide-collapsed
-          %span
+          %span.gl-display-inline-block.gl-text-truncate
             = s_('MilestoneSidebar|Reference:')
             %span{ title: milestone_ref }
               = milestone_ref
-          = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')
+          = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport', class: 'btn-clipboard btn-transparent gl-float-right gl-bg-gray-10')

ee/app/assets/javascripts/related_items_tree/components/create_epic_form.vue

@@ -190,7 +190,7 @@ export default {
       </div>
     </div>
 
-    <div class="add-issuable-form-actions clearfix">
+    <div class="gl-mt-5 gl-clearfix">
       <gl-button
         :disabled="isSubmitButtonDisabled"
         :loading="isSubmitting"

spec/frontend/sidebar/assignees_spec.js

@@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 import Assignee from '~/sidebar/components/assignees/assignees.vue';
+import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue';
 import UsersMock from './mock_data';
 
 describe('Assignee component', () => {
@@ -19,6 +20,7 @@ describe('Assignee component', () => {
     });
   };
 
+  const findAllAvatarLinks = () => wrapper.findAllComponents(AssigneeAvatarLink);
   const findComponentTextNoUsers = () => wrapper.find('[data-testid="no-value"]');
   const findCollapsedChildren = () => wrapper.findAll('.sidebar-collapsed-icon > *');
 
@@ -148,7 +150,7 @@ describe('Assignee component', () => {
         editable: true,
       });
 
-      expect(wrapper.findAll('.user-item').length).toBe(users.length);
+      expect(findAllAvatarLinks()).toHaveLength(users.length);
       expect(wrapper.find('.user-list-more').exists()).toBe(false);
     });
 
@@ -178,9 +180,9 @@ describe('Assignee component', () => {
         users,
       });
 
-      const userItems = wrapper.findAll('.user-list .user-item a');
+      const userItems = findAllAvatarLinks();
 
-      expect(userItems.length).toBe(3);
+      expect(userItems).toHaveLength(3);
       expect(userItems.at(0).attributes('title')).toBe(users[2].name);
     });