Fix cdx-dialog styling and remove old wikit-dialog styles (#776)

hasanakg · web-flow · commit d26e04f64d86 · 2023-11-24T11:35:02.000+01:00
Bug: T347100
diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
@@ -107,14 +107,7 @@
         <cdx-dialog id="results-confirmation-dialog"
             :title="$i18n('confirmation-dialog-title')"
             v-model:open="confirmationDialog"
-            :primary-action="{
-                label: $i18n('confirmation-dialog-button'),
-                namespace: 'next-steps-confirm',
-                actionType: 'progressive'
-
-            }"
             @update:open="disableConfirmation = false"
-            @primary="_handleConfirmation"
             close-button-label="X"
         >
             <p>{{ $i18n('confirmation-dialog-message-intro') }}</p>
@@ -123,12 +116,24 @@
                 <li>{{ $i18n('confirmation-dialog-message-tip-2') }}</li>
                 <li>{{ $i18n('confirmation-dialog-message-tip-3') }}</li>
             </ul>
-            <cdx-checkbox class="disable-confirmation"
-                v-model="disableConfirmation"
-            >
-              {{ $i18n('confirmation-dialog-option-label') }}
-            </cdx-checkbox>
-        </cdx-dialog>
+
+			<template #footer>
+				<cdx-checkbox class="disable-confirmation" v-model="disableConfirmation" inline
+				>
+					{{ $i18n('confirmation-dialog-option-label') }}
+				</cdx-checkbox>
+
+				<cdx-button
+					weight="primary"
+					action="progressive"
+					:aria-label="$i18n('confirmation-dialog-button')"
+					@click="_handleConfirmation"
+				>
+					{{ $i18n('confirmation-dialog-button') }}
+				</cdx-button>
+			</template>
+
+		</cdx-dialog>
     </div>
 </template>
 
@@ -413,7 +418,13 @@ h2 {
         content: "";
     }
 }
-
+#results-confirmation-dialog {
+	footer {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+	}
+}
 .mismatches-form-footer {
     margin-top: $dimension-layout-xsmall;
     display: flex;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -3,6 +3,7 @@
 @import '~ress';
 @import '~wikit-dist/wikit-vue-components-vue3compat.css';
 @import "@wikimedia/codex/dist/codex.style.css";
+@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
 @import '~@wmde/wikit-tokens/dist/_variables.scss';
 @import './_typography.scss';
 
@@ -72,38 +73,14 @@ a {
 
 p, ul, ol {
     margin-block-end: 1rem;
-
-    .wikit-Dialog & {
-        margin-block-end: 1rem;
-    }
 }
 
 li + li {
     margin-block-start: 1rem;
-
-    .wikit-Dialog & {
-        margin-block-start: 1rem;
-    }
 }
 
 li {
     margin-inline-start: 1rem;
-
-    .wikit-Dialog & {
-        margin-inline-start: 1rem;
-    }
-}
-
-.wikit.wikit-Dialog {
-    // Override global styles from media query below
-    header {
-        flex-direction: row;
-    }
-
-    // Ensure dialog is wider than 75% default
-    .wikit-Dialog__modal {
-        max-width: 90%;
-    }
 }
 
 #error-section,
@@ -398,7 +375,7 @@ dl.import-meta .download-csv {
     nav.tabs {
         padding-bottom: 24px;
     }
-    .button-group { 
+    .button-group {
         margin-top: 16px;
     }
 }
@@ -424,4 +401,13 @@ dl.import-meta .download-csv {
 // is marked as resolved.
 .cdx-button .cdx-icon {
     vertical-align: text-top;
-}
+}
+
+.cdx-dialog {
+	header {
+		color: $color-emphasized;
+	}
+	&__body {
+		line-height: $line-height-medium;
+	}
+}
