Merge pull request #516 from toeverything/feat/modify

Feat/modify
2024-11-30 14:12:00 +03:00 · 2022-11-01 18:53:07 +08:00 · 2022-11-01 18:53:07 +08:00 · de77cabd59
commit de77cabd59
parent 325c8941b1 d7be74e0f4
20 changed files with 428 additions and 125 deletions
--- 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 (
+    <StyledBrowserWarning>
+      {getWarningMessage()}
+      <StyledCloseButton onClick={onClose}>
+        <CloseIcon />
+      </StyledCloseButton>
+    </StyledBrowserWarning>
+  );
+};
+
 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 (
-    <>
-      <StyledHeader>
+    <StyledHeaderContainer hasWarning={showWarning}>
+      <BrowserWarning
+        onClose={() => {
+          setShowWarning(false);
+        }}
+      />
+      <StyledHeader hasWarning={showWarning}>
        <StyledLogo
          onClick={() => {
            contactModalHandler(true);
@ -104,6 +125,6 @@ export const Header = () => {
          </Popover>
        </StyledHeaderRightSide>
      </StyledHeader>
-    </>
+    </StyledHeaderContainer>
  );
 };
--- 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,
+    },
+  };
+});
--- a/packages/app/src/components/Header/utils.tsx
+++ 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 (
+      <span>
+        We recommend the <strong>Chrome</strong> browser for optimal experience.
+      </span>
+    );
+  }
+  if (getChromeVersion() < minimumChromeVersion) {
+    return (
+      <span>
+        Please upgrade to the latest version of Chrome for the best experience.
+      </span>
+    );
+  }
+  return '';
+};
--- 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(
-    <Fade in={open}>
-      <StyledModalContainer>
-        <StyledBackdrop onClick={onClose} />
-        <StyledModalWrapper>
-          <StyledModalHeader>
-            <StyledModalHeaderLeft>
-              <StyledLogo src={logo.src} alt="" />
-              <span>Alpha</span>
-            </StyledModalHeaderLeft>
-            <StyledCloseButton
-              onClick={() => {
-                onClose();
-              }}
+  return (
+    <Modal open={open} onClose={onClose}>
+      <StyledModalWrapper>
+        <StyledModalHeader>
+          <StyledModalHeaderLeft>
+            <StyledLogo src={logo.src} alt="" />
+            <span>Alpha</span>
+          </StyledModalHeaderLeft>
+          <StyledCloseButton
+            onClick={() => {
+              onClose();
+            }}
+          >
+            <CloseIcon width={12} height={12} />
+          </StyledCloseButton>
+        </StyledModalHeader>
+
+        <StyledContent>
+          <StyledLeftContainer>
+            {rightLinkList.map(({ icon, title, subTitle, link }) => {
+              return (
+                <StyledBigLink key={title} href={link} target="_blank">
+                  {icon}
+                  <p>{title}</p>
+                  <p>
+                    {subTitle}
+                    <LinkIcon />
+                  </p>
+                </StyledBigLink>
+              );
+            })}
+          </StyledLeftContainer>
+          <StyledRightContainer>
+            <StyledSubTitle>
+              Get in touch! <br />
+              Join our community.
+            </StyledSubTitle>
+            {linkList.map(({ icon, title, link }) => {
+              return (
+                <StyledSmallLink key={title} href={link} target="_blank">
+                  {icon}
+                  {title}
+                </StyledSmallLink>
+              );
+            })}
+          </StyledRightContainer>
+        </StyledContent>
+
+        <StyledModalFooter>
+          <p>
+            <a
+              href="https://affine.pro/content/blog/affine-alpha-is-coming/index"
+              target="_blank"
+              rel="noreferrer"
            >
-              <CloseIcon width={12} height={12} />
-            </StyledCloseButton>
-          </StyledModalHeader>
-
-          <StyledContent>
-            <StyledLeftContainer>
-              {rightLinkList.map(({ icon, title, subTitle, link }) => {
-                return (
-                  <StyledBigLink key={title} href={link} target="_blank">
-                    {icon}
-                    <p>{title}</p>
-                    <p>
-                      {subTitle}
-                      <LinkIcon />
-                    </p>
-                  </StyledBigLink>
-                );
-              })}
-            </StyledLeftContainer>
-            <StyledRightContainer>
-              <StyledSubTitle>
-                Get in touch! <br />
-                Join our community.
-              </StyledSubTitle>
-              {linkList.map(({ icon, title, link }) => {
-                return (
-                  <StyledSmallLink key={title} href={link} target="_blank">
-                    {icon}
-                    {title}
-                  </StyledSmallLink>
-                );
-              })}
-            </StyledRightContainer>
-          </StyledContent>
-
-          <StyledModalFooter>
-            <p>
-              <a
-                href="https://affine.pro/content/blog/affine-alpha-is-coming/index"
-                target="_blank"
-                rel="noreferrer"
-              >
-                How is AFFiNE Alpha different？
-              </a>
-            </p>
-            <p>Copyright &copy; 2022 Toeverything</p>
-          </StyledModalFooter>
-        </StyledModalWrapper>
-      </StyledModalContainer>
-    </Fade>,
-    document.body
+              How is AFFiNE Alpha different？
+            </a>
+          </p>
+          <p>Copyright &copy; 2022 Toeverything</p>
+        </StyledModalFooter>
+      </StyledModalWrapper>
+    </Modal>
  );
 };

