opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-28 18:43:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement dark mode (#27)

Browse Source 
* feat: implement dark mode

* feat: update data table dark mode style

* chore: update
This commit is contained in:
boojack
2023-04-12 11:05:25 +08:00
committed by GitHub
parent 2783bca24d
commit c4de3b0d6f
28 changed files with 243 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/ConnectionSidebar.tsx
View File

@ -161,10 +161,12 @@ const ConnectionSidebar = () => {
onClose={() => layoutStore.toggleSidebar(false)}
>
<div className="w-80 h-full overflow-y-hidden flex flex-row justify-start items-start">
<div className="w-16 h-full bg-gray-200 pl-2 py-4 pt-6 flex flex-col justify-between items-center">
<div className="w-16 h-full bg-gray-200 dark:bg-zinc-600 pl-2 py-4 pt-6 flex flex-col justify-between items-center">
<div className="w-full flex flex-col justify-start items-start">
<button
className={`w-full h-14 rounded-l-lg p-2 mt-1 group ${currentConnectionCtx === undefined && "bg-gray-100 shadow"}`}
className={`w-full h-14 rounded-l-lg p-2 mt-1 group ${
currentConnectionCtx === undefined && "bg-gray-100 dark:bg-zinc-700 shadow"
}`}
onClick={() => connectionStore.setCurrentConnectionCtx(undefined)}
>
<img src="/chat-logo-bot.webp" className="w-7 h-auto mx-auto" alt="" />
@ -173,7 +175,7 @@ const ConnectionSidebar = () => {
<button
key={connection.id}
className={`relative w-full h-14 rounded-l-lg p-2 mt-2 group ${
currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 shadow"
currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow"
}`}
onClick={() => handleConnectionSelect(connection)}
>
@ -184,14 +186,14 @@ const ConnectionSidebar = () => {
handleEditConnection(connection);
}}
>
<Icon.FiEdit3 className="w-3.5 h-auto" />
<Icon.FiEdit3 className="w-3.5 h-auto dark:text-gray-300" />
</span>
<EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto" />
<EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto dark:text-gray-300" />
</button>
))}
<Tooltip title={t("connection.new")} side="right">
<button
className="w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 rounded-full text-gray-500 cursor-pointer"
className="w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 dark:bg-zinc-700 rounded-full text-gray-500 cursor-pointer"
onClick={() => toggleCreateConnectionModal(true)}
>
<Icon.AiOutlinePlus className="w-auto h-full mx-auto" />
@ -202,27 +204,27 @@ const ConnectionSidebar = () => {
<LocaleSwitch />
<Tooltip title={t("common.setting")} side="right">
<button
className=" w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
className=" w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100 dark:hover:bg-zinc-700"
data-tip={t("common.setting")}
onClick={() => toggleSettingModal(true)}
>
<Icon.IoMdSettings className="text-gray-600 w-6 h-auto" />
<Icon.IoMdSettings className="text-gray-600 dark:text-gray-300 w-6 h-auto" />
</button>
</Tooltip>
</div>
</div>
<div className="relative p-4 pb-0 w-64 h-full overflow-y-auto flex flex-col justify-start items-start bg-gray-100">
<div className="relative p-4 pb-0 w-64 h-full overflow-y-auto flex flex-col justify-start items-start bg-gray-100 dark:bg-zinc-700">
<img className="px-4 shrink-0" src="/chat-logo.webp" alt="" />
<div className="w-full grow">
{isRequestingDatabase && (
<div className="w-full h-12 flex flex-row justify-start items-center px-4 sticky top-0 border z-1 mb-4 mt-2 rounded-lg text-sm text-gray-600">
<div className="w-full h-12 flex flex-row justify-start items-center px-4 sticky top-0 border z-1 mb-4 mt-2 rounded-lg text-sm text-gray-600 dark:text-gray-400">
<Icon.BiLoaderAlt className="w-4 h-auto animate-spin mr-1" /> {t("common.loading")}
</div>
)}
{databaseList.length > 0 && (
<div className="w-full sticky top-0 z-1 my-4">
<Select
className="w-full bg-white px-4 py-3"
className="w-full px-4 py-3"
value={currentConnectionCtx?.database?.name}
itemList={databaseList.map((database) => {
return {
@ -238,8 +240,8 @@ const ConnectionSidebar = () => {
{conversationList.map((conversation) => (
<div
key={conversation.id}
className={`w-full mt-2 first:mt-4 py-3 pl-4 pr-2 rounded-lg flex flex-row justify-start items-center cursor-pointer border border-transparent group hover:bg-gray-50 ${
conversation.id === conversationStore.currentConversation?.id && "!bg-white border-gray-200 font-medium"
className={`w-full mt-2 first:mt-4 py-3 pl-4 pr-2 rounded-lg flex flex-row justify-start items-center cursor-pointer dark:text-gray-300 border border-transparent group hover:bg-gray-50 dark:hover:bg-zinc-800 ${
conversation.id === conversationStore.currentConversation?.id && "bg-white dark:bg-zinc-800 border-gray-200 font-medium"
}`}
onClick={() => handleConversationSelect(conversation)}
>
@ -268,17 +270,17 @@ const ConnectionSidebar = () => {
</div>
))}
<button
className="w-full my-4 py-3 px-4 border rounded-lg flex flex-row justify-center items-center text-gray-500 hover:text-gray-700 hover:bg-gray-50"
className="w-full my-4 py-3 px-4 border dark:border-zinc-800 rounded-lg flex flex-row justify-center items-center text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-800"
onClick={handleCreateConversation}
>
<Icon.AiOutlinePlus className="w-5 h-auto mr-1" />
{t("conversation.new-chat")}
</button>
</div>
<div className="sticky bottom-0 w-full flex justify-center bg-gray-100 backdrop-blur bg-opacity-60 pb-6 py-2">
<div className="sticky bottom-0 w-full flex justify-center bg-gray-100 dark:bg-zinc-700 backdrop-blur bg-opacity-60 pb-6 py-2">
<a
href="https://discord.gg/z6kakemDjm"
className="text-indigo-600 text-sm font-medium flex flex-row justify-center items-center hover:underline"
className="text-indigo-600 dark:text-indigo-400 text-sm font-medium flex flex-row justify-center items-center hover:underline"
target="_blank"
>
<Icon.BsDiscord className="w-4 h-auto mr-1" />