Initial Vite Commit

2024-01-25 11:56:22 -08:00
parent 3c952e6a4a
commit c33c844039
90 changed files with 762 additions and 214 deletions
@@ -1,4 +1,4 @@
-@import '~vue2-datepicker/scss/index';
+@import 'vue2-datepicker/scss/index';

 .date-picker {
  &.no-margin {
@@ -1,4 +1,4 @@
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';

 .formulate-input {
  .formulate-input-errors {
@@ -41,7 +41,7 @@
 //  36. Tooltip
 //  37. Top Bar

-@import '~foundation-sites/scss/util/util';
+@import 'foundation-sites/scss/util/util';
 // 1. Global
 // ---------

@@ -51,11 +51,13 @@ $contrast-warnings: false;
 $global-font-size: 16px;
 $global-width: 100%;
 $global-lineheight: 1.5;
-$foundation-palette: (primary: $color-woot,
+$foundation-palette: (
+  primary: $color-woot,
  secondary: #5d7592,
  success: #44ce4b,
  warning: #ffc532,
-  alert: #ff382d);
+  alert: #ff382d
+);
 $light-gray: #c0ccda;
 $medium-gray: #8492a6;
 $dark-gray: $color-gray;
@@ -64,15 +66,15 @@ $white: #fff;
 $body-background: $white;
 $body-font-color: $color-body;
 $body-font-family: 'PlusJakarta',
-apple-system,
-system-ui,
-BlinkMacSystemFont,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-Tahoma,
-Arial,
-sans-serif;
+  -apple-system,
+  system-ui,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  "Helvetica Neue",
+  Tahoma,
+  Arial,
+  sans-serif;
 $body-antialiased: true;
 $global-margin: $space-small;
 $global-padding: $space-small;
@@ -88,7 +90,8 @@ $print-transparent-backgrounds: true;
 // 2. Breakpoints
 // --------------

-$breakpoints: (small: 0,
+$breakpoints: (
+  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
@@ -96,15 +99,19 @@ $breakpoints: (small: 0,
  xxxlarge: 1600px,
 );
 $print-breakpoint: large;
-$breakpoint-classes: (small medium large);
+$breakpoint-classes: (
+  small medium large
+);

 // 3. The Grid
 // -----------

 $grid-row-width: $global-width;
 $grid-column-count: 12;
-$grid-column-gutter: (small: $zero,
-  medium: $zero);
+$grid-column-gutter: (
+  small: $zero,
+  medium: $zero
+);
 $grid-column-align-edge: true;
 $block-grid-max: 8;

@@ -118,7 +125,8 @@ $font-family-monospace: $body-font-family;
 $header-color: $color-heading;
 $header-lineheight: 1.4;
 $header-margin-bottom: 0.3125rem;
-$header-styles: (small: ("h1": ("font-size": 24),
+$header-styles: (
+  small: ("h1": ("font-size": 24),
    "h2": ("font-size": 20),
    "h3": ("font-size": 19),
    "h4": ("font-size": 18),
@@ -129,7 +137,8 @@ $header-styles: (small: ("h1": ("font-size": 24),
    "h3": ("font-size": 31),
    "h4": ("font-size": 25),
    "h5": ("font-size": 20),
-    "h6": ("font-size": 16)));
+    "h6": ("font-size": 16))
+);
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
@@ -249,16 +258,18 @@ $button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $white;
 $button-radius: var(--border-radius-normal);
-$button-sizes: (tiny: var(--font-size-micro),
+$button-sizes: (
+  tiny: var(--font-size-micro),
  small: var(--font-size-mini),
  default: var(--font-size-small),
-  large: var(--font-size-medium));
+  large: var(--font-size-medium)
+);
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.4;
 $button-background-hover-lightness: -20%;
 $button-hollow-hover-lightness: -50%;
 $button-transition: background-color 0.25s ease-out,
-color 0.25s ease-out;
+  color 0.25s ease-out;

 // 12. Button Group
 // ----------------
@@ -298,12 +309,18 @@ $card-margin: $global-margin;
 // ----------------

 $closebutton-position: right top;
-$closebutton-offset-horizontal: (small: 0.66rem,
-  medium: 1rem);
-$closebutton-offset-vertical: (small: 0.33em,
-  medium: 0.5rem);
-$closebutton-size: (small: 1.5em,
-  medium: 2em);
+$closebutton-offset-horizontal: (
+  small: 0.66rem,
+  medium: 1rem
+);
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem
+);
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em
+);
 $closebutton-lineheight: 1;
 $closebutton-color: $dark-gray;
 $closebutton-color-hover: $black;
@@ -326,9 +343,11 @@ $dropdown-border: 1px solid $medium-gray;
 $dropdown-font-size: 0.625rem;
 $dropdown-width: 300px;
 $dropdown-radius: $global-radius;
-$dropdown-sizes: (tiny: 100px,
+$dropdown-sizes: (
+  tiny: 100px,
  small: 200px,
-  large: 400px);
+  large: 400px
+);

 // 18. Dropdown Menu
 // -----------------
@@ -423,10 +442,12 @@ $meter-fill-bad: $alert-color;
 // 24. Off-canvas
 // --------------

-$offcanvas-sizes: (small: 14.375,
+$offcanvas-sizes: (
+  small: 14.375,
  medium: 14.375,
 );
-$offcanvas-vertical-sizes: (small: 14.375,
+$offcanvas-vertical-sizes: (
+  small: 14.375,
  medium: 14.375,
 );
 $offcanvas-background: $light-gray;
@@ -486,8 +507,10 @@ $progress-radius: $global-radius;
 // --------------------

 $responsive-embed-margin-bottom: rem-calc(16);
-$responsive-embed-ratios: (default: 4 by 3,
-  widescreen: 16 by 9);
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9
+);

 // 29. Reveal
 // ----------
@@ -541,7 +564,7 @@ $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
 $table-row-hover: darken($table-background, $table-hover-scale);
 $table-row-stripe-hover: darken($table-background,
-  $table-color-scale + $table-hover-scale);
+    $table-color-scale + $table-hover-scale);
 $table-is-striped: false;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
@@ -1,5 +1,5 @@
-@import '~dashboard/assets/scss/variables';
-@import '~widget/assets/scss/mixins';
+@import 'dashboard/assets/scss/variables';
+@import 'widget/assets/scss/mixins';

 $spinner-before-border-color: rgba(255, 255, 255, 0.7);

@@ -69,7 +69,7 @@

@import 'plugins/multiselect';
@import 'plugins/dropdown';
-@import '~shared/assets/stylesheets/ionicons';
+@import 'shared/assets/stylesheets/ionicons';
@import 'utility-helpers';

 .tooltip {
@@ -10,7 +10,7 @@
@import 'variables';

@import 'vue-multiselect/dist/vue-multiselect.min.css';
-@import '~shared/assets/stylesheets/ionicons';
+@import 'shared/assets/stylesheets/ionicons';

@import 'mixins';
@import 'foundation-settings';
@@ -1,29 +1,29 @@
 /* eslint no-plusplus: 0 */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Bar from './widgets/chart/BarChart';
-import Button from './ui/WootButton';
-import Code from './Code';
-import ColorPicker from './widgets/ColorPicker';
+import Button from './ui/WootButton.vue';
+import Code from './Code.vue';
+import ColorPicker from './widgets/ColorPicker.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
 import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
 import ContextMenu from './ui/ContextMenu.vue';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
-import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
-import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
-import FeatureToggle from './widgets/FeatureToggle';
+import DropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import FeatureToggle from './widgets/FeatureToggle.vue';
 import HorizontalBar from './widgets/chart/HorizontalBarChart';
 import Input from './widgets/forms/Input.vue';
 import PhoneInput from './widgets/forms/PhoneInput.vue';
-import Label from './ui/Label';
-import LoadingState from './widgets/LoadingState';
-import Modal from './Modal';
-import ModalHeader from './ModalHeader';
-import ReportStatsCard from './widgets/ReportStatsCard';
-import SidemenuIcon from './SidemenuIcon';
-import Spinner from 'shared/components/Spinner';
-import SubmitButton from './buttons/FormSubmitButton';
-import Tabs from './ui/Tabs/Tabs';
-import TabsItem from './ui/Tabs/TabsItem';
+import Label from './ui/Label.vue';
+import LoadingState from './widgets/LoadingState.vue';
+import Modal from './Modal.vue';
+import ModalHeader from './ModalHeader.vue';
+import ReportStatsCard from './widgets/ReportStatsCard.vue';
+import SidemenuIcon from './SidemenuIcon.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import SubmitButton from './buttons/FormSubmitButton.vue';
+import Tabs from './ui/Tabs/Tabs.jsx';
+import TabsItem from './ui/Tabs/TabsItem.vue';
 import Thumbnail from './widgets/Thumbnail.vue';

 const WootUIKit = {
@@ -53,8 +53,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
+@import 'dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/mixins';

 .colorpicker {
  position: relative;
@@ -705,10 +705,11 @@ export default {
 </script>

 <style lang="scss">
-@import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
+@import '@chatwoot/prosemirror-schema/src/styles/base.scss';

 .ProseMirror-menubar-wrapper {
  @apply flex flex-col;
+
  .ProseMirror-menubar {
    min-height: var(--space-two) !important;
    @apply -ml-2.5 pb-0 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100;
@@ -717,6 +718,7 @@ export default {
      @apply bg-slate-75 dark:bg-slate-800;
    }
  }
+
  > .ProseMirror {
    @apply p-0 break-words text-slate-800 dark:text-slate-100;

@@ -198,7 +198,7 @@ import {
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';

-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');

 export default {
  components: {
@@ -1208,6 +1208,7 @@ export default {
    @apply bg-yellow-50 dark:bg-yellow-200;
  }
 }
+
 .send-button {
  @apply mb-0;
 }
@@ -1228,6 +1229,7 @@ export default {

 .emoji-dialog--rtl {
  @apply left-[unset] -right-80;
+
  &::before {
    transform: rotate(90deg);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
@@ -46,7 +46,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';

 .file {
  display: flex;
@@ -45,7 +45,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables.scss';
+@import 'dashboard/assets/scss/variables.scss';
+
 .footer-wrap {
  width: 100%;
  display: flex;
@@ -27,7 +27,7 @@
  </section>
 </template>

-<script>
+<script lang="jsx">
 import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';
@@ -1,6 +1,6 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ConversationView = () => import('./ConversationView');
+const ConversationView = () => import('./ConversationView.vue');

 export default {
  routes: [
@@ -59,7 +59,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import UpgradePage from './UpgradePage';
+import UpgradePage from './UpgradePage.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -1,30 +1,32 @@
-import HelpCenterLayout from './components/HelpCenterLayout';
+import HelpCenterLayout from './components/HelpCenterLayout.vue';
 import { getPortalRoute } from './helpers/routeHelper';

-const ListAllPortals = () => import('./pages/portals/ListAllPortals');
-const NewPortal = () => import('./pages/portals/NewPortal');
+const ListAllPortals = () => import('./pages/portals/ListAllPortals.vue');
+const NewPortal = () => import('./pages/portals/NewPortal.vue');

-const EditPortal = () => import('./pages/portals/EditPortal');
-const EditPortalBasic = () => import('./pages/portals/EditPortalBasic');
+const EditPortal = () => import('./pages/portals/EditPortal.vue');
+const EditPortalBasic = () => import('./pages/portals/EditPortalBasic.vue');
 const EditPortalCustomization = () =>
-  import('./pages/portals/EditPortalCustomization');
+  import('./pages/portals/EditPortalCustomization.vue');
 const EditPortalLocales = () => import('./pages/portals/EditPortalLocales.vue');
-const ShowPortal = () => import('./pages/portals/ShowPortal');
-const PortalDetails = () => import('./pages/portals/PortalDetails');
-const PortalCustomization = () => import('./pages/portals/PortalCustomization');
+const ShowPortal = () => import('./pages/portals/ShowPortal.vue');
+const PortalDetails = () => import('./pages/portals/PortalDetails.vue');
+const PortalCustomization = () =>
+  import('./pages/portals/PortalCustomization.vue');
 const PortalSettingsFinish = () =>
-  import('./pages/portals/PortalSettingsFinish');
+  import('./pages/portals/PortalSettingsFinish.vue');

-const ListAllCategories = () => import('./pages/categories/ListAllCategories');
-const NewCategory = () => import('./pages/categories/NewCategory');
-const EditCategory = () => import('./pages/categories/EditCategory');
+const ListAllCategories = () =>
+  import('./pages/categories/ListAllCategories.vue');
+const NewCategory = () => import('./pages/categories/NewCategory.vue');
+const EditCategory = () => import('./pages/categories/EditCategory.vue');
 const ListCategoryArticles = () =>
-  import('./pages/articles/ListCategoryArticles');
-const ListAllArticles = () => import('./pages/articles/ListAllArticles');
+  import('./pages/articles/ListCategoryArticles.vue');
+const ListAllArticles = () => import('./pages/articles/ListAllArticles.vue');
 const DefaultPortalArticles = () =>
-  import('./pages/articles/DefaultPortalArticles');
-const NewArticle = () => import('./pages/articles/NewArticle');
-const EditArticle = () => import('./pages/articles/EditArticle');
+  import('./pages/articles/DefaultPortalArticles.vue');
+const NewArticle = () => import('./pages/articles/NewArticle.vue');
+const EditArticle = () => import('./pages/articles/EditArticle.vue');

 const portalRoutes = [
  {
@@ -38,7 +38,7 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';

-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');

 export default {
  components: { EmojiInput },
@@ -130,7 +130,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/mixins';
+@import 'dashboard/assets/scss/mixins';

 .notification--title {
  @apply text-sm m-0 text-slate-800 dark:text-slate-100;
@@ -1,12 +1,12 @@
-import Facebook from './channels/Facebook';
-import Website from './channels/Website';
-import Twitter from './channels/Twitter';
-import Api from './channels/Api';
-import Email from './channels/Email';
-import Sms from './channels/Sms';
-import Whatsapp from './channels/Whatsapp';
-import Line from './channels/Line';
-import Telegram from './channels/Telegram';
+import Facebook from './channels/Facebook.vue';
+import Website from './channels/Website.vue';
+import Twitter from './channels/Twitter.vue';
+import Api from './channels/Api.vue';
+import Email from './channels/Email.vue';
+import Sms from './channels/Sms.vue';
+import Whatsapp from './channels/Whatsapp.vue';
+import Line from './channels/Line.vue';
+import Telegram from './channels/Telegram.vue';

 const channelViewList = {
  facebook: Facebook,
@@ -105,7 +105,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';

 .fb--login {
  img {
@@ -191,8 +191,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
+@import 'dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/mixins';

 .max-assignment-container {
  padding-top: var(--space-slab);
@@ -188,7 +188,7 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';

 .label-color--container {
  @apply flex items-center;
@@ -197,6 +197,7 @@ export default {
 .label-color--display {
  @apply rounded h-4 w-4 mr-1 rtl:mr-0 rtl:ml-1 border border-solid border-slate-50 dark:border-slate-700;
 }
+
 .label-title {
  span {
    @apply w-60 inline-block;
@@ -137,14 +137,16 @@ export default {
 </script>

 <style lang="scss">
-@import '~dashboard/assets/scss/mixins.scss';
+@import 'dashboard/assets/scss/mixins.scss';

 .profile--settings--row {
  @include border-normal-bottom;
  padding: var(--space-normal);
+
  .small-3 {
    padding: var(--space-normal) var(--space-medium) var(--space-normal) 0;
  }
+
  .small-9 {
    padding: var(--space-normal);
  }
@@ -515,7 +515,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables.scss';
+@import 'dashboard/assets/scss/variables.scss';

 .notification--checkbox {
  font-size: $font-size-large;
@@ -21,7 +21,7 @@
    </div>
  </div>
 </template>
-<script>
+<script lang="jsx">
 import { VeTable, VePagination } from 'vue-easytable';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import { CSAT_RATINGS } from 'shared/constants/messages';
@@ -28,7 +28,7 @@
  </div>
 </template>

-<script>
+<script lang="jsx">
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -6,13 +6,13 @@ import axios from 'axios';
 import hljs from 'highlight.js';
 import Multiselect from 'vue-multiselect';
 import VueFormulate from '@braid/vue-formulate';
-import WootSwitch from 'components/ui/Switch';
-import WootWizard from 'components/ui/Wizard';
+import WootSwitch from 'components/ui/Switch.vue';
+import WootWizard from 'components/ui/Wizard.vue';
 import { sync } from 'vuex-router-sync';
 import Vuelidate from 'vuelidate';
 import VTooltip from 'v-tooltip';
 import WootUiKit from '../dashboard/components';
-import App from '../dashboard/App';
+import App from '../dashboard/App.vue';
 import i18n from '../dashboard/i18n';
 import createAxios from '../dashboard/helper/APIHelper';
 import commonHelpers, { isJSONValid } from '../dashboard/helper/commons';
@@ -26,7 +26,7 @@ import {
  initializeAnalyticsEvents,
  initializeChatwootEvents,
 } from '../dashboard/helper/scriptHelpers';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import AnalyticsPlugin from '../dashboard/helper/AnalyticsHelper/plugin';
@@ -13,7 +13,7 @@ import AnalyticsPlugin from 'dashboard/helper/AnalyticsHelper/plugin';
 import App from '../v3/App.vue';
 import router, { initalizeRouter } from '../v3/views/index';
 import store from '../v3/store';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';

 Vue.config.env = process.env;

@@ -1,4 +1,4 @@
-@import "~ionicons/scss/ionicons-variables";
+@import "ionicons/scss/ionicons-variables";

@font-face {
  font-display: swap;
@@ -21,4 +21,4 @@
  text-transform: none;
 }

-@import "~ionicons/scss/ionicons-icons";
+@import "ionicons/scss/ionicons-icons";
@@ -69,7 +69,7 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .branding--image {
  margin-right: $space-smaller;
@@ -55,8 +55,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~dashboard/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'dashboard/assets/scss/mixins.scss';

 .action-button {
  align-items: center;
@@ -53,8 +53,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~dashboard/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'dashboard/assets/scss/mixins.scss';

 .card-message {
  max-width: 220px;
@@ -164,7 +164,7 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .form {
  padding: $space-normal;
@@ -39,7 +39,7 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .option {
  border-radius: $space-jumbo;
@@ -63,7 +63,8 @@ export default {
 </script>

 <style lang="scss">
-@import '~dashboard/assets/scss/variables.scss';
+@import 'dashboard/assets/scss/variables.scss';
+
 .has-selected {
  .option-button:not(.is-selected) {
    color: $color-light-gray;
@@ -72,7 +73,7 @@ export default {
 }
 </style>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .options-message {
  max-width: 17rem;
@@ -150,8 +150,8 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/mixins.scss';

 .customer-satisfaction {
  @include light-shadow;
@@ -198,6 +198,7 @@ export default {
      }
    }
  }
+
  .feedback-form {
    display: flex;

@@ -32,7 +32,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables';
+@import 'widget/assets/scss/variables';

 .date--separator {
  font-size: $font-size-default;
@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables';
+@import 'widget/assets/scss/variables';

@mixin color-spinner() {
  @keyframes spinner {
@@ -181,6 +181,7 @@ export default {
 </script>
 <style scoped>
@tailwind components;
+
@layer components {
  .box-shadow-blue {
    box-shadow:
@@ -196,7 +197,7 @@ export default {
 }
 </style>
 <style lang="scss">
-@import '~dashboard/assets/scss/mixins';
+@import 'dashboard/assets/scss/mixins';

 .emoji-dialog {
  &::before {
@@ -206,6 +207,7 @@ export default {
      $color-bg-dark: #26292b;
      @include arrow(bottom, $color-bg-dark, $space-slab);
    }
+
    @media (prefers-color-scheme: light) {
      $color-bg: #ebf0f5;
      @include arrow(bottom, $color-bg, $space-slab);
@@ -241,6 +243,7 @@ export default {
  .emoji-icon {
    @apply text-slate-200 dark:text-slate-200 mb-2;
  }
+
  .empty-message--text {
    @apply text-slate-200 dark:text-slate-200 text-sm font-medium;
  }
@@ -267,6 +270,7 @@ export default {
    li .active {
      @apply bg-white dark:bg-slate-900;
    }
+
    .emoji--item {
      @apply items-center flex text-sm;

@@ -188,7 +188,7 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .logo {
  max-height: $space-larger;
@@ -27,7 +27,8 @@ export default {

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 .agent-message-wrap {
  position: sticky;
  bottom: $space-smaller;
@@ -31,16 +31,19 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 .banner {
  color: $color-white;
  font-size: $font-size-default;
  font-weight: $font-weight-bold;
  padding: $space-slab;
  text-align: center;
+
  &.success {
    background: $color-success;
  }
+
  &.error {
    background: $color-error;
  }
@@ -162,7 +162,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .branding {
  align-items: center;
@@ -58,7 +58,7 @@ import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';

-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');

 export default {
  name: 'ChatInputWrap',
@@ -176,8 +176,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/mixins.scss';

 .chat-message--input {
  align-items: center;
@@ -55,7 +55,7 @@ export default {
 </style>

 <style lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .chat-bubble .message-content,
 .chat-bubble.user {
@@ -119,8 +119,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/mixins.scss';

 .conversation--container {
  display: flex;
@@ -132,6 +132,7 @@ export default {
  &.light-scheme {
    color-scheme: light;
  }
+
  &.dark-scheme {
    color-scheme: dark;
  }
@@ -83,7 +83,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .file {
  .icon-wrap {
@@ -112,6 +112,7 @@ export default {
  .link-wrap {
    line-height: 1;
  }
+
  .meta {
    padding-right: $space-smaller;
  }
@@ -284,7 +284,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 .phone-input--wrap {
  .phone-input {
    height: 2.8rem;
@@ -121,7 +121,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .actions {
  button {
@@ -136,6 +136,7 @@ export default {
  .close-button {
    display: none;
  }
+
  .rn-close-button {
    display: block !important;
  }
@@ -35,7 +35,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .image {
  display: block;
@@ -317,7 +317,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 ::v-deep {
  .wrapper[data-type='checkbox'] {
    .formulate-input-wrapper {
@@ -330,6 +331,7 @@ export default {
      }
    }
  }
+
  @media (prefers-color-scheme: dark) {
    .wrapper {
      .formulate-input-element--date,
@@ -340,6 +342,7 @@ export default {
      }
    }
  }
+
  .wrapper[data-type='textarea'] {
    .formulate-input-element--textarea {
      textarea {
@@ -347,6 +350,7 @@ export default {
      }
    }
  }
+
  .pre-chat-header-message {
    .link {
      color: $color-woot;
@@ -106,7 +106,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
+
 .chat-bubble {
  max-width: 85%;
  padding: $space-normal;
@@ -119,10 +120,12 @@ export default {
  text-align: left;
  padding-bottom: $space-small;
  font-size: $font-size-small;
+
  .agent--name {
    font-weight: $font-weight-medium;
    margin-left: $space-smaller;
  }
+
  .company--name {
    color: $color-light-gray;
    margin-left: $space-smaller;
@@ -99,7 +99,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables';
+@import 'widget/assets/scss/variables';

 .unread-wrap {
  width: 100%;
@@ -146,6 +146,7 @@ export default {
      color: $color-body;
    }
  }
+
  .is-background-light {
    color: $color-body !important;
  }
@@ -28,8 +28,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
+@import 'widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/mixins.scss';

 .user-avatar {
  @include light-shadow;
@@ -36,7 +36,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .chat-bubble.user::v-deep {
  p code {
@@ -75,7 +75,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .menu-content {
  width: max-content;
@@ -52,14 +52,16 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .menu-item {
  margin-left: $zero !important;
  outline: none;
+
  &:last-child {
    border-bottom: none;
  }
+
  &:disabled {
    cursor: not-allowed;
  }
@@ -142,8 +142,8 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~widget/assets/scss/variables';
-@import '~widget/assets/scss/mixins';
+@import 'widget/assets/scss/variables';
+@import 'widget/assets/scss/mixins';

 .custom-header-shadow {
  @include shadow-large;
@@ -47,7 +47,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .article-item {
  border-bottom: 1px solid $color-border;
@@ -112,7 +112,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .email-input-group {
  display: flex;
@@ -83,7 +83,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';

 .video-call--container {
  position: fixed;