feat: add browser detect warning

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,12 +52,25 @@ 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 { contactModalHandler } = useModal();
   const { editor } = useEditor();
 
+  const [showWarning, setShowWarning] = useState(shouldShowWarning());
+
   useEffect(() => {
     if (editor) {
       setTitle(editor.model.title || '');
@@ -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>
   );
 };

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,
+    },
+  };
+});

packages/app/src/components/Header/utils.tsx

@@ -0,0 +1,33 @@
+// 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 !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 '';
+};

packages/app/src/pages/index.tsx

@@ -16,7 +16,6 @@ const StyledEditorContainer = styled('div')(({ theme }) => {
 const StyledPage = styled('div')(({ theme }) => {
   return {
     height: '100vh',
-    paddingTop: '60px',
     backgroundColor: theme.colors.pageBackground,
     transition: 'background-color .5s',
   };

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',
@@ -33,6 +34,7 @@ export const getLightTheme = (
       selectedColor: 'rgba(104, 128, 255, 0.1)',
       borderColor: '#D0D7E3',
       disableColor: '#C0C0C0',
+      warningColor: '#906616',
     },
     font: {
       xs: '12px',
@@ -81,6 +83,7 @@ export const getDarkTheme = (
           ? lightTheme.colors.codeBackground
           : '#505662',
       toolTipBackground: '#1F2021',
+      warningBackground: '#FFF9C7',
 
       textColor: '#fff',
       edgelessTextColor: '#3A4C5C',
@@ -96,6 +99,7 @@ export const getDarkTheme = (
       selectedColor: 'rgba(104, 128, 255, 0.1)',
       borderColor: '#4D4C53',
       disableColor: '#4b4b4b',
+      warningColor: '#906616',
     },
     shadow: {
       popover:

packages/app/src/styles/types.ts

@@ -24,7 +24,7 @@ export interface AffineTheme {
     hoverBackground: string;
     codeBackground: string;
     toolTipBackground: 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
@@ -41,6 +41,7 @@ export interface AffineTheme {
     selectedColor: string;
     borderColor: string;
     disableColor: string;
+    warningColor: string;
   };
   font: {
     xs: string; // tiny