1 files changed, 9 insertions, 19 deletions
diff --git a/app/assets/javascripts/work_items/components/widget_wrapper.vue b/app/assets/javascripts/work_items/components/widget_wrapper.vue
index 6ae30e9b084..f343f787358 100644
--- a/app/assets/javascripts/work_items/components/widget_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/widget_wrapper.vue
@@ -27,6 +27,9 @@ export default {
     toggleLabel() {
       return this.isOpen ? __('Collapse') : __('Expand');
     },
+    isOpenString() {
+      return this.isOpen ? 'true' : 'false';
+    },
   },
   methods: {
     hide() {
@@ -43,18 +46,10 @@ export default {
 </script>
 
 <template>
-  <div
-    id="tasks"
-    class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10 gl-mt-5"
-  >
-    <div
-      class="gl-pl-5 gl-pr-4 gl-py-4 gl-display-flex gl-justify-content-space-between gl-bg-white gl-rounded-base"
-      :class="{
-        'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100 gl-rounded-bottom-left-none! gl-rounded-bottom-right-none!': isOpen,
-      }"
-    >
-      <div class="gl-display-flex gl-flex-grow-1">
-        <h3 class="card-title h5 gl-m-0 gl-relative gl-line-height-24">
+  <div id="tasks" class="gl-new-card" :aria-expanded="isOpenString">
+    <div class="gl-new-card-header">
+      <div class="gl-new-card-title-wrapper">
+        <h3 class="gl-new-card-title">
           <gl-link
             id="user-content-tasks-links"
             class="anchor position-absolute gl-text-decoration-none"
@@ -66,7 +61,7 @@ export default {
         <slot name="header-suffix"></slot>
       </div>
       <slot name="header-right"></slot>
-      <div class="gl-border-l-1 gl-border-l-solid gl-border-l-gray-100 gl-pl-3 gl-ml-3">
+      <div class="gl-new-card-toggle">
         <gl-button
           category="tertiary"
           size="small"
@@ -80,12 +75,7 @@ export default {
     <gl-alert v-if="error" variant="danger" @dismiss="$emit('dismissAlert')">
       {{ error }}
     </gl-alert>
-    <div
-      v-if="isOpen"
-      class="gl-bg-gray-10 gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
-      :class="{ 'gl-p-3': !error }"
-      data-testid="widget-body"
-    >
+    <div v-if="isOpen" class="gl-new-card-body" :class="{ error: error }" data-testid="widget-body">
       <slot name="body"></slot>
     </div>
   </div>