From 9382f3b9efd3938389338040b27d2cc1bdfb278e Mon Sep 17 00:00:00 2001
From: Jihyun Kang <jihyunkang@lablup.com>
Date: Fri, 30 Aug 2024 03:12:51 +0900
Subject: [PATCH] refactor: replace svg as customIcon component

---
 .../src/components/MainLayout/WebUIHeader.tsx |   7 +-
 .../src/components/MainLayout/WebUISider.tsx  |   1 +
 react/src/pages/StartPage.tsx                 |   1 +
 resources/theme.json                          | 202 +++++++++---------
 4 files changed, 108 insertions(+), 103 deletions(-)

diff --git a/react/src/components/MainLayout/WebUIHeader.tsx b/react/src/components/MainLayout/WebUIHeader.tsx
index ae2f80974..6376b685b 100644
--- a/react/src/components/MainLayout/WebUIHeader.tsx
+++ b/react/src/components/MainLayout/WebUIHeader.tsx
@@ -1,5 +1,8 @@
 import { useCustomThemeConfig } from '../../helper/customThemeConfig';
-import { useCurrentDomainValue, useSuspendedBackendaiClient } from '../../hooks';
+import {
+  useCurrentDomainValue,
+  useSuspendedBackendaiClient,
+} from '../../hooks';
 import { useWebUINavigate } from '../../hooks';
 import {
   useCurrentProjectValue,
@@ -68,7 +71,7 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
       style={{
         height: HEADER_HEIGHT,
         paddingRight: token.marginMD,
-        backgroundColor: token.colorFillContent,
+        backgroundColor: token.colorLinkHover,
         boxShadow: scrolled ? `0 5px 6px -6px ${token.colorBorder}` : 'none',
         transition: 'background-color 0.2s ease-in-out',
       }}
diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
index 3a3db9e2d..b3dc735ac 100644
--- a/react/src/components/MainLayout/WebUISider.tsx
+++ b/react/src/components/MainLayout/WebUISider.tsx
@@ -23,6 +23,7 @@ import {
   HddOutlined,
   InfoCircleOutlined,
   PlayCircleOutlined,
+  RocketOutlined,
   SolutionOutlined,
   ToolOutlined,
   UserOutlined,
diff --git a/react/src/pages/StartPage.tsx b/react/src/pages/StartPage.tsx
index a8502323e..35feba19e 100644
--- a/react/src/pages/StartPage.tsx
+++ b/react/src/pages/StartPage.tsx
@@ -4,6 +4,7 @@ import BatchSessionIcon from '../components/icons/BatchSessionIcon';
 import ExampleStartIcon from '../components/icons/ExampleStart';
 import InteractiveSessionIcon from '../components/icons/InteractiveSession';
 import ModelServiceIcon from '../components/icons/ModelServiceIcon';
+// import URLStartIcon from '../components/icons/URLStartIcon';
 import { useWebUINavigate } from '../hooks';
 import { FolderAddOutlined } from '@ant-design/icons';
 import React from 'react';
diff --git a/resources/theme.json b/resources/theme.json
index ccba0fa5c..c6e7457e1 100644
--- a/resources/theme.json
+++ b/resources/theme.json
@@ -1,111 +1,111 @@
 {
   "$schema": "./theme.schema.json",
-  "light" : {
-    "token": {
-      "fontFamily": "'Ubuntu', Roboto, sans-serif",
-      "colorPrimary": "#FF7A00",
-      "colorLink": "#FF7A00",
-      "colorPrimaryText": "#E8FAF6",
-      "colorPrimaryBg": "#FF7A00",
-      "colorFillContent": "#FF9D00",
-      "colorInfoHover": "#FFE3B7",
-      "colorWarning": "#f1a239",
-      "colorError": "#EE585A",
-      "colorTextDescription": "#767676",
-      "borderRadius": 5,
-      "colorLinkHover": "#FF9D00",
-      "colorBgBlur": "#FFE3B7",
-      "colorBorderSecondary": "#E1E1E2",
-      "colorSuccess": "#028DF2",
-      "colorSuccessBg": "#C9EFFF",
-      "colorSuccessBgHover": "#C9EFFF",
-      "colorSuccessBorder": "#C9EFFF",
-      "colorSuccessBorderHover": "#C9EFFF",
-      "colorSuccessHover": "#028DF2",
-      "colorIcon": "#FFFFFF"
-    },
-    "components": {
-      "Tag": {
-        "borderRadiusSM": 100,
-        "colorSuccess": "#01A543",
-        "colorSuccessBg": "none",
-        "colorPreparingBg": "none",
-        "colorWarningBg": "none"
-      },
-      "Table": {
-        "headerBorderRadius": 0,
-        "headerBg": "#E3E3E3",
-        "cellPaddingBlock": 6
-      },
-      "Layout": {
-        "lightSiderBg": "#FFFFFF",
-        "siderBg": "#2A2C30"
-      },
-      "Typography": {
-        "algorithm": {
-          "colorText": "#333333"
-        }
-      },
-      "Radio": {
-        "buttonColor": "#999999",
-        "algorithm": {
-          "buttonSolidCheckedBg": "#FFE3B7",
-          "buttonSolidCheckedColor": "#FF7A00"
-        }
-      },
-      "Select": {
-        "colorTextPlaceholder": "#999999"
-      },
-      "Tabs": {
-        "itemColor": "#999999"
-      }
-    }
+  "light": {
+  "token": {
+  "fontFamily": "'Ubuntu', Roboto, sans-serif",
+  "colorPrimary": "#FF7A00",
+  "colorLink": "#FF7A00",
+  "colorPrimaryText": "#E8FAF6",
+  "colorPrimaryBg": "#FF7A00",
+  "colorInfoHover": "#FFE3B7",
+  "colorWarning": "#f1a239",
+  "colorError": "#EE585A",
+  "colorTextDescription": "#767676",
+  "borderRadius": 5,
+  "colorLinkHover": "#FF9D00",
+  "colorBgBlur": "#FFE3B7",
+  "colorBorderSecondary": "#E1E1E2",
+  "colorSuccess": "#028DF2",
+  "colorSuccessBg": "#C9EFFF",
+  "colorSuccessBgHover": "#C9EFFF",
+  "colorSuccessBorder": "#C9EFFF",
+  "colorSuccessBorderHover": "#C9EFFF",
+  "colorSuccessHover": "#028DF2",
+  "colorIcon": "#FFFFFF"
+  },
+  "components": {
+  "Tag": {
+  "borderRadiusSM": 100,
+  "colorSuccess": "#01A543",
+  "colorSuccessBorder": "#01A543",
+  "colorSuccessBg": "none",
+  "colorPreparingBg": "none",
+  "colorWarningBg": "none"
+  },
+  "Table": {
+  "headerBorderRadius": 0,
+  "headerBg": "#E3E3E3",
+  "cellPaddingBlock": 6,
+  "algorithm": true
+  },
+  "Layout": {
+  "lightSiderBg": "#FFFFFF",
+  "siderBg": "#2A2C30"
+  },
+  "Typography": {
+  "algorithm": {
+  "colorText": "#333333"
+  }
+  },
+  "Radio": {
+  "buttonColor": "#999999",
+  "algorithm": {
+  "buttonSolidCheckedBg": "#FFE3B7",
+  "buttonSolidCheckedColor": "#FF7A00"
+  }
+  },
+  "Select": {
+  "colorTextPlaceholder": "#999999"
+  },
+  "Tabs": {
+  "itemColor": "#999999"
+  }
+  }
   },
   "dark": {
-    "token": {
-      "fontFamily": "'Ubuntu', Roboto, sans-serif",
-      "colorPrimary": "#25C2A0",
-      "colorLink": "#25C2A0"
-    },
-    "components": {
-      "Tag": {
-        "borderRadiusSM": 100,
-        "colorSuccessBg": "none",
-        "colorPreparingBg": "none",
-        "colorWarningBg": "none"
-      },
-      "Table": {
-        "headerBorderRadius": 0,
-        "cellPaddingBlock": 6
-      },
-      "Layout": {
-        "lightSiderBg": "#F4F7FD",
-        "siderBg": "#2A2C30"
-      }
-    }
+  "token": {
+  "fontFamily": "'Ubuntu', Roboto, sans-serif",
+  "colorPrimary": "#FF7A00",
+  "colorLink": "#FF7A00"
+  },
+  "components": {
+  "Tag": {
+  "borderRadiusSM": 100,
+  "colorSuccessBg": "none",
+  "colorPreparingBg": "none",
+  "colorWarningBg": "none"
+  },
+  "Table": {
+  "headerBorderRadius": 0,
+  "cellPaddingBlock": 6
+  },
+  "Layout": {
+  "lightSiderBg": "#F4F7FD",
+  "siderBg": "#2A2C30"
+  }
+  }
   },
   "logo": {
-    "src": "/manifest/backend.ai-white-text.svg",
-    "srcCollapsed": "/manifest/backend.ai-brand-simple.svg",
-    "srcDark": "/manifest/backend.ai-text-bgdark.svg",
-    "srcCollapsedDark": "/manifest/backend.ai-brand-simple-bgdark.svg",
-    "logoTitle": "WebUI",
-    "logoTitleCollapsed": "WebUI",
-    "alt": "Backend.AI Logo",
-    "href": "/summary",
-    "size": {
-      "width": 158.75,
-      "height": 24
-    },
-    "sizeCollapsed": {
-      "width": 48,
-      "height": 24
-    }
+  "src": "/manifest/backend.ai-white-text.svg",
+  "srcCollapsed": "/manifest/backend.ai-brand-simple.svg",
+  "srcDark": "/manifest/backend.ai-text-bgdark.svg",
+  "srcCollapsedDark": "/manifest/backend.ai-brand-simple-bgdark.svg",
+  "logoTitle": "WebUI",
+  "logoTitleCollapsed": "WebUI",
+  "alt": "Backend.AI Logo",
+  "href": "/summary",
+  "size": {
+  "width": 158.75,
+  "height": 24
   },
-  "sider": {
+  "sizeCollapsed": {
+  "width": 48,
+  "height": 24
+  }
   },
+  "sider": {},
   "branding": {
-    "companyName": "Lablup Inc.",
-    "brandName": "Backend.AI"
+  "companyName": "Lablup Inc.",
+  "brandName": "Backend.AI"
   }
-}
+  }
\ No newline at end of file