Initial Vite Commit

app/javascript/shared/assets/stylesheets/ionicons.scss

@@ -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";

app/javascript/shared/components/Branding.vue

@@ -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;

app/javascript/shared/components/CardButton.vue

@@ -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;

app/javascript/shared/components/ChatCard.vue

@@ -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;

app/javascript/shared/components/ChatForm.vue

@@ -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;

app/javascript/shared/components/ChatOption.vue

@@ -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;

app/javascript/shared/components/ChatOptions.vue

@@ -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;

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -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;
 

app/javascript/shared/components/DateSeparator.vue

@@ -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;

app/javascript/shared/components/Spinner.vue

@@ -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 {

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -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;