diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx index 59412e54cd..671204c894 100644 --- a/packages/app/src/components/Header/index.tsx +++ b/packages/app/src/components/Header/index.tsx @@ -8,6 +8,9 @@ import { StyledHeaderRightSide, StyledMoreMenuItem, IconButton, + StyledHeaderContainer, + StyledBrowserWarning, + StyledCloseButton, } from './styles'; import { Popover } from '@/ui/popover'; import { useEditor } from '@/components/editor-provider'; @@ -15,7 +18,8 @@ import EditorModeSwitch from '@/components/editor-mode-switch'; import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons'; import ThemeModeSwitch from '@/components/theme-mode-switch'; import { useModal } from '@/components/global-modal-provider'; - +import CloseIcon from '@mui/icons-material/Close'; +import { getWarningMessage, shouldShowWarning } from './utils'; const PopoverContent = () => { const { editor, mode, setMode } = useEditor(); return ( @@ -48,9 +52,22 @@ const PopoverContent = () => { ); }; +const BrowserWarning = ({ onClose }: { onClose: () => void }) => { + return ( + + {getWarningMessage()} + + + + + ); +}; + export const Header = () => { const [title, setTitle] = useState(''); const [isHover, setIsHover] = useState(false); + const [showWarning, setShowWarning] = useState(shouldShowWarning()); + const { contactModalHandler } = useModal(); const { editor } = useEditor(); @@ -62,10 +79,14 @@ export const Header = () => { }); } }, [editor]); - return ( - <> - + + { + setShowWarning(false); + }} + /> + { contactModalHandler(true); @@ -104,6 +125,6 @@ export const Header = () => { - + ); }; diff --git a/packages/app/src/components/Header/styles.ts b/packages/app/src/components/Header/styles.ts index a4e4e8ee1e..afb25abfde 100644 --- a/packages/app/src/components/Header/styles.ts +++ b/packages/app/src/components/Header/styles.ts @@ -1,17 +1,29 @@ -import { displayFlex, styled } from '@/styles'; +import { absoluteCenter, displayFlex, styled } from '@/styles'; -export const StyledHeader = styled('div')({ - height: '60px', - width: '100vw', - ...displayFlex('space-between', 'center'), - background: 'var(--affine-page-background)', - transition: 'background-color 0.5s', - position: 'fixed', - left: '0', - top: '0', - padding: '0 22px', - zIndex: '10', -}); +export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>( + ({ hasWarning }) => { + return { + position: 'relative', + height: hasWarning ? '96px' : '60px', + }; + } +); +export const StyledHeader = styled.div<{ hasWarning: boolean }>( + ({ hasWarning, theme }) => { + return { + height: '60px', + width: '100vw', + ...displayFlex('space-between', 'center'), + background: 'var(--affine-page-background)', + transition: 'background-color 0.5s', + position: 'fixed', + left: '0', + top: hasWarning ? '36px' : '0', + padding: '0 22px', + zIndex: theme.zIndex.modal, + }; + } +); export const StyledTitle = styled('div')(({ theme }) => ({ width: '720px', @@ -83,3 +95,37 @@ export const IconButton = styled('div')(({ theme }) => { }, }; }); + +export const StyledBrowserWarning = styled.div(({ theme }) => { + return { + backgroundColor: theme.colors.warningBackground, + color: theme.colors.warningColor, + height: '36px', + width: '100vw', + fontSize: theme.font.sm, + position: 'fixed', + left: '0', + top: '0', + ...displayFlex('center', 'center'), + }; +}); + +export const StyledCloseButton = styled.div(({ theme }) => { + return { + width: '36px', + height: '36px', + color: theme.colors.iconColor, + cursor: 'pointer', + ...displayFlex('center', 'center'), + position: 'absolute', + right: '15px', + top: '0', + + svg: { + width: '15px', + height: '15px', + position: 'relative', + zIndex: 1, + }, + }; +}); diff --git a/packages/app/src/components/Header/utils.tsx b/packages/app/src/components/Header/utils.tsx new file mode 100644 index 0000000000..b93cacef93 --- /dev/null +++ b/packages/app/src/components/Header/utils.tsx @@ -0,0 +1,37 @@ +import getIsMobile from '@/utils/get-is-mobile'; +// Inspire by https://stackoverflow.com/a/4900484/8415727 +const getChromeVersion = () => { + const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./); + return raw ? parseInt(raw[2], 10) : false; +}; +const getIsChrome = () => { + return ( + /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) + ); +}; +const minimumChromeVersion = 102; + +export const shouldShowWarning = () => { + return ( + !getIsMobile() && + (!getIsChrome() || getChromeVersion() < minimumChromeVersion) + ); +}; + +export const getWarningMessage = () => { + if (!getIsChrome()) { + return ( + + We recommend the Chrome browser for optimal experience. + + ); + } + if (getChromeVersion() < minimumChromeVersion) { + return ( + + Please upgrade to the latest version of Chrome for the best experience. + + ); + } + return ''; +}; diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx index 3c056018c6..4ca23a4d0c 100644 --- a/packages/app/src/components/contact-modal/index.tsx +++ b/packages/app/src/components/contact-modal/index.tsx @@ -1,5 +1,4 @@ -import { createPortal } from 'react-dom'; -import Fade from '@mui/material/Fade'; +import Modal from '@/ui/modal'; import CloseIcon from '@mui/icons-material/Close'; import { LogoIcon, @@ -13,7 +12,6 @@ import { } from './icons'; import logo from './affine-text-logo.png'; import { - StyledModalContainer, StyledModalWrapper, StyledBigLink, StyledSmallLink, @@ -21,7 +19,6 @@ import { StyledLeftContainer, StyledRightContainer, StyledContent, - StyledBackdrop, StyledLogo, StyledModalHeader, StyledModalHeaderLeft, @@ -77,72 +74,68 @@ type TransitionsModalProps = { }; export const ContactModal = ({ open, onClose }: TransitionsModalProps) => { - return createPortal( - - - - - - - - Alpha - - { - onClose(); - }} + return ( + + + + + + Alpha + + { + onClose(); + }} + > + + + + + + + {rightLinkList.map(({ icon, title, subTitle, link }) => { + return ( + + {icon} +

