Refactor Design management application to match new visual styles

app/assets/javascripts/design_management_new/components/delete_button.vue

 <script>
-import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
+import { s__ } from '~/locale';
 
 export default {
   name: 'DeleteButton',
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlModal,
   },
   directives: {
@@ -25,7 +26,12 @@ export default {
     buttonVariant: {
       type: String,
       required: false,
-      default: '',
+      default: 'info',
+    },
+    buttonSize: {
+      type: String,
+      required: false,
+      default: 'medium',
     },
     hasSelectedDesigns: {
       type: Boolean,
@@ -38,27 +44,38 @@ export default {
       modalId: uniqueId('design-deletion-confirmation-'),
     };
   },
+  modal: {
+    title: s__('DesignManagement|Delete designs confirmation'),
+    actionPrimary: {
+      text: s__('Delete'),
+      attributes: { variant: 'danger' },
+    },
+    actionCancel: {
+      text: s__('Cancel'),
+    },
+  },
 };
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-align-items-center gl-h-full">
     <gl-modal
       :modal-id="modalId"
-      :title="s__('DesignManagement|Delete designs confirmation')"
-      :ok-title="s__('DesignManagement|Delete')"
-      ok-variant="danger"
+      :title="$options.modal.title"
+      :action-primary="$options.modal.actionPrimary"
+      :action-cancel="$options.modal.actionCancel"
       @ok="$emit('deleteSelectedDesigns')"
     >
       <p>{{ s__('DesignManagement|Are you sure you want to delete the selected designs?') }}</p>
     </gl-modal>
-    <gl-deprecated-button
+    <gl-button
       v-gl-modal-directive="modalId"
       :variant="buttonVariant"
-      :disabled="isDeleting || !hasSelectedDesigns"
+      :size="buttonSize"
       :class="buttonClass"
+      :disabled="isDeleting || !hasSelectedDesigns"
     >
       <slot></slot>
-    </gl-deprecated-button>
+    </gl-button>
   </div>
 </template>

app/assets/javascripts/design_management_new/components/list/item.vue

@@ -127,7 +127,7 @@ export default {
       params: { id: filename },
       query: $route.query,
     }"
-    class="card cursor-pointer text-plain js-design-list-item design-list-item"
+    class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   >
     <div class="card-body p-0 d-flex-center overflow-hidden position-relative">
       <div v-if="icon.name" class="design-event position-absolute">

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

 <script>
-import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlLoadingIcon,
   },
   directives: {
@@ -30,7 +30,7 @@ export default {
 
 <template>
   <div>
-    <gl-deprecated-button
+    <gl-button
       v-gl-tooltip.hover
       :title="
         s__(
@@ -39,11 +39,12 @@ export default {
       "
       :disabled="isSaving"
       variant="success"
+      size="small"
       @click="openFileUpload"
     >
       {{ s__('DesignManagement|Upload designs') }}
       <gl-loading-icon v-if="isSaving" inline class="ml-1" />
-    </gl-deprecated-button>
+    </gl-button>
 
     <input
       ref="fileUpload"

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

@@ -12,6 +12,12 @@ export default {
     GlLink,
     GlSprintf,
   },
+  props: {
+    hasDesigns: {
+      type: Boolean,
+      required: true,
+    },
+  },
   data() {
     return {
       dragCounter: 0,
@@ -76,28 +82,29 @@ export default {
   >
     <slot>
       <button
-        class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
+        class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
         @click="openFileUpload"
       >
-        <div class="d-flex-center flex-column text-center">
-          <gl-icon name="doc-new" :size="48" class="mb-4" />
-          <p>
-            <gl-sprintf
-              :message="
-                __(
-                  '%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}.',
-                )
-              "
-            >
-              <template #lineOne="{ content }"
-                ><span class="d-block">{{ content }}</span>
-              </template>
-
-              <template #link="{ content }">
-                <gl-link class="h-100 w-100" @click.stop="openFileUpload">{{ content }}</gl-link>
-              </template>
-            </gl-sprintf>
-          </p>
+        <div
+          :class="{ 'gl-flex-direction-column': hasDesigns }"
+          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-sprintf
+            :message="
+              __(
+                '%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}',
+              )
+            "
+          >
+            <template #content="{ content }">
+              <span class="gl-font-weight-bold">{{ content }}&nbsp;</span>
+            </template>
+            <template #link="{ content }">
+              <gl-link @click.stop="openFileUpload">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
         </div>
       </button>
 
@@ -117,7 +124,7 @@ export default {
         class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
       >
         <div v-show="!isDragDataValid" class="mw-50 text-center">
-          <h3>{{ __('Oh no!') }}</h3>
+          <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3>
           <span>{{
             __(
               'You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.',
@@ -125,7 +132,7 @@ export default {
           }}</span>
         </div>
         <div v-show="isDragDataValid" class="mw-50 text-center">
-          <h3>{{ __('Incoming!') }}</h3>
+          <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3>
           <span>{{ __('Drop your designs to start your upload.') }}</span>
         </div>
       </div>

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

 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import allVersionsMixin from '../../mixins/all_versions';
 import { findVersionId } from '../../utils/design_management_utils';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlNewDropdown,
+    GlNewDropdownItem,
   },
   mixins: [allVersionsMixin],
   computed: {
@@ -50,8 +50,8 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
-    <gl-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
+  <gl-new-dropdown :text="dropdownText" size="small" class="design-version-dropdown">
+    <gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
       <router-link
         class="d-flex js-version-link"
         :to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }"
@@ -71,6 +71,6 @@ export default {
           class="fa fa-check pull-right"
         ></i>
       </router-link>
-    </gl-dropdown-item>
-  </gl-dropdown>
+    </gl-new-dropdown-item>
+  </gl-new-dropdown>
 </template>

app/assets/javascripts/design_management_new/pages/index.vue

 <script>
-import { GlLoadingIcon, GlDeprecatedButton, GlAlert } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import UploadButton from '../components/upload/button.vue';
@@ -33,7 +33,7 @@ export default {
   components: {
     GlLoadingIcon,
     GlAlert,
-    GlDeprecatedButton,
+    GlButton,
     UploadButton,
     Design,
     DesignDestroyer,
@@ -96,6 +96,14 @@ export default {
         ? s__('DesignManagement|Deselect all')
         : s__('DesignManagement|Select all');
     },
+    isDesignListEmpty() {
+      return !this.isSaving && !this.hasDesigns;
+    },
+    designDropzoneWrapperClass() {
+      return this.isDesignListEmpty
+        ? 'col-12'
+        : 'gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3';
+    },
   },
   mounted() {
     this.toggleOnPasteListener(this.$route.name);
@@ -259,18 +267,22 @@ export default {
 </script>
 
 <template>
-  <div data-testid="designs-root">
+  <div data-testid="designs-root" class="gl-mt-2">
     <header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
-      <div class="d-flex justify-content-between align-items-center w-100">
-        <design-version-dropdown />
-        <div :class="['qa-selector-toolbar', { 'd-flex': hasDesigns, 'd-none': !hasDesigns }]">
-          <gl-deprecated-button
+      <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full">
+        <div>
+          <span class="gl-font-weight-bold gl-mr-3">{{ s__('DesignManagement|Designs') }}</span>
+          <design-version-dropdown />
+        </div>
+        <div v-show="hasDesigns" class="qa-selector-toolbar gl-display-flex">
+          <gl-button
             v-if="isLatestVersion"
             variant="link"
-            class="mr-2 js-select-all"
+            size="small"
+            class="gl-mr-2 js-select-all"
             @click="toggleDesignsSelection"
-            >{{ selectAllButtonText }}</gl-deprecated-button
-          >
+            >{{ selectAllButtonText }}
+          </gl-button>
           <design-destroyer
             #default="{ mutate, loading }"
             :filenames="selectedDesigns"
@@ -280,7 +292,9 @@ export default {
             <delete-button
               v-if="isLatestVersion"
               :is-deleting="loading"
-              button-class="btn-danger btn-inverted mr-2"
+              button-variant="danger"
+              button-class="gl-mr-4"
+              button-size="small"
               :has-selected-designs="hasSelectedDesigns"
               @deleteSelectedDesigns="mutate()"
             >
@@ -298,11 +312,22 @@ export default {
         {{ __('An error occurred while loading designs. Please try again.') }}
       </gl-alert>
       <ol v-else class="list-unstyled row">
-        <li class="col-md-6 col-lg-4 mb-3">
-          <design-dropzone class="design-list-item" @change="onUploadDesign" />
+        <span
+          v-if="isDesignListEmpty && !allVersions.length"
+          class="gl-font-weight-bold gl-font-weight-bold gl-ml-5 gl-mb-4"
+          >{{ s__('DesignManagement|Designs') }}</span
+        >
+        <li :class="designDropzoneWrapperClass" data-testid="design-dropzone-wrapper">
+          <design-dropzone
+            :class="{ 'design-list-item design-list-item-new': !isDesignListEmpty }"
+            :has-designs="hasDesigns"
+            @change="onUploadDesign"
+          />
         </li>
-        <li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-4 mb-3">
-          <design-dropzone @change="onExistingDesignDropzoneChange($event, design.filename)"
+        <li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-3 gl-mb-3">
+          <design-dropzone
+            :has-designs="hasDesigns"
+            @change="onExistingDesignDropzoneChange($event, design.filename)"
             ><design v-bind="design" :is-uploading="isDesignToBeSaved(design.filename)"
           /></design-dropzone>
 

app/assets/stylesheets/components/design_management/design_list_item.scss

@@ -17,3 +17,8 @@
     height: 230px;
   }
 }
+
+// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197
+.design-list-item-new {
+  height: 210px;
+}

app/views/projects/issues/_design_management.html.haml

@@ -4,15 +4,24 @@
   - else
     .js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
 - else
-  .mt-4
-    .row.empty-state
-      .col-12
-        .text-content
-          %h4.center
-            = _('The one place for your designs')
-          %p.center
-            - requirements_link_url = help_page_path('user/project/issues/design_management', anchor: 'requirements')
-            - requirements_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: requirements_link_url }
-            - support_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: support_url }
-            - link_end = '</a>'.html_safe
-            = s_("DesignManagement|To enable design management, you'll need to  %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance.").html_safe % { requirements_link_start: requirements_link_start, requirements_link_end: link_end, support_link_start: support_link_start, support_link_end: link_end }
+  - if Feature.enabled?(:design_management_moved, @project)
+    .row.empty-state.design-dropzone-border.gl-mt-5
+      .text-content.center.gl-font-weight-bold
+        - requirements_link_url = help_page_path('user/project/issues/design_management', anchor: 'requirements')
+        - requirements_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: requirements_link_url }
+        - support_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: support_url }
+        - link_end = '</a>'.html_safe
+        = s_("DesignManagement|To enable design management, you'll need to %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance.").html_safe % { requirements_link_start: requirements_link_start, requirements_link_end: link_end, support_link_start: support_link_start, support_link_end: link_end }
+  - else
+    .mt-4
+      .row.empty-state
+        .col-12
+          .text-content
+            %h4.center
+              = _('The one place for your designs')
+            %p.center
+              - requirements_link_url = help_page_path('user/project/issues/design_management', anchor: 'requirements')
+              - requirements_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: requirements_link_url }
+              - support_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: support_url }
+              - link_end = '</a>'.html_safe
+              = s_("DesignManagement|To enable design management, you'll need to %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance.").html_safe % { requirements_link_start: requirements_link_start, requirements_link_end: link_end, support_link_start: support_link_start, support_link_end: link_end }

locale/gitlab.pot

@@ -299,6 +299,9 @@ msgstr ""
 msgid "%{containerScanningLinkStart}Container Scanning%{containerScanningLinkEnd} and/or %{dependencyScanningLinkStart}Dependency Scanning%{dependencyScanningLinkEnd} must be enabled. %{securityBotLinkStart}GitLab-Security-Bot%{securityBotLinkEnd} will be the author of the auto-created merge request. %{moreInfoLinkStart}More information%{moreInfoLinkEnd}."
 msgstr ""
 
+msgid "%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
+msgstr ""
+
 msgid "%{cores} cores"
 msgstr ""
 
@@ -7928,6 +7931,9 @@ msgstr ""
 msgid "DesignManagement|Deselect all"
 msgstr ""
 
+msgid "DesignManagement|Designs"
+msgstr ""
+
 msgid "DesignManagement|Discard comment"
 msgstr ""
 
@@ -7970,7 +7976,7 @@ msgstr ""
 msgid "DesignManagement|The maximum number of designs allowed to be uploaded is %{upload_limit}. Please try again."
 msgstr ""
 
-msgid "DesignManagement|To enable design management, you'll need to  %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance."
+msgid "DesignManagement|To enable design management, you'll need to %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance."
 msgstr ""
 
 msgid "DesignManagement|Unresolve thread"

spec/frontend/design_management_new/components/delete_button_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import BatchDeleteButton from '~/design_management_new/components/delete_button.vue';
 
 describe('Batch delete button component', () => {
   let wrapper;
 
-  const findButton = () => wrapper.find(GlDeprecatedButton);
+  const findButton = () => wrapper.find(GlButton);
   const findModal = () => wrapper.find(GlModal);
 
   function createComponent(isDeleting = false) {

spec/frontend/design_management_new/components/list/__snapshots__/item_spec.js.snap

@@ -10,7 +10,7 @@ exports[`Design management list item component when item appears in view after i
 
 exports[`Design management list item component with no notes renders item with correct status icon for creation event 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
@@ -78,7 +78,7 @@ exports[`Design management list item component with no notes renders item with c
 
 exports[`Design management list item component with no notes renders item with correct status icon for deletion event 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
@@ -146,7 +146,7 @@ exports[`Design management list item component with no notes renders item with c
 
 exports[`Design management list item component with no notes renders item with correct status icon for modification event 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
@@ -214,7 +214,7 @@ exports[`Design management list item component with no notes renders item with c
 
 exports[`Design management list item component with no notes renders item with no status icon for none event 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
@@ -269,7 +269,7 @@ exports[`Design management list item component with no notes renders item with n
 
 exports[`Design management list item component with no notes renders loading spinner when isUploading is true 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
@@ -329,7 +329,7 @@ exports[`Design management list item component with no notes renders loading spi
 
 exports[`Design management list item component with notes renders item with multiple comments 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
@@ -401,7 +401,7 @@ exports[`Design management list item component with notes renders item with mult
 
 exports[`Design management list item component with notes renders item with single comment 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div

spec/frontend/design_management_new/components/toolbar/__snapshots__/index_spec.js.snap

@@ -50,6 +50,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
    
   <delete-button-stub
     buttonclass=""
+    buttonsize="medium"
     buttonvariant="danger"
     hasselecteddesigns="true"
   >

spec/frontend/design_management_new/components/upload/__snapshots__/button_spec.js.snap

@@ -4,8 +4,10 @@ exports[`Design management upload button component renders inverted upload desig
 <div
   isinverted="true"
 >
-  <gl-deprecated-button-stub
-    size="md"
+  <gl-button-stub
+    category="tertiary"
+    icon=""
+    size="small"
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
   >
@@ -13,7 +15,7 @@ exports[`Design management upload button component renders inverted upload desig
     Upload designs
     
     <!---->
-  </gl-deprecated-button-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"
@@ -27,9 +29,11 @@ exports[`Design management upload button component renders inverted upload desig
 
 exports[`Design management upload button component renders loading icon 1`] = `
 <div>
-  <gl-deprecated-button-stub
+  <gl-button-stub
+    category="tertiary"
     disabled="true"
-    size="md"
+    icon=""
+    size="small"
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
   >
@@ -43,7 +47,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
       label="Loading"
       size="sm"
     />
-  </gl-deprecated-button-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"
@@ -57,8 +61,10 @@ exports[`Design management upload button component renders loading icon 1`] = `
 
 exports[`Design management upload button component renders upload design button 1`] = `
 <div>
-  <gl-deprecated-button-stub
-    size="md"
+  <gl-button-stub
+    category="tertiary"
+    icon=""
+    size="small"
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
   >
@@ -66,7 +72,7 @@ exports[`Design management upload button component renders upload design button
     Upload designs
     
     <!---->
-  </gl-deprecated-button-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"

spec/frontend/design_management_new/components/upload/__snapshots__/design_version_dropdown_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
-<gl-dropdown-stub
+<gl-new-dropdown-stub
+  category="tertiary"
   class="design-version-dropdown"
+  headertext=""
   issueiid=""
   projectpath=""
+  size="small"
   text="Showing Latest Version"
-  variant="link"
+  variant="default"
 >
-  <gl-dropdown-item-stub>
+  <gl-new-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    secondarytext=""
+  >
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -31,8 +40,14 @@ exports[`Design management design version dropdown component renders design vers
         class="fa fa-check pull-right"
       />
     </router-link-stub>
-  </gl-dropdown-item-stub>
-  <gl-dropdown-item-stub>
+  </gl-new-dropdown-item-stub>
+  <gl-new-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    secondarytext=""
+  >
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -51,19 +66,28 @@ exports[`Design management design version dropdown component renders design vers
        
       <!---->
     </router-link-stub>
-  </gl-dropdown-item-stub>
-</gl-dropdown-stub>
+  </gl-new-dropdown-item-stub>
+</gl-new-dropdown-stub>
 `;
 
 exports[`Design management design version dropdown component renders design version list 1`] = `
-<gl-dropdown-stub
+<gl-new-dropdown-stub
+  category="tertiary"
   class="design-version-dropdown"
+  headertext=""
   issueiid=""
   projectpath=""
+  size="small"
   text="Showing Latest Version"
-  variant="link"
+  variant="default"
 >
-  <gl-dropdown-item-stub>
+  <gl-new-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    secondarytext=""
+  >
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -86,8 +110,14 @@ exports[`Design management design version dropdown component renders design vers
         class="fa fa-check pull-right"
       />
     </router-link-stub>
-  </gl-dropdown-item-stub>
-  <gl-dropdown-item-stub>
+  </gl-new-dropdown-item-stub>
+  <gl-new-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    secondarytext=""
+  >
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -106,6 +136,6 @@ exports[`Design management design version dropdown component renders design vers
        
       <!---->
     </router-link-stub>
-  </gl-dropdown-item-stub>
-</gl-dropdown-stub>
+  </gl-new-dropdown-item-stub>
+</gl-new-dropdown-stub>
 `;

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

 import { shallowMount } from '@vue/test-utils';
 import DesignDropzone from '~/design_management_new/components/upload/design_dropzone.vue';
 import createFlash from '~/flash';
+import { GlIcon } from '@gitlab/ui';
 
 jest.mock('~/flash');
 
@@ -12,10 +13,16 @@ describe('Design management dropzone component', () => {
   };
 
   const findDropzoneCard = () => wrapper.find('.design-dropzone-card');
+  const findDropzoneArea = () => wrapper.find('[data-testid="dropzone-area"]');
+  const findIcon = () => wrapper.find(GlIcon);
 
-  function createComponent({ slots = {}, data = {} } = {}) {
+  function createComponent({ slots = {}, data = {}, props = {} } = {}) {
     wrapper = shallowMount(DesignDropzone, {
       slots,
+      propsData: {
+        hasDesigns: true,
+        ...props,
+      },
       data() {
         return data;
       },
@@ -129,4 +136,16 @@ 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']);
+  });
+
+  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']);
+  });
 });

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

 import { shallowMount } from '@vue/test-utils';
 import DesignVersionDropdown from '~/design_management_new/components/upload/design_version_dropdown.vue';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
 import mockAllVersions from './mock_data/all_versions';
 
 const LATEST_VERSION_ID = 3;
@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
       });
     });
 
@@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ maxVersions: 1 });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
       });
     });
 
@@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing Version #1`);
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing Version #1`);
       });
     });
 
@@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
       });
     });
 
@@ -107,7 +107,7 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
+        expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
       });
     });
   });

