chore: update the style of help island in edgeless mode (#2244)

apps/web/src/components/pure/help-island/index.tsx

@@ -6,6 +6,7 @@ import { useAtom } from 'jotai';
 import { lazy, Suspense, useState } from 'react';
 
 import { openOnboardingModalAtom } from '../../../atoms';
+import { useCurrentMode } from '../../../hooks/current/use-current-mode';
 import { ShortcutsModal } from '../shortcuts-modal';
 import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
 import {
@@ -32,6 +33,7 @@ export const HelpIsland = ({
 }: {
   showList?: IslandItemNames[];
 }) => {
+  const mode = useCurrentMode();
   const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom);
   const [spread, setShowSpread] = useState(false);
   // const { triggerShortcutsModal, triggerContactModal } = useModal();
@@ -62,6 +64,7 @@ export const HelpIsland = ({
         onClick={() => {
           setShowSpread(!spread);
         }}
+        inEdgelessPage={mode === 'edgeless'}
       >
         <StyledAnimateWrapper
           style={{ height: spread ? `${showList.length * 44}px` : 0 }}

apps/web/src/components/pure/help-island/style.ts

@@ -2,12 +2,17 @@ import { displayFlex, positionAbsolute, styled } from '@affine/component';
 
 export const StyledIsland = styled('div')<{
   spread: boolean;
-}>(({ spread }) => {
+  inEdgelessPage?: boolean;
+}>(({ spread, inEdgelessPage }) => {
   return {
     transition: 'box-shadow 0.2s',
     width: '44px',
     position: 'relative',
-    boxShadow: spread ? 'var(--affine-menu-shadow)' : 'unset',
+    boxShadow: spread
+      ? 'var(--affine-menu-shadow)'
+      : inEdgelessPage
+      ? 'var(--affine-menu-shadow)'
+      : 'unset',
     padding: '0 4px 44px',
     borderRadius: '10px',
     background: spread
@@ -15,6 +20,7 @@ export const StyledIsland = styled('div')<{
       : 'var(--affine-background-primary-color)',
     ':hover': {
       background: spread ? null : 'var(--affine-white)',
+      boxShadow: spread ? null : 'var(--affine-menu-shadow)',
     },
     '::after': {
       content: '""',

packages/component/src/theme/global.css

@@ -163,6 +163,7 @@ input {
   border-radius: 0; /*Solve the problem of rounded corners of the input box on ios*/
   outline: medium; /*Remove the default yellow border on mouse click*/
   background-color: transparent;
+  caret-color: var(--affine-primary-color);
 }
 
 input:-webkit-autofill {