opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-08-02 22:58:43 +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 (
<>
<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} />
<div className="w-full flex flex-col">
<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}>
Close
</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" />}
Save
</button>

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

@ -21,8 +21,8 @@ const Dialog = (props: Props) => {
>
<DialogUI.Portal>
<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.Title className="text-lg text-black dark:text-gray-300 font-medium mb-2">{title}</DialogUI.Title>
<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 pl-1 text-black dark:text-gray-300 font-medium mb-2">{title}</DialogUI.Title>
<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"
aria-label="Close"
@ -30,7 +30,7 @@ const Dialog = (props: Props) => {
>
<Icon.IoClose className="w-full h-auto" />
</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.Portal>
</DialogUI.Root>

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

@ -11,7 +11,7 @@ const TextField = (props: Props) => {
return (
<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"
disabled={disabled}
placeholder={placeholder}

8
src/styles/tailwind.css
View File

@ -15,17 +15,13 @@
}
.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 {
@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 {
@apply bg-red-100 text-red-600 border-red-600;
}
.btn-primary {
@apply bg-indigo-100 text-indigo-600 border-indigo-600;
}