diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 427171461a..4e5923cd0e 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -14,6 +14,7 @@ import { import { useCallback, useMemo } from 'react'; import { EditorBoardSwitcher } from './EditorBoardSwitcher'; import { fsApiSupported } from './FileSystem'; +import { Logo } from './Logo'; import { CurrentPageTitle } from './Title'; export const LayoutHeader = () => { @@ -44,7 +45,7 @@ export const LayoutHeader = () => { - + diff --git a/libs/components/layout/src/header/Logo/DiscordIcon.tsx b/libs/components/layout/src/header/Logo/DiscordIcon.tsx new file mode 100644 index 0000000000..bae0c972a4 --- /dev/null +++ b/libs/components/layout/src/header/Logo/DiscordIcon.tsx @@ -0,0 +1,25 @@ +import { SvgIcon } from '@toeverything/components/ui'; + +export const DiscordIcon = (props: any) => { + return ( + + + + + + + + + + + ); +}; diff --git a/libs/components/layout/src/header/Logo/InfoModal.tsx b/libs/components/layout/src/header/Logo/InfoModal.tsx new file mode 100644 index 0000000000..ebd69c0084 --- /dev/null +++ b/libs/components/layout/src/header/Logo/InfoModal.tsx @@ -0,0 +1,94 @@ +import CloseIcon from '@mui/icons-material/Close'; +import { MuiModal, styled } from '@toeverything/components/ui'; +import affineTextLogo from './affine-text-logo.png'; +import { ModalContent } from './ModalContent'; + +interface ModalProps { + open: boolean; + onClose: () => void; +} + +export const InfoModal = ({ open, onClose }: ModalProps) => { + return ( + + +
+ + + live demo + + onClose?.()}> + + +
+ +
Copyright © 2022 AFFINE
+ + + ); +}; + +const Container = styled('div')({ + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '60%', + maxWidth: '1000px', + minWidth: '840px', + borderRadius: '28px', + backgroundColor: '#fff', + padding: '48px 48px 40px 48px', + + '&:focus-visible': { + outline: 0, + }, +}); + +const Header = styled('div')({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', +}); + +const HeaderLeft = styled('div')({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', +}); + +const StyledImg = styled('img')({ + height: '22px', +}); + +const LivedemoContainer = styled('span')(({ theme }) => ({ + display: 'inline-block', + border: `1px solid ${theme.affine.palette.primary}`, + color: theme.affine.palette.primary, + fontSize: '16px', + lineHeight: '22px', + padding: '2px 10px', + borderRadius: '10px', + marginLeft: '18px', +})); + +const CloseContainer = styled('div')(({ theme }) => ({ + cursor: 'pointer', + width: '32px', + height: '32px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: '6px', + + '&:hover': { + backgroundColor: theme.affine.palette.tagHover, + }, +})); + +const Footer = styled('div')(({ theme }) => ({ + textAlign: 'center', + fontSize: '14px', + lineHeight: '19px', + color: theme.affine.palette.primaryText, +})); diff --git a/libs/components/layout/src/header/Logo/Logo.tsx b/libs/components/layout/src/header/Logo/Logo.tsx new file mode 100644 index 0000000000..9b1a8d139a --- /dev/null +++ b/libs/components/layout/src/header/Logo/Logo.tsx @@ -0,0 +1,13 @@ +import { useState } from 'react'; +import { InfoModal } from './InfoModal'; +import { LogoIcon } from './LogoIcon'; + +export const Logo = () => { + const [open, setOpen] = useState(false); + return ( + <> + setOpen(true)} /> + setOpen(false)} /> + + ); +}; diff --git a/libs/components/layout/src/header/Logo/LogoIcon.tsx b/libs/components/layout/src/header/Logo/LogoIcon.tsx new file mode 100644 index 0000000000..4702d45222 --- /dev/null +++ b/libs/components/layout/src/header/Logo/LogoIcon.tsx @@ -0,0 +1,9 @@ +import { LogoIcon as _LogoIcon } from '@toeverything/components/icons'; +import { styled } from '@toeverything/components/ui'; + +export const LogoIcon = styled(_LogoIcon)(({ theme }) => { + return { + color: theme.affine.palette.primary, + cursor: 'pointer', + }; +}); diff --git a/libs/components/layout/src/header/Logo/ModalContent.tsx b/libs/components/layout/src/header/Logo/ModalContent.tsx new file mode 100644 index 0000000000..a13c96dc63 --- /dev/null +++ b/libs/components/layout/src/header/Logo/ModalContent.tsx @@ -0,0 +1,166 @@ +import GitHubIcon from '@mui/icons-material/GitHub'; +import { LogoIcon } from '@toeverything/components/icons'; + +import RedditIcon from '@mui/icons-material/Reddit'; +import TelegramIcon from '@mui/icons-material/Telegram'; +import TwitterIcon from '@mui/icons-material/Twitter'; +import { DiscordIcon } from './DiscordIcon'; + +import { styled } from '@toeverything/components/ui'; + +export const ModalContent = () => { + return ( + + + + + Official Website AFFiNE.pro + + + + Check Our Docs Open Source + + + + +
Get in touch!
+
Join our community.
+ + + + + + + + + + ); +}; + +const Container = styled('div')({ + margin: '80px 0 100px 0', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', +}); + +const RightContainer = styled('div')({ + paddingRight: '132px', +}); + +const LeftContainer = styled('div')` + padding-left: 132px; + + &::before { + content: ''; + position: absolute; + left: 158px; + display: block; + width: 122px; + height: 122px; + background-color: #dda82a; + opacity: 0.45; + filter: blur(78px); + } + + &::after { + content: ''; + position: absolute; + top: 330px; + left: 280px; + display: block; + width: 122px; + height: 122px; + background-color: #4461f2; + filter: blur(78px); + } +`; + +// const LeftContainer = styled('div')({ +// paddingLeft: '132px', + +// '&::before': { +// content: '*', +// display: 'block', +// width: '122px', +// height: '122px', +// backgroundColor: '#dda82a', +// opacity: 0.45, +// filter: 'blur(78px)', +// }, +// }); + +const LeftButtonContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + color: theme.affine.palette.primary, + height: '110px', + + '& + &': { + marginTop: '50px', + }, +})); + +const LeftGithubIcon = styled(GitHubIcon)({ + fontSize: '50px !important', +}); + +const LeftLogoIcon = styled(LogoIcon)({ + fontSize: '50px !important', +}); + +const LeftButtonText = styled('span')({ + color: '#000', + fontSize: '24px', + lineHeight: '36px', + width: '200px', + marginLeft: '40px', +}); + +const RightTitle = styled('div')({ + paddingLeft: '24px', + marginBottom: '24px', + fontSize: '18px', + lineHeight: '25px', + color: '#000', +}); + +const Button = styled('div')(({ theme }) => ({ + cursor: 'pointer', + padding: '6px 24px', + fontSize: '18px', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + borderRadius: '10px', + color: theme.affine.palette.primary, + + '&:hover': { + backgroundColor: '#EDF3FF', + }, + + '& + &': { + marginTop: '8px', + }, +})); + +const ButtonText = styled('span')(({ theme }) => ({ + marginLeft: '30px', + color: '#000100', +})); diff --git a/libs/components/layout/src/header/Logo/affine-text-logo.png b/libs/components/layout/src/header/Logo/affine-text-logo.png new file mode 100644 index 0000000000..a136ab17fa Binary files /dev/null and b/libs/components/layout/src/header/Logo/affine-text-logo.png differ diff --git a/libs/components/layout/src/header/Logo/index.ts b/libs/components/layout/src/header/Logo/index.ts new file mode 100644 index 0000000000..33af505338 --- /dev/null +++ b/libs/components/layout/src/header/Logo/index.ts @@ -0,0 +1 @@ +export { Logo } from './Logo';