feat: Update widget builder to support dark mode (#10230)

app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue

@@ -266,9 +266,9 @@ export default {
 
 <template>
   <div class="mx-8">
-    <div class="widget-builder-container">
-      <div class="settings-container w-100 lg:w-[40%]">
-        <div class="settings-content">
+    <div class="flex p-2.5">
+      <div class="w-100 lg:w-[40%]">
+        <div class="min-h-full py-4 overflow-y-scroll">
           <form @submit.prevent="updateWidget">
             <woot-avatar-uploader
               :label="
@@ -377,7 +377,7 @@ export default {
               "
             />
             <woot-submit-button
-              class="submit-button"
+              class="mt-4"
               :button-text="
                 $t(
                   'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
@@ -389,14 +389,17 @@ export default {
           </form>
         </div>
       </div>
-      <div class="widget-container w-100 lg:w-3/5">
+      <div class="w-100 lg:w-3/5">
         <InputRadioGroup
           name="widget-view-options"
           class="text-center"
           :items="getWidgetViewOptions"
           :action="handleWidgetViewChange"
         />
-        <div v-if="isWidgetPreview" class="widget-preview">
+        <div
+          v-if="isWidgetPreview"
+          class="flex flex-col items-center justify-end min-h-[40.625rem] mx-5 mb-5 p-2.5 bg-slate-50 dark:bg-slate-900/50 rounded-lg"
+        >
           <Widget
             :welcome-heading="welcomeHeading"
             :welcome-tagline="welcomeTagline"
@@ -410,56 +413,10 @@ export default {
             :widget-bubble-type="widgetBubbleType"
           />
         </div>
-        <div v-else class="widget-script">
+        <div v-else class="mx-5 p-2.5 bg-slate-50 rounded-lg dark:bg-slate-700">
           <woot-code :script="widgetScript" />
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-@import 'dashboard/assets/scss/woot';
-
-.widget-builder-container {
-  display: flex;
-  flex-direction: row;
-  padding: var(--space-one);
-  // @include breakpoint(900px down) {
-  //   flex-direction: column;
-  // }
-}
-
-.settings-container {
-  .settings-content {
-    padding: var(--space-normal) var(--space-zero);
-    overflow-y: scroll;
-    min-height: 100%;
-
-    .submit-button {
-      margin-top: var(--space-normal);
-    }
-  }
-}
-
-.widget-container {
-  .widget-preview {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    min-height: 40.625rem;
-    margin: var(--space-zero) var(--space-two) var(--space-two) var(--space-two);
-    padding: var(--space-one) var(--space-one) var(--space-one) var(--space-one);
-    @apply bg-slate-50 dark:bg-slate-700;
-
-    // @include breakpoint(500px down) {
-    //   background: none;
-    // }
-  }
-
-  .widget-script {
-    @apply mx-5 p-2.5 bg-slate-50 dark:bg-slate-700;
-  }
-}
-</style>