mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 03:21:39 +03:00
feat: fix style for dark mode
This commit is contained in:
parent
f3f8fd78de
commit
857e2d82d1
@ -1,21 +1,12 @@
|
|||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { Box, Grid, Typography } from '@mui/joy';
|
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) => {
|
import 'github-markdown-css/github-markdown-light.css';
|
||||||
i18n.changeLanguage(event);
|
|
||||||
};
|
import AboutText from './about.mdx';
|
||||||
|
import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './common';
|
||||||
|
import KeepUpdate from './keeupdate.png';
|
||||||
|
|
||||||
|
export const AboutUs = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AFFiNEHeader />
|
<AFFiNEHeader />
|
||||||
|
@ -12,7 +12,7 @@ import { LogoIcon } from '@toeverything/components/icons';
|
|||||||
import { useMediaQuery } from '@mui/material';
|
import { useMediaQuery } from '@mui/material';
|
||||||
|
|
||||||
import CollaborationImage from './collaboration.png';
|
import CollaborationImage from './collaboration.png';
|
||||||
import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './Common';
|
import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './common';
|
||||||
import { GitHub } from './Icons';
|
import { GitHub } from './Icons';
|
||||||
import PageImage from './page.png';
|
import PageImage from './page.png';
|
||||||
import ShapeImage from './shape.png';
|
import ShapeImage from './shape.png';
|
||||||
|
@ -1,27 +1,17 @@
|
|||||||
|
/* eslint-disable max-lines */
|
||||||
/* eslint-disable @typescript-eslint/naming-convention */
|
/* eslint-disable @typescript-eslint/naming-convention */
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { Box, Button, Grid, Typography } from '@mui/joy';
|
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 GitHubIcon from '@mui/icons-material/GitHub';
|
||||||
import RedditIcon from '@mui/icons-material/Reddit';
|
import RedditIcon from '@mui/icons-material/Reddit';
|
||||||
import TelegramIcon from '@mui/icons-material/Telegram';
|
import TelegramIcon from '@mui/icons-material/Telegram';
|
||||||
import TwitterIcon from '@mui/icons-material/Twitter';
|
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')({
|
import { DiscordIcon, GitHub } from '../Icons';
|
||||||
maxWidth: '100%',
|
import LogoImage from '../logo.png';
|
||||||
objectFit: 'contain',
|
import { AFFiNEImage } from './index';
|
||||||
});
|
|
||||||
|
|
||||||
export const AFFiNEFooter = ({
|
export const AFFiNEFooter = ({
|
||||||
keepupdate = true,
|
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>
|
|
||||||
);
|
|
||||||
};
|
|
95
apps/venus/src/app/common/Header.tsx
Normal file
95
apps/venus/src/app/common/Header.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
10
apps/venus/src/app/common/index.tsx
Normal file
10
apps/venus/src/app/common/index.tsx
Normal file
@ -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';
|
Loading…
Reference in New Issue
Block a user