fix: ui issues (#1371)

apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx

@@ -1,6 +1,6 @@
 import { displayFlex, IconButton, styled, Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { CloudWorkspaceIcon } from '@blocksuite/icons';
+import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons';
 import { assertEquals, assertExists } from '@blocksuite/store';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
@@ -14,7 +14,6 @@ import {
   RemWorkspaceFlavour,
 } from '../../../../shared';
 import { TransformWorkspaceToAffineModal } from '../../../affine/transform-workspace-to-affine-modal';
-import { LocalWorkspaceIcon } from '../../../pure/icons';
 
 const NoNetWorkIcon = () => {
   return (
@@ -33,12 +32,13 @@ const NoNetWorkIcon = () => {
     </svg>
   );
 };
-const IconWrapper = styled('div')(() => {
+const IconWrapper = styled('div')(({ theme }) => {
   return {
     width: '32px',
     height: '32px',
     marginRight: '12px',
     fontSize: '22px',
+    color: theme.colors.iconColor,
     ...displayFlex('center', 'center'),
   };
 });

apps/web/src/components/blocksuite/header/styles.ts

@@ -4,7 +4,6 @@ export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
   ({ hasWarning }) => {
     return {
       height: hasWarning ? '96px' : '60px',
-      padding: '0 28px',
     };
   }
 );
@@ -13,6 +12,7 @@ export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
     return {
       height: '60px',
       width: '100%',
+      padding: '0 28px',
       ...displayFlex('flex-end', 'center'),
       background: theme.colors.pageBackground,
       transition: 'background-color 0.5s',
@@ -53,11 +53,7 @@ export const StyledBrowserWarning = styled('div')<{ show: boolean }>(
       backgroundColor: theme.colors.warningBackground,
       color: theme.colors.warningColor,
       height: '36px',
-      width: '100vw',
       fontSize: theme.font.sm,
-      position: 'fixed',
-      left: '0',
-      top: '0',
       display: show ? 'flex' : 'none',
       justifyContent: 'center',
       alignItems: 'center',

apps/web/src/components/blocksuite/header/utils.tsx

@@ -32,6 +32,7 @@ export const OSWarningMessage: React.FC = () => {
       env.isBrowser && env.isChrome && env.chromeVersion < minimumChromeVersion
     );
   }, []);
+
   if (notChrome) {
     return (
       <span>