feat: modify styles

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -19,59 +19,59 @@ import { useEditor } from '@/components/editor-provider';
 
 const toolbarList1 = [
   {
+    flavor: 'select',
     icon: <SelectIcon />,
     toolTip: 'Select',
-    onClick: () => {},
     disable: false,
   },
   {
+    flavor: 'text',
     icon: <TextIcon />,
     toolTip: 'Text(coming soon)',
-    onClick: () => {},
     disable: true,
   },
   {
+    flavor: 'shape',
     icon: <ShapeIcon />,
     toolTip: 'Shape(coming soon)',
-    onClick: () => {},
     disable: true,
   },
   {
+    flavor: 'sticky',
     icon: <StickerIcon />,
-    toolTip: 'Sticker(coming soon)',
-    onClick: () => {},
+    toolTip: 'Sticky(coming soon)',
     disable: true,
   },
   {
+    flavor: 'pen',
     icon: <PenIcon />,
     toolTip: 'Pen(coming soon)',
-    onClick: () => {},
     disable: true,
   },
 
   {
+    flavor: 'connector',
     icon: <ConnectorIcon />,
     toolTip: 'Connector(coming soon)',
-    onClick: () => {},
     disable: true,
   },
 ];
 const toolbarList2 = [
   {
+    flavor: 'undo',
     icon: <UndoIcon />,
-    toolTip: 'Undo(coming soon)',
-    onClick: () => {},
-    disable: true,
+    toolTip: 'Undo',
+    disable: false,
   },
   {
+    flavor: 'redo',
     icon: <RedoIcon />,
-    toolTip: 'Redo(coming soon)',
-    onClick: () => {},
-    disable: true,
+    toolTip: 'Redo',
+    disable: false,
   },
 ];
 export const EdgelessToolbar = () => {
-  const { mode } = useEditor();
+  const { mode, editor } = useEditor();
   return (
     <Slide
       direction="right"
@@ -81,10 +81,15 @@ export const EdgelessToolbar = () => {
     >
       <StyledEdgelessToolbar>
         <StyledToolbarWrapper>
-          {toolbarList1.map(({ icon, toolTip, onClick, disable }, index) => {
+          {toolbarList1.map(({ icon, toolTip, flavor, disable }, index) => {
             return (
               <Tooltip key={index} content={toolTip} placement="right-start">
-                <StyledToolbarItem disable={disable} onClick={onClick}>
+                <StyledToolbarItem
+                  disable={disable}
+                  onClick={() => {
+                    console.log('flavor', flavor);
+                  }}
+                >
                   {icon}
                 </StyledToolbarItem>
               </Tooltip>
@@ -92,10 +97,22 @@ export const EdgelessToolbar = () => {
           })}
         </StyledToolbarWrapper>
         <StyledToolbarWrapper>
-          {toolbarList2.map(({ icon, toolTip, onClick, disable }, index) => {
+          {toolbarList2.map(({ icon, toolTip, flavor, disable }, index) => {
             return (
               <Tooltip key={index} content={toolTip} placement="right-start">
-                <StyledToolbarItem disable={disable} onClick={onClick}>
+                <StyledToolbarItem
+                  disable={disable}
+                  onClick={() => {
+                    switch (flavor) {
+                      case 'undo':
+                        editor?.store?.undo();
+                        break;
+                      case 'redo':
+                        editor?.store?.redo();
+                        break;
+                    }
+                  }}
+                >
                   {icon}
                 </StyledToolbarItem>
               </Tooltip>

packages/app/src/components/editor-mode-switch/style.ts

@@ -3,7 +3,7 @@ import { displayFlex, keyframes, styled } from '@/styles';
 import spring, { toString } from 'css-spring';
 import type { ItemStatus } from './type';
 
-const ANIMATE_DURATION = 400;
+const ANIMATE_DURATION = 500;
 
 export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
   ({ shrink, theme }) => {

packages/app/src/components/editor-provider.tsx

@@ -9,6 +9,7 @@ type EditorContextValue = {
   setEditor: (editor: EditorContainer) => void;
   setMode: (mode: EditorContainer['mode']) => void;
 };
+
 type EditorContextProps = PropsWithChildren<{}>;
 
 export const EditorContext = createContext<EditorContextValue>({

packages/app/src/components/loading/styled.ts

@@ -1,5 +1,6 @@
 import { styled } from '@/styles';
 
+// Inspired by https://codepen.io/graphilla/pen/rNvBMYY
 const loadingItemSize = '40px';
 export const StyledLoading = styled.div`
   position: relative;

packages/app/src/styles/theme.ts

@@ -14,6 +14,7 @@ export const lightTheme: AffineTheme = {
     codeBackground: '#f2f5f9',
 
     textColor: '#3A4C5C',
+    edgelessTextColor: '#3A4C5C',
     iconColor: '#9096A5',
     linkColor: '#6880FF',
     linkColor2: '#6880FF',
@@ -59,6 +60,7 @@ export const darkTheme: AffineTheme = {
     codeBackground: '#505662',
 
     textColor: '#fff',
+    edgelessTextColor: '#3A4C5C',
     iconColor: '#9096A5',
     linkColor: '#7D91FF',
     linkColor2: '#6880FF',
@@ -91,6 +93,7 @@ export const globalThemeVariables: (
     '--affine-code-background': theme.colors.codeBackground,
 
     '--affine-text-color': theme.colors.textColor,
+    '--affine-edgeless-text-color': theme.colors.edgelessTextColor,
     '--affine-link-color': theme.colors.linkColor,
     // In dark mode, normal text`s (not bold) color
     '--affine-link-color2': theme.colors.linkColor2,

packages/app/src/styles/types.ts

@@ -20,7 +20,10 @@ export interface AffineTheme {
     hoverBackground: string;
     codeBackground: string;
 
+    // Use for the page`s text
     textColor: string;
+    // Use for the editor`s text, because in edgeless mode text is different form other
+    edgelessTextColor: string;
     linkColor: string;
     // In dark mode, normal text`s (not bold) color
     linkColor2: string;
@@ -64,6 +67,7 @@ export interface AffineThemeCSSVariables {
   '--affine-code-background': AffineTheme['colors']['codeBackground'];
 
   '--affine-text-color': AffineTheme['colors']['textColor'];
+  '--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor'];
   '--affine-link-color': AffineTheme['colors']['linkColor'];
   // In dark mode, normal text`s (not bold) color
   '--affine-link-color2': AffineTheme['colors']['linkColor2'];