chore: Remove older UI (#11720)
This commit is contained in:
@@ -60,7 +60,7 @@ export default {
|
||||
@apply flex items-center;
|
||||
}
|
||||
.user-identifier {
|
||||
@apply text-xs ml-0.5 text-slate-700 dark:text-slate-100;
|
||||
@apply text-xs ml-0.5 text-n-slate-12;
|
||||
}
|
||||
.option__user-data {
|
||||
@apply flex flex-col flex-grow ml-2 mr-2;
|
||||
@@ -73,10 +73,10 @@ export default {
|
||||
@apply relative top-px mr-0.5 rtl:mr-0 rtl:ml-0.5;
|
||||
}
|
||||
.option__title {
|
||||
@apply text-slate-800 dark:text-slate-100 font-medium mb-0.5;
|
||||
@apply text-n-slate-12 font-medium mb-0.5;
|
||||
}
|
||||
.option__body {
|
||||
@apply text-xs text-slate-700 dark:text-slate-100 mt-1;
|
||||
@apply text-xs text-n-slate-12 mt-1;
|
||||
}
|
||||
|
||||
.option__user-data .option__body {
|
||||
|
||||
@@ -130,7 +130,7 @@ export default {
|
||||
</div>
|
||||
<div class="flex multiselect-wrap--medium">
|
||||
<div
|
||||
class="w-8 relative text-base text-slate-100 dark:text-slate-600 after:content-[''] after:h-12 after:w-0 ltr:after:left-4 rtl:after:right-4 after:absolute after:border-l after:border-solid after:border-slate-100 after:dark:border-slate-600 before:content-[''] before:h-0 before:w-4 ltr:before:left-4 rtl:before:right-4 before:top-12 before:absolute before:border-b before:border-solid before:border-slate-100 before:dark:border-slate-600"
|
||||
class="w-8 relative text-base text-n-strong after:content-[''] after:h-12 after:w-0 ltr:after:left-4 rtl:after:right-4 after:absolute after:border-l after:border-solid after:border-n-strong before:content-[''] before:h-0 before:w-4 ltr:before:left-4 rtl:before:right-4 before:top-12 before:absolute before:border-b before:border-solid before:border-n-strong"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="arrow-up"
|
||||
|
||||
@@ -17,9 +17,9 @@ export default {
|
||||
<template>
|
||||
<div
|
||||
v-if="parentContactName"
|
||||
class="my-4 relative p-2.5 border rounded-[4px] text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-800"
|
||||
class="my-4 relative p-2.5 border rounded-[4px] text-n-slate-12 border-n-weak bg-n-background"
|
||||
>
|
||||
<h5 class="text-base font-medium text-slate-900 dark:text-white">
|
||||
<h5 class="text-base font-medium text-n-slate-12">
|
||||
{{ $t('MERGE_CONTACTS.SUMMARY.TITLE') }}
|
||||
</h5>
|
||||
<ul class="ml-0 list-none">
|
||||
|
||||
@@ -257,7 +257,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-container {
|
||||
@apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;
|
||||
@apply p-1 bg-n-background shadow-xl rounded-md;
|
||||
|
||||
hr:first-child {
|
||||
@apply hidden;
|
||||
@@ -277,10 +277,6 @@ export default {
|
||||
@apply font-medium text-base;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@apply pt-4 pb-8 px-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,6 +41,7 @@ const onTabChange = index => {
|
||||
:name="item.name"
|
||||
:count="item.count"
|
||||
:show-badge="item.showBadge"
|
||||
is-compact
|
||||
/>
|
||||
</woot-tabs>
|
||||
</div>
|
||||
|
||||
@@ -140,7 +140,7 @@ export default {
|
||||
</div>
|
||||
<div
|
||||
v-if="isWidgetVisible"
|
||||
class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-slate-25 dark:bg-slate-800 h-[31.25rem] w-80"
|
||||
class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-n-slate-2 dark:bg-n-solid-1 h-[31.25rem] w-80"
|
||||
>
|
||||
<WidgetHead :config="getWidgetConfig" />
|
||||
<div>
|
||||
@@ -151,7 +151,7 @@ export default {
|
||||
<WidgetFooter :config="getWidgetConfig" />
|
||||
<div class="py-2.5 flex justify-center">
|
||||
<a
|
||||
class="items-center gap-0.5 text-slate-500 dark:text-slate-400 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
|
||||
class="items-center gap-0.5 text-n-slate-11 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
|
||||
>
|
||||
<img
|
||||
class="max-w-2.5 max-h-2.5"
|
||||
|
||||
@@ -28,7 +28,7 @@ defineProps({
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-white shadow rounded-[1.25rem] rounded-bl-[0.25rem] px-4 py-3 inline-block text-sm text-slate-900 dark:text-white dark:bg-slate-700"
|
||||
class="shadow rounded-[1.25rem] rounded-bl-[0.25rem] px-4 py-3 inline-block text-sm text-n-slate-12 bg-n-background dark:bg-n-solid-3"
|
||||
>
|
||||
<div>
|
||||
<p class="m-0">
|
||||
|
||||
@@ -27,16 +27,16 @@ const getStatusText = computed(() => {
|
||||
<div class="relative flex flex-col w-full px-4">
|
||||
<div
|
||||
v-if="config.isDefaultScreen"
|
||||
class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700"
|
||||
class="p-4 rounded-md shadow-sm bg-n-background dark:bg-n-solid-2"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div
|
||||
class="text-sm font-medium leading-4 text-slate-700 dark:text-slate-50"
|
||||
class="text-sm font-medium leading-4 text-n-slate-12 dark:text-n-slate-50"
|
||||
>
|
||||
{{ getStatusText }}
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-slate-500 dark:text-slate-100">
|
||||
<div class="mt-1 text-xs text-n-slate-11">
|
||||
{{ config.replyTime }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@ const getStatusText = computed(() => {
|
||||
</div>
|
||||
<button
|
||||
v-if="config.isDefaultScreen"
|
||||
class="inline-flex items-center justify-between px-2 py-1 mt-1 -ml-2 font-medium leading-6 bg-transparent rounded-md text-slate-800 dark:bg-transparent dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
|
||||
class="inline-flex items-center justify-between px-2 py-1 mt-1 -ml-2 font-medium leading-6 bg-transparent rounded-md text-n-slate-12 dark:bg-transparent"
|
||||
:style="{ color: config.color }"
|
||||
>
|
||||
<span class="pr-2 text-xs">
|
||||
@@ -59,8 +59,8 @@ const getStatusText = computed(() => {
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center h-10 bg-white rounded-md dark:bg-slate-700"
|
||||
:class="{ 'ring-2 ring-woot-500 dark:ring-woot-400': isInputFocused }"
|
||||
class="flex items-center h-10 bg-white rounded-md dark:!bg-n-slate-3"
|
||||
:class="{ 'ring-2 ring-n-brand dark:ring-n-brand': isInputFocused }"
|
||||
>
|
||||
<ResizableTextArea
|
||||
id="chat-input"
|
||||
@@ -68,7 +68,7 @@ const getStatusText = computed(() => {
|
||||
:placeholder="
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
|
||||
"
|
||||
class="flex-grow !bg-white border-0 outline-none !outline-0 border-none h-8 text-sm dark:!bg-slate-700 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
|
||||
class="flex-grow !bg-white border-0 outline-none !outline-0 border-none h-8 text-sm dark:!bg-n-slate-3 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
|
||||
@focus="isInputFocused = true"
|
||||
@blur="isInputFocused = false"
|
||||
/>
|
||||
|
||||
@@ -26,8 +26,8 @@ const isDefaultScreen = computed(() => {
|
||||
class="rounded-t-lg flex-shrink-0 transition-[max-height] duration-300"
|
||||
:class="
|
||||
isDefaultScreen
|
||||
? 'bg-slate-25 dark:bg-slate-800 px-4 py-5'
|
||||
: 'bg-white dark:bg-slate-900 p-4'
|
||||
? 'bg-n-slate-2 dark:bg-n-solid-1 px-4 py-5'
|
||||
: 'bg-n-slate-2 dark:bg-n-solid-1 p-4'
|
||||
"
|
||||
>
|
||||
<div class="relative top-px">
|
||||
@@ -40,17 +40,15 @@ const isDefaultScreen = computed(() => {
|
||||
/>
|
||||
<div v-if="!isDefaultScreen">
|
||||
<div class="flex items-center justify-start gap-1">
|
||||
<span
|
||||
class="text-base font-medium leading-3 text-slate-900 dark:text-white"
|
||||
>
|
||||
<span class="text-base font-medium leading-3 text-n-slate-12">
|
||||
{{ config.websiteName }}
|
||||
</span>
|
||||
<div
|
||||
v-if="config.isOnline"
|
||||
class="w-2 h-2 bg-green-500 rounded-full"
|
||||
class="w-2 h-2 bg-n-teal-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<span class="mt-1 text-xs text-slate-600 dark:text-slate-400">
|
||||
<span class="mt-1 text-xs text-n-slate-11">
|
||||
{{ config.replyTime }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user