chore: more design updates
This commit is contained in:
Muhsin Keloth
@@ -105,7 +105,7 @@ textarea {
|
||||
}
|
||||
|
||||
.error {
|
||||
input,
|
||||
input:not(.reset-base),
|
||||
input:not([type]),
|
||||
textarea,
|
||||
select,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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
|
||||
|
||||
+5
-3
@@ -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() {
|
||||
|
||||
+29
-27
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
'text-ash-900': value,
|
||||
'pl-9': icon,
|
||||
}"
|
||||
class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
|
||||
class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
|
||||
@input="onInput"
|
||||
>
|
||||
<option value="" disabled selected class="hidden">
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="p-0 toggle-button"
|
||||
:class="{ active: value, small: size === 'small' }"
|
||||
role="switch"
|
||||
:aria-checked="value.toString()"
|
||||
@click="onClick"
|
||||
>
|
||||
<span aria-hidden="true" :class="{ active: value }" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: { type: Boolean, default: false },
|
||||
size: { type: String, default: '' },
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('input', !this.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
border-radius: var(--border-radius-large);
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 19px;
|
||||
position: relative;
|
||||
transition-duration: 200ms;
|
||||
transition-property: background-color;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
width: 34px;
|
||||
|
||||
&.active {
|
||||
background-color: var(--w-500);
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 22px;
|
||||
height: 14px;
|
||||
|
||||
span {
|
||||
height: var(--space-one);
|
||||
width: var(--space-one);
|
||||
|
||||
&.active {
|
||||
transform: translate(var(--space-small), var(--space-zero));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@apply bg-white dark:bg-slate-900;
|
||||
--space-one-point-five: 0.9375rem;
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--toggle-button-box-shadow);
|
||||
display: inline-block;
|
||||
height: var(--space-one-point-five);
|
||||
transform: translate(0, 0);
|
||||
transition-duration: 200ms;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
width: var(--space-one-point-five);
|
||||
|
||||
&.active {
|
||||
transform: translate(var(--space-one-point-five), var(--space-zero));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,14 +3,14 @@
|
||||
<label
|
||||
v-if="label"
|
||||
:for="name"
|
||||
class="flex justify-between text-sm font-medium leading-6 text-ash-900"
|
||||
class="flex justify-between mb-0.5 text-sm font-medium leading-6 text-ash-900"
|
||||
>
|
||||
<slot name="label">
|
||||
{{ label }}
|
||||
</slot>
|
||||
<slot name="rightOfLabel" />
|
||||
</label>
|
||||
<div class="w-full">
|
||||
<div class="flex flex-col w-full gap-1">
|
||||
<div class="relative flex items-center w-full">
|
||||
<fluent-icon
|
||||
v-if="icon"
|
||||
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
<span
|
||||
v-if="errorMessage && hasError"
|
||||
class="text-xs text-ruby-800 leading-2"
|
||||
class="mt-0.5 text-xs text-ruby-800 leading-2"
|
||||
>
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user