feat: fix style for dark mode

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 (
         <>
             <AFFiNEHeader />

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';

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 (
-        <Grid
-            container
-            spacing={2}
-            sx={{
-                maxWidth: '1280px',
-                margin: 'auto',
-            }}
-        >
-            <Grid xs={6}>
-                <Button
-                    size="lg"
-                    variant="plain"
-                    sx={{
-                        padding: matches ? '0' : '0 0.5em',
-                        ':hover': { backgroundColor: 'unset' },
-                        fontSize: '24px',
-                        '@media (max-width: 1024px)': {
-                            fontSize: '16px',
-                        },
-                    }}
-                    onClick={() => navigate('/')}
-                >
-                    AFFiNE
-                </Button>
-            </Grid>
-            <Grid xs={6} sx={{ display: 'flex', justifyContent: 'right' }}>
-                <GitHub flat />
-                <Button
-                    onClick={() => window.open('https://blog.affine.pro')}
-                    variant="plain"
-                    sx={{
-                        padding: matches ? '0' : '0 0.5em',
-                        ':hover': { backgroundColor: 'unset' },
-                        fontSize: '24px',
-                        '@media (max-width: 1024px)': {
-                            fontSize: '16px',
-                        },
-                    }}
-                    size="lg"
-                >
-                    Blog
-                </Button>
-                <Button
-                    onClick={() => navigate('/aboutus')}
-                    variant="plain"
-                    sx={{
-                        padding: matches ? '0' : '0 0.5em',
-                        ':hover': { backgroundColor: 'unset' },
-                        fontSize: '24px',
-                        '@media (max-width: 1024px)': {
-                            fontSize: '16px',
-                        },
-                    }}
-                    size="lg"
-                >
-                    About Us
-                </Button>
-                <Select
-                    defaultValue="en"
-                    sx={{ display: matchesIPAD ? 'none' : 'intial' }}
-                    onChange={changeLanguage}
-                >
-                    {options.map(option => (
-                        <Option key={option.value} value={option.value}>
-                            {option.text}
-                        </Option>
-                    ))}
-                </Select>
-            </Grid>
-        </Grid>
-    );
-};

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 (
+        <Grid
+            container
+            spacing={2}
+            sx={{
+                maxWidth: '1280px',
+                margin: 'auto',
+            }}
+        >
+            <Grid xs={6}>
+                <Button
+                    size="lg"
+                    variant="plain"
+                    sx={{
+                        padding: matches ? '0' : '0 0.5em',
+                        ':hover': { backgroundColor: 'unset' },
+                        fontSize: '24px',
+                        '@media (max-width: 1024px)': {
+                            fontSize: '16px',
+                        },
+                    }}
+                    onClick={() => navigate('/')}
+                >
+                    AFFiNE
+                </Button>
+            </Grid>
+            <Grid xs={6} sx={{ display: 'flex', justifyContent: 'right' }}>
+                <GitHub flat />
+                <Button
+                    onClick={() => window.open('https://blog.affine.pro')}
+                    variant="plain"
+                    sx={{
+                        padding: matches ? '0' : '0 0.5em',
+                        ':hover': { backgroundColor: 'unset' },
+                        fontSize: '24px',
+                        '@media (max-width: 1024px)': {
+                            fontSize: '16px',
+                        },
+                    }}
+                    size="lg"
+                >
+                    Blog
+                </Button>
+                <Button
+                    onClick={() => navigate('/aboutus')}
+                    variant="plain"
+                    sx={{
+                        padding: matches ? '0' : '0 0.5em',
+                        ':hover': { backgroundColor: 'unset' },
+                        fontSize: '24px',
+                        '@media (max-width: 1024px)': {
+                            fontSize: '16px',
+                        },
+                    }}
+                    size="lg"
+                >
+                    About Us
+                </Button>
+                <Select
+                    defaultValue="en"
+                    sx={{ display: matchesIPAD ? 'none' : 'intial' }}
+                    onChange={changeLanguage}
+                >
+                    {options.map(option => (
+                        <Option key={option.value} value={option.value}>
+                            {option.text}
+                        </Option>
+                    ))}
+                </Select>
+            </Grid>
+        </Grid>
+    );
+};

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';