From d0bf66fe7a818a981033407c4491f2887970b888 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Sat, 5 Oct 2024 04:23:31 +0530
Subject: [PATCH] feat: Update widget builder to support dark mode (#10230)

---
 .../widget-preview/components/Widget.vue      | 191 ++++--------------
 .../widget-preview/components/WidgetBody.vue  | 179 +++-------------
 .../components/WidgetFooter.vue               | 150 ++++++--------
 .../widget-preview/components/WidgetHead.vue  | 144 +++++--------
 .../settings/inbox/WidgetBuilder.vue          |  63 +-----
 5 files changed, 193 insertions(+), 534 deletions(-)

diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index ce1277c85..6abf25355 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -77,7 +77,7 @@ export default {
   },
   computed: {
     ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    getWidgetHeadConfig() {
+    getWidgetConfig() {
       return {
         welcomeHeading: this.welcomeHeading,
         welcomeTagline: this.welcomeTagline,
@@ -89,23 +89,6 @@ export default {
         color: this.color,
       };
     },
-    getWidgetBodyConfig() {
-      return {
-        welcomeHeading: this.welcomeHeading,
-        welcomeTagline: this.welcomeTagline,
-        isDefaultScreen: this.isDefaultScreen,
-        isOnline: this.isOnline,
-        replyTime: this.replyTimeText,
-        color: this.color,
-        logo: this.logo,
-      };
-    },
-    getWidgetFooterConfig() {
-      return {
-        isDefaultScreen: this.isDefaultScreen,
-        color: this.color,
-      };
-    },
     replyTimeText() {
       switch (this.replyTime) {
         case 'in_a_few_minutes':
@@ -123,12 +106,10 @@ export default {
         justifyContent: this.widgetBubblePosition === 'left' ? 'start' : 'end',
       };
     },
-    getBubbleTypeClass() {
-      return {
-        'bubble-close': this.isWidgetVisible,
-        'bubble-expanded':
-          !this.isWidgetVisible && this.widgetBubbleType === 'expanded_bubble',
-      };
+    isBubbleExpanded() {
+      return (
+        !this.isWidgetVisible && this.widgetBubbleType === 'expanded_bubble'
+      );
     },
     getWidgetBubbleLauncherTitle() {
       return this.isWidgetVisible || this.widgetBubbleType === 'standard'
@@ -149,22 +130,33 @@ export default {
 </script>
 
 <template>
-  <div class="widget-preview-container">
-    <div v-if="isWidgetVisible" class="screen-selector">
+  <div>
+    <div v-if="isWidgetVisible" class="flex flex-col items-center">
       <InputRadioGroup
         name="widget-screen"
         :items="widgetScreens"
         :action="handleScreenChange"
       />
     </div>
-    <div v-if="isWidgetVisible" class="widget-wrapper">
-      <WidgetHead :config="getWidgetHeadConfig" />
+    <div
+      v-if="isWidgetVisible"
+      class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-slate-25 dark:bg-slate-800 h-[500px] w-[320px]"
+    >
+      <WidgetHead :config="getWidgetConfig" />
       <div>
-        <WidgetBody :config="getWidgetBodyConfig" />
-        <WidgetFooter :config="getWidgetFooterConfig" />
-        <div class="branding">
-          <a class="branding-link">
-            <img class="branding-image" :src="globalConfig.logoThumbnail" />
+        <WidgetBody
+          v-if="!getWidgetConfig.isDefaultScreen"
+          :config="getWidgetConfig"
+        />
+        <WidgetFooter :config="getWidgetConfig" />
+        <div class="py-2.5 flex justify-center">
+          <a
+            class="items-center gap-0.5 text-slate-500 dark:text-slate-400 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
+          >
+            <img
+              class="max-w-2.5 max-h-2.5"
+              :src="globalConfig.logoThumbnail"
+            />
             <span>
               {{
                 useInstallationName(
@@ -177,135 +169,34 @@ export default {
         </div>
       </div>
     </div>
-    <div class="widget-bubble" :style="getBubblePositionStyle">
+    <div class="flex mt-4 w-[320px]" :style="getBubblePositionStyle">
       <button
-        class="bubble"
-        :class="getBubbleTypeClass"
+        class="relative flex items-center justify-center rounded-full cursor-pointer"
         :style="{ background: color }"
+        :class="
+          isBubbleExpanded
+            ? 'w-auto font-medium text-base text-white dark:text-white h-12 px-4'
+            : 'w-16 h-16'
+        "
         @click="toggleWidget"
       >
         <img
           v-if="!isWidgetVisible"
           src="~dashboard/assets/images/bubble-logo.svg"
           alt=""
+          draggable="false"
+          class="w-6 h-6 mx-auto"
         />
-        <div>
+        <div v-if="isBubbleExpanded" class="ltr:pl-2.5 rtl:pr-2.5">
           {{ getWidgetBubbleLauncherTitle }}
         </div>
+        <div v-if="isWidgetVisible" class="relative">
+          <div class="absolute w-0.5 h-8 rotate-45 -translate-y-1/2 bg-white" />
+          <div
+            class="absolute w-0.5 h-8 -rotate-45 -translate-y-1/2 bg-white"
+          />
+        </div>
       </button>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.screen-selector {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.widget-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  box-shadow: var(--shadow-widget-builder);
-  border-radius: var(--border-radius-large);
-  background-color: #f4f6fb;
-  width: calc(var(--space-large) * 10);
-  height: calc(var(--space-mega) * 5);
-
-  .branding {
-    padding-top: var(--space-one);
-    padding-bottom: var(--space-one);
-    display: flex;
-    justify-content: center;
-
-    .branding-link {
-      align-items: center;
-      color: var(--b-500);
-      cursor: pointer;
-      display: flex;
-      filter: grayscale(1);
-      flex-direction: row;
-      font-size: var(--font-size-micro);
-      line-height: 1.5;
-      opacity: 0.9;
-      text-decoration: none;
-
-      &:hover {
-        filter: grayscale(0);
-        opacity: 1;
-        color: var(--b-600);
-      }
-
-      .branding-image {
-        max-width: var(--space-one);
-        max-height: var(--space-one);
-        margin-right: var(--space-micro);
-      }
-    }
-  }
-}
-.widget-bubble {
-  display: flex;
-  flex-direction: row;
-  margin-top: var(--space-normal);
-  width: calc(var(--space-large) * 10);
-
-  .bubble {
-    display: flex;
-    align-items: center;
-    border-radius: calc(var(--border-radius-large) * 10);
-    height: calc(var(--space-large) * 2);
-    width: calc(var(--space-large) * 2);
-    position: relative;
-    overflow-wrap: anywhere;
-    cursor: pointer;
-
-    img {
-      height: var(--space-medium);
-      margin: var(--space-one) var(--space-one) var(--space-one)
-        var(--space-two);
-      width: var(--space-medium);
-    }
-
-    div {
-      padding-right: var(--space-two);
-    }
-
-    .bubble-expanded {
-      img {
-        height: var(--space-large);
-        width: var(--space-large);
-      }
-    }
-  }
-
-  .bubble-close::before,
-  .bubble-close::after {
-    background-color: var(--white);
-    content: ' ';
-    display: inline;
-    height: var(--space-medium);
-    width: var(--space-micro);
-    left: var(--space-large);
-    position: absolute;
-  }
-
-  .bubble-close::before {
-    transform: rotate(45deg);
-  }
-
-  .bubble-close::after {
-    transform: rotate(-45deg);
-  }
-
-  .bubble-expanded {
-    font-size: var(--font-size-default);
-    font-weight: var(--font-weight-medium);
-    color: var(--white);
-    width: auto !important;
-    height: var(--space-larger) !important;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 93d63f0ef..09f1ce057 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -1,160 +1,41 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  name: 'WidgetBody',
-  components: {
-    Thumbnail,
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  config: {
+    type: Object,
+    default: () => ({}),
   },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    getStatusText() {
-      return this.config.isOnline
-        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
-        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
-    },
-    getWidgetBodyClass() {
-      return {
-        'with-chat-view': !this.config.isDefaultScreen,
-        'with-heading-or-title':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline),
-        'with-heading-or-title-without-logo':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline) &&
-          !this.config.logo,
-        'without-heading-and-title':
-          this.config.isDefaultScreen &&
-          !this.config.welcomeHeading &&
-          !this.config.welcomeTagline,
-      };
-    },
-  },
-};
+});
 </script>
 
 <template>
-  <div class="widget-body-container">
-    <div v-if="config.isDefaultScreen" class="availability-content">
-      <div class="availability-info">
-        <div class="team-status">
-          {{ getStatusText }}
-        </div>
-        <div class="reply-wait-message">
-          {{ config.replyTime }}
+  <div class="h-[calc(2rem*10)] px-4 overflow-y-auto">
+    <div>
+      <div>
+        <div
+          class="items-end flex justify-end ml-auto mb-1 mt-0 max-w-[85%] text-right"
+        >
+          <div
+            class="rounded-[1.25rem] rounded-br-[0.25rem] text-white dark:text-white text-sm px-4 py-3"
+            :style="{ background: config.color }"
+          >
+            <p class="m-0">
+              {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}
+            </p>
+          </div>
         </div>
       </div>
-      <Thumbnail username="J" size="40px" />
-    </div>
-    <div v-else class="conversation-content">
-      <div class="conversation-wrap">
-        <div class="message-wrap">
-          <div class="user-message-wrap">
-            <div class="user-message">
-              <div class="message-wrap">
-                <div
-                  class="chat-bubble user"
-                  :style="{ background: config.color }"
-                >
-                  <p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="agent-message-wrap">
-          <div class="agent-message">
-            <div class="avatar-wrap" />
-            <div class="message-wrap">
-              <div class="chat-bubble agent">
-                <div class="message-content">
-                  <p>
-                    {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
+
+      <div
+        class="bg-white shadow rounded-[1.25rem] rounded-bl-[0.25rem] px-4 py-3 inline-block text-sm text-slate-900 dark:text-white dark:bg-slate-700"
+      >
+        <div>
+          <p class="m-0">
+            {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
+          </p>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.widget-body-container {
-  .availability-content {
-    align-items: flex-end;
-    display: flex;
-    flex-direction: row;
-    min-height: inherit;
-    padding: var(--space-one) var(--space-two) var(--space-one) var(--space-two);
-
-    .availability-info {
-      width: 100%;
-
-      .team-status {
-        font-size: var(--font-size-default);
-        font-weight: var(--font-weight-medium);
-      }
-
-      .reply-wait-message {
-        font-size: var(--font-size-mini);
-      }
-    }
-  }
-  .conversation-content {
-    height: calc(var(--space-large) * 10);
-    padding: 0 var(--space-two);
-
-    .conversation-wrap {
-      .user-message {
-        align-items: flex-end;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        margin-bottom: var(--space-smaller);
-        margin-left: auto;
-        margin-top: var(--space-zero);
-        max-width: 85%;
-        text-align: right;
-      }
-
-      .message-wrap {
-        margin-right: var(--space-smaller);
-        max-width: 100%;
-
-        .chat-bubble {
-          border-radius: 1.25rem;
-          box-shadow: var(--shadow-medium);
-          color: var(--white);
-          display: inline-block;
-          font-size: var(--font-size-nano);
-          line-height: 1.5;
-          padding: 0.8125rem 1.09375rem;
-          text-align: left;
-
-          p {
-            margin: var(--space-zero);
-          }
-
-          &.user {
-            border-bottom-right-radius: var(--border-radius-small);
-            background: var(--color-woot);
-          }
-
-          &.agent {
-            background: var(--white);
-            border-bottom-left-radius: var(--border-radius-small);
-            color: var(--b-900);
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
index 7e3d6e72c..01afb87ef 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -1,105 +1,81 @@
-<script>
-import CustomButton from 'dashboard/components/buttons/Button.vue';
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-export default {
-  name: 'WidgetFooter',
-  components: {
-    CustomButton,
-    ResizableTextArea,
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({}),
   },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-};
+});
+
+const { t } = useI18n();
+
+const isInputFocused = ref(false);
+
+const getStatusText = computed(() => {
+  return props.config.isOnline
+    ? t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
+    : t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
+});
 </script>
 
 <template>
-  <div class="footer-wrap">
-    <CustomButton
+  <div class="relative flex flex-col w-full px-4">
+    <div
       v-if="config.isDefaultScreen"
-      class="start-conversation"
-      :style="{ background: config.color }"
+      class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700"
+    >
+      <div class="flex items-center justify-between">
+        <div>
+          <div
+            class="text-sm font-medium leading-4 text-slate-700 dark:text-slate-50"
+          >
+            {{ getStatusText }}
+          </div>
+          <div class="mt-1 text-xs text-slate-500 dark:text-slate-100">
+            {{ config.replyTime }}
+          </div>
+        </div>
+        <Thumbnail username="C" size="34px" />
+      </div>
+      <button
+        v-if="config.isDefaultScreen"
+        class="inline-flex items-center justify-between px-2 py-1 mt-1 -ml-2 font-medium leading-6 bg-transparent rounded-md text-slate-800 dark:bg-transparent dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
+        :style="{ color: config.color }"
+      >
+        <span class="pr-2 text-xs">
+          {{
+            $t(
+              'INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT'
+            )
+          }}
+        </span>
+        <FluentIcon icon="arrow-right" size="14" />
+      </button>
+    </div>
+    <div
+      v-else
+      class="flex items-center h-10 bg-white rounded-md dark:bg-slate-700"
+      :class="{ 'ring-2 ring-woot-500 dark:ring-woot-400': isInputFocused }"
     >
-      {{
-        $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
-      }}
-    </CustomButton>
-    <div v-else class="chat-message-input is-focused">
       <ResizableTextArea
         id="chat-input"
         :rows="1"
         :placeholder="
           $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
         "
-        class="user-message-input is-focused"
+        class="flex-grow !bg-white border-0 border-none h-8 text-sm dark:!bg-slate-700 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
+        @focus="isInputFocused = true"
+        @blur="isInputFocused = false"
       />
-      <div class="button-wrap">
-        <fluent-icon icon="emoji" />
-        <fluent-icon class="icon-send" icon="send" />
+      <div class="flex items-center gap-2 px-2">
+        <FluentIcon icon="emoji" />
+        <FluentIcon class="icon-send" icon="send" />
       </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import 'dashboard/assets/scss/variables.scss';
-.footer-wrap {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  padding-left: var(--space-two);
-  padding-right: var(--space-two);
-
-  .start-conversation {
-    justify-content: center;
-    font-size: var(--font-size-small);
-    border-radius: var(--border-radius-normal);
-    padding-left: var(--space-two);
-    padding-right: var(--space-two);
-  }
-
-  .chat-message-input {
-    align-items: center;
-    display: flex;
-    padding: var(--space-zero) var(--space-small) var(--space-zero)
-      var(--space-slab);
-    border-radius: var(--border-radius-normal);
-    background: white;
-
-    &.is-focused {
-      box-shadow:
-        0 0 0 1px var(--color-woot),
-        0 0 2px 2px var(--w-100);
-    }
-  }
-
-  .button-wrap {
-    display: flex;
-    align-items: center;
-    padding-left: var(--space-small);
-  }
-
-  .user-message-input {
-    border: 0;
-    height: var(--space-medium);
-    min-height: var(--space-medium);
-    max-height: var(--space-giga);
-    line-height: 1;
-    font-size: var(--font-size-small);
-    resize: none;
-    padding: var(--space-zero);
-    padding-top: var(--space-smaller);
-    padding-bottom: var(--space-smaller);
-    margin-top: var(--space-small);
-    margin-bottom: var(--space-small);
-  }
-
-  .icon-send {
-    margin-left: var(--space-one);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
index 70d343f59..4881c2a0a 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -1,111 +1,65 @@
-<script>
-export default {
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({}),
   },
-  computed: {
-    isDefaultScreen() {
-      return (
-        this.config.isDefaultScreen &&
-        ((this.config.welcomeHeading &&
-          this.config.welcomeHeading.length !== 0) ||
-          (this.config.welcomeTagLine &&
-            this.config.welcomeTagline.length !== 0))
-      );
-    },
-  },
-};
+});
+
+const isDefaultScreen = computed(() => {
+  return (
+    props.config.isDefaultScreen &&
+    ((props.config.welcomeHeading &&
+      props.config.welcomeHeading.length !== 0) ||
+      (props.config.welcomeTagLine && props.config.welcomeTagline.length !== 0))
+  );
+});
 </script>
 
 <template>
-  <div class="header-wrapper">
-    <div class="header-branding">
-      <div class="header">
+  <div
+    class="rounded-t-lg flex-shrink-0 transition-[max-height] duration-300"
+    :class="
+      isDefaultScreen
+        ? 'bg-slate-25 dark:bg-slate-800 px-4 py-5'
+        : 'bg-white dark:bg-slate-900 p-4'
+    "
+  >
+    <div class="relative top-px">
+      <div class="flex items-center justify-start">
         <img
           v-if="config.logo"
           :src="config.logo"
-          class="logo"
-          :class="{ small: !isDefaultScreen }"
+          class="mr-2 rounded-full logo"
+          :class="!isDefaultScreen ? 'h-8 w-8 mb-1' : 'h-12 w-12 mb-2'"
         />
         <div v-if="!isDefaultScreen">
-          <div class="title-block">
-            <span>{{ config.websiteName }}</span>
-            <div v-if="config.isOnline" class="online-dot" />
+          <div class="flex items-center justify-start gap-1">
+            <span
+              class="text-base font-medium leading-3 text-slate-900 dark:text-white"
+            >
+              {{ config.websiteName }}
+            </span>
+            <div
+              v-if="config.isOnline"
+              class="w-2 h-2 bg-green-500 rounded-full"
+            />
           </div>
-          <div>{{ config.replyTime }}</div>
+          <span class="mt-1 text-xs text-slate-600 dark:text-slate-400">
+            {{ config.replyTime }}
+          </span>
         </div>
       </div>
-      <div v-if="isDefaultScreen" class="header-expanded">
-        <h2>{{ config.welcomeHeading }}</h2>
-        <p>{{ config.welcomeTagline }}</p>
+      <div v-if="isDefaultScreen" class="overflow-auto max-h-60">
+        <h2 class="mb-2 text-2xl break-words text-slate-900 dark:text-white">
+          {{ config.welcomeHeading }}
+        </h2>
+        <p class="text-sm break-words text-slate-600 dark:text-slate-100">
+          {{ config.welcomeTagline }}
+        </p>
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.header-wrapper {
-  background-color: var(--white);
-  border-top-left-radius: var(--border-radius-large);
-  border-top-right-radius: var(--border-radius-large);
-  flex-shrink: 0;
-  padding: var(--space-two);
-  transition: max-height 300ms;
-
-  .header-branding {
-    .header {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-
-      .logo {
-        border-radius: 100%;
-        height: var(--space-larger);
-        margin-right: var(--space-small);
-        transition: all 0.5s ease;
-        width: var(--space-larger);
-
-        &.small {
-          height: var(--space-large);
-          width: var(--space-large);
-        }
-      }
-    }
-
-    .header-expanded {
-      max-height: var(--space-giga);
-      overflow: auto;
-
-      h2 {
-        font-size: var(--font-size-big);
-        margin-bottom: var(--space-small);
-        margin-top: var(--space-two);
-        overflow-wrap: break-word;
-      }
-
-      p {
-        font-size: var(--font-size-small);
-        overflow-wrap: break-word;
-      }
-    }
-  }
-
-  .title-block {
-    align-items: center;
-    display: flex;
-    font-size: var(--font-size-default);
-
-    .online-dot {
-      background-color: var(--g-500);
-      border-radius: 100%;
-      height: var(--space-small);
-      margin: var(--space-zero) var(--space-smaller);
-      width: var(--space-small);
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index 695ce618d..9f1f532ed 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/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>