Migrate to ant-design

src/Contexts.tsx

@@ -2,7 +2,13 @@ import { createContext, useContext, useEffect, useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { ConfigProvider, theme as antdTheme } from 'antd';
 import { Configuration } from './configuration/type';
-import { DEFAULT_THEME, getSetting, isDarkTheme, THEME_LIST } from './theme';
+import {
+  DEFAULT_THEME,
+  getColor,
+  getSetting,
+  isDarkTheme,
+  THEME_LIST,
+} from './theme';
 
 export interface ConnectToFunc {
   (params: object): void;
@@ -73,14 +79,25 @@ export function ThemeContextProvider({
       <ThemeContext.Provider value={{ themeName, changeTheme }}>
         <ConfigProvider
           theme={{
+            algorithm: isDarkTheme(theme) ? antdTheme.darkAlgorithm : undefined,
             token: {
               // Seed Token
               colorPrimary: getSetting(theme, 'foreground'),
 
               // Alias Token
               colorBgContainer: getSetting(theme, 'background'),
             },
-            algorithm: isDarkTheme(theme) ? antdTheme.darkAlgorithm : undefined,
+            components: {
+              Button: {
+                colorPrimary: getColor(
+                  theme,
+                  'constant.language',
+                  'foreground'
+                ),
+                colorLink: getColor(theme, 'support.type', 'foreground'),
+                algorithm: true,
+              },
+            },
           }}
         >
           {children}

src/component/Connection/ConnectionPage.tsx

@@ -1,4 +1,5 @@
 import { Link, Navigate } from 'react-router-dom';
+import { Button } from 'antd';
 import { ConnectionObject } from './types';
 import { ConnectionContext, useConfiguration } from '../../Contexts';
 import { useContext } from 'react';
@@ -24,20 +25,26 @@ function ConnectionPage() {
       {connectionList.map(
         (connection: ConnectionObject): JSX.Element => (
           <div key={connection.name}>
-            <a
-              href={`${connection.name}`}
-              onClick={(e) => {
-                e.preventDefault();
-
-                connectTo(connection);
-              }}
-            >
-              {connection.name}
-            </a>
+            <Button block>
+              <Link
+                to={connection.name}
+                onClick={(e) => {
+                  e.preventDefault();
+                  connectTo(connection);
+                }}
+              >
+                {connection.name}
+              </Link>
+            </Button>
           </div>
         )
       )}
-      <Link to="/connect/create">New connection</Link>
+
+      <hr />
+
+      <Button block>
+        <Link to="/connect/create">Create connection…</Link>
+      </Button>
     </div>
   );
 }

src/component/Connection/Nav.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { ReactElement, useContext } from 'react';
+import { Button } from 'antd';
 import cn from 'classnames';
 import { ConnectionContext } from '../../Contexts';
 
@@ -13,27 +14,31 @@ export default function Nav(): ReactElement {
   return (
     <nav className="nav nav-pills flex-column">
       {connectionNameList.map((connection, i) => (
-        <Link
-          key={i}
-          className={cn({
-            'nav-link': true,
-            active: connection === currentConnectionName,
-          })}
-          onClick={() => {
-            setCurrentConnectionName(connection);
-          }}
-          to="/tables"
-          style={connection === currentConnectionName ? { color: '#fff' } : {}}
+        <Button
+          block
+          type={connection === currentConnectionName ? 'primary' : 'link'}
         >
-          {/* {connection.config.host &&
+          <Link
+            key={i}
+            // className={cn({
+            //   'nav-link': true,
+            //   active: connection === currentConnectionName,
+            // })}
+            onClick={() => {
+              setCurrentConnectionName(connection);
+            }}
+            to="/tables"
+          >
+            {/* {connection.config.host &&
             connection.config.host.substr(0, 1).toUpperCase()} */}
 
-          {connection}
-        </Link>
+            {connection}
+          </Link>
+        </Button>
       ))}
-      <Link className="nav-link" to="/connect">
-        +
-      </Link>
+      <Button type="link" block>
+        <Link to="/connect">new…</Link>
+      </Button>
     </nav>
   );
 }

src/component/DatabaseSelector.tsx

@@ -1,5 +1,6 @@
 import { ConnectionContext, DatabaseContext } from '../Contexts';
-import { ChangeEvent, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { Select } from 'antd';
 
 interface DatabaseRow {
   Database: string;
@@ -21,15 +22,13 @@ export default function DatabaseSelector() {
     });
   }, [currentConnectionName, setDatabase]);
 
-  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setDatabase(event.target.value);
-  };
-
   return (
-    <select onChange={handleChange} value={database || undefined}>
-      {databaseList.map((row: DatabaseRow) => (
-        <option key={row.Database}>{row.Database}</option>
-      ))}
-    </select>
+    <Select
+      popupMatchSelectWidth={false}
+      onChange={setDatabase}
+      value={database || undefined}
+      fieldNames={{ label: 'Database', value: 'Database' }}
+      options={databaseList}
+    />
   );
 }

src/component/ThemeSelector.tsx

@@ -1,21 +1,19 @@
+import { Select } from 'antd';
 import { THEME_LIST } from '../../src/theme';
 import { useTheme } from '../Contexts';
 
 export default function ThemeSelector() {
   const { themeName, changeTheme } = useTheme();
 
   return (
-    <select
-      onChange={(e) => {
-        changeTheme(e.target.value);
-      }}
+    <Select
+      popupMatchSelectWidth={false}
+      onChange={changeTheme}
       value={themeName}
-    >
-      {Object.keys(THEME_LIST).map((key) => (
-        <option key={key} value={key}>
-          {key}
-        </option>
-      ))}
-    </select>
+      options={Object.keys(THEME_LIST).map((key) => ({
+        value: key,
+        label: key,
+      }))}
+    />
   );
 }

src/routes/home.tsx

@@ -1,11 +1,14 @@
 import { Link } from 'react-router-dom';
+import { Button } from 'antd';
 
 export function Home() {
   return (
     <div>
       <p>Welcome to Tiana Tables ! </p>
 
-      <Link to="/connect">Please connect</Link>
+      <Button type="primary">
+        <Link to="/connect">Please connect</Link>
+      </Button>
     </div>
   );
 }

src/routes/root.tsx

@@ -35,8 +35,7 @@ export default function Root() {
             <HeaderDiv>
               <h2>Welcome to Tiana Tables !</h2>
               <div>
-                Theme:
-                <ThemeSelector />
+                Theme: <ThemeSelector />
               </div>
             </HeaderDiv>
             <Outlet />