refactor: update option page theme (#920)

* refactor: update option page theme Signed-off-by: frank-zsy <[email protected]> * change css * merge master * change css * change --------- Signed-off-by: frank-zsy <[email protected]> Co-authored-by: wangyantong2000 <[email protected]>
hypertrons · Nov 18, 2024 · 82f2a7e · 82f2a7e
1 parent dc4a7e8
commit 82f2a7e
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 153 deletions.
diff --git a/src/components/TooltipTrigger/index.tsx b/src/components/TooltipTrigger/index.tsx
@@ -5,19 +5,17 @@ import { iconTooltipTrigger } from './icon-svg-path';
 interface ITooltipTriggerProps {
   size?: number;
   iconColor?: string;
-  tooltipBackground?: string;
-  tooltipFontColor?: string;
   content?: string;
+  overlayClassName?: string;
 }
 
 const TooltipTrigger: React.FC<ITooltipTriggerProps> = ({
   size = 20,
   iconColor = '#FFFFFF',
-  tooltipBackground = '#FFFFFF',
-  tooltipFontColor = '#242A2E',
   content,
+  overlayClassName = 'custom-tooltip',
 }) => (
-  <Tooltip placement="top" title={<span style={{ color: tooltipFontColor }}>{content}</span>} color={tooltipBackground}>
+  <Tooltip placement="top" title={<span>{content}</span>} overlayClassName={overlayClassName}>
     <svg className="tooltip-icon" width={`${size}px`} height={`${size}px`} viewBox="0 0 48 48" version="1.1">
       <path fill={iconColor} d={iconTooltipTrigger}></path>
     </svg>

diff --git a/src/locales/en/translation.json b/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",

diff --git a/src/locales/zh_CN/translation.json b/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": "参与人数",

diff --git a/src/pages/ContentScripts/index.scss b/src/pages/ContentScripts/index.scss
@@ -128,3 +128,11 @@
   position: relative;
   top: 0px;
 }
+.custom-tooltip .ant-tooltip-inner {
+  background-color: #ffffff !important;
+  color: #242a2e !important;
+}
+
+.custom-tooltip .ant-tooltip-arrow::before {
+  background-color: #ffffff !important;
+}
diff --git a/src/pages/Options/Options.css b/src/pages/Options/Options.css
diff --git a/src/pages/Options/Options.tsx b/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>
@@ -80,7 +79,7 @@ const Options = (): JSX.Element => {
             <div className="Box">
               <div className="Box-header">
                 <h2 className="Box-title">{t('options_locale_title')}</h2>
-                <TooltipTrigger content={t('options_locale_toolTip')} />
+                <TooltipTrigger overlayClassName="custom-tooltip-option" content={t('options_locale_toolTip')} />
               </div>
               <div style={stacksStyleOptions.settingStack}>
                 <p>{t('options_locale_toolTip')} :</p>
@@ -111,7 +110,7 @@ const Options = (): JSX.Element => {
             <div className="Box">
               <div className="Box-header">
                 <h2 className="Box-title">{t('options_components_title')}</h2>
-                <TooltipTrigger content={t('options_components_toolTip')} />
+                <TooltipTrigger overlayClassName="custom-tooltip-option" content={t('options_components_toolTip')} />
               </div>
               <Row style={stacksStyleOptions.settingStack} gutter={[16, 10]}>
                 <p>{t('options_components_toolTip')} :</p>
@@ -155,7 +154,7 @@ const Options = (): JSX.Element => {
             <div className="Box">
               <div className="Box-header">
                 <h2 className="Box-title">{t('options_about_title')}</h2>
-                <TooltipTrigger content={t('options_about_toolTip')} />
+                <TooltipTrigger overlayClassName="custom-tooltip-option" content={t('options_about_toolTip')} />
               </div>
               <div style={stacksStyleOptions.settingStack}>
                 <p>{t('options_about_description')}</p>

diff --git a/src/pages/Options/components/GitHubToken.tsx b/src/pages/Options/components/GitHubToken.tsx
@@ -86,7 +86,7 @@ const GitHubToken = () => {
     <div className="token-options Box">
       <div className="Box-header">
         <h2 className="Box-title">{t('github_account_configuration')}</h2>
-        <TooltipTrigger content={t('github_account_tooltip')} />
+        <TooltipTrigger overlayClassName="custom-tooltip-option" content={t('github_account_tooltip')} />
       </div>
       <p>{t('github_account_description')}</p>
       <div style={{ marginBottom: '10px' }} id="message-container"></div>
@@ -99,10 +99,8 @@ const GitHubToken = () => {
           style={{ marginRight: '10px', flex: 1 }}
           disabled={true}
         />
-        <button onClick={handleBindAccount} style={{ marginTop: '17px' }}>
-          {t('github_account_bind')}
-        </button>
-        <button onClick={handleUnbindAccount} style={{ marginTop: '17px' }}>
+        <button onClick={handleBindAccount}>{t('github_account_bind')}</button>
+        <button onClick={handleUnbindAccount} style={{ marginLeft: '10px' }}>
           {t('github_account_unbind')}
         </button>
       </div>

diff --git a/src/pages/Options/components/GiteeToken.tsx b/src/pages/Options/components/GiteeToken.tsx
@@ -89,7 +89,7 @@ const GiteeToken = () => {
     <div className="token-options Box">
       <div className="Box-header">
         <h2 className="Box-title">{t('gitee_account_configuration')}</h2>
-        <TooltipTrigger content={t('gitee_account_tooltip')} />
+        <TooltipTrigger overlayClassName="custom-tooltip-option" content={t('gitee_account_tooltip')} />
       </div>
       <p>{t('gitee_account_description')}</p>
       <div style={{ marginBottom: '10px' }} id="message-container"></div>
@@ -102,10 +102,8 @@ const GiteeToken = () => {
           style={{ marginRight: '10px', flex: 1 }}
           disabled={true}
         />
-        <button onClick={handleBindAccount} style={{ marginTop: '17px' }}>
-          {t('gitee_account_bind')}
-        </button>
-        <button onClick={handleUnbindAccount} style={{ marginTop: '17px' }}>
+        <button onClick={handleBindAccount}>{t('gitee_account_bind')}</button>
+        <button onClick={handleUnbindAccount} style={{ marginLeft: '10px' }}>
           {t('gitee_account_unbind')}
         </button>
       </div>