1 files changed, 34 insertions, 13 deletions

diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
index c849e4d4ed6..3d6c2561ff6 100644
--- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Design management design index page renders design index 1`] = `
 <div
-  class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+  class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
 >
   <div
-    class="d-flex overflow-hidden flex-grow-1 flex-column position-relative"
+    class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
   >
     <design-destroyer-stub
       filenames="test.jpg"
@@ -23,16 +23,26 @@ exports[`Design management design index page renders design index 1`] = `
     />
      
     <div
-      class="design-scaler-wrapper position-absolute mb-4 d-flex-center"
+      class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
     >
       <design-scaler-stub />
     </div>
   </div>
    
   <div
-    class="image-notes"
+    class="image-notes gl-pt-0"
   >
-    <!---->
+    <div
+      class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
+    >
+      <span>
+        To Do
+      </span>
+       
+      <design-todo-button-stub
+        design="[object Object]"
+      />
+    </div>
      
     <h2
       class="gl-font-weight-bold gl-mt-0"
@@ -67,6 +77,7 @@ exports[`Design management design index page renders design index 1`] = `
     />
      
     <gl-button-stub
+      buttontextclasses=""
       category="primary"
       class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4"
       data-testid="resolved-comments"
@@ -121,10 +132,10 @@ exports[`Design management design index page renders design index 1`] = `
 
 exports[`Design management design index page sets loading state 1`] = `
 <div
-  class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+  class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
 >
   <gl-loading-icon-stub
-    class="align-self-center"
+    class="gl-align-self-center"
     color="orange"
     label="Loading"
     size="xl"
@@ -134,10 +145,10 @@ exports[`Design management design index page sets loading state 1`] = `
 
 exports[`Design management design index page with error GlAlert is rendered in correct position with correct content 1`] = `
 <div
-  class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+  class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
 >
   <div
-    class="d-flex overflow-hidden flex-grow-1 flex-column position-relative"
+    class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
   >
     <design-destroyer-stub
       filenames="test.jpg"
@@ -146,7 +157,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     />
      
     <div
-      class="p-3"
+      class="gl-p-5"
     >
       <gl-alert-stub
         dismissible="true"
@@ -172,16 +183,26 @@ exports[`Design management design index page with error GlAlert is rendered in c
     />
      
     <div
-      class="design-scaler-wrapper position-absolute mb-4 d-flex-center"
+      class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
     >
       <design-scaler-stub />
     </div>
   </div>
    
   <div
-    class="image-notes"
+    class="image-notes gl-pt-0"
   >
-    <!---->
+    <div
+      class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
+    >
+      <span>
+        To Do
+      </span>
+       
+      <design-todo-button-stub
+        design="[object Object]"
+      />
+    </div>
      
     <h2
       class="gl-font-weight-bold gl-mt-0"