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

feat: more style changes

Browse Source
This commit is contained in:
Muhsin Keloth
2024-04-22 21:09:36 +05:30
parent e578d47003
commit 9e57180193
3 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+22 -25
View File
@@ -9,20 +9,17 @@
Notification type
</span>
</table-header-cell>
<table-header-cell :span="3" label="Email">
<table-header-cell :span="2" label="Email">
<span class="text-sm font-medium uppercase text-ash-900">
Email
</span>
</table-header-cell>
<table-header-cell :span="3" label="Push notification">
<div class="flex flex-row items-center justify-center gap-1">
<table-header-cell :span="4" label="Push notification">
<div class="flex items-center justify-between gap-2">
<span class="text-sm font-medium uppercase text-ash-900">
Push notification
</span>
<!-- <v3-switch
:value="!hasEnabledPushPermissions"
@input="onRequestPermissions()"
/> -->
<v3-switch :value="true" @input="onRequestPermissions()" />
</div>
</table-header-cell>
</div>
@@ -37,7 +34,7 @@
</span>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedEmailFlags"
@@ -48,7 +45,7 @@
/>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
type="checkbox"
@@ -69,7 +66,7 @@
</span>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedEmailFlags"
@@ -80,7 +77,7 @@
/>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedPushFlags"
@@ -102,7 +99,7 @@
</span>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedEmailFlags"
@@ -113,7 +110,7 @@
/>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedPushFlags"
@@ -135,7 +132,7 @@
</span>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedEmailFlags"
@@ -146,7 +143,7 @@
/>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedPushFlags"
@@ -168,7 +165,7 @@
</span>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedEmailFlags"
@@ -179,7 +176,7 @@
/>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedPushFlags"
@@ -202,7 +199,7 @@
</span>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedEmailFlags"
@@ -212,7 +209,7 @@
/>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedPushFlags"
@@ -235,7 +232,7 @@
</span>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedEmailFlags"
@@ -245,7 +242,7 @@
/>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedPushFlags"
@@ -268,7 +265,7 @@
</span>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-2 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedEmailFlags"
@@ -278,7 +275,7 @@
/>
</div>
<div
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
class="flex items-center gap-2 col-span-4 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
>
<input
v-model="selectedPushFlags"
@@ -305,12 +302,12 @@ import {
verifyServiceWorkerExistence,
} from '../../../../helper/pushHelper';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
// import V3Switch from 'v3/components/Form/Switch.vue';
import V3Switch from 'v3/components/Form/Switch.vue';
export default {
components: {
TableHeaderCell,
// V3Switch,
V3Switch,
},
mixins: [alertMixin, configMixin, uiSettingsMixin],
data() {
app/javascript/v3/components/Form/Button.vue
+14 -1
View File
@@ -81,12 +81,25 @@ const colorClass = computed(() => {
if (props.variant === 'ghost') {
return 'text-primary-800 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
return 'bg-primary-600 border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
return 'bg-primary-600 border border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
if (props.colorScheme === 'secondary') {
if (props.variant === 'outline') {
return 'text-ash-800 border border-ash-400 hover:text-ash-600 active:text-ash-600 focus:ring focus:ring-offset-1 focus:ring-ash-400';
}
if (props.variant === 'ghost') {
return 'text-ash-800 hover:text-ash-600 active:text-ash-600 focus:ring focus:ring-offset-1 focus:ring-ash-400';
}
return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
}
if (props.colorScheme === 'danger') {
if (props.variant === 'outline') {
return 'text-ruby-800 border border-ruby-400 hover:text-ruby-600 active:text-ruby-600 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
}
if (props.variant === 'ghost') {
return 'text-ruby-800 hover:text-ruby-600 active:text-ruby-600 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
}
return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
}
return 'bg-primary-500 text-white';
app/javascript/v3/components/Form/Switch.vue
+1 -6
View File
@@ -1,7 +1,7 @@
<template>
<button
type="button"
class="p-0 toggle-button"
class="p-0 toggle-button bg-primary-600"
:class="{ active: value, small: size === 'small' }"
role="switch"
:aria-checked="value.toString()"
@@ -26,7 +26,6 @@ export default {
</script>
<style lang="scss" scoped>
.toggle-button {
@apply bg-slate-200 dark:bg-slate-600;
--toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
@@ -42,10 +41,6 @@ export default {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 34px;
&.active {
background-color: var(--w-500);
}
&.small {
width: 22px;
height: 14px;