style: Update modal appearance for UI consistency (#2747)

This commit is contained in:
Prateek Shourya 2023-11-10 15:48:34 +05:30 committed by GitHub
parent 6f580ce2d9
commit fd6430c3e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
61 changed files with 233 additions and 204 deletions

View file

@ -100,7 +100,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@ -114,7 +114,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
@ -189,6 +189,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
value={value}
onChange={onChange}
ref={ref}
tabIndex={1}
hasError={Boolean(errors.name)}
placeholder="Label title"
className="resize-none text-xl w-full"
@ -199,10 +200,10 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button variant="neutral-primary" onClick={onClose}>
<Button variant="neutral-primary" size="sm" onClick={onClose}>
Cancel
</Button>
<Button variant="primary" type="submit" loading={isSubmitting}>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
{isSubmitting ? "Creating Label..." : "Create Label"}
</Button>
</div>