refactor: update option page theme

src/components/TooltipTrigger/index.tsx

@@ -13,8 +13,8 @@ interface ITooltipTriggerProps {
 const TooltipTrigger: React.FC<ITooltipTriggerProps> = ({
   size = 20,
   iconColor = '#FFFFFF',
-  tooltipBackground = '#FFFFFF',
-  tooltipFontColor = '#242A2E',
+  tooltipBackground = '#333333',
+  tooltipFontColor = '#FFFFFF',
   content,
 }) => (
   <Tooltip placement="top" title={<span style={{ color: tooltipFontColor }}>{content}</span>} color={tooltipBackground}>

src/locales/en/translation.json

@@ -44,12 +44,12 @@
   "component_openSourceInterestsNetwork_title": "Open Source Interests Network",
   "component_openSourceInterestsNetwork_description": "Discover the interests and technical fields of individual developers by analyzing the themes, tags, and topics of the projects they participate in. The graph provides labels for technologies and related projects that developers are passionate about. And it highlights language-related projects of interest to developers, helping to understand their expertise and interests.",
   "options_components_title": "Select Components",
-  "options_components_toolTip": "You can choose which component will be shown on github's page",
+  "options_components_toolTip": "Please select the active components",
   "options_locale_title": "Language",
-  "options_locale_toolTip": "Choose the display language",
+  "options_locale_toolTip": "Please choose the display language",
   "options_about_title": "About",
   "options_about_toolTip": "About HyperCRX",
-  "options_about_description": "HyperCRX is a browser extension to get more insights into projects and developers on GitHub.",
+  "options_about_description": "HyperCRX is a browser extension to get more insights into projects and developers in open source.",
   "header_label_activity": "Activity",
   "header_label_OpenRank": "OpenRank",
   "header_label_participant": "Participants",

src/locales/zh_CN/translation.json

@@ -43,12 +43,12 @@
   "component_openSourceInterestsNetwork_title": "开源兴趣图谱",
   "component_openSourceInterestsNetwork_description": "通过分析开发者参与项目的主题、标签和话题，发现他们的兴趣和技术领域。该图谱提供了开发者所热衷的技术和相关项目的标签。它突出了开发者感兴趣的语言相关项目，有助于了解他们的专业知识和兴趣。",
   "options_components_title": "选择组件",
-  "options_components_toolTip": "您可以在此选择要启用的图表组件",
+  "options_components_toolTip": "请选择要启动的组件",
   "options_locale_title": "语言",
   "options_locale_toolTip": "选择以何种语言显示信息",
   "options_about_title": "关于",
   "options_about_toolTip": "关于 HyperCRX",
-  "options_about_description": "HyperCRX 是一款帮助用户洞察 GitHub 上的项目和开发者的浏览器插件。",
+  "options_about_description": "HyperCRX 是一款帮助用户洞察开源项目和开发者、增强开源协作效率的浏览器插件。",
   "header_label_activity": "活跃度",
   "header_label_OpenRank": "OpenRank",
   "header_label_participant": "参与人数",

src/pages/Options/Options.tsx

@@ -4,7 +4,6 @@ import { importedFeatures } from '../../../README.md';
 import optionsStorage, { HypercrxOptions } from '../../options-storage';
 import { HYPERCRX_GITHUB } from '../../constant';
 import TooltipTrigger from '../../components/TooltipTrigger';
-import './Options.css';
 import { useTranslation } from 'react-i18next';
 import '../../helpers/i18n';
 import GitHubToken from './components/GitHubToken';
@@ -63,7 +62,7 @@ const Options = (): JSX.Element => {
       <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
         <Row justify="center">
           <Space direction="vertical" style={{ textAlign: 'center' }}>
-            <h1>Hypercrx</h1>
+            <h1>HyperCRX</h1>
             <sub>{`version ${version}`}</sub>
           </Space>
         </Row>

src/pages/Options/index.css

@@ -1,19 +1,160 @@
-.header {
-  position: relative;
-  flex-shrink: 0;
-  background-color: #0084ff;
-  color: rgb(255, 255, 255);
-  padding: 50px 0px;
-  overflow: hidden;
-}
-
 body {
-  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
-    sans-serif;
+  font-family: -apple-system, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'Helvetica Neue', Helvetica, Arial,
+    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
   margin: 0px;
   display: flex;
   flex-direction: column;
-  background-color: #fafbfc;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
   padding: 0px;
   transition: all 0.3s ease 0s;
 }
+
+input[type='text'],
+textarea {
+  background-color: #252526;
+  border: 1px solid #3c3c3c;
+  color: #dcdcdc;
+  padding: 8px;
+}
+
+button {
+  background-color: #007acc;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #005a9e;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  color: #9cdcfe;
+}
+
+.container {
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #3c3c3c;
+  border-radius: 4px;
+}
+
+.Box {
+  width: 75vw;
+  min-width: 350px;
+  max-width: 600px;
+  border-radius: 6px;
+}
+
+.Box-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0 25px;
+  margin: -1px -1px 0;
+  background-color: #242a2e;
+  color: white;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.Box-header svg.tooltip-icon {
+  margin-top: 4px;
+}
+
+.Box-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+ul {
+  padding: 0 25px;
+}
+
+li {
+  padding: 5px 0;
+  list-style-type: none;
+}
+
+a {
+  color: #3694de;
+}
+
+.token-options {
+  width: 75vw;
+  min-width: 350px;
+  max-width: 600px;
+  border-radius: 6px;
+  margin-top: -10px;
+}
+
+.token-options p {
+  padding: 0 25px;
+}
+
+.token-options input {
+  width: calc(100% - 50px);
+  padding: 8px;
+  margin: 10px 25px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.ant-radio-wrapper {
+  color: #d4d4d4;
+}
+
+.ant-radio-inner {
+  background-color: #252526 !important;
+  border-color: #3a3d41 !important;
+}
+
+.ant-radio-inner::after {
+  background-color: #d4d4d4;
+  opacity: 0;
+}
+
+.ant-radio-checked .ant-radio-inner::after {
+  opacity: 1;
+}
+
+.ant-radio-checked .ant-radio-inner {
+  border-color: #3a3d41;
+}
+
+.ant-radio:hover .ant-radio-inner {
+  border-color: #606060;
+}
+
+.ant-checkbox-wrapper {
+  color: #d4d4d4;
+}
+
+.ant-checkbox-inner {
+  background-color: #252526 !important;
+  border-color: #3a3d41 !important;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner {
+  background-color: #252526 !important;
+  border-color: #3a3d41 !important;
+}
+
+.ant-checkbox-checked:hover {
+  background-color: #252526;
+  border-color: #3a3d41;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner::after {
+  border-color: #d4d4d4;
+}
+
+.ant-checkbox:hover .ant-checkbox-inner {
+  border-color: #606060;
+}