akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: more design updates

Browse Source
This commit is contained in:
Muhsin Keloth
2024-04-22 11:17:53 +05:30
parent 6d60f78b1d
commit fdc2c5834b
10 changed files with 134 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/assets/scss/widgets/_base.scss
+1 -1
View File
@@ -105,7 +105,7 @@ textarea {
}
.error {
input,
input:not(.reset-base),
input:not([type]),
textarea,
select,
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+1 -1
View File
@@ -1,6 +1,6 @@
// scss-lint:disable SpaceAfterPropertyColon
// scss-lint:disable MergeableSelector
button:not(.reset-base) {
.button {
font-family: inherit;
transition:
background-color 0.25s ease-out,
app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
+11 -15
View File
@@ -1,18 +1,15 @@
<template>
<div
class="flex flex-col min-w-[15rem] max-h-[21.25rem] sm:w-[23rem] rounded-md border border-solid border-ash-200"
class="flex flex-col gap-4 w-full h-[220px] md:max-h-[220px] p-4 md:w-[350px] rounded-md border border-solid border-ash-200"
:class="{
'border border-solid border-primary-300 ': active,
}"
>
<div
class="flex justify-between items-center px-2 w-full h-10 rounded-t-[5px]"
>
<div class="flex items-center p-1 text-base font-medium text-ash-900">
{{ heading }}
</div>
<div>
<!-- Show radio button, if the card is active, set radio button checked -->
<div class="flex flex-col gap-2 items-center w-full rounded-t-[5px]">
<div class="flex items-center justify-between w-full gap-1">
<div class="flex items-center text-base font-medium text-ash-900">
{{ heading }}
</div>
<input
:checked="active"
type="radio"
@@ -20,13 +17,12 @@
@change="$emit('update', 'enter')"
/>
</div>
<span class="text-ash-900 text-sm leading-[1.4] text-start">
{{ content }}
</span>
</div>
<div
class="text-slate-700 dark:text-slate-200 text-sm leading-[1.4] px-3 pb-0 text-start"
>
{{ content }}
</div>
<div v-if="src" class="p-3">
<div v-if="src">
<img :src="src" class="object-cover w-full" />
</div>
<slot v-else />
app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<div
class="flex flex-col h-full p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 font-inter"
>
<div class="flex flex-col gap-16 sm:max-w-3xl">
<div class="flex flex-col gap-16 sm:max-w-[720px]">
<div class="flex flex-col gap-6">
<h2 class="mt-4 text-2xl font-medium text-ash-900">
Profile Settings
app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+5 -3
View File
@@ -14,15 +14,15 @@
Email
</span>
</table-header-cell>
<table-header-cell :span="3" label="Push notification">
<table-header-cell :span="4" label="Push notification">
<div class="flex flex-row items-center justify-center gap-1">
<span class="text-sm font-medium uppercase text-ash-900">
Push notification
</span>
<!-- <woot-switch
<v3-switch
:value="!hasEnabledPushPermissions"
@input="onRequestPermissions()"
/> -->
/>
</div>
</table-header-cell>
</div>
@@ -305,10 +305,12 @@ import {
verifyServiceWorkerExistence,
} from '../../../../helper/pushHelper';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
import V3Switch from 'v3/components/Form/Switch.vue';
export default {
components: {
TableHeaderCell,
V3Switch,
},
mixins: [alertMixin, configMixin, uiSettingsMixin],
data() {
app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
+29 -27
View File
@@ -33,7 +33,7 @@
<input
id="audio_enable_alert_none"
v-model="enableAudioAlerts"
class="notification--checkbox"
class="notification--checkbox accent-primary-600"
type="radio"
value="none"
@input="handleAudioInput"
@@ -51,7 +51,7 @@
<input
id="audio_enable_alert_mine"
v-model="enableAudioAlerts"
class="notification--checkbox"
class="notification--checkbox accent-primary-600"
type="radio"
value="mine"
@input="handleAudioInput"
@@ -67,7 +67,7 @@
<input
id="audio_enable_alert_all"
v-model="enableAudioAlerts"
class="notification--checkbox"
class="notification--checkbox accent-primary-600"
type="radio"
value="all"
@input="handleAudioInput"
@@ -87,30 +87,32 @@
>
Alert conditions
</label>
<div class="flex flex-row items-center justify-start gap-2">
<input
id="audio_alert_when_tab_is_inactive"
v-model="playAudioWhenTabIsInactive"
type="checkbox"
value="tab_is_inactive"
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
@input="handleAudioAlertConditions"
/>
<label>
Send audio alerts only if the browser window is not active
</label>
</div>
<div class="flex flex-row items-center justify-start gap-2">
<input
v-model="alertIfUnreadConversationExist"
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
type="checkbox"
value="conversations_are_read"
@input="handleAudioAlertConditions"
/>
<label>
Send alerts every 30s until all the assigned conversations are read
</label>
<div class="flex flex-col gap-2">
<div class="flex flex-row items-start gap-2">
<input
id="audio_alert_when_tab_is_inactive"
v-model="playAudioWhenTabIsInactive"
type="checkbox"
value="tab_is_inactive"
class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
@input="handleAudioAlertConditions"
/>
<label class="text-sm font-normal text-ash-900">
Send audio alerts only if the browser window is not active
</label>
</div>
<div class="flex flex-row items-start gap-2">
<input
v-model="alertIfUnreadConversationExist"
class="mb-0 mt-0.5 border-[1.5px] flex-shrink-0 shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-primary-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
type="checkbox"
value="conversations_are_read"
@input="handleAudioAlertConditions"
/>
<label class="text-sm font-normal text-ash-900">
Send alerts every 30s until all the assigned conversations are read
</label>
</div>
</div>
</div>
</div>
app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex flex-col gap-2">
<span class="font-medium text-ash-90"> Profile picture </span>
<span class="text-sm font-medium text-ash-900"> Profile picture </span>
<div
class="relative rounded-xl h-[72px] w-[72px] cursor-pointer"
:title="name"