Change antd primary-color.

web/craco.config.js

@@ -0,0 +1,17 @@
+const CracoLessPlugin = require('craco-less');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            modifyVars: { '@primary-color': 'rgb(45,120,213)' },
+            javascriptEnabled: true,
+          },
+        },
+      },
+    },
+  ],
+};

web/package.json

@@ -4,27 +4,29 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
+    "@craco/craco": "^6.1.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "antd": "^4.7.2",
     "copy-to-clipboard": "^3.3.1",
+    "craco-less": "^1.17.1",
     "i18next": "^19.8.9",
     "moment": "^2.29.1",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-cropper": "^2.1.7",
     "react-device-detect": "^1.14.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "react-github-corner": "^2.5.0",
     "react-i18next": "^11.8.7",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "4.0.3"
   },
   "scripts": {
-    "start": "set PORT=7001 && react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "set PORT=7001 && craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": "react-app"

web/src/App.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React, {Component} from 'react';
-import './App.css';
+import './App.less';
 import * as Setting from "./Setting";
 import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons';
 import {Avatar, BackTop, Dropdown, Layout, Menu} from 'antd';

web/src/App.less

@@ -1,4 +1,4 @@
-@import '~antd/dist/antd.css';
+@import '~antd/dist/antd.less';
 
 .App {
   text-align: center;