Merge branch 'jswain_whats_new_styles' into 'master'

Whats New - minor styling changes

See merge request gitlab-org/gitlab!47115

app/assets/javascripts/whats_new/components/app.vue

@@ -71,7 +71,7 @@ export default {
       @close="closeDrawer"
     >
       <template #header>
-        <h4 class="page-title gl-my-3">{{ __("What's new at GitLab") }}</h4>
+        <h4 class="page-title gl-my-2">{{ __("What's new at GitLab") }}</h4>
       </template>
       <gl-infinite-scroll
         v-if="features.length"
@@ -81,16 +81,20 @@ export default {
         @bottomReached="bottomReached"
       >
         <template #items>
-          <div v-for="feature in features" :key="feature.title" class="gl-mb-7 gl-px-5 gl-pt-5">
+          <div
+            v-for="feature in features"
+            :key="feature.title"
+            class="gl-pb-7 gl-pt-5 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
+          >
             <gl-link
               :href="feature.url"
               target="_blank"
-              data-testid="whats-new-title-link"
+              class="whats-new-item-title-link"
               data-track-event="click_whats_new_item"
               :data-track-label="feature.title"
               :data-track-property="feature.url"
             >
-              <h5 class="gl-font-base">{{ feature.title }}</h5>
+              <h5 class="gl-font-lg">{{ feature.title }}</h5>
             </gl-link>
             <div v-if="feature.packages" class="gl-mb-3">
               <gl-badge

app/assets/stylesheets/components/whats_new.scss

@@ -18,6 +18,14 @@
   @include gl-font-weight-bold;
 }
 
+.whats-new-item-title-link {
+  &:hover,
+  &:focus,
+  &:active {
+    @include gl-text-gray-900;
+  }
+}
+
 .whats-new-item-image {
   border-color: $gray-50;
 }

spec/frontend/whats_new/components/app_spec.js

@@ -107,7 +107,7 @@ describe('App', () => {
   it('send an event when feature item is clicked', () => {
     trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
 
-    const link = wrapper.find('[data-testid="whats-new-title-link"]');
+    const link = wrapper.find('.whats-new-item-title-link');
     triggerEvent(link.element);
 
     expect(trackingSpy.mock.calls[1]).toMatchObject([