--- 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',
--- 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',
--- 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%;
--- a/packages/app/src/components/mobile-modal/bg.png
+++ b/packages/app/src/components/mobile-modal/bg.png
--- a/packages/app/src/components/mobile-modal/index.tsx
+++ 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 (
+    <Modal
+      open={showModal}
+      onClose={() => {
+        setShowModal(false);
+      }}
+    >
+      <ModalWrapper>
+        <StyledCloseButton
+          onClick={() => {
+            setShowModal(false);
+          }}
+        >
+          <CloseIcon />
+        </StyledCloseButton>
+
+        <StyledTitle>Ooops!</StyledTitle>
+        <StyledContent>
+          <p>Looks like you are browsing on a mobile device.</p>
+          <p>
+            We are still working on mobile support and recommend you use a
+            desktop device.
+          </p>
+        </StyledContent>
+        <StyledButton
+          onClick={() => {
+            setShowModal(false);
+          }}
+        >
+          Got it
+        </StyledButton>
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+export default MobileModal;
--- a/packages/app/src/components/mobile-modal/styles.ts
+++ 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'),
+  };
+});
--- 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 (
    <>
      <StyledHeader>
        <ThemeModeSwitch></ThemeModeSwitch>
+        <button
+          onClick={() => {
+            setShow(true);
+          }}
+        >
+          click me!
+        </button>
      </StyledHeader>
+      <Modal
+        open={show}
+        onClose={() => {
+          setShow(false);
+        }}
+      >
+        <div>hi</div>
+      </Modal>
      <Loading />
    </>
  );
--- 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 (
    <StyledPage>
      <Header />
+      <MobileModal />
      <StyledEditorContainer>
        <DynamicEditor />
      </StyledEditorContainer>
--- 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,
  };
 };
--- 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' {
--- a/packages/app/src/ui/modal/index.tsx
+++ b/packages/app/src/ui/modal/index.tsx
@ -0,0 +1,4 @@
+import Modal from './modal';
+
+export * from './modal';
+export default Modal;
--- a/packages/app/src/ui/modal/modal.tsx
+++ 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 (
+    <Fade in={open}>
+      <StyledBackdrop open={open} {...other} />
+    </Fade>
+  );
+};
+
+export type ModalProps = ModalUnstyledOwnProps;
+
+export const Modal = (props: ModalProps) => {
+  const { components, open, children, ...otherProps } = props;
+  return (
+    <div>
+      <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
+        <Fade in={open}>{children}</Fade>
+      </StyledModal>
+    </div>
+  );
+};
+
+export default Modal;
--- a/packages/app/src/ui/modal/style.ts
+++ 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',
+    },
+  };
+});
--- 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,
  };
--- a/packages/app/src/utils/get-is-mobile.ts
+++ 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;
--- 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