Merge branch '229961-ux-polish-fix-icon-styles' into 'master'

Resolve "UX Polish: Fix icon styles"

See merge request gitlab-org/gitlab!37546

app/assets/javascripts/design_management_new/components/upload/design_dropzone.vue

@@ -28,6 +28,12 @@ export default {
     dragging() {
       return this.dragCounter !== 0;
     },
+    iconStyles() {
+      return {
+        size: this.hasDesigns ? 24 : 16,
+        class: this.hasDesigns ? 'gl-mb-2' : 'gl-mr-3 gl-text-gray-700',
+      };
+    },
   },
   methods: {
     isValidUpload(files) {
@@ -90,7 +96,7 @@ export default {
           class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center"
           data-testid="dropzone-area"
         >
-          <gl-icon name="upload" :size="24" :class="hasDesigns ? 'gl-mb-2' : 'gl-mr-4'" />
+          <gl-icon name="upload" :size="iconStyles.size" :class="iconStyles.class" />
           <p class="gl-font-weight-bold gl-mb-0">
             <gl-sprintf :message="__('Drop or %{linkStart}upload%{linkEnd} Designs to attach')">
               <template #link="{ content }">

changelogs/unreleased/229961-ux-polish-fix-icon-styles.yml

+---
+title: 'Resolve UX Polish: Fix icon styles'
+merge_request: 37546
+author:
+type: fixed

doc/user/project/issues/design_management.md

@@ -110,7 +110,7 @@ instead of directly on the issue description.
 To upload Design images, drag files from your computer and drop them in the Design Management section,
 or click **upload** to select images from your file browser:
 
-![Designs empty state](img/design_management_upload_v13.2.png)
+![Designs empty state](img/design_management_upload_v13.3.png)
 
 [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/34353) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.9,
 you can drag and drop designs onto the dedicated drop zone to upload them.

spec/frontend/design_management_new/components/upload/design_dropzone_spec.js

@@ -140,12 +140,14 @@ describe('Design management dropzone component', () => {
   it('applies correct classes when there are no designs or no design saving loader', () => {
     createComponent({ props: { hasDesigns: false } });
     expect(findDropzoneArea().classes()).not.toContain('gl-flex-direction-column');
-    expect(findIcon().classes()).toEqual(['gl-mr-4']);
+    expect(findIcon().classes()).toEqual(['gl-mr-3', 'gl-text-gray-700']);
+    expect(findIcon().props('size')).toBe(16);
   });
 
   it('applies correct classes when there are designs or design saving loader', () => {
     createComponent({ props: { hasDesigns: true } });
     expect(findDropzoneArea().classes()).toContain('gl-flex-direction-column');
     expect(findIcon().classes()).toEqual(['gl-mb-2']);
+    expect(findIcon().props('size')).toBe(24);
   });
 });