opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-25 17:15:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update tailwind unit styles

Browse Source
This commit is contained in:
steven
2023-04-13 12:20:44 +08:00
parent 644087b60d
commit 07f8714c50
4 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CreateConnectionModal.tsx
View File

@ -208,7 +208,7 @@ const CreateConnectionModal = (props: Props) => {
return ( return (
<> <>
<Dialog title={isEditing ? "Edit Connection" : "Create Connection"} open={open} onClose={close}> <Dialog title={isEditing ? "Edit Connection" : "Create Connection"} open={open} onClose={close}>
<div className="w-full flex flex-col justify-start items-start space-y-3 pt-4"> <div className="w-full flex flex-col justify-start items-start space-y-3 mt-2">
<DataStorageBanner className="rounded-lg bg-white border dark:border-zinc-700 py-2 !justify-start" alwaysShow={true} /> <DataStorageBanner className="rounded-lg bg-white border dark:border-zinc-700 py-2 !justify-start" alwaysShow={true} />
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<label className="block text-sm font-medium text-gray-700 mb-1">Database Type</label> <label className="block text-sm font-medium text-gray-700 mb-1">Database Type</label>
@ -340,7 +340,7 @@ const CreateConnectionModal = (props: Props) => {
<button className="btn btn-outline" onClick={close}> <button className="btn btn-outline" onClick={close}>
Close Close
</button> </button>
<button className="btn btn-primary" disabled={isRequesting || !allowSave} onClick={handleCreateConnection}> <button className="btn" disabled={isRequesting || !allowSave} onClick={handleCreateConnection}>
{isRequesting && <Icon.BiLoaderAlt className="w-4 h-auto animate-spin mr-1" />} {isRequesting && <Icon.BiLoaderAlt className="w-4 h-auto animate-spin mr-1" />}
Save Save
</button> </button>

6
src/components/kit/Dialog.tsx
View File

@ -21,8 +21,8 @@ const Dialog = (props: Props) => {
> >
<DialogUI.Portal> <DialogUI.Portal>
<DialogUI.Overlay className="fixed inset-0 bg-black bg-opacity-60 z-100" /> <DialogUI.Overlay className="fixed inset-0 bg-black bg-opacity-60 z-100" />
<DialogUI.Content className="flex flex-col bg-white dark:bg-zinc-800 rounded-xl p-4 px-5 fixed top-[50%] left-[50%] h-auto max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] z-100"> <DialogUI.Content className="flex flex-col bg-white dark:bg-zinc-800 rounded-xl p-4 fixed top-[50%] left-[50%] h-auto max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] z-100">
<DialogUI.Title className="text-lg text-black dark:text-gray-300 font-medium mb-2">{title}</DialogUI.Title> <DialogUI.Title className="text-lg pl-1 text-black dark:text-gray-300 font-medium mb-2">{title}</DialogUI.Title>
<DialogUI.Close <DialogUI.Close
className="absolute top-3 right-3 outline-none w-8 h-8 p-1 bg-zinc-600 rounded-full text-gray-300 hover:opacity-80" className="absolute top-3 right-3 outline-none w-8 h-8 p-1 bg-zinc-600 rounded-full text-gray-300 hover:opacity-80"
aria-label="Close" aria-label="Close"
@ -30,7 +30,7 @@ const Dialog = (props: Props) => {
> >
<Icon.IoClose className="w-full h-auto" /> <Icon.IoClose className="w-full h-auto" />
</DialogUI.Close> </DialogUI.Close>
<div className="w-full h-[calc(100%-36px)] flex flex-col justify-start items-start overflow-y-auto">{children}</div> <div className="w-full px-1 h-[calc(100%-36px)] flex flex-col justify-start items-start overflow-y-auto">{children}</div>
</DialogUI.Content> </DialogUI.Content>
</DialogUI.Portal> </DialogUI.Portal>
</DialogUI.Root> </DialogUI.Root>

2
src/components/kit/TextField.tsx
View File

@ -11,7 +11,7 @@ const TextField = (props: Props) => {
return ( return (
<input <input
className={`${className || ""} w-full border px-3 py-2 rounded-lg dark:border-zinc-700 dark:bg-zinc-800 outline-none `} className={`${className || ""} w-full border px-3 py-2 rounded-lg dark:border-zinc-700 dark:bg-zinc-800 focus:outline-2`}
type="text" type="text"
disabled={disabled} disabled={disabled}
placeholder={placeholder} placeholder={placeholder}

8
src/styles/tailwind.css
View File

@ -15,17 +15,13 @@
} }
.btn { .btn {
@apply hide-scrollbar text-base px-3 py-2 rounded-lg border outline-none hover:opacity-80 disabled:!opacity-60 disabled:cursor-not-allowed; @apply hide-scrollbar text-base px-3 py-2 rounded-lg border border-none outline-none bg-zinc-600 text-gray-200 hover:opacity-80 disabled:!opacity-60 disabled:cursor-not-allowed;
} }
.btn-outline { .btn-outline {
@apply border-none hover:bg-gray-100 dark:hover:bg-zinc-800; @apply border-none bg-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800;
} }
.btn-error { .btn-error {
@apply bg-red-100 text-red-600 border-red-600; @apply bg-red-100 text-red-600 border-red-600;
} }
.btn-primary {
@apply bg-indigo-100 text-indigo-600 border-indigo-600;
}