{title}

+

+ {subTitle} + +

+ + ); + })} + + + + Get in touch!
+ Join our community. + + {linkList.map(({ icon, title, link }) => { + return ( + + {icon} + {title} + + ); + })} + + + + +

+ - - - - - - - {rightLinkList.map(({ icon, title, subTitle, link }) => { - return ( - - {icon} -

{title}

-

- {subTitle} - -

- - ); - })} - - - - Get in touch!
- Join our community. - - {linkList.map(({ icon, title, link }) => { - return ( - - {icon} - {title} - - ); - })} - - - - -

- - How is AFFiNE Alpha different？ - -

-

Copyright © 2022 Toeverything

- - - - , - document.body + How is AFFiNE Alpha different？ + +

+

Copyright © 2022 Toeverything

+ + + ); }; diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts index 4b67fc98d6..13a00d438e 100644 --- a/packages/app/src/components/contact-modal/style.ts +++ b/packages/app/src/components/contact-modal/style.ts @@ -1,17 +1,5 @@ import { absoluteCenter, displayFlex, styled } from '@/styles'; import bg from './bg.png'; -import CloseIcon from '@mui/icons-material/Close'; - -export const StyledModalContainer = styled('div')(({ theme }) => { - return { - width: '100vw', - height: '100vh', - position: 'fixed', - left: '0', - top: '0', - zIndex: theme.zIndex.modal, - }; -}); export const StyledModalWrapper = styled('div')(({ theme }) => { return { @@ -143,9 +131,6 @@ export const StyledContent = styled('div')({ letterSpacing: '0.06em', }); -export const StyledBackdrop = styled('div')(({ theme }) => { - return { width: '100%', height: '100%', background: 'rgba(58, 76, 92, 0.2)' }; -}); export const StyledLogo = styled('img')({ height: '18px', width: 'auto', diff --git a/packages/app/src/components/edgeless-toolbar/style.ts b/packages/app/src/components/edgeless-toolbar/style.ts index e8f0e26ef3..0b3a6d0b82 100644 --- a/packages/app/src/components/edgeless-toolbar/style.ts +++ b/packages/app/src/components/edgeless-toolbar/style.ts @@ -27,7 +27,7 @@ export const StyledToolbarItem = styled.div<{ height: '36px', ...displayFlex('center', 'center'), color: disable ? theme.colors.disableColor : theme.colors.iconColor, - cursor: 'pointer', + cursor: disable ? 'not-allowed' : 'pointer', svg: { width: '36px', height: '36px', diff --git a/packages/app/src/components/loading/styled.ts b/packages/app/src/components/loading/styled.ts index f8b9e959d4..f267fc9a84 100644 --- a/packages/app/src/components/loading/styled.ts +++ b/packages/app/src/components/loading/styled.ts @@ -64,28 +64,28 @@ export const StyledLoadingItem = styled.div` right: 50%; } - &:nth-child(1) { + &:nth-of-type(1) { --sx: 50%; --sy: -50%; --ex: 150%; --ey: 50%; } - &:nth-child(2) { + &:nth-of-type(2) { --sx: -50%; --sy: -50%; --ex: 50%; --ey: -50%; } - &:nth-child(3) { + &:nth-of-type(3) { --sx: 150%; --sy: 50%; --ex: 50%; --ey: 50%; } - &:nth-child(4) { + &:nth-of-type(4) { --sx: 50%; --sy: 50%; --ex: -50%; diff --git a/packages/app/src/components/mobile-modal/bg.png b/packages/app/src/components/mobile-modal/bg.png new file mode 100644 index 0000000000..ab9c6725a6 Binary files /dev/null and b/packages/app/src/components/mobile-modal/bg.png differ diff --git a/packages/app/src/components/mobile-modal/index.tsx b/packages/app/src/components/mobile-modal/index.tsx new file mode 100644 index 0000000000..4c44359368 --- /dev/null +++ b/packages/app/src/components/mobile-modal/index.tsx @@ -0,0 +1,50 @@ +import React, { useState } from 'react'; +import Modal from '@/ui/modal'; +import getIsMobile from '@/utils/get-is-mobile'; +import { + ModalWrapper, + StyledButton, + StyledCloseButton, + StyledContent, + StyledTitle, +} from './styles'; +import CloseIcon from '@mui/icons-material/Close'; +export const MobileModal = () => { + const [showModal, setShowModal] = useState(getIsMobile()); + return ( + { + setShowModal(false); + }} + > + + { + setShowModal(false); + }} + > + + + + Ooops! + +

Looks like you are browsing on a mobile device.

+

+ We are still working on mobile support and recommend you use a + desktop device. +

+ + { + setShowModal(false); + }} + > + Got it + + + + ); +}; + +export default MobileModal; diff --git a/packages/app/src/components/mobile-modal/styles.ts b/packages/app/src/components/mobile-modal/styles.ts new file mode 100644 index 0000000000..dc2a9ba799 --- /dev/null +++ b/packages/app/src/components/mobile-modal/styles.ts @@ -0,0 +1,70 @@ +import { displayFlex, styled } from '@/styles'; +import bg from './bg.png'; + +export const ModalWrapper = styled.div(({ theme }) => { + return { + width: '348px', + height: '388px', + background: '#FFFFFF', + borderRadius: '28px', + position: 'relative', + backgroundImage: `url(${bg.src})`, + }; +}); + +export const StyledCloseButton = styled.div(({ theme }) => { + return { + width: '66px', + height: '66px', + color: theme.colors.iconColor, + cursor: 'pointer', + ...displayFlex('center', 'center'), + position: 'absolute', + right: '0', + top: '0', + + svg: { + width: '15px', + height: '15px', + position: 'relative', + zIndex: 1, + }, + }; +}); + +export const StyledTitle = styled.div(({ theme }) => { + return { + ...displayFlex('center', 'center'), + fontSize: '20px', + fontWeight: 500, + marginTop: '60px', + lineHeight: 1, + }; +}); + +export const StyledContent = styled.div(({ theme }) => { + return { + padding: '0 40px', + marginTop: '32px', + fontSize: '18px', + lineHeight: '25px', + 'p:not(last-of-type)': { + marginBottom: '10px', + }, + }; +}); + +export const StyledButton = styled.div(({ theme }) => { + return { + width: '146px', + height: '42px', + background: theme.colors.primaryColor, + color: '#FFFFFF', + fontSize: '18px', + fontWeight: 500, + borderRadius: '21px', + margin: '52px auto 0', + cursor: 'pointer', + ...displayFlex('center', 'center'), + }; +}); diff --git a/packages/app/src/pages/affine.tsx b/packages/app/src/pages/affine.tsx index b822906d2a..a0c3ee1cd1 100644 --- a/packages/app/src/pages/affine.tsx +++ b/packages/app/src/pages/affine.tsx @@ -1,7 +1,8 @@ import { displayFlex, styled } from '@/styles'; import { ThemeModeSwitch } from '@/components/theme-mode-switch'; import { Loading } from '@/components/loading'; - +import Modal from '@/ui/modal'; +import { useState } from 'react'; export const StyledHeader = styled('div')({ height: '60px', width: '100vw', @@ -12,11 +13,27 @@ export const StyledHeader = styled('div')({ }); const Affine = () => { + const [show, setShow] = useState(false); return ( <> + + { + setShow(false); + }} + > +
hi
+ ); diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx index 741282b51a..8328838309 100644 --- a/packages/app/src/pages/index.tsx +++ b/packages/app/src/pages/index.tsx @@ -5,6 +5,7 @@ import { Header } from '@/components/Header'; import { FAQ } from '@/components/faq'; import Loading from '@/components/loading'; import EdgelessToolbar from '@/components/edgeless-toolbar'; +import MobileModal from '@/components/mobile-modal'; import '@/components/simple-counter'; const StyledEditorContainer = styled('div')(({ theme }) => { @@ -16,7 +17,6 @@ const StyledEditorContainer = styled('div')(({ theme }) => { const StyledPage = styled('div')(({ theme }) => { return { height: '100vh', - paddingTop: '60px', backgroundColor: theme.colors.pageBackground, transition: 'background-color .5s', }; @@ -53,6 +53,7 @@ const Home: NextPage = () => { return (
+ diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index 8ebafce72e..e54ba4a4fd 100644 --- a/packages/app/src/styles/theme.ts +++ b/packages/app/src/styles/theme.ts @@ -19,6 +19,7 @@ export const getLightTheme = ( popoverBackground: '#fff', tooltipBackground: '#6880FF', codeBackground: '#f2f5f9', + warningBackground: '#FFF9C7', textColor: '#3A4C5C', edgelessTextColor: '#3A4C5C', @@ -34,6 +35,7 @@ export const getLightTheme = ( selectedColor: 'rgba(104, 128, 255, 0.1)', borderColor: '#D0D7E3', disableColor: '#C0C0C0', + warningColor: '#906616', }, font: { xs: '12px', @@ -82,6 +84,7 @@ export const getDarkTheme = ( editorMode === 'edgeless' ? lightTheme.colors.codeBackground : '#505662', + warningBackground: '#FFF9C7', textColor: '#fff', edgelessTextColor: '#3A4C5C', @@ -98,6 +101,7 @@ export const getDarkTheme = ( selectedColor: 'rgba(104, 128, 255, 0.1)', borderColor: '#4D4C53', disableColor: '#4b4b4b', + warningColor: '#906616', }, shadow: { popover: @@ -123,6 +127,7 @@ export const globalThemeVariables: ( '--affine-popover-background': theme.colors.popoverBackground, '--affine-hover-background': theme.colors.hoverBackground, '--affine-code-background': theme.colors.codeBackground, + '--affine-tooltip-background': theme.colors.tooltipBackground, '--affine-text-color': theme.colors.textColor, '--affine-edgeless-text-color': theme.colors.edgelessTextColor, @@ -138,6 +143,7 @@ export const globalThemeVariables: ( '--affine-placeholder-color': theme.colors.placeHolderColor, '--affine-border-color': theme.colors.borderColor, '--affine-disable-color': theme.colors.disableColor, + '--affine-tooltip-color': theme.colors.tooltipColor, '--affine-modal-shadow': theme.shadow.modal, '--affine-popover-shadow': theme.shadow.popover, @@ -156,8 +162,5 @@ export const globalThemeVariables: ( '--affine-paragraph-space': theme.space.paragraph, '--affine-popover-radius': theme.radius.popover, - - '--affine-tooltip-color': theme.colors.tooltipColor, - '--affine-tooltip-background': theme.colors.tooltipBackground, }; }; diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts index af4c1f8661..155842eebc 100644 --- a/packages/app/src/styles/types.ts +++ b/packages/app/src/styles/types.ts @@ -24,7 +24,7 @@ export interface AffineTheme { tooltipBackground: string; hoverBackground: string; codeBackground: string; - + warningBackground: string; // Use for the page`s text textColor: string; // Use for the editor`s text, because in edgeless mode text is different form other @@ -42,6 +42,7 @@ export interface AffineTheme { selectedColor: string; borderColor: string; disableColor: string; + warningColor: string; }; font: { xs: string; // tiny @@ -79,6 +80,7 @@ export interface AffineThemeCSSVariables { '--affine-popover-background': AffineTheme['colors']['popoverBackground']; '--affine-hover-background': AffineTheme['colors']['hoverBackground']; '--affine-code-background': AffineTheme['colors']['codeBackground']; + '--affine-tooltip-background': AffineTheme['colors']['tooltipBackground']; '--affine-text-color': AffineTheme['colors']['textColor']; '--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor']; @@ -94,6 +96,7 @@ export interface AffineThemeCSSVariables { '--affine-selected-color': AffineTheme['colors']['selectedColor']; '--affine-border-color': AffineTheme['colors']['borderColor']; '--affine-disable-color': AffineTheme['colors']['disableColor']; + '--affine-tooltip-color': AffineTheme['colors']['tooltipColor']; '--affine-modal-shadow': AffineTheme['shadow']['modal']; '--affine-popover-shadow': AffineTheme['shadow']['popover']; @@ -113,9 +116,6 @@ export interface AffineThemeCSSVariables { '--affine-paragraph-space': AffineTheme['space']['paragraph']; '--affine-popover-radius': AffineTheme['radius']['popover']; - - '--affine-tooltip-color': AffineTheme['colors']['tooltipColor']; - '--affine-tooltip-background': AffineTheme['colors']['tooltipBackground']; } declare module '@emotion/react' { diff --git a/packages/app/src/ui/modal/index.tsx b/packages/app/src/ui/modal/index.tsx new file mode 100644 index 0000000000..936be1b987 --- /dev/null +++ b/packages/app/src/ui/modal/index.tsx @@ -0,0 +1,4 @@ +import Modal from './modal'; + +export * from './modal'; +export default Modal; diff --git a/packages/app/src/ui/modal/modal.tsx b/packages/app/src/ui/modal/modal.tsx new file mode 100644 index 0000000000..42a9b373e1 --- /dev/null +++ b/packages/app/src/ui/modal/modal.tsx @@ -0,0 +1,32 @@ +import Fade from '@mui/material/Fade'; +import { StyledModal, StyledBackdrop } from './style'; +import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled'; + +const Backdrop = ({ + open, + ...other +}: { + open?: boolean; + className: string; +}) => { + return ( + + + + ); +}; + +export type ModalProps = ModalUnstyledOwnProps; + +export const Modal = (props: ModalProps) => { + const { components, open, children, ...otherProps } = props; + return ( +
+ + {children} + +
+ ); +}; + +export default Modal; diff --git a/packages/app/src/ui/modal/style.ts b/packages/app/src/ui/modal/style.ts new file mode 100644 index 0000000000..3b37e3c0f2 --- /dev/null +++ b/packages/app/src/ui/modal/style.ts @@ -0,0 +1,30 @@ +import { displayFlex, fixedCenter, styled } from '@/styles'; +import ModalUnstyled from '@mui/base/ModalUnstyled'; + +export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => { + return { + zIndex: '-1', + position: 'fixed', + right: '0', + bottom: '0', + top: '0', + left: '0', + backgroundColor: 'rgba(58, 76, 92, 0.2)', + }; +}); + +export const StyledModal = styled(ModalUnstyled)(({ theme }) => { + return { + width: '100vw', + height: '100vh', + position: 'fixed', + left: '0', + top: '0', + zIndex: theme.zIndex.modal, + ...displayFlex('center', 'center'), + '*': { + WebkitTapHighlightColor: 'transparent', + outline: 'none', + }, + }; +}); diff --git a/packages/app/src/ui/tooltip/Tooltip.tsx b/packages/app/src/ui/tooltip/Tooltip.tsx index 0bf92323ef..7774f39d6a 100644 --- a/packages/app/src/ui/tooltip/Tooltip.tsx +++ b/packages/app/src/ui/tooltip/Tooltip.tsx @@ -8,10 +8,7 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => { return { boxShadow: theme.shadow.tooltip, padding: '4px 12px', - backgroundColor: - theme.mode === 'dark' - ? theme.colors.popoverBackground - : theme.colors.primaryColor, + backgroundColor: theme.colors.tooltipBackground, color: '#fff', fontSize: theme.font.xs, }; diff --git a/packages/app/src/utils/get-is-mobile.ts b/packages/app/src/utils/get-is-mobile.ts new file mode 100644 index 0000000000..4cf4080490 --- /dev/null +++ b/packages/app/src/utils/get-is-mobile.ts @@ -0,0 +1,17 @@ +// Inspire by https://stackoverflow.com/a/11381730/8415727 +export const getIsMobile = function () { + let check = false; + (function (a) { + if ( + /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( + a + ) || + /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( + a.substr(0, 4) + ) + ) + check = true; + })(navigator?.userAgent || navigator?.vendor || (window as any)?.opera); + return check; +}; +export default getIsMobile; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1e2ac0262..e5cfe4d4dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -477,7 +477,7 @@ packages: '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y '@mui/base': 5.0.0-alpha.101_7ey2zzynotv32rpkwno45fsx4e '@mui/core-downloads-tracker': 5.10.9 - '@mui/system': 5.10.9_4mv32nu4vciambuqqzuu4gtvj4 + '@mui/system': 5.10.10_4mv32nu4vciambuqqzuu4gtvj4 '@mui/types': 7.2.0_@types+react@18.0.20 '@mui/utils': 5.10.9_react@18.2.0 '@types/react': 18.0.20 @@ -530,8 +530,8 @@ packages: react: 18.2.0 dev: false - /@mui/system/5.10.9_4mv32nu4vciambuqqzuu4gtvj4: - resolution: {integrity: sha512-B6fFC0sK06hNmqY7fAUfwShQv594+u/DT1YEFHPtK4laouTu7V4vSGQWi1WJT9Bjs9Db5D1bRDJ+Yy+tc3QOYA==} + /@mui/system/5.10.10_4mv32nu4vciambuqqzuu4gtvj4: + resolution: {integrity: sha512-TXwtKN0adKpBrZmO+eilQWoPf2veh050HLYrN78Kps9OhlvO70v/2Kya0+mORFhu9yhpAwjHXO8JII/R4a5ZLA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -1438,7 +1438,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm + '@typescript-eslint/parser': 5.38.0_eslint@8.22.0 debug: 3.2.7 eslint: 8.22.0 eslint-import-resolver-node: 0.3.6 @@ -1457,7 +1457,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm + '@typescript-eslint/parser': 5.38.0_eslint@8.22.0 array-includes: 3.1.5 array.prototype.flat: 1.3.0 debug: 2.6.9