diff --git a/src/components/TooltipTrigger/index.tsx b/src/components/TooltipTrigger/index.tsx index dc725077..08cc46ea 100644 --- 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 = ({ size = 20, iconColor = '#FFFFFF', - tooltipBackground = '#FFFFFF', - tooltipFontColor = '#242A2E', content, + overlayClassName = 'custom-tooltip', }) => ( - {content}} color={tooltipBackground}> + {content}} overlayClassName={overlayClassName}> diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index d3e69495..79fc552b 100644 --- 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 index 36dee6a4..1b35a86c 100644 --- 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 index 182185a2..c2988e34 100644 --- 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 deleted file mode 100644 index 749682f5..00000000 --- a/src/pages/Options/Options.css +++ /dev/null @@ -1,116 +0,0 @@ -.container { - width: 98vw; - min-height: calc(100vh - 100px); - margin-top: 10px; - opacity: 1; - background: white; - box-shadow: - rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, - rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, - rgba(0, 0, 0, 0.2) 0px 3px 1px -2px; - transition: all 0.2s ease 0s; - border-radius: 3px; - overflow: hidden; -} - -.Box { - width: 75vw; - min-width: 350px; - max-width: 600px; - background-color: white; - border: 1px solid #e1e4e8; - 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: 1px solid #e1e4e8; - 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: blue; -} - -.token-options { - width: 75vw; - min-width: 350px; - max-width: 600px; - background-color: white; - border: 1px solid #e1e4e8; - border-radius: 6px; - margin-top: -10px; -} - -.token-options .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: 1px solid #e1e4e8; - border-top-left-radius: 6px; - border-top-right-radius: 6px; -} - -.token-options .Box-title { - font-size: 18px; - font-weight: 600; - margin-right: 8px; -} - -.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; -} - -.token-options button { - padding: 8px 8px; - margin: 0 10px 20px; - background-color: #007bff; - color: #fff; - border: none; - border-radius: 4px; - cursor: pointer; -} - -.token-options button:hover { - background-color: #0056b3; -} diff --git a/src/pages/Options/Options.tsx b/src/pages/Options/Options.tsx index 75700677..61448642 100644 --- 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 => { -

Hypercrx

+

HyperCRX

{`version ${version}`} @@ -80,7 +79,7 @@ const Options = (): JSX.Element => {

{t('options_locale_title')}

- +

{t('options_locale_toolTip')} :

@@ -111,7 +110,7 @@ const Options = (): JSX.Element => {

{t('options_components_title')}

- +

{t('options_components_toolTip')} :

@@ -155,7 +154,7 @@ const Options = (): JSX.Element => {

{t('options_about_title')}

- +

{t('options_about_description')}

diff --git a/src/pages/Options/components/GitHubToken.tsx b/src/pages/Options/components/GitHubToken.tsx index 4b3f9f4e..4cf69703 100644 --- a/src/pages/Options/components/GitHubToken.tsx +++ b/src/pages/Options/components/GitHubToken.tsx @@ -86,7 +86,7 @@ const GitHubToken = () => {

{t('github_account_configuration')}

- +

{t('github_account_description')}

@@ -99,10 +99,8 @@ const GitHubToken = () => { style={{ marginRight: '10px', flex: 1 }} disabled={true} /> - - +
diff --git a/src/pages/Options/components/GiteeToken.tsx b/src/pages/Options/components/GiteeToken.tsx index 97337ab7..841accef 100644 --- a/src/pages/Options/components/GiteeToken.tsx +++ b/src/pages/Options/components/GiteeToken.tsx @@ -89,7 +89,7 @@ const GiteeToken = () => {

{t('gitee_account_configuration')}

- +

{t('gitee_account_description')}

@@ -102,10 +102,8 @@ const GiteeToken = () => { style={{ marginRight: '10px', flex: 1 }} disabled={true} /> - - +
diff --git a/src/pages/Options/index.css b/src/pages/Options/index.css index 102d8be7..a7f06e6c 100644 --- a/src/pages/Options/index.css +++ b/src/pages/Options/index.css @@ -1,19 +1,169 @@ -.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: 8px 8px; + cursor: pointer; + border-radius: 2px; +} + +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; +} +.custom-tooltip-option .ant-tooltip-inner { + background-color: #333333 !important; + color: #ffffff !important; +} + +.custom-tooltip-option .ant-tooltip-arrow::before { + background-color: #333333 !important; +}