spec/frontend/design_management_new/pages/__snapshots__/index_spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
 <div
+  class="gl-mt-2"
   data-testid="designs-root"
 >
   <!---->
@@ -12,18 +13,24 @@ exports[`Design management index page designs does not render toolbar when there
     <ol
       class="list-unstyled row"
     >
+      <!---->
+       
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3"
+        data-testid="design-dropzone-wrapper"
       >
         <design-dropzone-stub
-          class="design-list-item"
+          class="design-list-item design-list-item-new"
+          hasdesigns="true"
         />
       </li>
        
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
             event="NONE"
             filename="design-1-name"
@@ -36,9 +43,11 @@ exports[`Design management index page designs does not render toolbar when there
         <!---->
       </li>
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
             event="NONE"
             filename="design-2-name"
@@ -51,9 +60,11 @@ exports[`Design management index page designs does not render toolbar when there
         <!---->
       </li>
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
             event="NONE"
             filename="design-3-name"
@@ -76,31 +87,44 @@ exports[`Design management index page designs does not render toolbar when there
 
 exports[`Design management index page designs renders designs list and header with upload button 1`] = `
 <div
+  class="gl-mt-2"
   data-testid="designs-root"
 >
   <header
     class="row-content-block border-top-0 p-2 d-flex"
   >
     <div
-      class="d-flex justify-content-between align-items-center w-100"
+      class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full"
     >
-      <design-version-dropdown-stub />
+      <div>
+        <span
+          class="gl-font-weight-bold gl-mr-3"
+        >
+          Designs
+        </span>
+         
+        <design-version-dropdown-stub />
+      </div>
        
       <div
-        class="qa-selector-toolbar d-flex"
+        class="qa-selector-toolbar gl-display-flex"
       >
-        <gl-deprecated-button-stub
-          class="mr-2 js-select-all"
-          size="md"
+        <gl-button-stub
+          category="tertiary"
+          class="gl-mr-2 js-select-all"
+          icon=""
+          size="small"
           variant="link"
         >
           Select all
-        </gl-deprecated-button-stub>
+        
+        </gl-button-stub>
          
         <div>
           <delete-button-stub
-            buttonclass="btn-danger btn-inverted mr-2"
-            buttonvariant=""
+            buttonclass="gl-mr-4"
+            buttonsize="small"
+            buttonvariant="danger"
           >
             
             Delete selected
@@ -120,18 +144,24 @@ exports[`Design management index page designs renders designs list and header wi
     <ol
       class="list-unstyled row"
     >
+      <!---->
+       
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3"
+        data-testid="design-dropzone-wrapper"
       >
         <design-dropzone-stub
-          class="design-list-item"
+          class="design-list-item design-list-item-new"
+          hasdesigns="true"
         />
       </li>
        
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
             event="NONE"
             filename="design-1-name"
@@ -147,9 +177,11 @@ exports[`Design management index page designs renders designs list and header wi
         />
       </li>
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
             event="NONE"
             filename="design-2-name"
@@ -165,9 +197,11 @@ exports[`Design management index page designs renders designs list and header wi
         />
       </li>
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
             event="NONE"
             filename="design-3-name"
@@ -193,6 +227,7 @@ exports[`Design management index page designs renders designs list and header wi
 
 exports[`Design management index page designs renders error 1`] = `
 <div
+  class="gl-mt-2"
   data-testid="designs-root"
 >
   <!---->
@@ -223,6 +258,7 @@ exports[`Design management index page designs renders error 1`] = `
 
 exports[`Design management index page designs renders loading icon 1`] = `
 <div
+  class="gl-mt-2"
   data-testid="designs-root"
 >
   <!---->
@@ -243,8 +279,9 @@ exports[`Design management index page designs renders loading icon 1`] = `
 </div>
 `;
 
-exports[`Design management index page when has no designs renders empty text 1`] = `
+exports[`Design management index page when has no designs renders design dropzone 1`] = `
 <div
+  class="gl-mt-2"
   data-testid="designs-root"
 >
   <!---->
@@ -255,11 +292,18 @@ exports[`Design management index page when has no designs renders empty text 1`]
     <ol
       class="list-unstyled row"
     >
+      <span
+        class="gl-font-weight-bold gl-font-weight-bold gl-ml-5 gl-mb-4"
+      >
+        Designs
+      </span>
+       
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-12"
+        data-testid="design-dropzone-wrapper"
       >
         <design-dropzone-stub
-          class="design-list-item"
+          class=""
         />
       </li>
        

spec/frontend/design_management_new/pages/index_spec.js

@@ -68,6 +68,8 @@ describe('Design management index page', () => {
   const findToolbar = () => wrapper.find('.qa-selector-toolbar');
   const findDeleteButton = () => wrapper.find(DeleteButton);
   const findDropzone = () => wrapper.findAll(DesignDropzone).at(0);
+  const dropzoneClasses = () => findDropzone().classes();
+  const findDropzoneWrapper = () => wrapper.find('[data-testid="design-dropzone-wrapper"]');
   const findFirstDropzoneWithDesign = () => wrapper.findAll(DesignDropzone).at(1);
 
   function createComponent({
@@ -151,6 +153,22 @@ describe('Design management index page', () => {
 
       expect(wrapper.element).toMatchSnapshot();
     });
+
+    it('has correct classes applied to design dropzone', () => {
+      createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
+      expect(dropzoneClasses()).toContain('design-list-item');
+      expect(dropzoneClasses()).toContain('design-list-item-new');
+    });
+
+    it('has correct classes applied to dropzone wrapper', () => {
+      createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
+      expect(findDropzoneWrapper().classes()).toEqual([
+        'gl-flex-direction-column',
+        'col-md-6',
+        'col-lg-3',
+        'gl-mb-3',
+      ]);
+    });
   });
 
   describe('when has no designs', () => {
@@ -158,11 +176,20 @@ describe('Design management index page', () => {
       createComponent();
     });
 
-    it('renders empty text', () =>
+    it('renders design dropzone', () =>
       wrapper.vm.$nextTick().then(() => {
         expect(wrapper.element).toMatchSnapshot();
       }));
 
+    it('has correct classes applied to design dropzone', () => {
+      expect(dropzoneClasses()).not.toContain('design-list-item');
+      expect(dropzoneClasses()).not.toContain('design-list-item-new');
+    });
+
+    it('has correct classes applied to dropzone wrapper', () => {
+      expect(findDropzoneWrapper().classes()).toEqual(['col-12']);
+    });
+
     it('does not render a toolbar with buttons', () =>
       wrapper.vm.$nextTick().then(() => {
         expect(findToolbar().exists()).toBe(false);
@@ -227,12 +254,18 @@ describe('Design management index page', () => {
         },
       };
 
-      return wrapper.vm.$nextTick().then(() => {
-        findDropzone().vm.$emit('change', [{ name: 'test' }]);
-        expect(mutate).toHaveBeenCalledWith(mutationVariables);
-        expect(wrapper.vm.filesToBeSaved).toEqual([{ name: 'test' }]);
-        expect(wrapper.vm.isSaving).toBeTruthy();
-      });
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          findDropzone().vm.$emit('change', [{ name: 'test' }]);
+          expect(mutate).toHaveBeenCalledWith(mutationVariables);
+          expect(wrapper.vm.filesToBeSaved).toEqual([{ name: 'test' }]);
+          expect(wrapper.vm.isSaving).toBeTruthy();
+        })
+        .then(() => {
+          expect(dropzoneClasses()).toContain('design-list-item');
+          expect(dropzoneClasses()).toContain('design-list-item-new');
+        });
     });
 
     it('sets isSaving', () => {
@@ -380,8 +413,7 @@ describe('Design management index page', () => {
 
     it('renders toolbar buttons', () => {
       expect(findToolbar().exists()).toBe(true);
-      expect(findToolbar().classes()).toContain('d-flex');
-      expect(findToolbar().classes()).not.toContain('d-none');
+      expect(findToolbar().isVisible()).toBe(true);
     });
 
     it('adds two designs to selected designs when their checkboxes are checked', () => {
@@ -440,7 +472,7 @@ describe('Design management index page', () => {
 
   it('on latest version when has no designs toolbar buttons are invisible', () => {
     createComponent({ designs: [], allVersions: [mockVersion] });
-    expect(findToolbar().classes()).toContain('d-none');
+    expect(findToolbar().isVisible()).toBe(false);
   });
 
   describe('on non-latest version', () => {