Merge pull request Magickbase#35 from WhiteMinds/fix/339_NeuronProblems

fix issues of neuron website

packages/neuron/next.config.mjs

@@ -29,6 +29,17 @@ const config = {
     ],
   },
 
+  sassOptions: {
+    logger: {
+      warn: function (message) {
+        console.warn(message)
+      },
+      debug: function (message) {
+        console.log(message)
+      },
+    },
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,

packages/neuron/public/locales/en/common.json

@@ -1,15 +1,15 @@
 {
+  "About Neuron": "About Neuron",
+  "Advanced Features": "Advanced Features",
   "All services are online": "All services are online",
   "Announcement": "Announcement",
   "Assets": "Assets",
   "Axon Explorer": "Axon Explorer",
-  "Backup wallet": "Backup wallet",
   "Beginner's Guide": "Beginner's Guide",
   "Change log": "Change log",
   "Changelog": "Changelog",
   "CKB Explorer": "CKB Explorer",
   "Copyright © 2023 Magickbase All Rights Reserved.": "Copyright © 2023 Magickbase All Rights Reserved.",
-  "Create wallet": "Create wallet",
   "Develop guide": "Develop guide",
   "Download Neuron": "Download Neuron",
   "Foundation": "Foundation",
@@ -20,14 +20,17 @@
   "Kuai": "Kuai",
   "Language": "Language",
   "Nervos": "Nervos",
+  "Neuron": "Neuron",
   "Neuron Wallet": "Neuron Wallet",
   "Public Node": "Public Node",
   "Report": "Report",
   "Safety": "Safety",
+  "Service Monitor": "Service Monitor",
   "Services": "Services",
   "Services status loading...": "Services status loading...",
   "Some services are offline": "Some services are offline",
+  "Status": "Status",
   "Sync": "Sync",
   "Transaction": "Transaction",
-  "Transfer and receive": "Transfer and receive"
+  "Usage Tutorial": "Usage Tutorial"
 }

packages/neuron/public/locales/zh/common.json

@@ -1,15 +1,15 @@
 {
+  "About Neuron": "关于 Neuron",
+  "Advanced Features": "高级功能",
   "All services are online": "所有服务均可用",
   "Announcement": "公告",
-  "Assets": "Assets",
+  "Assets": "资产",
   "Axon Explorer": "Axon 区块浏览器",
-  "Backup wallet": "备份钱包",
   "Beginner's Guide": "新手指南",
   "Change log": "更新日志",
   "Changelog": "更新日志",
   "CKB Explorer": "CKB 区块浏览器",
   "Copyright © 2023 Magickbase All Rights Reserved.": "Copyright © 2023 Magickbase 版权所有",
-  "Create wallet": "创建钱包",
   "Develop guide": "开发指南",
   "Download Neuron": "下载 Neuron",
   "Foundation": "基金会",
@@ -20,14 +20,17 @@
   "Kuai": "Kuai",
   "Language": "语言",
   "Nervos": "Nervos",
+  "Neuron": "Neuron",
   "Neuron Wallet": "Neuron 钱包",
   "Public Node": "公共节点",
-  "Report": "Report",
-  "Safety": "Safety",
+  "Report": "报告",
+  "Safety": "安全",
+  "Service Monitor": "服务监控",
   "Services": "服务",
-  "Services status loading...": "Services status loading...",
-  "Some services are offline": "Some services are offline",
+  "Services status loading...": "服务状态加载中...",
+  "Some services are offline": "部分服务不可用",
+  "Status": "状态",
   "Sync": "同步",
   "Transaction": "交易",
-  "Transfer and receive": "转账和接收"
+  "Usage Tutorial": "使用教程"
 }

packages/neuron/src/components/Button/index.module.scss

@@ -0,0 +1,76 @@
+@use 'sass:color';
+
+.button {
+  all: unset;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 24px;
+  border-radius: 7px;
+  cursor: pointer;
+}
+
+.contained {
+  color: var(--btnForeground);
+  background: var(--btnBackground);
+
+  &:disabled {
+    color: var(--btnForegroundDisabled);
+    background: var(--btnBackgroundDisabled);
+  }
+
+  &:not(:disabled):hover {
+    background: var(--btnBackgroundHover);
+  }
+
+  &:not(:disabled):active {
+    background: var(--btnBackgroundActive);
+  }
+}
+
+.outlined {
+  color: var(--btnBackground);
+  border: 2px solid var(--btnBackground);
+
+  &:disabled {
+    color: var(--btnBackgroundDisabled);
+    border-color: var(--btnBackgroundDisabled);
+  }
+
+  &:not(:disabled):hover {
+    color: var(--btnBackgroundHover);
+    border-color: var(--btnBackgroundHover);
+  }
+
+  &:not(:disabled):active {
+    color: var(--btnBackgroundActive);
+    border-color: var(--btnBackgroundActive);
+  }
+}
+
+.text {
+  padding: 6px 24px;
+  color: var(--btnBackground);
+
+  &:disabled {
+    color: var(--btnBackgroundDisabled);
+  }
+
+  &:not(:disabled):hover {
+    color: var(--btnBackgroundHover);
+  }
+
+  &:not(:disabled):active {
+    color: var(--btnBackgroundActive);
+  }
+}
+
+.themeBlackWhite {
+  --btnForeground: #000;
+  --btnForegroundDisabled: #{rgba(#000, 0.5)};
+  --btnBackground: #f5f5f5;
+  --btnBackgroundDisabled: #{color.mix(#fff, #f5f5f5, $weight: 50%)};
+  --btnBackgroundHover: #{color.mix(#000, #f5f5f5, $weight: 20%)};
+  --btnBackgroundActive: #{color.mix(#000, #f5f5f5, $weight: 40%)};
+}

packages/neuron/src/components/Button/index.tsx

@@ -0,0 +1,38 @@
+/**
+ * Currently, there are no complex button scenarios, so a simple implementation is sufficient.
+ * If the requirements cannot be met in the future, consider using a third-party component library.
+ */
+import { ComponentProps, FC } from 'react'
+import clsx from 'clsx'
+import styles from './index.module.scss'
+import presets from '../../styles/presets.module.scss'
+
+export type ButtonVariant = 'contained' | 'outlined' | 'text'
+
+export interface ButtonProps extends ComponentProps<'button'> {
+  variant?: ButtonVariant
+  theme?: 'light' | 'dark' | 'blackwhite'
+}
+
+export const Button: FC<ButtonProps> = ({ children, variant = 'contained', theme, ...elProps }) => {
+  return (
+    <button
+      {...elProps}
+      className={clsx(
+        styles.button,
+        {
+          [styles.contained ?? '']: variant === 'contained',
+          [styles.outlined ?? '']: variant === 'outlined',
+          [styles.text ?? '']: variant === 'text',
+
+          [presets.themeLight ?? '']: theme === 'light',
+          [presets.themeDark ?? '']: theme === 'dark',
+          [styles.themeBlackWhite ?? '']: theme === 'blackwhite',
+        },
+        elProps.className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}

packages/neuron/src/components/Contacts/index.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, FC } from 'react'
 import Link from 'next/link'
 import clsx from 'clsx'
-import IconTwitter from './twitter.svg'
+import IconX from './x.svg'
 import IconDiscord from './discord.svg'
 import IconGithub from './github.svg'
 import styles from './index.module.scss'
@@ -14,7 +14,7 @@ export const Contacts: FC<ComponentProps<'div'> & { linkClass?: string; iconClas
   return (
     <div {...divProps} className={clsx(styles.contacts, divProps.className)}>
       <Link className={linkClass} href="https://twitter.com/magickbase">
-        <IconTwitter className={iconClass} />
+        <IconX className={iconClass} />
       </Link>
       <Link className={linkClass} href="https://discord.gg/GBYYgBA9s7">
         <IconDiscord className={iconClass} />

packages/neuron/src/components/Footer/index.module.scss

@@ -5,7 +5,7 @@
   border-top: 1px solid #2e2e2e;
 
   @media (max-width: $mobileBreakPoint) {
-    padding: 50px var(--contentWrapperPadding) 70px var(--contentWrapperPadding);
+    padding: 48px var(--contentWrapperPadding) 104px var(--contentWrapperPadding);
   }
 
   .content {
@@ -38,16 +38,22 @@
 
 .serversState {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
   margin-top: 24px;
   color: #00cc9b;
   font-size: 14px;
   line-height: 16px;
 
+  .title {
+    color: #f5f5f5;
+    font-weight: 600;
+  }
+
   .dot {
     width: 6px;
     height: 6px;
+    margin-left: 4px;
     background: #00cc9b;
     border-radius: 50%;
   }
@@ -60,6 +66,26 @@
       background: chocolate;
     }
   }
+
+  @media (max-width: $mobileBreakPoint) {
+    margin-top: 40px;
+
+    .title {
+      font-size: 16px;
+    }
+  }
+}
+
+.serviceMonitor {
+  margin-top: 24px;
+  color: #f5f5f5;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+
+  @media (max-width: $mobileBreakPoint) {
+    font-size: 16px;
+  }
 }
 
 .contacts {

packages/neuron/src/components/Footer/index.tsx

@@ -35,12 +35,15 @@ export const Footer: FC<FooterProps> = props => {
                 aggregateStateQuery.data === 'downtime' || aggregateStateQuery.data === 'degraded',
             })}
           >
+            <span className={styles.title}>{t('Status')}</span>
             <div className={styles.dot} />
             <Link href="https://status.magickbase.com/" target="_blank">
               {serviceStateText}
             </Link>
           </div>
 
+          <div className={styles.serviceMonitor}>{t('Service Monitor')}</div>
+
           <Contacts className={styles.contacts} />
 
           {!isMobile && <div className={styles.copyright}>{t('Copyright © 2023 Magickbase All Rights Reserved.')}</div>}

packages/neuron/src/components/Header/index.tsx

@@ -101,6 +101,13 @@ const MenuDialog: FC = () => {
 
           <OverlayScrollbarsComponent options={{ scrollbars: { autoHide: 'never' } }}>
             <div className={styles.content}>
+              <div className={styles.title}>{t('Neuron')}</div>
+              <div className={styles.links}>
+                <LinkWithEffect href="/changelog">{t('Changelog')}</LinkWithEffect>
+                <LinkWithEffect href="/help-center">{t('Help Center')}</LinkWithEffect>
+                <LinkWithEffect href="/download">{t('Download Neuron')}</LinkWithEffect>
+              </div>
+
               <LinkWithEffect className={styles.title} href="/">
                 {t('Home')}
               </LinkWithEffect>

packages/neuron/src/components/Page/index.tsx

@@ -3,6 +3,8 @@ import { clsx } from 'clsx'
 import { Footer, FooterProps } from '../Footer'
 import { Header, HeaderProps } from '../Header'
 import styles from './index.module.scss'
+import { useBodyClass } from '../../hooks'
+import presets from '../../styles/presets.module.scss'
 
 type PageProps = Omit<ComponentProps<'div'>, 'children'> & {
   children?:
@@ -18,6 +20,13 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(function Page(props, r
   const { children, contentWrapper = true, className, ...divProps } = props
   const contentWrapperProps = typeof contentWrapper === 'object' ? contentWrapper : {}
 
+  // _document.page.tsx adds a theme class name to the HTML element during initialization, but this class name remains fixed and does not change.
+  // In order to switch themes correctly when navigating between routes, it is necessary to add a theme class name to the body element.
+  // Currently, except for the post detail page, all other pages have a fixed dark mode and cannot switch color modes.
+  // Since the post detail page does not use the Page component, a fixed dark mode class name is applied here.
+  // TODO: This may not be a good code implementation, but we should consider refactoring it after having multiple pages with switchable color modes.
+  useBodyClass([presets.themeDark ?? ''])
+
   const finalChildren =
     typeof children === 'function' ? (
       children({

packages/neuron/src/components/TableOfContents/index.tsx

@@ -3,6 +3,7 @@ import React, {
   createContext,
   FC,
   ReactNode,
+  RefAttributes,
   RefCallback,
   useCallback,
   useContext,
@@ -138,7 +139,15 @@ export const TOCContextProvider: FC<{ children?: ReactNode | ((value: TOCContext
   )
 }
 
-export const TOCItem: FC<ComponentProps<'div'> & { id: string; titleInTOC: string }> = props => {
+type TOCElementProps = { id: string }
+
+export const TOCItem: FC<
+  Omit<ComponentProps<'div'>, 'children'> &
+    TOCElementProps & {
+      titleInTOC: string
+      children?: ReactNode | ((props: TOCElementProps & { ref: RefAttributes<HTMLHeadingElement>['ref'] }) => ReactNode)
+    }
+> = props => {
   const { children, id, titleInTOC, ...divProps } = props
   const ref = useRef<HTMLDivElement>(null)
 
@@ -152,8 +161,12 @@ export const TOCItem: FC<ComponentProps<'div'> & { id: string; titleInTOC: strin
     return () => removeTOCItem(el)
   }, [addTOCItem, removeTOCItem, titleInTOC])
 
-  return (
-    <div ref={ref} id={encodeURIComponent(id.toLowerCase().replaceAll(' ', '_'))} {...divProps}>
+  const finalId = encodeURIComponent(id.toLowerCase().replaceAll(' ', '_'))
+
+  return typeof children === 'function' ? (
+    children({ ref, id: finalId })
+  ) : (
+    <div ref={ref} id={finalId} {...divProps}>
       {children}
     </div>
   )