From f82dfee0a53bfc44a121bd181b6bbc75e21446a3 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 20 Mar 2025 18:22:04 +0530
Subject: [PATCH 01/46] chore: Update buttons in custom role page (#11119)
---
.../dashboard/settings/customRoles/Index.vue | 11 ++++----
.../customRoles/component/CustomRoleModal.vue | 25 +++++++++++--------
.../component/CustomRoleTableBody.vue | 24 +++++++++---------
3 files changed, 31 insertions(+), 29 deletions(-)
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
index 96a5764a2..0d2316c21 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
@@ -5,6 +5,7 @@ import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
import CustomRoleModal from './component/CustomRoleModal.vue';
import CustomRoleTableBody from './component/CustomRoleTableBody.vue';
import CustomRolePaywall from './component/CustomRolePaywall.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore, useMapGetter } from 'dashboard/composables/store';
@@ -134,14 +135,12 @@ const confirmDeletion = () => {
feature-name="canned_responses"
>
-
- {{ $t('CUSTOM_ROLE.HEADER_BTN_TXT') }}
-
+ />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
index e1715f1cb..cddbddd32 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
@@ -12,7 +12,7 @@ import {
CONVERSATION_PARTICIPATING_PERMISSIONS,
} from 'dashboard/constants/permissions.js';
-import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
const props = defineProps({
mode: {
@@ -160,13 +160,12 @@ const isSubmitDisabled = computed(
/>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
index 891adce40..3a080a0c1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -2,6 +2,8 @@
import { useI18n } from 'vue-i18n';
import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
+import Button from 'dashboard/components-next/button/Button.vue';
+
defineProps({
roles: {
type: Array,
@@ -44,22 +46,20 @@ const getFormattedPermissions = role => {
{{ getFormattedPermissions(customRole) }}
-
-
From 46297ce85ec958098d4c405df7a11307893ef53d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 20 Mar 2025 18:22:45 +0530
Subject: [PATCH 02/46] chore: Update buttons in SLA page (#11118)
---
.../routes/dashboard/settings/sla/SlaForm.vue | 24 ++++++++++---------
.../settings/sla/components/SLAHeader.vue | 12 ++++------
.../settings/sla/components/SLAListItem.vue | 12 +++++-----
3 files changed, 24 insertions(+), 24 deletions(-)
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index eba59b6b8..f562aa9ce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
import { convertSecondsToTimeUnit } from '@chatwoot/utils';
import validations from './validations';
import SlaTimeInput from './SlaTimeInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
SlaTimeInput,
+ NextButton,
},
props: {
selectedResponse: {
@@ -205,19 +207,19 @@ export default {
-
- {{ $t('SLA.FORM.CANCEL') }}
-
-
+
- {{ submitLabel }}
-
+ />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
index b972ecb6c..8eb80eeb0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
@@ -1,4 +1,5 @@
-
-
-
-
-
-
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
index fc430f775..395d49334 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -2,10 +2,12 @@
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
import { useAI } from 'dashboard/composables/useAI';
import AILoader from './AILoader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
AILoader,
+ NextButton,
},
props: {
aiOption: {
@@ -84,16 +86,22 @@ export default {
-
- {{
+
- {{
+ "
+ @click.prevent="onClose"
+ />
+
diff --git a/app/javascript/dashboard/components/widgets/AICTAModal.vue b/app/javascript/dashboard/components/widgets/AICTAModal.vue
index b5ea52614..13e201326 100644
--- a/app/javascript/dashboard/components/widgets/AICTAModal.vue
+++ b/app/javascript/dashboard/components/widgets/AICTAModal.vue
@@ -6,7 +6,12 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
import { useAI } from 'dashboard/composables/useAI';
import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
export default {
+ components: {
+ NextButton,
+ },
emits: ['close'],
setup() {
@@ -94,16 +99,30 @@ export default {
/>
-
- {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
-
+
-
- {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
-
-
- {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
-
+
+
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 69d559509..299a2ad5a 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -2,6 +2,8 @@
import { computed } from 'vue';
import { formatBytes } from 'shared/helpers/FileHelper';
+import Button from 'dashboard/components-next/button/Button.vue';
+
const props = defineProps({
attachments: {
type: Array,
@@ -73,9 +75,11 @@ const fileName = file => {
-
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 634ae7858..9bc197f25 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -2,11 +2,14 @@
import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
import AutomationActionFileInput from './AutomationFileInput.vue';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
export default {
components: {
AutomationActionTeamMessageInput,
AutomationActionFileInput,
WootMessageEditor,
+ NextButton,
},
props: {
modelValue: {
@@ -172,11 +175,11 @@ export default {
/>
-
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index 7b2cb5c13..f6011c4ad 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -247,7 +247,13 @@ export default {
:placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
/>
-
+
{{ errorMessage }}
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 9c04232e2..26249e881 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -164,11 +164,6 @@ export default {
'is-note-mode': this.isNote,
};
},
- buttonClass() {
- return {
- warning: this.isNote,
- };
- },
showAttachButton() {
return this.showFileUpload || this.isNote;
},
@@ -367,14 +362,15 @@ export default {
/>
-
- {{ sendButtonText }}
-
+ />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 4f6b31721..2213b8a82 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -13,6 +13,8 @@ import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
import Linear from './linear/index.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
export default {
components: {
BackButton,
@@ -21,6 +23,7 @@ export default {
Thumbnail,
SLACardLabel,
Linear,
+ NextButton,
},
mixins: [inboxMixin],
props: {
@@ -154,16 +157,18 @@ export default {
-
-
+
{{ currentContact.name }}
-
+
{{ snoozedDisplayText }}
-
- {{ contactPanelToggleText }}
-
+ />
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 0cccde65a..6a98fe42f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -25,6 +25,8 @@ import * as Sentry from '@sentry/vue';
import { useTrack } from 'dashboard/composables';
import { emitter } from 'shared/helpers/mitt';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
export default {
components: {
BubbleActions,
@@ -40,6 +42,7 @@ export default {
InstagramStory,
InstagramStoryReply,
Spinner,
+ NextButton,
},
props: {
data: {
@@ -452,12 +455,12 @@ export default {
v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
class="message-failed--alert"
>
-
From e4ea078e526b0a142ef09515f8062860bc123f2e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 21 Mar 2025 21:54:54 +0530
Subject: [PATCH 20/46] chore: Update buttons in conversation screens - 2
(#11134)
---
.../components-next/button/Button.vue | 2 +-
.../components/NetworkNotification.vue | 39 ++++---
.../conversation/ConversationHeader.vue | 8 +-
.../MessageSignatureMissingAlert.vue | 26 ++---
.../widgets/conversation/MessagesView.vue | 31 ++---
.../widgets/conversation/ReplyToMessage.vue | 34 +++---
.../WhatsappTemplates/TemplateParser.vue | 84 +++++---------
.../WhatsappTemplates/TemplatesPicker.vue | 73 ++++--------
.../components/SLAPopoverCard.vue | 22 ++--
.../conversationBulkActions/AgentSelector.vue | 36 +++---
.../conversationBulkActions/LabelActions.vue | 26 ++---
.../conversationBulkActions/TeamActions.vue | 15 ++-
.../conversationBulkActions/UpdateActions.vue | 30 ++---
.../conversation/linear/CreateIssue.vue | 23 ++--
.../conversation/linear/IssueHeader.vue | 38 +++----
.../widgets/conversation/linear/LinkIssue.vue | 23 ++--
.../widgets/conversation/linear/index.vue | 15 ++-
.../widgets/modal/ConfirmDeleteModal.vue | 24 ++--
.../widgets/modal/ConfirmationModal.vue | 10 +-
.../components/widgets/modal/DeleteModal.vue | 20 +---
.../contact/components/MergeContact.vue | 21 ++--
.../ArticleSearch/ArticleSearchResultItem.vue | 106 +++++++++---------
.../components/ArticleSearch/ArticleView.vue | 83 +++++++-------
.../components/ArticleSearch/Header.vue | 9 +-
.../components/ui/dropdown/AddLabel.vue | 36 +++---
25 files changed, 363 insertions(+), 471 deletions(-)
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 93622ad64..c54bd395a 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -190,7 +190,7 @@ const STYLE_CONFIG = {
const variantClasses = computed(() => {
const variantMap = {
ghost: `${STYLE_CONFIG.colors[computedColor.value].ghost}`,
- link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
+ link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-2`,
outline: STYLE_CONFIG.colors[computedColor.value].outline,
faded: STYLE_CONFIG.colors[computedColor.value].faded,
solid: STYLE_CONFIG.colors[computedColor.value].solid,
diff --git a/app/javascript/dashboard/components/NetworkNotification.vue b/app/javascript/dashboard/components/NetworkNotification.vue
index 98149217e..eb7785bc6 100644
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -11,6 +11,8 @@ import {
} from 'dashboard/helper/routeHelpers';
import { useEventListener } from '@vueuse/core';
+import Button from 'dashboard/components-next/button/Button.vue';
+
const { t } = useI18n();
const route = useRoute();
@@ -107,34 +109,31 @@ onBeforeUnmount(() => {
-
+
-
-
+
+
{{ bannerText }}
-
-
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 2213b8a82..6434a168f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -157,12 +157,7 @@ export default {
-
+
@@ -190,7 +185,6 @@ export default {
xs
blue
:label="contactPanelToggleText"
- class="!underline-offset-1"
@click="$emit('contactPanelToggle')"
/>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
index 15793f4c8..fd2139b67 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
@@ -1,10 +1,11 @@
-
@@ -14,13 +15,12 @@ export default {
>
{{ $t('CONVERSATION.FOOTER.MESSAGE_SIGNATURE_NOT_CONFIGURED') }}
-
- {{ $t('CONVERSATION.FOOTER.CLICK_HERE') }}
-
+ />
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index d00e162c9..ae798d8d9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -37,6 +37,8 @@ import wootConstants from 'dashboard/constants/globals';
import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
import { FEATURE_FLAGS } from '../../../featureFlags';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
export default {
components: {
Message,
@@ -44,6 +46,7 @@ export default {
ReplyBox,
Banner,
ConversationLabelSuggestion,
+ NextButton,
},
mixins: [inboxMixin],
props: {
@@ -488,13 +491,15 @@ export default {
:href-link-text="replyWindowLinkText"
/>
-
@@ -614,20 +619,6 @@ export default {
-
-
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
index cd47481ce..dd8a95879 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -43,48 +43,56 @@ export default {
-
-
+
+
-
+
@@ -161,21 +157,21 @@ export default {
}}
-
- {{ $t('BULK_ACTION.GO_BACK_LABEL') }}
-
-
+
- {{ $t('BULK_ACTION.YES') }}
-
+ />
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index fe127b899..78b93f0de 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -1,7 +1,11 @@
@@ -65,24 +68,23 @@ export default {
{{ category || $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.UNCATEGORIZED') }}
-
-
- {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
-
+ />
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
index dd66ed941..f2a2ab4d6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
@@ -1,42 +1,37 @@
-
-
- {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS') }}
-
+ />
@@ -45,24 +40,22 @@ export default {
-
- {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK') }}
-
-
+
- {{ $t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE') }}
-
+ />
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
index 7ee206c02..7fac7b663 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -1,6 +1,7 @@
-
- {{ $t('CONTACT_PANEL.LABELS.CONVERSATION.ADD_BUTTON') }}
-
+ />
-
-
From 3a693947b56b5173208d3cf59591652363d0c943 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 21 Mar 2025 22:09:03 +0530
Subject: [PATCH 21/46] feat: Add RTL Support to Widget (#11022)
This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code.
Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget
https://github.com/chatwoot/chatwoot/issues/9791
Other PR: https://github.com/chatwoot/chatwoot/pull/11016
---
.../assets/scss/_helper-classes.scss | 1 -
.../dashboard/assets/scss/_mixins.scss | 145 --------
.../widgets/conversation/Message.vue | 6 +-
app/javascript/portal/application.scss | 5 -
.../shared/assets/fonts/widget_fonts.scss | 40 +++
app/javascript/shared/components/Branding.vue | 30 +-
app/javascript/shared/components/Button.vue | 2 +-
.../shared/components/CardButton.vue | 14 +-
app/javascript/shared/components/ChatCard.vue | 59 +---
app/javascript/shared/components/ChatForm.vue | 104 +-----
.../shared/components/ChatOption.vue | 23 +-
.../shared/components/ChatOptions.vue | 80 +----
.../components/CustomerSatisfaction.vue | 86 +----
.../shared/components/DateSeparator.vue | 39 +--
.../shared/components/IframeLoader.vue | 30 ++
app/javascript/shared/components/Spinner.vue | 69 +---
.../__snapshots__/DateSeparator.spec.js.snap | 12 +-
app/javascript/survey/assets/scss/woot.scss | 6 +-
app/javascript/survey/views/Response.vue | 4 +-
app/javascript/widget/App.vue | 14 +-
.../widget/assets/scss/_buttons.scss | 71 ----
app/javascript/widget/assets/scss/_forms.scss | 83 -----
.../widget/assets/scss/_mixins.scss | 78 -----
.../widget/assets/scss/_utilities.scss | 3 -
.../widget/assets/scss/_variables.scss | 87 -----
.../assets/scss/views/_conversation.scss | 118 +++----
app/javascript/widget/assets/scss/woot.scss | 331 +++++++++++++++++-
.../widget/components/AgentMessage.vue | 33 +-
.../widget/components/AgentMessageBubble.vue | 8 +-
.../widget/components/AgentTypingBubble.vue | 33 +-
.../components/ArticleCardSkeletonLoader.vue | 15 -
.../widget/components/ArticleCategoryCard.vue | 54 ---
.../widget/components/ArticleHero.vue | 27 --
.../widget/components/ArticleList.vue | 36 --
.../widget/components/ArticleListItem.vue | 41 ---
.../widget/components/ArticleSearch.vue | 52 ---
.../widget/components/AvailableAgents.vue | 27 --
app/javascript/widget/components/Banner.vue | 12 +-
.../widget/components/ChatAttachment.vue | 2 +-
.../widget/components/ChatFooter.vue | 20 --
.../widget/components/ChatHeader.vue | 32 +-
.../widget/components/ChatHeaderExpanded.vue | 59 ++--
.../widget/components/ChatInputWrap.vue | 81 +----
.../widget/components/ChatMessage.vue | 53 ---
.../widget/components/ChatSendButton.vue | 2 +-
.../widget/components/ContinueChatButton.vue | 62 ----
.../widget/components/ConversationWrap.vue | 5 +-
.../widget/components/FileBubble.vue | 49 +--
.../widget/components/Form/PhoneInput.vue | 107 ++----
.../widget/components/GroupedAvatars.vue | 32 +-
.../widget/components/HeaderActions.vue | 36 +-
.../widget/components/ImageBubble.vue | 15 +-
.../widget/components/PreChat/Form.vue | 67 ++--
.../widget/components/SearchArticle.vue | 52 ---
.../widget/components/TeamAvailability.vue | 33 +-
.../widget/components/UnreadMessage.vue | 27 +-
.../widget/components/UnreadMessageList.vue | 37 +-
.../widget/components/UserAvatar.vue | 49 ---
.../widget/components/UserMessage.vue | 4 +-
.../widget/components/UserMessageBubble.vue | 18 +-
.../components/dropdown/DropdownMenu.vue | 84 -----
.../components/dropdown/DropdownMenuItem.vue | 71 ----
.../components/layouts/ViewWithHeader.vue | 32 +-
.../Home/Article/ArticleBlock.vue | 48 +++
.../Home/Article/ArticleContainer.vue | 86 +++++
.../Home/Article/ArticleListItem.vue | 32 ++
.../Home/Article/SkeletonLoader.vue | 15 +
.../widget/components/template/Article.vue | 59 +---
.../widget/components/template/EmailInput.vue | 41 +--
.../components/template/IntegrationCard.vue | 13 +-
.../composables/specs/useDarkMode.spec.js | 24 +-
.../widget/composables/useDarkMode.js | 9 -
app/javascript/widget/router.js | 18 +-
app/javascript/widget/views/ArticleViewer.vue | 10 +-
app/javascript/widget/views/Home.vue | 108 +-----
app/javascript/widget/views/Messages.vue | 2 +-
76 files changed, 966 insertions(+), 2406 deletions(-)
delete mode 100755 app/javascript/widget/assets/scss/_buttons.scss
delete mode 100755 app/javascript/widget/assets/scss/_forms.scss
delete mode 100755 app/javascript/widget/assets/scss/_mixins.scss
delete mode 100644 app/javascript/widget/assets/scss/_utilities.scss
delete mode 100755 app/javascript/widget/assets/scss/_variables.scss
delete mode 100644 app/javascript/widget/components/ArticleCardSkeletonLoader.vue
delete mode 100644 app/javascript/widget/components/ArticleCategoryCard.vue
delete mode 100644 app/javascript/widget/components/ArticleHero.vue
delete mode 100644 app/javascript/widget/components/ArticleList.vue
delete mode 100644 app/javascript/widget/components/ArticleListItem.vue
delete mode 100644 app/javascript/widget/components/ArticleSearch.vue
delete mode 100644 app/javascript/widget/components/AvailableAgents.vue
delete mode 100644 app/javascript/widget/components/ContinueChatButton.vue
delete mode 100644 app/javascript/widget/components/SearchArticle.vue
delete mode 100755 app/javascript/widget/components/UserAvatar.vue
delete mode 100644 app/javascript/widget/components/dropdown/DropdownMenu.vue
delete mode 100644 app/javascript/widget/components/dropdown/DropdownMenuItem.vue
create mode 100644 app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue
create mode 100644 app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue
create mode 100644 app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue
create mode 100644 app/javascript/widget/components/pageComponents/Home/Article/SkeletonLoader.vue
diff --git a/app/javascript/dashboard/assets/scss/_helper-classes.scss b/app/javascript/dashboard/assets/scss/_helper-classes.scss
index 48ee1918b..229606254 100644
--- a/app/javascript/dashboard/assets/scss/_helper-classes.scss
+++ b/app/javascript/dashboard/assets/scss/_helper-classes.scss
@@ -4,7 +4,6 @@
@apply inline-block h-6 py-0 px-6 relative align-middle w-6;
&.message {
- @include normal-shadow;
@apply bg-white dark:bg-slate-800 rounded-full left-0 my-3 mx-auto p-4 top-0;
&::before {
diff --git a/app/javascript/dashboard/assets/scss/_mixins.scss b/app/javascript/dashboard/assets/scss/_mixins.scss
index 9ca87c859..fc742d24f 100644
--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -1,79 +1,7 @@
@import 'dashboard/assets/scss/variables';
-@import 'widget/assets/scss/mixins';
$spinner-before-border-color: rgba(255, 255, 255, 0.7);
-//borders
-@mixin border-nil() {
- border-color: transparent;
- border: 0;
-}
-
-@mixin thin-border($color) {
- border: 1px solid $color;
-}
-
-@mixin custom-border-bottom($size, $color) {
- border-bottom: $size solid $color;
-}
-
-@mixin custom-border-top($size, $color) {
- border-top: $size solid $color;
-}
-
-@mixin border-normal() {
- @apply border border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-left() {
- @apply border-l border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-top() {
- @apply border-t border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-right() {
- @apply border-r border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-bottom() {
- @apply border-b border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-light() {
- @apply border border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-left() {
- @apply border-l border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-top() {
- @apply border-t border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-right() {
- @apply border-r border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-bottom() {
- @apply border-b border-slate-25 dark:border-slate-700;
-}
-
-// background
-@mixin background-gray() {
- background: $color-background;
-}
-
-@mixin background-light() {
- @apply bg-slate-50 dark:bg-slate-800;
-}
-
-@mixin background-white() {
- @apply bg-white dark:bg-slate-900;
-}
-
// input form
@mixin ghost-input() {
box-shadow: none;
@@ -87,65 +15,6 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
}
}
-// flex-layout
-@mixin space-between() {
- display: flex;
- justify-content: space-between;
-}
-
-@mixin space-between-column() {
- @include space-between;
- flex-direction: column;
-}
-
-@mixin space-between-row() {
- @include space-between;
- flex-direction: row;
-}
-
-@mixin flex-shrink() {
- flex: 0 0 auto;
- max-width: 100%;
-}
-
-@mixin flex-weight($value) {
- // Grab flex-grow for older browsers.
- $flex-grow: nth($value, 1);
-
- // 2009
- @include prefixer(box-flex, $flex-grow, webkit moz spec);
-
- // 2011 (IE 10), 2012
- @include prefixer(flex, $value, webkit moz ms spec);
-}
-
-// full height
-@mixin full-height() {
- height: 100%;
-}
-
-@mixin round-corner() {
- border-radius: 1000px;
-}
-
-@mixin scroll-on-hover() {
- overflow: hidden;
-
- &:hover {
- overflow-y: auto;
- }
-}
-
-
-@mixin horizontal-scroll() {
- overflow-y: auto;
-}
-
-@mixin elegant-card() {
- @include normal-shadow;
- border-radius: $space-small;
-}
-
@mixin color-spinner() {
@keyframes spinner {
to {
@@ -230,17 +99,3 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
border-left: $size solid transparent;
}
}
-
-@mixin text-ellipsis {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-@mixin three-column-grid($column-one-width: 16rem,
- $column-three-width: 16rem) {
- width: 100%;
- height: 100%;
- display: grid;
- grid-template-columns: minmax($column-one-width, 6fr) 10fr minmax($column-three-width, 6fr);
-}
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 6a98fe42f..253eaeaa7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -663,10 +663,10 @@ export default {
}
&.is-failed {
- @apply bg-red-200 dark:bg-red-200;
+ @apply bg-n-ruby-4 dark:bg-n-ruby-4 text-n-slate-12;
.message-text--metadata .time {
- @apply text-red-50 dark:text-red-50;
+ @apply text-n-ruby-12 dark:text-n-ruby-12;
}
}
}
@@ -727,7 +727,7 @@ li.right {
}
.wrap.is-failed {
- @apply flex items-end ml-auto;
+ @apply flex items-end ltr:ml-auto rtl:mr-auto;
}
}
diff --git a/app/javascript/portal/application.scss b/app/javascript/portal/application.scss
index 01246578e..bdb7bd1d4 100644
--- a/app/javascript/portal/application.scss
+++ b/app/javascript/portal/application.scss
@@ -3,10 +3,6 @@
@import 'tailwindcss/utilities';
@import 'widget/assets/scss/reset';
-@import 'widget/assets/scss/variables';
-@import 'widget/assets/scss/buttons';
-@import 'widget/assets/scss/mixins';
-@import 'widget/assets/scss/forms';
@import 'shared/assets/fonts/InterDisplay/inter-display';
html,
@@ -18,7 +14,6 @@ body {
letter-spacing: 0.2px;
}
-
// Taking these utils from tailwind 3.x.x, need to remove once we upgrade
.scroll-mt-24 {
scroll-margin-top: 6rem;
diff --git a/app/javascript/shared/assets/fonts/widget_fonts.scss b/app/javascript/shared/assets/fonts/widget_fonts.scss
index a8145900e..f7fe95c17 100644
--- a/app/javascript/shared/assets/fonts/widget_fonts.scss
+++ b/app/javascript/shared/assets/fonts/widget_fonts.scss
@@ -1,3 +1,19 @@
+@font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 100;
+ font-display: swap;
+ src: url('shared/assets/fonts/Inter/Inter-Thin.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url('shared/assets/fonts/Inter/Inter-Light.woff2') format('woff2');
+}
+
@font-face {
font-family: 'Inter';
font-style: normal;
@@ -6,6 +22,14 @@
src: url('shared/assets/fonts/Inter/Inter-Regular.woff2') format('woff2');
}
+@font-face {
+ font-family: 'Inter';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: url('shared/assets/fonts/Inter/Inter-Italic.woff2') format('woff2');
+}
+
@font-face {
font-family: 'Inter';
font-style: normal;
@@ -13,3 +37,19 @@
font-display: swap;
src: url('shared/assets/fonts/Inter/Inter-Medium.woff2') format('woff2');
}
+
+@font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url('shared/assets/fonts/Inter/Inter-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('shared/assets/fonts/Inter/Inter-Bold.woff2') format('woff2');
+}
diff --git a/app/javascript/shared/components/Branding.vue b/app/javascript/shared/components/Branding.vue
index 3d3e5ff57..cc1ae385d 100644
--- a/app/javascript/shared/components/Branding.vue
+++ b/app/javascript/shared/components/Branding.vue
@@ -53,10 +53,10 @@ export default {
:href="brandRedirectURL"
rel="noreferrer noopener nofollow"
target="_blank"
- class="branding--link justify-center items-center leading-3"
+ class="branding--link text-n-slate-11 hover:text-n-slate-12 cursor-pointer text-xs inline-flex grayscale-[1] hover:grayscale-0 hover:opacity-100 opacity-90 no-underline justify-center items-center leading-3"
>
![]()
@@ -67,29 +67,3 @@ export default {
-
-
diff --git a/app/javascript/shared/components/Button.vue b/app/javascript/shared/components/Button.vue
index 5d4213d0b..b6275a3a3 100644
--- a/app/javascript/shared/components/Button.vue
+++ b/app/javascript/shared/components/Button.vue
@@ -25,7 +25,7 @@ export default {
computed: {
buttonClassName() {
let className =
- 'text-white py-3 px-4 rounded shadow-sm leading-4 cursor-pointer disabled:opacity-50';
+ 'text-white py-3 px-4 rounded-lg shadow-sm leading-4 cursor-pointer disabled:opacity-50';
if (this.type === 'clear') {
className = 'flex mx-auto mt-4 text-xs leading-3 w-auto text-black-600';
}
diff --git a/app/javascript/shared/components/CardButton.vue b/app/javascript/shared/components/CardButton.vue
index d05eb5f01..a5e0577d0 100644
--- a/app/javascript/shared/components/CardButton.vue
+++ b/app/javascript/shared/components/CardButton.vue
@@ -57,7 +57,7 @@ export default {
@@ -66,17 +66,7 @@ export default {
diff --git a/app/javascript/shared/components/ChatCard.vue b/app/javascript/shared/components/ChatCard.vue
index 36897196f..0b6d2d06f 100644
--- a/app/javascript/shared/components/ChatCard.vue
+++ b/app/javascript/shared/components/ChatCard.vue
@@ -1,6 +1,5 @@
- ![]()
+
{{ title }}
-
+
{{ description }}
-
-
diff --git a/app/javascript/shared/components/ChatForm.vue b/app/javascript/shared/components/ChatForm.vue
index c1cafe53e..c42abb92c 100644
--- a/app/javascript/shared/components/ChatForm.vue
+++ b/app/javascript/shared/components/ChatForm.vue
@@ -1,7 +1,6 @@
-
-
+
-
-
-
-
diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index 89da54855..b4a3fd8b2 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -3,7 +3,6 @@ import { mapGetters } from 'vuex';
import Spinner from 'shared/components/Spinner.vue';
import { CSAT_RATINGS } from 'shared/constants/messages';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
import { getContrastingTextColor } from '@chatwoot/utils';
export default {
@@ -21,10 +20,6 @@ export default {
required: true,
},
},
- setup() {
- const { getThemeClass } = useDarkMode();
- return { getThemeClass };
- },
data() {
return {
email: '',
@@ -46,10 +41,6 @@ export default {
isButtonDisabled() {
return !(this.selectedRating && this.feedback);
},
- inputColor() {
- return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
- ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
- },
textColor() {
return getContrastingTextColor(this.widgetColor);
},
@@ -107,17 +98,13 @@ export default {
-
+
{{ title }}
-
+
|