From 985b3f3bfc45bd2c07dc68fc6f626d39039a1d7b Mon Sep 17 00:00:00 2001 From: Pranav Raj S Date: Mon, 3 Jul 2023 14:53:00 -0700 Subject: [PATCH] chore: Reset the base font-size to 16px instead of 10px (#7455) Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com> --- .../administrate/library/_variables.scss | 2 +- .../dashboard/assets/scss/_date-picker.scss | 2 +- .../assets/scss/_foundation-custom.scss | 2 +- .../assets/scss/_foundation-settings.scss | 82 +++++++++---------- .../dashboard/assets/scss/_mixins.scss | 4 +- .../dashboard/assets/scss/_rtl.scss | 2 +- .../dashboard/assets/scss/_variables.scss | 62 +++++++------- .../assets/scss/plugins/_multiselect.scss | 12 +-- .../scss/views/settings/integrations.scss | 4 +- .../assets/scss/widgets/_buttons.scss | 2 +- .../assets/scss/widgets/_conv-header.scss | 6 +- .../scss/widgets/_conversation-card.scss | 2 +- .../scss/widgets/_conversation-view.scss | 2 +- .../dashboard/assets/scss/widgets/_modal.scss | 6 +- .../assets/scss/widgets/_reply-box.scss | 4 +- .../assets/scss/widgets/_sidemenu.scss | 2 +- .../assets/scss/widgets/_snackbar.scss | 10 +-- .../assets/scss/widgets/_woot-tables.scss | 6 +- .../dashboard/components/ChatList.vue | 2 +- .../dashboard/components/CustomAttribute.vue | 6 +- app/javascript/dashboard/components/Modal.vue | 2 +- .../components/NetworkNotification.vue | 4 +- .../components/buttons/ResolveAction.vue | 6 +- .../dashboard/components/layout/Sidebar.vue | 4 +- .../layout/sidebarComponents/OptionsMenu.vue | 9 +- .../layout/sidebarComponents/Secondary.vue | 2 +- .../components/ui/AnnouncementPopup.vue | 4 +- .../dashboard/components/ui/PreviewCard.vue | 8 +- .../dashboard/components/ui/Switch.vue | 2 +- .../components/widgets/AttachmentsPreview.vue | 4 +- .../components/widgets/InboxDropdownItem.vue | 2 +- .../widgets/WootWriter/AudioRecorder.vue | 4 +- .../components/widgets/WootWriter/Editor.vue | 4 +- .../widgets/WootWriter/FullEditor.vue | 6 +- .../widgets/WootWriter/ReplyBottomPanel.vue | 2 +- .../conversation/ConversationBasicFilter.vue | 2 +- .../widgets/conversation/ConversationBox.vue | 10 +-- .../widgets/conversation/EmptyState.vue | 2 +- .../widgets/conversation/Message.vue | 6 +- .../widgets/conversation/MessagesView.vue | 8 +- .../widgets/conversation/OnboardingView.vue | 2 +- .../widgets/conversation/TagAgents.vue | 2 +- .../conversation/WhatsappTemplates/Modal.vue | 2 +- .../WhatsappTemplates/TemplatesPicker.vue | 2 +- .../conversation/bubble/integrations/Dyte.vue | 2 +- .../conversation/components/GalleryView.vue | 2 +- .../conversationBulkActions/Index.vue | 8 +- .../components/widgets/forms/PhoneInput.vue | 12 +-- .../widgets/mentions/MentionBox.vue | 2 +- .../widgets/modal/WootKeyShortcutModal.vue | 2 +- .../components/MessageContextMenu.vue | 2 +- .../modules/notes/components/AddNote.vue | 2 +- .../modules/search/components/SearchView.vue | 4 +- .../widget-preview/components/WidgetBody.vue | 4 +- .../components/WidgetFooter.vue | 2 +- .../contacts/components/ContactsTable.vue | 2 +- .../dashboard/contacts/components/Header.vue | 8 +- .../dashboard/conversation/ContactPanel.vue | 2 +- .../conversation/Macros/MacroPreview.vue | 10 +-- .../conversation/contact/ConversationForm.vue | 4 +- .../CustomAttributeDropDown.vue | 2 +- .../conversation/search/ResultItem.vue | 2 +- .../conversation/search/SearchMessageItem.vue | 2 +- .../helpcenter/components/ArticleEditor.vue | 4 +- .../components/Header/ArticleHeader.vue | 2 +- .../helpcenter/components/PortalPopover.vue | 2 +- .../pages/articles/ArticleSettings.vue | 2 +- .../components/NotificationPanel.vue | 2 +- .../components/NotificationTable.vue | 6 +- .../agentBots/components/CSMLBotEditor.vue | 4 +- .../settings/attributes/CustomAttribute.vue | 8 +- .../dashboard/settings/auditlogs/Index.vue | 2 +- .../settings/campaigns/AddCampaign.vue | 2 +- .../settings/campaigns/CampaignsTable.vue | 2 +- .../settings/campaigns/EditCampaign.vue | 2 +- .../dashboard/settings/canned/AddCanned.vue | 2 +- .../dashboard/settings/canned/EditCanned.vue | 2 +- .../dashboard/settings/canned/Index.vue | 2 +- .../settings/inbox/WidgetBuilder.vue | 2 +- .../settings/inbox/components/BusinessDay.vue | 4 +- .../inbox/components/WeeklyAvailability.vue | 4 +- .../dashboard/settings/macros/MacroNode.vue | 6 +- .../settings/macros/MacroProperties.vue | 2 +- .../settings/profile/MessageSignature.vue | 2 +- .../settings/reports/components/CsatTable.vue | 4 +- .../settings/reports/components/Heatmap.vue | 2 +- .../components/overview/AgentTable.vue | 2 +- .../assets/stylesheets/border-radius.scss | 10 +-- .../shared/assets/stylesheets/font-size.scss | 24 +++--- .../shared/assets/stylesheets/shadows.scss | 4 +- .../shared/assets/stylesheets/spacing.scss | 56 ++++++------- .../components/ui/MultiselectDropdown.vue | 2 +- .../ui/MultiselectDropdownItems.vue | 4 +- .../components/ui/label/LabelDropdown.vue | 2 +- package.json | 1 + yarn.lock | 18 ++++ 96 files changed, 305 insertions(+), 281 deletions(-) diff --git a/app/assets/stylesheets/administrate/library/_variables.scss b/app/assets/stylesheets/administrate/library/_variables.scss index 87183a503..5bb3c0710 100644 --- a/app/assets/stylesheets/administrate/library/_variables.scss +++ b/app/assets/stylesheets/administrate/library/_variables.scss @@ -4,7 +4,7 @@ $base-font-family: PlusJakarta, Inter, -apple-system, BlinkMacSystemFont, "Segoe sans-serif !default; $heading-font-family: $base-font-family !default; -$base-font-size: 10px !default; +$base-font-size: 16px !default; $base-line-height: 1.5 !default; $heading-line-height: 1.2 !default; diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/_date-picker.scss index 2263c4354..e934b50d7 100644 --- a/app/javascript/dashboard/assets/scss/_date-picker.scss +++ b/app/javascript/dashboard/assets/scss/_date-picker.scss @@ -26,7 +26,7 @@ border-radius: var(--border-radius-normal); box-shadow: none; display: flex; - height: 4rem; + height: 2.5rem; } .mx-input:disabled, diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss index 5753e7593..605b74483 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss @@ -8,7 +8,7 @@ } select { - height: 4.0rem; + height: 2.5rem; } .card { diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss index 2035585bd..3fd834cdd 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss @@ -48,7 +48,7 @@ // Disable contrast warnings in Foundation. $contrast-warnings: false; -$global-font-size: 10px; +$global-font-size: 16px; $global-width: 100%; $global-lineheight: 1.5; $foundation-palette: (primary: $color-woot, @@ -117,7 +117,7 @@ $header-font-style: normal; $font-family-monospace: $body-font-family; $header-color: $color-heading; $header-lineheight: 1.4; -$header-margin-bottom: 0.5rem; +$header-margin-bottom: 0.3125rem; $header-styles: (small: ("h1": ("font-size": 24), "h2": ("font-size": 20), "h3": ("font-size": 19), @@ -153,11 +153,11 @@ $list-lineheight: $paragraph-lineheight; $list-margin-bottom: $paragraph-margin-bottom; $list-style-type: disc; $list-style-position: outside; -$list-side-margin: 1.25rem; -$list-nested-side-margin: 1.25rem; -$defnlist-margin-bottom: 1rem; +$list-side-margin: 0.78125rem; +$list-nested-side-margin: 0.78125rem; +$defnlist-margin-bottom: 0.6875rem; $defnlist-term-weight: $global-weight-bold; -$defnlist-term-margin-bottom: 0.3rem; +$defnlist-term-margin-bottom: 0.1875rem; $blockquote-color: $dark-gray; $blockquote-padding: rem-calc(9 20 0 19); $blockquote-border: 1px solid $medium-gray; @@ -179,9 +179,9 @@ $lead-lineheight: 1.6; $subheader-lineheight: 1.4; $subheader-color: $dark-gray; $subheader-font-weight: $global-weight-normal; -$subheader-margin-top: 0.2rem; -$subheader-margin-bottom: 0.5rem; -$stat-font-size: 2.5rem; +$subheader-margin-top: 0.125rem; +$subheader-margin-bottom: 0.3125rem; +$stat-font-size: 1.5625rem; // 6. Abide // -------- @@ -202,11 +202,11 @@ $accordion-plusminus: true; $accordion-title-font-size: rem-calc(12); $accordion-item-color: $primary-color; $accordion-item-background-hover: $light-gray; -$accordion-item-padding: 1.25rem 1rem; +$accordion-item-padding: 0.78125rem 0.625rem; $accordion-content-background: $white; $accordion-content-border: 1px solid $light-gray; $accordion-content-color: $body-font-color; -$accordion-content-padding: 1rem; +$accordion-content-padding: 0.625rem; // 8. Accordion Menu // ----------------- @@ -234,7 +234,7 @@ $breadcrumbs-item-font-size: rem-calc(11); $breadcrumbs-item-color: $primary-color; $breadcrumbs-item-color-current: $black; $breadcrumbs-item-color-disabled: $medium-gray; -$breadcrumbs-item-margin: 0.75rem; +$breadcrumbs-item-margin: 0.46875rem; $breadcrumbs-item-uppercase: true; $breadcrumbs-item-slash: true; @@ -275,8 +275,8 @@ $buttongroup-radius-on-each: false; $callout-background: $white; $callout-background-fade: 85%; $callout-border: 1px solid rgba($black, 0.25); -$callout-margin: 0 0 1rem 0; -$callout-padding: 1rem; +$callout-margin: 0 0 0.625rem 0; +$callout-padding: 0.625rem; $callout-font-color: $body-font-color; $callout-font-color-alt: $body-background; $callout-radius: $global-radius; @@ -320,10 +320,10 @@ $drilldown-background: $white; // 17. Dropdown // ------------ -$dropdown-padding: 1rem; +$dropdown-padding: 0.625rem; $dropdown-background: $body-background; $dropdown-border: 1px solid $medium-gray; -$dropdown-font-size: 1rem; +$dropdown-font-size: 0.625rem; $dropdown-width: 300px; $dropdown-radius: $global-radius; $dropdown-sizes: (tiny: 100px, @@ -354,7 +354,7 @@ $helptext-font-style: italic; $input-prefix-color: $color-body; $input-prefix-background: var(--b-100); $input-prefix-border: 1px solid $color-border; -$input-prefix-padding: 1rem; +$input-prefix-padding: 0.625rem; $form-label-color: $color-body; $form-label-font-size: rem-calc(14); $form-label-font-weight: $font-weight-medium; @@ -406,14 +406,14 @@ $menu-margin-nested: $space-medium; $menu-item-padding: $space-slab; $menu-item-color-active: $white; $menu-item-background-active: $color-background; -$menu-icon-spacing: 0.25rem; +$menu-icon-spacing: 0.15625rem; $menu-item-background-hover: $light-gray; $menu-border: $light-gray; // 23. Meter // --------- -$meter-height: 1rem; +$meter-height: 0.625rem; $meter-radius: $global-radius; $meter-background: $medium-gray; $meter-fill-good: $success-color; @@ -423,11 +423,11 @@ $meter-fill-bad: $alert-color; // 24. Off-canvas // -------------- -$offcanvas-sizes: (small: 23rem, - medium: 23rem, +$offcanvas-sizes: (small: 14.375, + medium: 14.375, ); -$offcanvas-vertical-sizes: (small: 23rem, - medium: 23rem, +$offcanvas-vertical-sizes: (small: 14.375, + medium: 14.375, ); $offcanvas-background: $light-gray; $offcanvas-shadow: 0 0 10px rgba($black, 0.7); @@ -445,14 +445,14 @@ $maincontent-class: 'off-canvas-content'; $orbit-bullet-background: $medium-gray; $orbit-bullet-background-active: $dark-gray; -$orbit-bullet-diameter: 1.2rem; -$orbit-bullet-margin: 0.1rem; -$orbit-bullet-margin-top: 0.8rem; -$orbit-bullet-margin-bottom: 0.8rem; +$orbit-bullet-diameter: 0.75rem; +$orbit-bullet-margin: 0.0625rem; +$orbit-bullet-margin-top: 0.5rem; +$orbit-bullet-margin-bottom: 0.5rem; $orbit-caption-background: rgba($black, 0.5); -$orbit-caption-padding: 1rem; +$orbit-caption-padding: 0.625rem; $orbit-control-background-hover: rgba($black, 0.5); -$orbit-control-padding: 1rem; +$orbit-control-padding: 0.625rem; $orbit-control-zindex: 10; // 26. Pagination @@ -476,7 +476,7 @@ $pagination-arrows: true; // 27. Progress Bar // ---------------- -$progress-height: 1rem; +$progress-height: 0.625rem; $progress-background: $medium-gray; $progress-margin-bottom: $global-margin; $progress-meter-background: $primary-color; @@ -504,13 +504,13 @@ $reveal-overlay-background: rgba($black, 0.45); // 30. Slider // ---------- -$slider-width-vertical: 0.5rem; +$slider-width-vertical: 0.3125rem; $slider-transition: all 0.2s ease-in-out; -$slider-height: 0.5rem; +$slider-height: 0.3125rem; $slider-background: $light-gray; $slider-fill-background: $medium-gray; -$slider-handle-height: 1.4rem; -$slider-handle-width: 1.4rem; +$slider-handle-height: 0.875rem; +$slider-handle-width: 0.875rem; $slider-handle-background: $primary-color; $slider-opacity-disabled: 0.25; $slider-radius: $global-radius; @@ -569,7 +569,7 @@ $tab-expand-max: 6; $tab-content-background: transparent; $tab-content-border: transparent; $tab-content-color: foreground($tab-background, $primary-color); -$tab-content-padding: 1rem; +$tab-content-padding: 0.625rem; // 34. Thumbnail // ------------- @@ -586,11 +586,11 @@ $thumbnail-radius: $global-radius; $titlebar-background: $black; $titlebar-color: $white; -$titlebar-padding: 0.5rem; +$titlebar-padding: 0.3125rem; $titlebar-text-font-weight: bold; $titlebar-icon-color: $white; $titlebar-icon-color-hover: $medium-gray; -$titlebar-icon-spacing: 0.25rem; +$titlebar-icon-spacing: 0.15625rem; // 36. Tooltip // ----------- @@ -599,19 +599,19 @@ $has-tip-font-weight: $global-weight-bold; $has-tip-border-bottom: dotted 1px $dark-gray; $tooltip-background-color: $black; $tooltip-color: $white; -$tooltip-padding: 0.75rem; +$tooltip-padding: 0.46875rem; $tooltip-font-size: $font-size-mini; -$tooltip-pip-width: 0.75rem; +$tooltip-pip-width: 0.46875rem; $tooltip-pip-height: $tooltip-pip-width * 0.866; $tooltip-radius: $global-radius; // 37. Top Bar // ----------- -$topbar-padding: 0.5rem; +$topbar-padding: 0.3125; $topbar-background: $light-gray; $topbar-submenu-background: $topbar-background; -$topbar-title-spacing: 0.5rem 1rem 0.5rem 0; +$topbar-title-spacing: 0.3125 0.625rem 0.3125 0; $topbar-input-width: 200px; $topbar-unstack-breakpoint: medium; diff --git a/app/javascript/dashboard/assets/scss/_mixins.scss b/app/javascript/dashboard/assets/scss/_mixins.scss index 41ba95276..a55f0a8dd 100644 --- a/app/javascript/dashboard/assets/scss/_mixins.scss +++ b/app/javascript/dashboard/assets/scss/_mixins.scss @@ -237,8 +237,8 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7); white-space: nowrap; } -@mixin three-column-grid($column-one-width: 25.6rem, - $column-three-width: 25.6rem) { +@mixin three-column-grid($column-one-width: 16rem, + $column-three-width: 16rem) { width: 100%; height: 100%; display: grid; diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss index 4f7efaab9..b517fc0f2 100644 --- a/app/javascript/dashboard/assets/scss/_rtl.scss +++ b/app/javascript/dashboard/assets/scss/_rtl.scss @@ -439,7 +439,7 @@ } span { - --minus-space-one-point-five: -1.5rem; + --minus-space-one-point-five: -0.9375rem; &.active { transform: translate( diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss index f24f00830..930fe5f0e 100644 --- a/app/javascript/dashboard/assets/scss/_variables.scss +++ b/app/javascript/dashboard/assets/scss/_variables.scss @@ -1,30 +1,30 @@ // Font sizes -$font-size-nano: 0.8rem; -$font-size-micro: 1.0rem; -$font-size-mini: 1.2rem; -$font-size-small: 1.4rem; -$font-size-default: 1.6rem; -$font-size-medium: 1.8rem; -$font-size-large: 2.2rem; -$font-size-big: 2.4rem; -$font-size-bigger: 3.0rem; -$font-size-mega: 3.4rem; -$font-size-giga: 4.0rem; +$font-size-nano: 0.5rem; +$font-size-micro: 0.675rem; +$font-size-mini: 0.75rem; +$font-size-small: 0.875rem; +$font-size-default: 1rem; +$font-size-medium: 1.125rem; +$font-size-large: 1.375rem; +$font-size-big: 1.5rem; +$font-size-bigger: 1.75rem; +$font-size-mega: 2.125rem; +$font-size-giga: 2.5rem; // spaces $zero: 0; -$space-micro: 0.2rem; -$space-smaller: 0.4rem; -$space-small: 0.8rem; -$space-one: 1rem; -$space-slab: 1.2rem; -$space-normal: 1.6rem; -$space-two: 2.0rem; -$space-medium: 2.4rem; -$space-large: 3.2rem; -$space-larger: 4.8rem; -$space-jumbo: 6.4rem; -$space-mega: 10.0rem; +$space-micro: 0.125rem; +$space-smaller: 0.25rem; +$space-small: 0.5rem; +$space-one: 0.675rem; +$space-slab: 0.75rem; +$space-normal: 1rem; +$space-two: 1.25rem; +$space-medium: 1.5rem; +$space-large: 2rem; +$space-larger: 3rem; +$space-jumbo: 4rem; +$space-mega: 6.25rem; // font-weight $font-weight-feather: 100; @@ -35,8 +35,8 @@ $font-weight-bold: 600; $font-weight-black: 700; //Navbar -$nav-bar-width: 23rem; -$header-height: 5.6rem; +$nav-bar-width: 14.375rem; +$header-height: 3.5rem; $woot-logo-padding: $space-large $space-two; @@ -71,20 +71,20 @@ $color-primary-light: #c7e3ff; $color-primary-dark: darken($color-woot, 20%); // Thumbnail -$thumbnail-radius: 4rem; +$thumbnail-radius: 2.5rem; // chat-header -$conv-header-height: 4rem; +$conv-header-height: 2.5rem; // Inbox List -$inbox-thumb-size: 4.8rem; +$inbox-thumb-size: 3rem; // Spinner $spinkit-spinner-color: $color-white !default; -$spinkit-spinner-margin: 0 0 0 1.6rem !default; -$spinkit-size: 1.6rem !default; +$spinkit-spinner-margin: 0 0 0 1rem !default; +$spinkit-size: 1rem !default; // Snackbar default $woot-snackbar-bg: #323232; @@ -101,5 +101,5 @@ $ionicons-font-path: '~ionicons/fonts'; $transition-ease-in: all 0.250s ease-in; :root { - --dashboard-app-tabs-height: 3.9rem; + --dashboard-app-tabs-height: 2.4375rem; } diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index f111a414f..4fda218a5 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -28,7 +28,7 @@ } .multiselect__select { - min-height: 4.6rem; + min-height: 2.875rem; padding: 0; right: 0; top: 0; @@ -98,7 +98,7 @@ border: 1px solid var(--s-200); border-color: var(--s-200); margin: 0; - min-height: 4.4rem; + min-height: 2.75rem; padding-top: $zero; } @@ -130,7 +130,7 @@ .multiselect__input { @include ghost-input; font-size: $font-size-small; - height: 4.4rem; + height: 2.75rem; margin-bottom: $zero; padding: 0; } @@ -168,7 +168,7 @@ } .multiselect-wrap--small { - $multiselect-height: 4.0rem; + $multiselect-height: 2.5rem; .multiselect__tags, .multiselect__input { @@ -195,7 +195,7 @@ display: flex; font-size: var(--font-size-small); margin: 0; - max-height: 3.8rem; + max-height: 2.375rem; padding: var(--space-smaller) var(--space-micro); } @@ -219,7 +219,7 @@ } .multiselect-wrap--medium { - $multiselect-height: 4.8rem; + $multiselect-height: 3rem; .multiselect__tags, .multiselect__input { diff --git a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss index 590890499..b7387b90f 100644 --- a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss +++ b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss @@ -8,8 +8,8 @@ .integration--image { display: flex; - height: 10rem; - width: 10rem; + height: 6.25rem; + width: 6.25rem; img { max-width: 100%; diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss index 58945ffb5..3f36bfa0c 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss @@ -1,4 +1,4 @@ -$default-button-height: 4.0rem; +$default-button-height: 2.5rem; .button { align-items: center; diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss index c352ff540..d88a7048d 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss @@ -1,4 +1,4 @@ -$resolve-button-width: 13.2rem; +$resolve-button-width: 8.25rem; // Conversation header - Light BG .conv-header { @@ -14,12 +14,12 @@ $resolve-button-width: 13.2rem; border: 1px solid var(--color-border); border-radius: var(--space-smaller); margin-right: var(--space-small); - width: 21.6rem; + width: 13.5rem; .icon { color: $medium-gray; font-size: $font-size-default; - line-height: 3.8rem; + line-height: 2.375rem; padding-left: $space-slab; padding-right: $space-smaller; } diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss index e94cee45b..f6da1be3f 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss @@ -81,7 +81,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - width: 27rem; + width: 16.875rem; } .conversation--meta { diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss index 795c8c1c1..cdf66d741 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss @@ -273,7 +273,7 @@ } .wrap { - --bubble-max-width: 49.6rem; + --bubble-max-width: 31rem; margin: $zero $space-normal; max-width: Min(var(--bubble-max-width), 84%); diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss index cc22dc778..644399b9e 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss @@ -27,7 +27,7 @@ padding: $space-large $space-large $zero; img { - max-height: 6rem; + max-height: 3.75rem; } } @@ -39,11 +39,11 @@ max-height: 100%; overflow: auto; position: relative; - width: 60rem; + width: 37.5rem; &.medium { max-width: 80%; - width: 90rem; + width: 56.25rem; } .content-box { diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss index d33f558e3..a51e6047d 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss @@ -29,7 +29,7 @@ // Override min-height : 50px in foundation // max-height: $space-mega * 2.4; - min-height: 4.8rem; + min-height: 3rem; padding: var(--space-normal) 0 0; resize: none; } @@ -40,7 +40,7 @@ margin: 0; max-height: $space-mega * 2.4; // Override min-height : 50px in foundation - min-height: 4.8rem; + min-height: 3rem; padding: var(--space-normal) 0 0; resize: none; } diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss index e1cdaa491..3de072a77 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss @@ -47,7 +47,7 @@ } .dropdown-pane { - bottom: 6rem; + bottom: 3.75rem; display: block; visibility: visible; width: fit-content; diff --git a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss index 85d8f747d..ee556682f 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_snackbar.scss @@ -1,7 +1,7 @@ .ui-snackbar-container { left: 0; margin: 0 auto; - max-width: 40rem; + max-width: 25rem; overflow: hidden; position: absolute; right: 0; @@ -16,9 +16,9 @@ border-radius: $space-smaller; display: inline-flex; margin-bottom: $space-small; - max-width: 40rem; - min-height: 3rem; - min-width: 24rem; + max-width: 25rem; + min-height: 1.875rem; + min-width: 15rem; padding: $space-slab $space-medium; text-align: left; } @@ -31,7 +31,7 @@ .ui-snackbar-action { margin-left: auto; - padding-left: 3rem; + padding-left: 1.875rem; button { background: none; diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss index 5bbe1248d..6f57f9cb5 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss @@ -43,15 +43,15 @@ table { .woot-thumbnail { border-radius: 50%; - height: 5rem; - width: 5rem; + height: 3.125rem; + width: 3.125rem; } .button-wrapper { @include flex-align(left, null); @include flex; flex-direction: row; - min-width: 20rem; + min-width: 12.5rem; } .button { diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue index f4ba84ead..e06c5b2e9 100644 --- a/app/javascript/dashboard/components/ChatList.vue +++ b/app/javascript/dashboard/components/ChatList.vue @@ -972,7 +972,7 @@ export default { .conversations-list-wrap { flex-shrink: 0; - flex-basis: clamp(32rem, 4vw + 34rem, 44rem); + flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem); overflow: hidden; &.hide { diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue index 3ce2787ce..8cc4d4f15 100644 --- a/app/javascript/dashboard/components/CustomAttribute.vue +++ b/app/javascript/dashboard/components/CustomAttribute.vue @@ -343,11 +343,11 @@ export default { .error-message { color: var(--r-400); display: block; - font-size: 1.4rem; + font-size: 0.875rem; font-size: var(--font-size-small); font-weight: 400; - margin-bottom: 1rem; - margin-top: -1.6rem; + margin-bottom: 0.625rem; + margin-top: -1rem; width: 100%; } diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue index e7740cc35..3a4e2b83a 100644 --- a/app/javascript/dashboard/components/Modal.vue +++ b/app/javascript/dashboard/components/Modal.vue @@ -106,7 +106,7 @@ export default { .modal-container { border-radius: 0; height: 100%; - width: 48rem; + width: 30rem; } } .modal-big { diff --git a/app/javascript/dashboard/components/NetworkNotification.vue b/app/javascript/dashboard/components/NetworkNotification.vue index 6f29dbb74..6d142b1cd 100644 --- a/app/javascript/dashboard/components/NetworkNotification.vue +++ b/app/javascript/dashboard/components/NetworkNotification.vue @@ -77,7 +77,7 @@ export default { @import '~dashboard/assets/scss/mixins'; .ui-notification-container { - max-width: 40rem; + max-width: 25rem; position: absolute; right: var(--space-normal); top: var(--space-normal); @@ -94,7 +94,7 @@ export default { border-radius: var(--border-radius-medium); box-shadow: var(--shadow-large); - min-width: 24rem; + min-width: 15rem; padding: var(--space-normal); } diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue index 5fdffb747..c15afe5c6 100644 --- a/app/javascript/dashboard/components/buttons/ResolveAction.vue +++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue @@ -258,11 +258,11 @@ export default { .dropdown-pane { left: unset; - top: 4.2rem; + top: 2.625rem; margin-top: var(--space-micro); right: 0; - max-width: 20rem; - min-width: 15.6rem; + max-width: 12.5rem; + min-width: 9.75rem; .dropdown-menu__item { margin-bottom: 0; diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue index 24b289bab..8295adb6d 100644 --- a/app/javascript/dashboard/components/layout/Sidebar.vue +++ b/app/javascript/dashboard/components/layout/Sidebar.vue @@ -230,7 +230,7 @@ export default { .account-selector--modal { .modal-container { - width: 40rem; + width: 25rem; } } @@ -284,7 +284,7 @@ export default { cursor: pointer; display: flex; flex-direction: row; - height: 6rem; + height: 3.75rem; } .current-user--options { diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue index 9b12f811a..4a8171831 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue @@ -50,7 +50,7 @@ > @@ -64,7 +64,7 @@ diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue index 4d75e363e..22adc05db 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue @@ -258,7 +258,7 @@ export default { background: var(--white); border-right: 1px solid var(--s-50); height: 100%; - width: 20rem; + width: 12.5rem; flex-shrink: 0; overflow-y: hidden; position: unset; diff --git a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue index ad59bc8ac..b2ed04c5d 100644 --- a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue +++ b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue @@ -52,8 +52,8 @@ export default { diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue index ccac0cd93..f13057e8a 100644 --- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue +++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue @@ -365,6 +365,6 @@ export default { } .icon { - font-size: 8rem; + font-size: 5rem; } diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue index 0e66684a8..15b0ec761 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue @@ -90,7 +90,7 @@ export default { margin-top: var(--space-smaller); padding: var(--space-normal); right: 0; - width: 21rem; + width: 13.125rem; span { font-size: var(--font-size-small); diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue index dc4a3bca4..bc7660756 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue @@ -176,23 +176,23 @@ export default { flex-basis: 100%; @include breakpoint(medium up) { - flex-basis: 28rem; + flex-basis: 17.5rem; } @include breakpoint(large up) { - flex-basis: 30em; + flex-basis: 18.75rem; } @include breakpoint(xlarge up) { - flex-basis: 31em; + flex-basis: 19.375rem; } @include breakpoint(xxlarge up) { - flex-basis: 33rem; + flex-basis: 20.625rem; } @include breakpoint(xxxlarge up) { - flex-basis: 40rem; + flex-basis: 25rem; } &::v-deep .contact--panel { diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue index d1ab8cc04..e52165ffa 100644 --- a/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue +++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue @@ -116,7 +116,7 @@ export default { img { margin: var(--space-normal); - width: 10rem; + width: 6.25rem; } span { diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue index 1bca46bdc..da3c2cffd 100644 --- a/app/javascript/dashboard/components/widgets/conversation/Message.vue +++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue @@ -520,7 +520,7 @@ export default { .image, .video { - max-width: 32rem; + max-width: 20rem; padding: var(--space-micro); > img, @@ -534,13 +534,13 @@ export default { } } .video { - height: 18rem; + height: 11.25rem; } } &.is-image.is-text > .message-text__wrap, &.is-video.is-text > .message-text__wrap { - max-width: 32rem; + max-width: 20rem; padding: var(--space-small) var(--space-normal); } diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue index 5bac4a631..d6d52ebc2 100644 --- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue @@ -430,22 +430,22 @@ export default { .modal-mask { &::v-deep { .ProseMirror-woot-style { - max-height: 40rem; + max-height: 25rem; } .reply-box { border: 1px solid var(--color-border); - max-width: 120rem; + max-width: 75rem; width: 70%; } .reply-box .reply-box__top { position: relative; - min-height: 44rem; + min-height: 27.5rem; } .reply-box__top .input { - min-height: 44rem; + min-height: 27.5rem; } .emoji-dialog { diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue index e6dfa9654..2b4f9a89d 100644 --- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue @@ -112,7 +112,7 @@ export default { } .scroll-wrap { - padding: var(--space-larger) 13.6rem; + padding: var(--space-larger) 8.5rem; min-height: 100vh; display: flex; flex-direction: column; diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue index c48af3f16..0a8d474ad 100644 --- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue +++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue @@ -96,7 +96,7 @@ export default { left: 0; bottom: 100%; line-height: 1.2; - max-height: 20rem; + max-height: 12.5rem; overflow: auto; padding: var(--space-small) var(--space-small) 0 var(--space-small); position: absolute; diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue index 1c888408b..8c23c2d74 100644 --- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue +++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue @@ -71,6 +71,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 9f11ac2dd..1af4a0099 100644 --- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue +++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue @@ -125,7 +125,7 @@ export default { .template__list-container { background-color: var(--s-25); border-radius: var(--border-radius-medium); - max-height: 30rem; + max-height: 18.75rem; overflow-y: auto; padding: var(--space-one); diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue index 8fca037f9..a1947992a 100644 --- a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue +++ b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue @@ -97,7 +97,7 @@ export default { button { position: absolute; top: var(--space-smaller); - right: 16rem; + right: 10rem; } } diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue index 509c0c7e4..ea0748b4d 100644 --- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue @@ -341,7 +341,7 @@ export default { display: flex; font-weight: var(--font-weight-bold); justify-content: center; - min-width: 8rem; + min-width: 5rem; padding: var(--space-smaller); } } diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue index a6e1c3897..92c20ba80 100644 --- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue +++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue @@ -249,15 +249,15 @@ export default { } .label-actions-box { - --triangle-position: 8.5rem; + --triangle-position: 5.3125rem; } .update-actions-box { - --triangle-position: 5.6rem; + --triangle-position: 3.5rem; } .agent-actions-box { - --triangle-position: 2.8rem; + --triangle-position: 1.75rem; } .team-actions-box { - --triangle-position: 0.2rem; + --triangle-position: 0.125rem; } diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue index 6580ab83c..f503e653d 100644 --- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue +++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue @@ -259,8 +259,8 @@ export default { justify-content: center; gap: var(--space-small); background: var(--s-25); - height: 4rem; - width: 5.2rem; + height: 2.5rem; + width: 3.25rem; border-radius: var(--border-radius-normal) 0 0 var(--border-radius-normal); padding: var(--space-small) var(--space-smaller) var(--space-small) var(--space-small); @@ -288,9 +288,9 @@ export default { z-index: var(--z-index-low); position: absolute; height: var(--space-giga); - width: 20rem; + width: 12.5rem; overflow-y: auto; - top: 4rem; + top: 2.5rem; border-radius: var(--border-radius-default); padding: 0 0 var(--space-smaller) 0; background-color: var(--white); @@ -314,7 +314,7 @@ export default { .country-dropdown--item { display: flex; align-items: center; - height: 2.8rem; + height: 1.75rem; padding: 0 var(--space-smaller); cursor: pointer; @@ -336,7 +336,7 @@ export default { } .country-name { - max-width: 12rem; + max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue index b2852d3a9..41360ead7 100644 --- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue +++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue @@ -85,7 +85,7 @@ export default { box-shadow: var(--shadow-medium); left: 0; bottom: 100%; - max-height: 15.6rem; + max-height: 9.75rem; overflow: auto; padding: var(--space-small) var(--space-small) 0; position: absolute; diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue index c9c03ff3d..b2d1f9191 100644 --- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue +++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue @@ -138,7 +138,7 @@ export default { display: flex; justify-content: space-between; align-items: center; - min-width: 40rem; + min-width: 25rem; } .forward-slash { diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue index 1248dc308..479ea496f 100644 --- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue +++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue @@ -252,7 +252,7 @@ export default { .context-menu--delete-modal { ::v-deep { .modal-container { - max-width: 48rem; + max-width: 30rem; h2 { font-weight: var(--font-weight-medium); diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue index 86f046a13..0ebeb2fba 100644 --- a/app/javascript/dashboard/modules/notes/components/AddNote.vue +++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue @@ -72,7 +72,7 @@ export default { } &::v-deep .ProseMirror-woot-style { - max-height: 36rem; + max-height: 22.5rem; } } diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue index cd72625fd..9ccc79ea8 100644 --- a/app/javascript/dashboard/modules/search/components/SearchView.vue +++ b/app/javascript/dashboard/modules/search/components/SearchView.vue @@ -222,8 +222,8 @@ export default { } .search-root { margin: 0 auto; - max-width: 72rem; - min-height: 32rem; + max-width: 45rem; + min-height: 20rem; width: 100%; height: 100%; padding: var(--space-normal); diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue index d1bddeb6f..c5229ce56 100644 --- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue +++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue @@ -129,13 +129,13 @@ export default { max-width: 100%; .chat-bubble { - border-radius: 2rem; + border-radius: 1.25rem; box-shadow: var(--shadow-medium); color: var(--white); display: inline-block; font-size: var(--font-size-nano); line-height: 1.5; - padding: 1.3rem 1.75rem; + padding: 0.8125rem 1.09375rem; text-align: left; p { diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue index f74b1e349..3f01e0a9e 100644 --- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue +++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue @@ -70,7 +70,7 @@ export default { background: white; &.is-focused { - box-shadow: 0 0 0 0.1rem var(--color-woot), 0 0 0.2rem 0.2rem var(--w-100); + box-shadow: 0 0 0 1px var(--color-woot), 0 0 2px 2px var(--w-100); } } diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue index edd090626..3f8d6b7ec 100644 --- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue +++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue @@ -2,7 +2,7 @@
.macro-preview { position: absolute; - max-height: 36rem; + max-height: 22.5rem; min-height: var(--space-jumbo); - width: 27.2rem; + width: 17rem; border-radius: var(--border-radius-normal); background-color: var(--white); box-shadow: var(--shadow-dropdown-pane); @@ -93,7 +93,7 @@ export default { } .macro-block-border { - top: 0.625rem; + top: 0.390625rem; position: absolute; bottom: var(--space-minus-smaller); left: 0; @@ -103,13 +103,13 @@ export default { .macro-block-dot { position: absolute; - left: -0.35rem; + left: -0.21875rem; height: var(--space-small); width: var(--space-small); border: 2px solid var(--s-100); background-color: var(--white); border-radius: var(--border-radius-full); - top: 0.4375rem; + top: 0.2734375rem; } } diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue index 808eb4320..266f49247 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue @@ -381,7 +381,7 @@ export default { .contact-input { display: flex; align-items: center; - height: 3.9rem; + height: 2.4735rem; background: var(--color-background-light); border: 1px solid var(--color-border); padding: var(--space-smaller) var(--space-small); @@ -395,7 +395,7 @@ export default { } .message-input { - min-height: 8rem; + min-height: 5rem; } .row.gutter-small { diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue index 19a17c15f..be976b2a6 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue @@ -105,7 +105,7 @@ export default { display: flex; flex-direction: column; width: 100%; - max-height: 20rem; + max-height: 12.5rem; .search-wrap { margin-bottom: var(--space-small); diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue index 72a83cce6..2fece6f33 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue @@ -156,7 +156,7 @@ export default { display: flex; .name-wrap { - max-width: 20rem; + max-width: 12.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue index 172c8f250..35f208341 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue @@ -118,7 +118,7 @@ export default { .name-wrap { display: flex; - max-width: 22rem; + max-width: 13.75rem; .text-block-title { font-weight: var(--font-weight-bold); diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue index 30c67fb73..81a531751 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue @@ -80,7 +80,7 @@ export default { .edit-article--container { margin: var(--space-large) auto; padding: 0 var(--space-medium); - max-width: 89.6rem; + max-width: 56rem; width: 100%; } @@ -89,7 +89,7 @@ export default { font-weight: var(--font-weight-bold); width: 100%; min-height: var(--space-jumbo); - max-height: 64rem; + max-height: 40rem; height: auto; margin-bottom: var(--space-small); border: 0px solid transparent; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue index 0f148211a..c6b8011ef 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue @@ -180,7 +180,7 @@ export default { } .dropdown-pane--open { top: var(--space-larger); - right: 14.8rem; + right: 9.25rem; } .selected-value { display: inline-flex; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue index 729c641e7..aa57f47c0 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue @@ -92,7 +92,7 @@ export default { background-color: var(--white); border-radius: var(--border-radius-normal); box-shadow: var(--shadow-large); - max-width: 48rem; + max-width: 30rem; z-index: var(--z-index-high); header { diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue index a8de55770..f437ec176 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue @@ -227,7 +227,7 @@ export default { .article-settings--container { flex: 0.3; min-width: var(--space-giga); - max-width: 36rem; + max-width: 22.5rem; overflow-y: auto; border-left: 1px solid var(--color-border-light); margin-left: var(--space-normal); diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue index 7b5340a65..19a4c7818 100644 --- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue +++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue @@ -248,7 +248,7 @@ export default { .notification-wrap { flex-direction: column; height: 90vh; - width: 52rem; + width: 32.5rem; background-color: var(--white); border-radius: var(--border-radius-medium); position: absolute; diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue index 0c9553275..63c20b4a8 100644 --- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue +++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue @@ -195,17 +195,17 @@ export default { } .thumbnail--column { - width: 5.2rem; + width: 3.25rem; } .timestamp--column { - min-width: 13rem; + min-width: 8.125rem; text-align: right; } .notification-contant--wrap { flex-direction: column; - max-width: 50rem; + max-width: 31.25rem; } .notification--message-title { diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue index 838a599f6..a4710815a 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue @@ -110,11 +110,11 @@ export default { position: absolute; bottom: 0; width: 100%; - padding: 1rem; + padding: 0.625rem; background-color: #e0bbbb; display: flex; align-items: center; - font-size: 1.2rem; + font-size: 0.75rem; justify-content: center; flex-shrink: 0; } diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue index 15073e76e..0d3bdb1e0 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue @@ -228,14 +228,14 @@ export default { .item { padding-left: 0; - max-width: 10rem; - min-width: 8rem; + max-width: 6.25rem; + min-width: 5rem; } .item-description { padding-left: 0; - max-width: 16rem; - min-width: 10rem; + max-width: 10rem; + min-width: 6.25rem; } .key { diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue index 997317515..bf9753599 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue @@ -141,7 +141,7 @@ export default { flex-direction: column; .remote-address { - width: 14rem; + width: 8.75rem; } .wrap-break-words { diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue index b09b23f24..56493f2b2 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue @@ -365,6 +365,6 @@ export default { diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue index bd7b43aec..d1d84c5a5 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue @@ -314,6 +314,6 @@ export default { justify-content: space-evenly; display: flex; flex-direction: row; - min-width: 20rem; + min-width: 12.5rem; } diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue index af17dc079..952fb4368 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue @@ -281,6 +281,6 @@ export default { diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue index 10c17a003..058b74ec6 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue @@ -141,7 +141,7 @@ export default { } .ProseMirror-woot-style { - min-height: 20rem; + min-height: 12.5rem; p { font-size: var(--font-size-default); diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue index 063fba23b..8e08f0f87 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue @@ -145,7 +145,7 @@ export default { } .ProseMirror-woot-style { - min-height: 20rem; + min-height: 12.5rem; p { font-size: var(--font-size-default); diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue index 4912ea03f..c4043386b 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue @@ -209,7 +209,7 @@ export default {