feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Sivin Varghese
2024-10-24 10:39:36 +05:30
committed by GitHub
parent 6d3ecfe3c1
commit a3855a8d1d
144 changed files with 6376 additions and 6604 deletions

View File

@@ -39,25 +39,33 @@ const props = defineProps({
validator: value => ['info', 'error', 'success'].includes(value),
},
});
defineEmits(['update:modelValue']);
const emit = defineEmits(['update:modelValue', 'blur', 'input']);
const messageClass = computed(() => {
switch (props.messageType) {
case 'error':
return 'text-red-500 dark:text-red-400';
return 'text-n-ruby-9 dark:text-n-ruby-9';
case 'success':
return 'text-green-500 dark:text-green-400';
default:
return 'text-slate-500 dark:text-slate-400';
return 'text-n-slate-11 dark:text-n-slate-11';
}
});
const inputBorderClass = computed(() => {
switch (props.messageType) {
case 'error':
return 'border-red-500 dark:border-red-400';
return 'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
default:
return 'border-slate-100 dark:border-slate-700/50';
return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
}
});
const handleInput = event => {
emit('update:modelValue', event.target.value);
emit('input', event);
};
</script>
<template>
@@ -78,12 +86,13 @@ const inputBorderClass = computed(() => {
:type="type"
:placeholder="placeholder"
:disabled="disabled"
class="flex w-full reset-base text-sm h-8 pl-3 pr-2 rtl:pr-3 rtl:pl-2 py-1.5 !mb-0 border rounded-lg focus:border-woot-500 dark:focus:border-woot-600 bg-white dark:bg-slate-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
@input="$emit('update:modelValue', $event.target.value)"
class="flex w-full reset-base text-sm h-10 !px-2 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-white dark:bg-slate-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
@input="handleInput"
@blur="emit('blur')"
/>
<p
v-if="message"
class="mt-1 mb-0 text-xs transition-all duration-500 ease-in-out"
class="mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
:class="messageClass"
>
{{ message }}