feat: use rasterized db logo

public/tidb-cloud.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-20 -20 310 310" stroke="currentColor" fill="transparent" stroke-width="7">
-  <path id="out_line" d="M202.51,79.58c-23.51-40.94-75.76-55.07-116.7-31.55-22.03,12.65-37.29,34.44-41.64,59.47C13.48,114.6-5.63,145.24,1.49,175.93c5.99,25.86,29.04,44.17,55.58,44.16,1.93,0,3.86-.1,5.78-.29h116.83c1.91,.15,3.83,.29,5.78,.29,39.37,0,71.29-31.92,71.29-71.29,0-32.8-22.38-61.37-54.23-69.22h0Z"/>
-  <path id="t_line" d="M128.29,81.27l-44.16,25.5v25.49l22.09-12.75v51.32l22.08,12.73h0V106.75l22.08-12.75-22.08-12.74Z"/>
-  <path id="i_line" d="M150.5,119.64v51.17l22.17-12.8v-51.19l-22.17,12.81Z"/>
-</svg>

src/components/ConversationView/MessageView.tsx

@@ -99,7 +99,7 @@ const MessageView = (props: Props) => {
         <>
           <div className="flex justify-center items-center mr-2 shrink-0">
             {connection ? (
-              <EngineIcon className="w-10 h-auto p-1 border dark:border-zinc-700 rounded-full" engine={connection.engineType} />
+              <EngineIcon className="w-10 h-auto p-1 dark:border-zinc-700" engine={connection.engineType} />
             ) : (
               <img className="w-10 h-auto p-1" src="/chat-logo-bot.webp" alt="" />
             )}

src/components/CreateConnectionModal.tsx

@@ -243,7 +243,7 @@ const CreateConnectionModal = (props: Props) => {
                     checked={connection.engineType === engine.type}
                     onChange={(value) => setPartialConnection({ engineType: value as Engine, port: engine.defaultPort as string })}
                   />
-                  <EngineIcon className="h-8 w-8 rounded-full" engine={engine.type} />
+                  <EngineIcon className="h-6 w-6" engine={engine.type} />
                   <label htmlFor={engine.type} className="ml-3 block text-sm font-medium leading-6 text-gray-900">
                     {engine.name}
                   </label>

src/components/EngineIcon.tsx

@@ -10,13 +10,13 @@ const EngineIcon = (props: Props) => {
   const { className, engine } = props;
 
   if (engine === Engine.MySQL) {
-    return <Icon.DiMysql className={className} />;
+    return <img src="/db-mysql.png" className={className} alt="mysql" />;
   } else if (engine === Engine.PostgreSQL) {
-    return <Icon.DiPostgresql className={className} />;
+    return <img src="/db-postgres.png" className={className} alt="postgres" />;
   } else if (engine === Engine.MSSQL) {
-    return <Icon.DiMsqlServer className={className} />;
+    return <img src="/db-sqlserver.png" className={className} alt="sqlserver" />;
   } else if (engine === Engine.TiDBServerless) {
-    return <Icon.TiDBCloudIcon className={className} />;
+    return <img src="/db-tidb.png" className={className} alt="tidb" />;
   } else {
     return <Icon.DiDatabase className={className} />;
   }

src/components/Icon.tsx

@@ -6,10 +6,6 @@ import * as Fi from "react-icons/fi";
 import * as Gi from "react-icons/gi";
 import * as Io from "react-icons/io";
 import * as Io5 from "react-icons/io5";
-import { IconType, IconBaseProps } from "react-icons/lib";
-import { ReactSVG } from "react-svg";
-
-const TiDBCloudIcon: IconType = (props: IconBaseProps) => <ReactSVG src="tidb-cloud.svg" className={props.className} />;
 
 const Icon = {
   ...Ai,
@@ -20,7 +16,6 @@ const Icon = {
   ...Gi,
   ...Io,
   ...Io5,
-  TiDBCloudIcon,
 };
 
 // Icon is a collection of all icons from react-icons.

src/components/Sidebar/ConnectionList.tsx

@@ -51,7 +51,7 @@ const ConnectionList = () => {
   return (
     <>
       <button
-        className={`w-full h-14 rounded-l-lg p-2 mt-1 group ${currentConnectionCtx === undefined && "bg-gray-100 dark:bg-zinc-700 shadow"}`}
+        className={`w-full h-12 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="" />
@@ -59,7 +59,7 @@ const ConnectionList = () => {
       {connectionList.map((connection) => (
         <Tooltip key={connection.id} title={connection.title} side="right">
           <button
-            className={`relative w-full h-14 rounded-l-lg p-2 mt-2 group ${
+            className={`relative w-full h-12 rounded-l-lg p-2 mt-2 group ${
               currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow"
             }`}
             onClick={() => handleConnectionSelect(connection)}