From 857e2d82d1bcc996801affc659d919e066f68610 Mon Sep 17 00:00:00 2001 From: DarkSky Date: Tue, 6 Sep 2022 17:00:51 +0800 Subject: [PATCH] feat: fix style for dark mode --- apps/venus/src/app/AboutUs.tsx | 23 ++-- apps/venus/src/app/App.tsx | 2 +- .../src/app/{Common.tsx => common/Footer.tsx} | 101 +----------------- apps/venus/src/app/common/Header.tsx | 95 ++++++++++++++++ apps/venus/src/app/common/index.tsx | 10 ++ 5 files changed, 117 insertions(+), 114 deletions(-) rename apps/venus/src/app/{Common.tsx => common/Footer.tsx} (80%) create mode 100644 apps/venus/src/app/common/Header.tsx create mode 100644 apps/venus/src/app/common/index.tsx diff --git a/apps/venus/src/app/AboutUs.tsx b/apps/venus/src/app/AboutUs.tsx index b20420a556..18eea69853 100644 --- a/apps/venus/src/app/AboutUs.tsx +++ b/apps/venus/src/app/AboutUs.tsx @@ -1,21 +1,12 @@ -import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; - import { Box, Grid, Typography } from '@mui/joy'; -// eslint-disable-next-line no-restricted-imports -import { useMediaQuery } from '@mui/material'; -import 'github-markdown-css'; -import AboutText from './about.mdx'; -import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './Common'; -import KeepUpdate from './keeupdate.png'; -export const AboutUs = () => { - const matches = useMediaQuery('(max-width: 1024px)'); - const navigate = useNavigate(); - const { i18n } = useTranslation(); - const changeLanguage = (event: any) => { - i18n.changeLanguage(event); - }; +import 'github-markdown-css/github-markdown-light.css'; + +import AboutText from './about.mdx'; +import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './common'; +import KeepUpdate from './keeupdate.png'; + +export const AboutUs = () => { return ( <> diff --git a/apps/venus/src/app/App.tsx b/apps/venus/src/app/App.tsx index df1e8be681..347e0cbf32 100644 --- a/apps/venus/src/app/App.tsx +++ b/apps/venus/src/app/App.tsx @@ -12,7 +12,7 @@ import { LogoIcon } from '@toeverything/components/icons'; import { useMediaQuery } from '@mui/material'; import CollaborationImage from './collaboration.png'; -import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './Common'; +import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './common'; import { GitHub } from './Icons'; import PageImage from './page.png'; import ShapeImage from './shape.png'; diff --git a/apps/venus/src/app/Common.tsx b/apps/venus/src/app/common/Footer.tsx similarity index 80% rename from apps/venus/src/app/Common.tsx rename to apps/venus/src/app/common/Footer.tsx index 2b44828161..f51d7f78ed 100644 --- a/apps/venus/src/app/Common.tsx +++ b/apps/venus/src/app/common/Footer.tsx @@ -1,27 +1,17 @@ +/* eslint-disable max-lines */ /* eslint-disable @typescript-eslint/naming-convention */ import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; import { Box, Button, Grid, Typography } from '@mui/joy'; -import Option from '@mui/joy/Option'; -import Select from '@mui/joy/Select'; -import { styled } from '@mui/joy/styles'; -// eslint-disable-next-line no-restricted-imports -import { useMediaQuery } from '@mui/material'; import GitHubIcon from '@mui/icons-material/GitHub'; import RedditIcon from '@mui/icons-material/Reddit'; import TelegramIcon from '@mui/icons-material/Telegram'; import TwitterIcon from '@mui/icons-material/Twitter'; -import { options } from './i18n'; -import { DiscordIcon, GitHub } from './Icons'; -// eslint-disable-next-line no-restricted-imports -import LogoImage from './logo.png'; -export const AFFiNEImage = styled('img')({ - maxWidth: '100%', - objectFit: 'contain', -}); +import { DiscordIcon, GitHub } from '../Icons'; +import LogoImage from '../logo.png'; +import { AFFiNEImage } from './index'; export const AFFiNEFooter = ({ keepupdate = true, @@ -388,86 +378,3 @@ export const AFFiNEFooter = ({ ); }; - -export const AFFiNEHeader = () => { - const matches = useMediaQuery('(max-width: 1024px)'); - const navigate = useNavigate(); - const { i18n } = useTranslation(); - - const changeLanguage = (event: any) => { - i18n.changeLanguage(event); - }; - const matchesIPAD = useMediaQuery('(max-width: 768px)'); - return ( - - - - - - - - - - - - ); -}; diff --git a/apps/venus/src/app/common/Header.tsx b/apps/venus/src/app/common/Header.tsx new file mode 100644 index 0000000000..a1fb6aa995 --- /dev/null +++ b/apps/venus/src/app/common/Header.tsx @@ -0,0 +1,95 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; + +import { Button, Grid } from '@mui/joy'; +import Option from '@mui/joy/Option'; +import Select from '@mui/joy/Select'; +// eslint-disable-next-line no-restricted-imports +import { useMediaQuery } from '@mui/material'; + +import { options } from '../i18n'; +import { GitHub } from '../Icons'; + +export const AFFiNEHeader = () => { + const matches = useMediaQuery('(max-width: 1024px)'); + const navigate = useNavigate(); + const { i18n } = useTranslation(); + + const changeLanguage = (event: any) => { + i18n.changeLanguage(event); + }; + const matchesIPAD = useMediaQuery('(max-width: 768px)'); + return ( + + + + + + + + + + + + ); +}; diff --git a/apps/venus/src/app/common/index.tsx b/apps/venus/src/app/common/index.tsx new file mode 100644 index 0000000000..ea2457a837 --- /dev/null +++ b/apps/venus/src/app/common/index.tsx @@ -0,0 +1,10 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import { styled } from '@mui/joy/styles'; + +export const AFFiNEImage = styled('img')({ + maxWidth: '100%', + objectFit: 'contain', +}); + +export { AFFiNEFooter } from './Footer'; +export { AFFiNEHeader } from './Header';