From 2024b9e90db5cd830403c702d4db7c2849126abf Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Wed, 12 Mar 2025 18:11:42 -0700
Subject: [PATCH] chore: Update settings page to match the new design colors
 (#11072)

---
 .../components/widgets/BackButton.vue         |  15 +-
 .../dashboard/settings/SettingsHeader.vue     |  17 +-
 .../routes/dashboard/settings/Wrapper.vue     |  37 +--
 .../dashboard/settings/account/Index.vue      | 245 +++++++++---------
 .../settings/account/account.routes.js        |   9 +-
 .../components/BaseSettingsHeader.vue         |  14 +-
 .../components/BaseSettingsListItem.vue       |   4 +-
 .../settings/inbox/InboxChannels.vue          |   4 +-
 .../settings/integrations/Integration.vue     | 122 +++++----
 .../integrations/IntegrationHooks.vue         |   4 +-
 .../settings/integrations/IntegrationItem.vue |  22 +-
 .../settings/integrations/Linear.vue          |  43 ++-
 .../settings/integrations/ShowIntegration.vue |  38 +--
 .../integrations/SingleIntegrationHooks.vue   | 105 ++++----
 .../dashboard/settings/integrations/Slack.vue | 171 ++++++------
 .../Slack/SelectChannelWarning.vue            | 171 ++++++------
 .../Slack/SlackIntegrationHelpText.vue        |  54 ++--
 .../dashboard/settings/teams/Create/Index.vue |   2 +-
 .../dashboard/settings/teams/Edit/Index.vue   |   2 +-
 19 files changed, 512 insertions(+), 567 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 09a22ffa3..ae41cbc2f 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,5 +1,4 @@
 <script setup>
-import Icon from 'next/icon/Icon.vue';
 import router from '../../routes/index';
 const props = defineProps({
   backUrl: {
@@ -24,24 +23,16 @@ const goBack = () => {
   }
 };
 
-const buttonStyleClass = props.compact
-  ? 'text-sm text-n-slate-11'
-  : 'text-base text-n-blue-text';
+const buttonStyleClass = props.compact ? 'text-sm' : 'text-base';
 </script>
 
 <template>
   <button
-    class="flex items-center p-0 font-normal cursor-pointer gap-1"
+    class="flex items-center p-0 font-normal cursor-pointer text-n-slate-11"
     :class="buttonStyleClass"
     @click.capture="goBack"
   >
-    <Icon
-      icon="i-lucide-chevron-left"
-      class="ltr:-ml-1 rtl:-mr-1"
-      :class="
-        props.compact ? 'text-n-slate-11 size-4' : 'text-n-blue-text size-5'
-      "
-    />
+    <fluent-icon icon="chevron-left" class="-ml-1" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </button>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 2a7ac0300..f59235767 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -54,11 +54,9 @@ export default {
 
 <template>
   <div
-    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-n-background border-b border-n-weak"
+    class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-background"
   >
-    <h1
-      class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
-    >
+    <h1 class="flex items-center mb-0 text-2xl text-n-slate-12">
       <woot-sidemenu-icon v-if="showSidemenuIcon" />
       <BackButton
         v-if="showBackButton"
@@ -66,21 +64,16 @@ export default {
         :back-url="backUrl"
         class="ml-2 mr-4"
       />
-      <fluent-icon
-        v-if="icon"
-        :icon="icon"
-        :class="iconClass"
-        class="hidden ml-1 mr-2 rtl:ml-2 rtl:mr-1 md:block"
-      />
+
       <slot />
-      <span class="text-2xl font-medium text-slate-900 dark:text-slate-100">
+      <span class="text-xl font-medium text-slate-900 dark:text-slate-100">
         {{ headerTitle }}
       </span>
     </h1>
     <router-link
       v-if="showNewButton && isAdmin"
       :to="buttonRoute"
-      class="button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
+      class="button success button--fixed-top rounded-[5px] flex gap-2"
     >
       <fluent-icon icon="add-circle" />
       <span class="button__content">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index a3c460f3f..2c34cbce0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -17,7 +17,7 @@ const props = defineProps({
 const { t } = useI18n();
 
 const showNewButton = computed(
-  () => props.newButtonRoutes.length !== 0 && !props.showBackButton
+  () => props.newButtonRoutes.length && !props.showBackButton
 );
 </script>
 
@@ -25,21 +25,24 @@ const showNewButton = computed(
   <div
     class="flex flex-1 h-full justify-between flex-col m-0 bg-n-background overflow-auto"
   >
-    <SettingsHeader
-      button-route="new"
-      :icon="icon"
-      :header-title="t(headerTitle)"
-      :button-text="t(headerButtonText)"
-      :show-back-button="showBackButton"
-      :back-url="backUrl"
-      :show-new-button="showNewButton"
-      :show-sidemenu-icon="showSidemenuIcon"
-    />
-    <router-view v-slot="{ Component }">
-      <keep-alive v-if="keepAlive">
-        <component :is="Component" />
-      </keep-alive>
-      <component :is="Component" v-else />
-    </router-view>
+    <div class="max-w-6xl mx-auto w-full h-full">
+      <SettingsHeader
+        button-route="new"
+        :icon="icon"
+        :header-title="t(headerTitle)"
+        :button-text="t(headerButtonText)"
+        :show-back-button="showBackButton"
+        :back-url="backUrl"
+        :show-new-button="showNewButton"
+        :show-sidemenu-icon="showSidemenuIcon"
+      />
+
+      <router-view v-slot="{ Component }" class="px-5">
+        <component :is="Component" v-if="!keepAlive" :key="$route.fullPath" />
+        <keep-alive v-else>
+          <component :is="Component" :key="$route.fullPath" />
+        </keep-alive>
+      </router-view>
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index 3a604503f..a2a1f28fb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -9,8 +9,14 @@ import { useAccount } from 'dashboard/composables/useAccount';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import semver from 'semver';
 import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import V4Button from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    BaseSettingsHeader,
+    V4Button,
+  },
   setup() {
     const { updateUISettings } = useUISettings();
     const { enabledLanguages } = useConfig();
@@ -161,131 +167,130 @@ export default {
 </script>
 
 <template>
-  <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
-    <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
-      <div
-        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
-      >
+  <div class="flex flex-col w-full">
+    <BaseSettingsHeader :title="$t('GENERAL_SETTINGS.TITLE')">
+      <template #actions>
+        <V4Button blue :loading="isUpdating" @click="updateAccount">
+          {{ $t('GENERAL_SETTINGS.SUBMIT') }}
+        </V4Button>
+      </template>
+    </BaseSettingsHeader>
+    <div class="flex-grow flex-shrink min-w-0 overflow-auto mt-3">
+      <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
         <div
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+          class="flex flex-row border-b border-slate-25 dark:border-slate-800"
         >
-          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
-            {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
-          </h4>
-          <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
-        </div>
-        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
-          <label :class="{ error: v$.name.$error }">
-            {{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
-            <input
-              v-model="name"
-              type="text"
-              :placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
-              @blur="v$.name.$touch"
-            />
-            <span v-if="v$.name.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
-            </span>
-          </label>
-          <label :class="{ error: v$.locale.$error }">
-            {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
-            <select v-model="locale">
-              <option
-                v-for="lang in languagesSortedByCode"
-                :key="lang.iso_639_1_code"
-                :value="lang.iso_639_1_code"
-              >
-                {{ lang.name }}
-              </option>
-            </select>
-            <span v-if="v$.locale.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
-            </span>
-          </label>
-          <label v-if="featureInboundEmailEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.FEATURES.INBOUND_EMAIL_ENABLED') }}
-          </label>
-          <label v-if="featureCustomReplyDomainEnabled">
-            {{
-              $t('GENERAL_SETTINGS.FORM.FEATURES.CUSTOM_EMAIL_DOMAIN_ENABLED')
-            }}
-          </label>
-          <label v-if="featureCustomReplyDomainEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.DOMAIN.LABEL') }}
-            <input
-              v-model="domain"
-              type="text"
-              :placeholder="$t('GENERAL_SETTINGS.FORM.DOMAIN.PLACEHOLDER')"
-            />
-          </label>
-          <label v-if="featureCustomReplyEmailEnabled">
-            {{ $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.LABEL') }}
-            <input
-              v-model="supportEmail"
-              type="text"
-              :placeholder="
-                $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
-              "
-            />
-          </label>
-          <label
-            v-if="showAutoResolutionConfig"
-            :class="{ error: v$.autoResolveDuration.$error }"
+          <div
+            class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
           >
-            {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
-            <input
-              v-model="autoResolveDuration"
-              type="number"
-              :placeholder="
-                $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
-              "
-              @blur="v$.autoResolveDuration.$touch"
-            />
-            <span v-if="v$.autoResolveDuration.$error" class="message">
-              {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
-            </span>
-          </label>
+            <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
+              {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
+            </h4>
+            <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
+          </div>
+          <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
+            <label :class="{ error: v$.name.$error }">
+              {{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
+              <input
+                v-model="name"
+                type="text"
+                :placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
+                @blur="v$.name.$touch"
+              />
+              <span v-if="v$.name.$error" class="message">
+                {{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
+              </span>
+            </label>
+            <label :class="{ error: v$.locale.$error }">
+              {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
+              <select v-model="locale">
+                <option
+                  v-for="lang in languagesSortedByCode"
+                  :key="lang.iso_639_1_code"
+                  :value="lang.iso_639_1_code"
+                >
+                  {{ lang.name }}
+                </option>
+              </select>
+              <span v-if="v$.locale.$error" class="message">
+                {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
+              </span>
+            </label>
+            <label v-if="featureInboundEmailEnabled">
+              {{ $t('GENERAL_SETTINGS.FORM.FEATURES.INBOUND_EMAIL_ENABLED') }}
+            </label>
+            <label v-if="featureCustomReplyDomainEnabled">
+              {{
+                $t('GENERAL_SETTINGS.FORM.FEATURES.CUSTOM_EMAIL_DOMAIN_ENABLED')
+              }}
+            </label>
+            <label v-if="featureCustomReplyDomainEnabled">
+              {{ $t('GENERAL_SETTINGS.FORM.DOMAIN.LABEL') }}
+              <input
+                v-model="domain"
+                type="text"
+                :placeholder="$t('GENERAL_SETTINGS.FORM.DOMAIN.PLACEHOLDER')"
+              />
+            </label>
+            <label v-if="featureCustomReplyEmailEnabled">
+              {{ $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.LABEL') }}
+              <input
+                v-model="supportEmail"
+                type="text"
+                :placeholder="
+                  $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
+                "
+              />
+            </label>
+            <label
+              v-if="showAutoResolutionConfig"
+              :class="{ error: v$.autoResolveDuration.$error }"
+            >
+              {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
+              <input
+                v-model="autoResolveDuration"
+                type="number"
+                :placeholder="
+                  $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
+                "
+                @blur="v$.autoResolveDuration.$touch"
+              />
+              <span v-if="v$.autoResolveDuration.$error" class="message">
+                {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
+              </span>
+            </label>
+          </div>
         </div>
-      </div>
+      </form>
 
-      <div
-        class="flex flex-row p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300"
-      >
-        <div
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
-        >
-          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
-            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
-          </h4>
-          <p>
-            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
-          </p>
-        </div>
-        <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
-          <woot-code :script="getAccountId" />
-        </div>
-      </div>
-      <div class="p-4 text-sm text-center">
-        <div>{{ `v${globalConfig.appVersion}` }}</div>
-        <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
-          {{
-            $t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
-              latestChatwootVersion: latestChatwootVersion,
-            })
-          }}
-        </div>
-        <div class="build-id">
-          <div>{{ `Build ${globalConfig.gitSha}` }}</div>
-        </div>
-      </div>
+      <woot-loading-state v-if="uiFlags.isFetchingItem" />
+    </div>
 
-      <woot-submit-button
-        class="button nice success button--fixed-top"
-        :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
-        :loading="isUpdating"
-      />
-    </form>
-
-    <woot-loading-state v-if="uiFlags.isFetchingItem" />
+    <div class="flex flex-row">
+      <div class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0">
+        <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
+          {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
+        </h4>
+        <p>
+          {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
+        </p>
+      </div>
+      <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
+        <woot-code :script="getAccountId" />
+      </div>
+    </div>
+    <div class="p-4 text-sm text-center">
+      <div>{{ `v${globalConfig.appVersion}` }}</div>
+      <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
+        {{
+          $t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
+            latestChatwootVersion: latestChatwootVersion,
+          })
+        }}
+      </div>
+      <div class="build-id">
+        <div>{{ `Build ${globalConfig.gitSha}` }}</div>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
index ea25fd6dc..82852ab9b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-import SettingsContent from '../Wrapper.vue';
 import Index from './Index.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
 
 export default {
   routes: [
@@ -9,12 +9,7 @@ export default {
       meta: {
         permissions: ['administrator'],
       },
-      component: SettingsContent,
-      props: {
-        headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'briefcase',
-        showNewButton: false,
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index 38a145fc3..4c19a1bca 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -41,7 +41,7 @@ const openInNewTab = url => {
 </script>
 
 <template>
-  <div class="flex flex-col items-start w-full gap-2 pt-4">
+  <div class="flex flex-col items-start w-full gap-2">
     <BackButton
       v-if="backButtonLabel"
       compact
@@ -60,13 +60,11 @@ const openInNewTab = url => {
               size="14"
               :icon="iconName"
               type="outline"
-              class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+              class="flex-shrink-0 text-n-brand"
             />
           </div>
         </div>
-        <h1
-          class="text-2xl font-semibold font-interDisplay tracking-[0.3px] text-slate-900 dark:text-slate-25"
-        >
+        <h1 class="text-xl font-medium tracking-tight text-n-slate-12">
           {{ title }}
         </h1>
       </div>
@@ -75,9 +73,9 @@ const openInNewTab = url => {
         <slot name="actions" />
       </div>
     </div>
-    <div class="flex flex-col w-full gap-3 text-slate-600 dark:text-slate-300">
+    <div class="flex flex-col w-full gap-3 text-n-slate-11">
       <p
-        class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
+        class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl"
       >
         <slot name="description">{{ description }}</slot>
       </p>
@@ -87,7 +85,7 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand dark:text-n-brand hover:underline"
+          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand hover:underline"
         >
           {{ linkText }}
           <Icon
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
index 3ff111f05..ebdb90f35 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
@@ -13,7 +13,7 @@ defineProps({
 
 <template>
   <div
-    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 w-full"
+    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between group outline outline-n-container outline-1 bg-n-alpha-3 rounded-2xl shadow w-full"
   >
     <slot name="leftSection">
       <div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">
@@ -21,7 +21,7 @@ defineProps({
           class="flex items-center justify-between w-full gap-3 sm:justify-normal whitespace-nowrap"
         >
           <h3
-            class="justify-between text-sm font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
+            class="justify-between tracking-tight font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
           >
             <slot name="title">
               {{ title }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index 82136dc34..7f1268dc2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -40,9 +40,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="flex flex-row overflow-auto p-4 h-full bg-n-alpha-2 dark:bg-n-solid-1"
-  >
+  <div class="flex flex-row overflow-auto h-full">
     <woot-wizard
       class="hidden md:block w-1/4"
       :global-config="globalConfig"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index 1195ea22d..aeb7c0df4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -1,78 +1,76 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { frontendURL } from '../../../../helper/URLHelper';
 import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useInstallationName } from 'shared/mixins/globalConfigMixin';
 
-export default {
-  mixins: [globalConfigMixin],
-  props: {
-    integrationId: {
-      type: [String, Number],
-      required: true,
-    },
-    integrationName: { type: String, default: '' },
-    integrationDescription: { type: String, default: '' },
-    integrationEnabled: { type: Boolean, default: false },
-    integrationAction: { type: String, default: '' },
-    actionButtonText: { type: String, default: '' },
-    deleteConfirmationText: { type: Object, default: () => ({}) },
-  },
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  methods: {
-    frontendURL,
-    openDeletePopup() {
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.closeDeletePopup();
-      this.deleteIntegration(this.deleteIntegration);
-      this.$router.push({ name: 'settings_integrations' });
-    },
-    async deleteIntegration() {
-      try {
-        await this.$store.dispatch(
-          'integrations/deleteIntegration',
-          this.integrationId
-        );
-        useAlert(this.$t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(
-          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
-        );
-      }
-    },
+const props = defineProps({
+  integrationId: {
+    type: [String, Number],
+    required: true,
   },
+  integrationName: { type: String, default: '' },
+  integrationDescription: { type: String, default: '' },
+  integrationEnabled: { type: Boolean, default: false },
+  integrationAction: { type: String, default: '' },
+  actionButtonText: { type: String, default: '' },
+  deleteConfirmationText: { type: Object, default: () => ({}) },
+});
+
+const store = useStore();
+const router = useRouter();
+
+const showDeleteConfirmationPopup = ref(false);
+
+const accountId = computed(() => store.getters.getCurrentAccountId);
+const globalConfig = computed(() => store.getters['globalConfig/get']);
+
+const openDeletePopup = () => {
+  showDeleteConfirmationPopup.value = true;
+};
+
+const closeDeletePopup = () => {
+  showDeleteConfirmationPopup.value = false;
+};
+
+const deleteIntegration = async () => {
+  try {
+    await store.dispatch('integrations/deleteIntegration', props.integrationId);
+    useAlert('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE');
+  } catch (error) {
+    useAlert('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE');
+  }
+};
+
+const confirmDeletion = () => {
+  closeDeletePopup();
+  deleteIntegration();
+  router.push({ name: 'settings_integrations' });
 };
 </script>
 
 <template>
   <div
-    class="flex flex-col items-start justify-between md:flex-row md:items-center"
+    class="flex flex-col items-start justify-between md:flex-row md:items-center p-4 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
   >
-    <div class="flex items-center justify-start flex-1 m-0 mx-4">
-      <img
-        :src="`/dashboard/images/integrations/${integrationId}.png`"
-        class="w-16 h-16 p-2 mr-4"
-      />
+    <div class="flex items-center justify-start flex-1 m-0 mx-4 gap-6">
+      <div class="flex h-16 w-16 items-center justify-center">
+        <img
+          :src="`/dashboard/images/integrations/${integrationId}.png`"
+          class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
+        />
+        <img
+          :src="`/dashboard/images/integrations/${integrationId}-dark.png`"
+          class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
+        />
+      </div>
       <div>
-        <h3 class="mb-1 text-xl font-medium text-slate-800 dark:text-slate-100">
+        <h3 class="mb-1 text-xl font-medium text-n-slate-12">
           {{ integrationName }}
         </h3>
-        <p class="text-slate-700 dark:text-slate-200">
+        <p class="text-n-slate-11 text-sm leading-6">
           {{
             useInstallationName(
               integrationDescription,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index 46a1dacef..792e06b4d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -108,7 +108,9 @@ export default {
 </script>
 
 <template>
-  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
+  <div
+    class="overflow-auto p-4 max-w-6xl mx-auto my-auto flex flex-wrap h-full"
+  >
     <woot-button
       v-if="showAddButton"
       color-scheme="success"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
index 40e68ca7b..1cf2af784 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
@@ -37,7 +37,7 @@ const integrationStatus = computed(() =>
 );
 
 const integrationStatusColor = computed(() =>
-  props.enabled ? 'bg-green-500' : 'bg-slate-200'
+  props.enabled ? 'bg-n-teal-9' : 'bg-n-slate-8'
 );
 
 const actionURL = computed(() =>
@@ -47,30 +47,30 @@ const actionURL = computed(() =>
 
 <template>
   <div
-    class="flex flex-col flex-1 p-6 bg-white border border-solid rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-700/50"
+    class="flex flex-col flex-1 p-6 m-[1px] outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
   >
     <div class="flex items-start justify-between">
       <div class="flex h-12 w-12 mb-4">
         <img
           :src="`/dashboard/images/integrations/${id}.png`"
-          class="max-w-full rounded-md border border-slate-50 dark:border-slate-700/50 shadow-sm block dark:hidden bg-white dark:bg-slate-900"
+          class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
         />
         <img
           :src="`/dashboard/images/integrations/${id}-dark.png`"
-          class="max-w-full rounded-md border border-slate-50 dark:border-slate-700/50 shadow-sm hidden dark:block bg-white dark:bg-slate-900"
+          class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
         />
       </div>
-      <fluent-icon
+      <span
         v-tooltip="integrationStatus"
-        size="20"
-        class="text-white p-0.5 rounded-full"
+        class="text-white p-0.5 rounded-full w-5 h-5 flex items-center justify-center"
         :class="integrationStatusColor"
-        icon="checkmark"
-      />
+      >
+        <i class="i-ph-check-bold text-sm" />
+      </span>
     </div>
     <div class="flex flex-col m-0 flex-1">
       <div
-        class="font-medium mb-2 text-slate-800 dark:text-slate-100 flex justify-between items-center"
+        class="font-medium mb-2 text-n-slate-12 flex justify-between items-center"
       >
         <span class="text-base font-semibold">{{ name }}</span>
         <router-link :to="actionURL">
@@ -79,7 +79,7 @@ const actionURL = computed(() =>
           </woot-button>
         </router-link>
       </div>
-      <p class="text-slate-700 dark:text-slate-200">
+      <p class="text-n-slate-11">
         {{ useInstallationName(description, globalConfig.installationName) }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
index 5cb4d2b07..fd5a88cde 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
@@ -35,32 +35,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex-grow flex-shrink p-4 overflow-auto">
-    <div class="flex flex-col">
-      <div class="flex flex-col">
-        <div>
-          <div
-            v-if="integrationLoaded && !uiFlags.isCreatingLinear"
-            class="p-4 mb-4 bg-white border border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
-          >
-            <Integration
-              :integration-id="integration.id"
-              :integration-logo="integration.logo"
-              :integration-name="integration.name"
-              :integration-description="integration.description"
-              :integration-enabled="integration.enabled"
-              :integration-action="integrationAction"
-              :delete-confirmation-text="{
-                title: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.TITLE'),
-                message: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.MESSAGE'),
-              }"
-            />
-          </div>
-          <div v-else class="flex items-center justify-center flex-1">
-            <Spinner size="" color-scheme="primary" />
-          </div>
-        </div>
-      </div>
+  <div class="flex-grow flex-shrink p-4 overflow-auto max-w-6xl mx-auto">
+    <div v-if="integrationLoaded && !uiFlags.isCreatingLinear">
+      <Integration
+        :integration-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction"
+        :delete-confirmation-text="{
+          title: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.TITLE'),
+          message: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.MESSAGE'),
+        }"
+      />
+    </div>
+    <div v-else class="flex items-center justify-center flex-1">
+      <Spinner size="" color-scheme="primary" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
index 6b86dcf82..62bf0a4e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -47,31 +47,19 @@ export default {
 </script>
 
 <template>
-  <div class="flex-grow flex-shrink p-4 overflow-auto">
-    <div class="flex flex-col">
-      <div class="flex flex-col">
-        <div>
-          <div
-            v-if="integrationLoaded"
-            class="p-4 mb-4 bg-white border border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
-          >
-            <Integration
-              :integration-id="integration.id"
-              :integration-logo="integration.logo"
-              :integration-name="integration.name"
-              :integration-description="integration.description"
-              :integration-enabled="integration.enabled"
-              :integration-action="integrationAction()"
-            />
-          </div>
-          <div
-            v-if="integration.enabled"
-            class="p-4 mb-4 bg-white border border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
-          >
-            <IntegrationHelpText />
-          </div>
-        </div>
-      </div>
+  <div class="max-w-6xl">
+    <div v-if="integrationLoaded">
+      <Integration
+        :integration-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction()"
+      />
+    </div>
+    <div v-if="integration.enabled">
+      <IntegrationHelpText />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index a27cdc084..a1bd609cd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,63 +1,62 @@
-<script>
+<script setup>
+import { defineProps, defineEmits } from 'vue';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
-export default {
-  props: {
-    integrationId: {
-      type: String,
-      required: true,
-    },
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  integrationId: {
+    type: String,
+    required: true,
   },
-  emits: ['add', 'delete'],
-  setup(props) {
-    const { integration, hasConnectedHooks } = useIntegrationHook(
-      props.integrationId
-    );
-    return { integration, hasConnectedHooks };
-  },
-};
+});
+
+defineEmits(['add', 'delete']);
+
+const { integration, hasConnectedHooks } = useIntegrationHook(
+  props.integrationId
+);
 </script>
 
 <template>
-  <div class="flex-shrink flex-grow overflow-auto p-4">
-    <div class="flex flex-col">
-      <div
-        class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-xl mb-4 p-4"
-      >
-        <div class="flex">
-          <div class="flex h-[6.25rem] w-[6.25rem]">
-            <img
-              :src="`/dashboard/images/integrations/${integration.id}.png`"
-              class="max-w-full rounded-md border border-slate-50 dark:border-slate-700/50 shadow-sm block dark:hidden bg-white dark:bg-slate-900"
-            />
-            <img
-              :src="`/dashboard/images/integrations/${integration.id}-dark.png`"
-              class="max-w-full rounded-md border border-slate-50 dark:border-slate-700/50 shadow-sm hidden dark:block bg-white dark:bg-slate-900"
+  <div
+    class="outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow flex-grow overflow-auto p-4"
+  >
+    <div class="flex items-center justify-center">
+      <div class="flex h-16 w-16 items-center justify-center">
+        <img
+          :src="`/dashboard/images/integrations/${integrationId}.png`"
+          class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
+        />
+        <img
+          :src="`/dashboard/images/integrations/${integrationId}-dark.png`"
+          class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
+        />
+      </div>
+      <div class="flex flex-col justify-center m-0 mx-4 flex-1">
+        <h3 class="mb-1 text-xl font-medium text-n-slate-12">
+          {{ integration.name }}
+        </h3>
+        <p class="text-n-slate-11 text-sm leading-6">
+          {{ integration.description }}
+        </p>
+      </div>
+      <div class="flex justify-center items-center mb-0 w-[15%]">
+        <div v-if="hasConnectedHooks">
+          <div @click="$emit('delete', integration.hooks[0])">
+            <Button
+              ruby
+              faded
+              :label="$t('INTEGRATION_APPS.DISCONNECT.BUTTON_TEXT')"
             />
           </div>
-          <div class="flex flex-col justify-center m-0 mx-4 flex-1">
-            <h3
-              class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100"
-            >
-              {{ integration.name }}
-            </h3>
-            <p class="text-slate-700 dark:text-slate-200">
-              {{ integration.description }}
-            </p>
-          </div>
-          <div class="flex justify-center items-center mb-0 w-[15%]">
-            <div v-if="hasConnectedHooks">
-              <div @click="$emit('delete', integration.hooks[0])">
-                <woot-button class="nice alert">
-                  {{ $t('INTEGRATION_APPS.DISCONNECT.BUTTON_TEXT') }}
-                </woot-button>
-              </div>
-            </div>
-            <div v-else>
-              <woot-button class="button nice" @click="$emit('add')">
-                {{ $t('INTEGRATION_APPS.CONNECT.BUTTON_TEXT') }}
-              </woot-button>
-            </div>
-          </div>
+        </div>
+        <div v-else>
+          <Button
+            blue
+            faded
+            :label="$t('INTEGRATION_APPS.CONNECT.BUTTON_TEXT')"
+            @click="$emit('add')"
+          />
         </div>
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
index d82adda9d..79eac5bf2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -1,102 +1,99 @@
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import Integration from './Integration.vue';
 import SelectChannelWarning from './Slack/SelectChannelWarning.vue';
 import SlackIntegrationHelpText from './Slack/SlackIntegrationHelpText.vue';
 import Spinner from 'shared/components/Spinner.vue';
-export default {
-  components: {
-    Spinner,
-    Integration,
-    SelectChannelWarning,
-    SlackIntegrationHelpText,
-  },
-  mixins: [globalConfigMixin],
-  props: {
-    code: { type: String, default: '' },
-  },
-  data() {
-    return { integrationLoaded: false };
-  },
-  computed: {
-    integration() {
-      return this.$store.getters['integrations/getIntegration']('slack');
-    },
-    areHooksAvailable() {
-      const { hooks = [] } = this.integration || {};
-      return !!hooks.length;
-    },
-    hook() {
-      const { hooks = [] } = this.integration || {};
-      const [hook] = hooks;
-      return hook || {};
-    },
-    isIntegrationHookEnabled() {
-      return this.hook.status || false;
-    },
-    hasConnectedAChannel() {
-      return !!this.hook.reference_id;
-    },
-    selectedChannelName() {
-      if (this.hook.status) {
-        const { settings: { channel_name: channelName = '' } = {} } = this.hook;
-        return channelName || 'customer-conversations';
-      }
-      return this.$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.SELECTED');
-    },
-    ...mapGetters({
-      uiFlags: 'integrations/getUIFlags',
-    }),
 
-    integrationAction() {
-      if (this.integration.enabled) {
-        return 'disconnect';
-      }
-      return this.integration.action;
-    },
-  },
-  mounted() {
-    this.intializeSlackIntegration();
-  },
-  methods: {
-    async intializeSlackIntegration() {
-      await this.$store.dispatch('integrations/get', 'slack');
-      if (this.code) {
-        await this.$store.dispatch('integrations/connectSlack', this.code);
-        // Clear the query param `code` from the URL as the
-        // subsequent reloads would result in an error
-        this.$router.replace(this.$route.path);
-      }
-      this.integrationLoaded = true;
-    },
-  },
+const props = defineProps({
+  code: { type: String, default: '' },
+});
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const integrationLoaded = ref(false);
+
+const integration = computed(() => {
+  return store.getters['integrations/getIntegration']('slack');
+});
+
+const areHooksAvailable = computed(() => {
+  const { hooks = [] } = integration.value || {};
+  return !!hooks.length;
+});
+
+const hook = computed(() => {
+  const { hooks = [] } = integration.value || {};
+  const [firstHook] = hooks;
+  return firstHook || {};
+});
+
+const isIntegrationHookEnabled = computed(() => {
+  return hook.value.status || false;
+});
+
+const hasConnectedAChannel = computed(() => {
+  return !!hook.value.reference_id;
+});
+
+const selectedChannelName = computed(() => {
+  if (hook.value.status) {
+    const { settings: { channel_name: channelName = '' } = {} } = hook.value;
+    return channelName || 'customer-conversations';
+  }
+  return t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.SELECTED');
+});
+
+const uiFlags = computed(() => store.getters['integrations/getUIFlags']);
+
+const integrationAction = computed(() => {
+  if (integration.value.enabled) {
+    return 'disconnect';
+  }
+  return integration.value.action;
+});
+
+const intializeSlackIntegration = async () => {
+  await store.dispatch('integrations/get', 'slack');
+  if (props.code) {
+    await store.dispatch('integrations/connectSlack', props.code);
+    // Clear the query param `code` from the URL as the
+    // subsequent reloads would result in an error
+    router.replace(route.path);
+  }
+  integrationLoaded.value = true;
 };
+
+onMounted(() => {
+  intializeSlackIntegration();
+});
 </script>
 
 <template>
   <div
     v-if="integrationLoaded && !uiFlags.isCreatingSlack"
-    class="flex flex-col flex-1 overflow-auto"
+    class="flex flex-col flex-1 overflow-auto gap-5 pt-1 pb-10"
   >
-    <div
-      class="p-4 bg-white border-b border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
-    >
-      <Integration
-        :integration-id="integration.id"
-        :integration-logo="integration.logo"
-        :integration-name="integration.name"
-        :integration-description="integration.description"
-        :integration-enabled="integration.enabled"
-        :integration-action="integrationAction"
-        :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
-        :delete-confirmation-text="{
-          title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
-          message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
-        }"
-      />
-    </div>
-    <div v-if="areHooksAvailable" class="flex-1 p-6">
+    <Integration
+      :integration-id="integration.id"
+      :integration-logo="integration.logo"
+      :integration-name="integration.name"
+      :integration-description="integration.description"
+      :integration-enabled="integration.enabled"
+      :integration-action="integrationAction"
+      :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
+      :delete-confirmation-text="{
+        title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
+        message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
+      }"
+    />
+    <div v-if="areHooksAvailable" class="flex-1">
       <SelectChannelWarning
         v-if="!isIntegrationHookEnabled"
         :has-connected-a-channel="hasConnectedAChannel"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
index 8267a6c52..f94f3640f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -1,109 +1,99 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useInstallationName } from 'shared/mixins/globalConfigMixin';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Button from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  mixins: [globalConfigMixin],
-  props: {
-    hasConnectedAChannel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
-  data() {
-    return { selectedChannelId: '', availableChannels: [] };
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-      uiFlags: 'integrations/getUIFlags',
-    }),
-    errorDescription() {
-      return !this.hasConnectedAChannel
-        ? this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
-        : this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
-    },
-  },
-  methods: {
-    async fetchChannels() {
-      try {
-        this.availableChannels = await this.$store.dispatch(
-          'integrations/listAllSlackChannels'
-        );
-        this.availableChannels.sort((c1, c2) => c1.name - c2.name);
-      } catch {
-        this.$t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
-        this.availableChannels = [];
-      }
-    },
-    async updateIntegration() {
-      try {
-        await this.$store.dispatch('integrations/updateSlack', {
-          referenceId: this.selectedChannelId,
-        });
-        useAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
-      } catch (error) {
-        useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
-      }
-    },
+const props = defineProps({
+  hasConnectedAChannel: {
+    type: Boolean,
+    default: true,
   },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const { formatMessage } = useMessageFormatter();
+
+const selectedChannelId = ref('');
+const availableChannels = ref([]);
+
+const uiFlags = computed(() => store.getters['integrations/getUIFlags']);
+
+const errorDescription = computed(() => {
+  return !props.hasConnectedAChannel
+    ? t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
+    : t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
+});
+const globalConfig = computed(() => store.getters['globalConfig/get']);
+
+const formattedErrorMessage = computed(() => {
+  return formatMessage(
+    useInstallationName(
+      errorDescription.value,
+      globalConfig.value.installationName
+    ),
+    false
+  );
+});
+
+const fetchChannels = async () => {
+  try {
+    availableChannels.value = await store.dispatch(
+      'integrations/listAllSlackChannels'
+    );
+    availableChannels.value.sort((c1, c2) => c1.name - c2.name);
+  } catch {
+    t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
+    availableChannels.value = [];
+  }
+};
+
+const updateIntegration = async () => {
+  try {
+    await store.dispatch('integrations/updateSlack', {
+      referenceId: selectedChannelId.value,
+    });
+    useAlert(t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
+  } catch (error) {
+    useAlert(error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR');
+  }
 };
 </script>
 
 <template>
   <div
-    class="px-6 py-4 mb-4 border border-yellow-200 rounded-md bg-yellow-50 dark:border-slate-700 dark:bg-slate-800"
+    class="px-6 py-4 mb-4 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
   >
     <div class="flex">
-      <div class="flex-shrink-0 mt-0.5">
-        <fluent-icon
-          icon="alert"
-          class="text-yellow-500 dark:text-yellow-400"
-          size="24"
-        />
+      <div class="flex-shrink-0">
+        <div class="i-lucide-bell text-xl text-n-amber-11 mt-1" />
       </div>
       <div class="ml-3">
-        <p
-          class="mb-1 text-base font-semibold text-yellow-900 dark:text-yellow-500"
-        >
+        <p class="mb-1 text-base font-semibold text-n-slate-12">
           {{
             $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.ATTENTION_REQUIRED')
           }}
         </p>
-        <div class="mt-2 text-sm text-yellow-800 dark:text-yellow-600">
-          <p
-            v-dompurify-html="
-              formatMessage(
-                useInstallationName(
-                  errorDescription,
-                  globalConfig.installationName
-                ),
-                false
-              )
-            "
-          />
+        <div class="mt-2 text-sm text-n-slate-11 mb-3">
+          <p v-dompurify-html="formattedErrorMessage" />
         </div>
       </div>
     </div>
-    <div v-if="!hasConnectedAChannel" class="mt-2 ml-8">
-      <woot-submit-button
+    <div v-if="!hasConnectedAChannel" class="mb-2 mt-1 ml-8">
+      <Button
         v-if="!availableChannels.length"
-        button-class="smooth small warning"
-        :loading="uiFlags.isFetchingSlackChannels"
-        :button-text="
-          $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
-        "
-        spinner-class="warning"
+        amber
+        sm
+        :is-loading="uiFlags.isFetchingSlackChannels"
         @click="fetchChannels"
-      />
+      >
+        {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT') }}
+      </Button>
       <div v-else class="inline-flex">
         <select
           v-model="selectedChannelId"
@@ -120,13 +110,14 @@ export default {
             #{{ channel.name }}
           </option>
         </select>
-        <woot-submit-button
-          button-class="smooth small success"
-          :button-text="$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.UPDATE')"
-          spinner-class="success"
-          :loading="uiFlags.isUpdatingSlack"
+        <Button
+          teal
+          sm
+          :is-loading="uiFlags.isUpdatingSlack"
           @click="updateIntegration"
-        />
+        >
+          {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.UPDATE') }}
+        </Button>
       </div>
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
index ee6cad7e2..b28ca19a3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
@@ -1,41 +1,37 @@
-<script>
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-export default {
-  props: {
-    selectedChannelName: {
-      type: String,
-      required: true,
-    },
+
+const props = defineProps({
+  selectedChannelName: {
+    type: String,
+    required: true,
   },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
-};
+});
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const formattedHelpText = computed(() => {
+  return formatMessage(
+    t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
+      selectedChannelName: props.selectedChannelName,
+    }),
+    false
+  );
+});
 </script>
 
 <template>
   <div
-    class="flex-1 w-full p-6 bg-white rounded-md border border-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
+    class="flex-1 w-full px-6 py-5 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
   >
     <div class="prose-lg max-w-5xl">
-      <h5 class="dark:text-slate-100">
-        {{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}
+      <h5 class="text-n-slate-12 tracking-tight">
+        {{ t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}
       </h5>
-      <p>
-        <span
-          v-dompurify-html="
-            formatMessage(
-              $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
-                selectedChannelName: selectedChannelName,
-              }),
-              false
-            )
-          "
-        />
-      </p>
+      <div v-dompurify-html="formattedHelpText" class="text-n-slate-11" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
index 2906736d8..9b94403d3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -24,7 +24,7 @@ export default {
 
 <template>
   <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full"
   >
     <woot-wizard class="hidden md:block w-1/4" :items="items" />
     <router-view />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
index 7871ae0e3..f9fb4a012 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -28,7 +28,7 @@ export default {
 
 <template>
   <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full"
   >
     <woot-wizard class="hidden md:block w-1/4" :items="items" />
     <router-view />