From b6c895e90f9f845975848126a08de38c51f49792 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Tue, 16 Aug 2022 21:12:38 +0800
Subject: [PATCH 1/5] add move coverage

---
 .../components/command-panel/CommandPanel.tsx |   8 ++
 .../components/command-panel/MoveCoverage.tsx | 109 ++++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx

diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
index 395b6ddf47..2d3217d997 100644
--- a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
+++ b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
@@ -8,6 +8,7 @@ import { FontSizeConfig } from './FontSizeConfig';
 import { FrameFillColorConfig } from './FrameFillColorConfig';
 import { Group, UnGroup } from './GroupOperation';
 import { Lock, Unlock } from './LockOperation';
+import { MoveCoverageConfig } from './MoveCoverage';
 import { StrokeLineStyleConfig } from './stroke-line-style-config';
 import { getAnchor, useConfig } from './utils';
 
@@ -91,6 +92,13 @@ export const CommandPanel = ({ app }: { app: TldrawApp }) => {
                 shapes={config.deleteShapes.selectedShapes}
             />
         ),
+        delete2: (
+            <MoveCoverageConfig
+                key="deleteShapes1"
+                app={app}
+                shapes={config.deleteShapes.selectedShapes}
+            />
+        ),
     };
 
     const nodes = Object.entries(configNodes).filter(([key, node]) => !!node);
diff --git a/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx b/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx
new file mode 100644
index 0000000000..d5faf978e7
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx
@@ -0,0 +1,109 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import {
+    HeadingOneIcon,
+    HeadingThreeIcon,
+    HeadingTwoIcon,
+    LockIcon,
+    TextFontIcon,
+} from '@toeverything/components/icons';
+import {
+    IconButton,
+    Popover,
+    styled,
+    Tooltip,
+} from '@toeverything/components/ui';
+
+interface FontSizeConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+const _fontSizes = [
+    {
+        name: 'To Front',
+        value: 'tofront',
+        icon: <HeadingOneIcon />,
+    },
+    {
+        name: 'Forward',
+        value: 'forward',
+        icon: <HeadingTwoIcon />,
+    },
+    {
+        name: 'Backward',
+        value: 'backward',
+        icon: <HeadingThreeIcon />,
+    },
+    {
+        name: 'To Back',
+        value: 'toback',
+        icon: <TextFontIcon />,
+    },
+];
+
+export const MoveCoverageConfig = ({ app, shapes }: FontSizeConfigProps) => {
+    const moveCoverage = (type: string) => {
+        switch (type) {
+            case 'toback':
+                app.moveToBack();
+                break;
+            case 'backward':
+                app.moveBackward();
+                break;
+            case 'forward':
+                app.moveForward();
+                break;
+            case 'tofront':
+                app.moveToFront();
+                break;
+        }
+    };
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <div>
+                    {_fontSizes.map(fontSize => {
+                        return (
+                            <ListItemContainer
+                                key={fontSize.value}
+                                onClick={() => moveCoverage(fontSize.value)}
+                            >
+                                {/* {fontSize.icon} */}
+                                <ListItemTitle>{fontSize.name}</ListItemTitle>
+                            </ListItemContainer>
+                        );
+                    })}
+                </div>
+            }
+        >
+            <Tooltip content="Font Size" placement="top-start">
+                <IconButton>
+                    <LockIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
+
+const ListItemContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    height: '32px',
+    padding: '4px 12px',
+    color: theme.affine.palette.icons,
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    '&:hover': {
+        backgroundColor: theme.affine.palette.hover,
+    },
+}));
+
+const ListItemTitle = styled('span')(({ theme }) => ({
+    marginLeft: '12px',
+    color: theme.affine.palette.primaryText,
+}));

From 42f3dcaa8c984f385cea6558a11a916d59c2ede2 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Wed, 17 Aug 2022 15:58:35 +0800
Subject: [PATCH 2/5] feat: add align center

---
 .../src/components/align-panel/index.tsx      | 74 +++++++++++++++++++
 .../command-panel/AlignOperation.tsx          | 72 ++++++++++++++++++
 .../components/command-panel/CommandPanel.tsx |  9 ++-
 3 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 libs/components/board-draw/src/components/align-panel/index.tsx
 create mode 100644 libs/components/board-draw/src/components/command-panel/AlignOperation.tsx

diff --git a/libs/components/board-draw/src/components/align-panel/index.tsx b/libs/components/board-draw/src/components/align-panel/index.tsx
new file mode 100644
index 0000000000..3a811db22a
--- /dev/null
+++ b/libs/components/board-draw/src/components/align-panel/index.tsx
@@ -0,0 +1,74 @@
+import { styled, Tooltip } from '@toeverything/components/ui';
+import { AlignType } from '../command-panel/AlignOperation';
+
+interface AlignObject {
+    name?: string;
+    /**
+     * color: none means no color
+     */
+    title: string;
+    icon?: string;
+}
+/**
+ * ColorValue : none means no color
+ */
+interface AlignProps {
+    alignOptions: AlignObject[];
+    selected?: string;
+    onSelect?: (alginType: AlignType) => void;
+}
+
+export const AlignPanel = ({
+    alignOptions,
+    selected,
+    onSelect,
+}: AlignProps) => {
+    return (
+        <Container>
+            {alignOptions.map(alignOption => {
+                const option = alignOption.name as AlignType;
+                // const selected = color;
+                return (
+                    <Tooltip key={option} content={alignOption.title}>
+                        <SelectableContainer
+                            onClick={() => {
+                                onSelect?.(option);
+                            }}
+                        >
+                            {alignOption.name}
+                        </SelectableContainer>
+                    </Tooltip>
+                );
+            })}
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    width: '120px',
+    display: 'flex',
+    flexWrap: 'wrap',
+});
+
+const SelectableContainer = styled('div')<{ selected?: boolean }>(
+    ({ selected, theme }) => ({
+        width: '20px',
+        height: '20px',
+        // border: `1px solid ${
+        //     selected ? theme.affine.palette.primary : 'rgba(0,0,0,0)'
+        // }`,
+        borderRadius: '5px',
+        overflow: 'hidden',
+        margin: '10px',
+        padding: '1px',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+    })
+);
+
+const Color = styled('div')({
+    width: '16px',
+    height: '16px',
+    borderRadius: '5px',
+    boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.25)',
+});
diff --git a/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
new file mode 100644
index 0000000000..9a150c3323
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
@@ -0,0 +1,72 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import { ShapeColorNoneIcon } from '@toeverything/components/icons';
+import {
+    IconButton,
+    Popover,
+    Tooltip,
+    useTheme,
+} from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
+
+interface BorderColorConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+export enum AlignType {
+    Top = 'top',
+    CenterVertical = 'centerVertical',
+    Bottom = 'bottom',
+    Left = 'left',
+    CenterHorizontal = 'centerHorizontal',
+    Right = 'right',
+}
+
+let AlignPanelArr = [
+    {
+        name: 'top',
+        title: 'Align top',
+    },
+    {
+        name: 'centerVertical',
+        title: 'Align Center Vertical',
+    },
+    {
+        name: 'bottom',
+        title: 'Align bottom',
+    },
+    {
+        name: 'left',
+        title: 'Align left',
+    },
+    {
+        name: 'centerHorizontal',
+        title: 'Align centerHorizontal',
+    },
+];
+export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
+    const theme = useTheme();
+    const setAlign = (alginType: AlignType) => {
+        app.align(alginType);
+    };
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <AlignPanel
+                    alignOptions={AlignPanelArr}
+                    onSelect={setAlign}
+                ></AlignPanel>
+            }
+        >
+            <Tooltip content="Fill Color" placement="top-start">
+                <IconButton>
+                    <ShapeColorNoneIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
index 2d3217d997..c07bfa88b4 100644
--- a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
+++ b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
@@ -1,6 +1,7 @@
 import { TLDR, TldrawApp } from '@toeverything/components/board-state';
 import { Divider, Popover, styled } from '@toeverything/components/ui';
 import { Fragment } from 'react';
+import { AlignOperation } from './AlignOperation';
 import { BorderColorConfig } from './BorderColorConfig';
 import { DeleteShapes } from './DeleteOperation';
 import { FillColorConfig } from './FillColorConfig';
@@ -92,13 +93,19 @@ export const CommandPanel = ({ app }: { app: TldrawApp }) => {
                 shapes={config.deleteShapes.selectedShapes}
             />
         ),
-        delete2: (
+        moveCoverageConfig: (
             <MoveCoverageConfig
                 key="deleteShapes1"
                 app={app}
                 shapes={config.deleteShapes.selectedShapes}
             />
         ),
+        alginOperation: config.group.selectedShapes.length ? (
+            <AlignOperation
+                app={app}
+                shapes={config.deleteShapes.selectedShapes}
+            ></AlignOperation>
+        ) : null,
     };
 
     const nodes = Object.entries(configNodes).filter(([key, node]) => !!node);

From 46727d367cb169ceb90a9ce48c2fae7e7a7e0727 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Wed, 17 Aug 2022 20:59:20 +0800
Subject: [PATCH 3/5] fix add align icon

---
 .env                                          |  4 +++-
 .../src/components/align-panel/index.tsx      |  4 ++--
 .../command-panel/AlignOperation.tsx          | 23 ++++++++++++++++---
 .../align-horizontal-center.svg               |  1 +
 .../align-horizontal-center.tsx               | 18 +++++++++++++++
 .../align-to-bottom/align-to-bottom.svg       |  1 +
 .../align-to-bottom/align-to-bottom.tsx       | 18 +++++++++++++++
 .../align-to-left/align-to-left.svg           |  1 +
 .../align-to-left/align-to-left.tsx           | 18 +++++++++++++++
 .../align-to-right/align-to-right.svg         |  1 +
 .../align-to-right/align-to-right.tsx         | 18 +++++++++++++++
 .../auto-icons/align-to-top/align-to-top.svg  |  1 +
 .../auto-icons/align-to-top/align-to-top.tsx  | 18 +++++++++++++++
 .../align-vertical-center.svg                 |  1 +
 .../align-vertical-center.tsx                 | 18 +++++++++++++++
 .../icons/src/auto-icons/align/align.svg      |  1 +
 .../icons/src/auto-icons/align/align.tsx      | 18 +++++++++++++++
 .../bring-forward/bring-forward.svg           |  1 +
 .../bring-forward/bring-forward.tsx           | 18 +++++++++++++++
 .../bring-to-front/bring-to-front.svg         |  1 +
 .../bring-to-front/bring-to-front.tsx         | 18 +++++++++++++++
 .../distribute-horizontal.svg                 |  1 +
 .../distribute-horizontal.tsx                 | 18 +++++++++++++++
 .../distribute-vertical.svg                   |  1 +
 .../distribute-vertical.tsx                   | 18 +++++++++++++++
 libs/components/icons/src/auto-icons/index.ts | 18 +++++++++++++--
 .../icons/src/auto-icons/layers/layers.svg    |  1 +
 .../icons/src/auto-icons/layers/layers.tsx    | 18 +++++++++++++++
 .../send-backward/send-backward.svg           |  1 +
 .../send-backward/send-backward.tsx           | 18 +++++++++++++++
 .../auto-icons/send-to-back/send-to-back.svg  |  1 +
 .../auto-icons/send-to-back/send-to-back.tsx  | 18 +++++++++++++++
 32 files changed, 307 insertions(+), 8 deletions(-)
 create mode 100644 libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.svg
 create mode 100644 libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.tsx
 create mode 100644 libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.svg
 create mode 100644 libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.tsx
 create mode 100644 libs/components/icons/src/auto-icons/align-to-left/align-to-left.svg
 create mode 100644 libs/components/icons/src/auto-icons/align-to-left/align-to-left.tsx
 create mode 100644 libs/components/icons/src/auto-icons/align-to-right/align-to-right.svg
 create mode 100644 libs/components/icons/src/auto-icons/align-to-right/align-to-right.tsx
 create mode 100644 libs/components/icons/src/auto-icons/align-to-top/align-to-top.svg
 create mode 100644 libs/components/icons/src/auto-icons/align-to-top/align-to-top.tsx
 create mode 100644 libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.svg
 create mode 100644 libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.tsx
 create mode 100644 libs/components/icons/src/auto-icons/align/align.svg
 create mode 100644 libs/components/icons/src/auto-icons/align/align.tsx
 create mode 100644 libs/components/icons/src/auto-icons/bring-forward/bring-forward.svg
 create mode 100644 libs/components/icons/src/auto-icons/bring-forward/bring-forward.tsx
 create mode 100644 libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.svg
 create mode 100644 libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.tsx
 create mode 100644 libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.svg
 create mode 100644 libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.tsx
 create mode 100644 libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.svg
 create mode 100644 libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.tsx
 create mode 100644 libs/components/icons/src/auto-icons/layers/layers.svg
 create mode 100644 libs/components/icons/src/auto-icons/layers/layers.tsx
 create mode 100644 libs/components/icons/src/auto-icons/send-backward/send-backward.svg
 create mode 100644 libs/components/icons/src/auto-icons/send-backward/send-backward.tsx
 create mode 100644 libs/components/icons/src/auto-icons/send-to-back/send-to-back.svg
 create mode 100644 libs/components/icons/src/auto-icons/send-to-back/send-to-back.tsx

diff --git a/.env b/.env
index 30dbae3055..45ed0fdf71 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,6 @@
 # use for download icon from figma
-FIGMA_TOKEN
+
+FIGMA_TOKEN = figd_pndtwnAmWY1tnOGUuEYzHNe9woGdcAamrGnoXNsP
+
 NODE_ENV
 AFFINE_FEATURE_FLAG_TOKEN
diff --git a/libs/components/board-draw/src/components/align-panel/index.tsx b/libs/components/board-draw/src/components/align-panel/index.tsx
index 3a811db22a..0b470692fd 100644
--- a/libs/components/board-draw/src/components/align-panel/index.tsx
+++ b/libs/components/board-draw/src/components/align-panel/index.tsx
@@ -7,7 +7,7 @@ interface AlignObject {
      * color: none means no color
      */
     title: string;
-    icon?: string;
+    icon?: JSX.Element;
 }
 /**
  * ColorValue : none means no color
@@ -35,7 +35,7 @@ export const AlignPanel = ({
                                 onSelect?.(option);
                             }}
                         >
-                            {alignOption.name}
+                            {alignOption.icon}
                         </SelectableContainer>
                     </Tooltip>
                 );
diff --git a/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
index 9a150c3323..5e70a8e510 100644
--- a/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
+++ b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
@@ -1,6 +1,14 @@
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
-import { ShapeColorNoneIcon } from '@toeverything/components/icons';
+import {
+    AlignHorizontalCenterIcon,
+    AlignIcon,
+    AlignToBottomIcon,
+    AlignToLeftIcon,
+    AlignToRightIcon,
+    AlignToTopIcon,
+    AlignVerticalCenterIcon,
+} from '@toeverything/components/icons';
 import {
     IconButton,
     Popover,
@@ -8,7 +16,6 @@ import {
     useTheme,
 } from '@toeverything/components/ui';
 import { AlignPanel } from '../align-panel';
-
 interface BorderColorConfigProps {
     app: TldrawApp;
     shapes: TDShape[];
@@ -27,22 +34,32 @@ let AlignPanelArr = [
     {
         name: 'top',
         title: 'Align top',
+        icon: <AlignToTopIcon></AlignToTopIcon>,
     },
     {
         name: 'centerVertical',
         title: 'Align Center Vertical',
+        icon: <AlignVerticalCenterIcon></AlignVerticalCenterIcon>,
     },
     {
         name: 'bottom',
         title: 'Align bottom',
+        icon: <AlignToBottomIcon></AlignToBottomIcon>,
     },
     {
         name: 'left',
         title: 'Align left',
+        icon: <AlignToLeftIcon></AlignToLeftIcon>,
+    },
+    {
+        name: 'right',
+        title: 'Align right',
+        icon: <AlignToRightIcon></AlignToRightIcon>,
     },
     {
         name: 'centerHorizontal',
         title: 'Align centerHorizontal',
+        icon: <AlignHorizontalCenterIcon></AlignHorizontalCenterIcon>,
     },
 ];
 export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
@@ -64,7 +81,7 @@ export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
         >
             <Tooltip content="Fill Color" placement="top-start">
                 <IconButton>
-                    <ShapeColorNoneIcon />
+                    <AlignIcon />
                 </IconButton>
             </Tooltip>
         </Popover>
diff --git a/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.svg b/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.svg
new file mode 100644
index 0000000000..946c34d529
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.5 21V3h1v18h-1Z" clip-rule="evenodd"/><path d="M8 7H16V10H8z"/><path d="M5 14H19V17H5z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.tsx b/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.tsx
new file mode 100644
index 0000000000..adc4e0fc3a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignHorizontalCenterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignHorizontalCenterIcon = ({ color, style, ...props}: AlignHorizontalCenterIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M11.5 21V3h1v18h-1Z" clipRule="evenodd" /><path d="M8 7H16V10H8z" /><path d="M5 14H19V17H5z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.svg b/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.svg
new file mode 100644
index 0000000000..2518cc3925
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 21H3v-1h18v1Z" clip-rule="evenodd"/><path d="M7 17H15V20H7z" transform="rotate(-90 7 17)"/><path d="M14 17H28V20H14z" transform="rotate(-90 14 17)"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.tsx b/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.tsx
new file mode 100644
index 0000000000..25d8363a5c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToBottomIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignToBottomIcon = ({ color, style, ...props}: AlignToBottomIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 21H3v-1h18v1Z" clipRule="evenodd" /><path d="M7 17H15V20H7z" transform="rotate(-90 7 17)" /><path d="M14 17H28V20H14z" transform="rotate(-90 14 17)" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-to-left/align-to-left.svg b/libs/components/icons/src/auto-icons/align-to-left/align-to-left.svg
new file mode 100644
index 0000000000..81c33baf33
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-left/align-to-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 21V3h1v18H3Z" clip-rule="evenodd"/><path d="M7 7H15V10H7z"/><path d="M7 14H21V17H7z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-to-left/align-to-left.tsx b/libs/components/icons/src/auto-icons/align-to-left/align-to-left.tsx
new file mode 100644
index 0000000000..102015be99
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-left/align-to-left.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToLeftIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignToLeftIcon = ({ color, style, ...props}: AlignToLeftIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M3 21V3h1v18H3Z" clipRule="evenodd" /><path d="M7 7H15V10H7z" /><path d="M7 14H21V17H7z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-to-right/align-to-right.svg b/libs/components/icons/src/auto-icons/align-to-right/align-to-right.svg
new file mode 100644
index 0000000000..ed84addfab
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-right/align-to-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 21V3h-1v18h1Z" clip-rule="evenodd"/><path d="M0 0H8V3H0z" transform="matrix(-1 0 0 1 17 7)"/><path d="M0 0H14V3H0z" transform="matrix(-1 0 0 1 17 14)"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-to-right/align-to-right.tsx b/libs/components/icons/src/auto-icons/align-to-right/align-to-right.tsx
new file mode 100644
index 0000000000..b5f586d900
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-right/align-to-right.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToRightIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignToRightIcon = ({ color, style, ...props}: AlignToRightIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 21V3h-1v18h1Z" clipRule="evenodd" /><path d="M0 0H8V3H0z" transform="matrix(-1 0 0 1 17 7)" /><path d="M0 0H14V3H0z" transform="matrix(-1 0 0 1 17 14)" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-to-top/align-to-top.svg b/libs/components/icons/src/auto-icons/align-to-top/align-to-top.svg
new file mode 100644
index 0000000000..e688501fbf
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-top/align-to-top.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 3H3v1h18V3Z" clip-rule="evenodd"/><path d="M0 0H8V3H0z" transform="matrix(0 1 1 0 7 7)"/><path d="M0 0H14V3H0z" transform="matrix(0 1 1 0 14 7)"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-to-top/align-to-top.tsx b/libs/components/icons/src/auto-icons/align-to-top/align-to-top.tsx
new file mode 100644
index 0000000000..5587e0df47
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-top/align-to-top.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToTopIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignToTopIcon = ({ color, style, ...props}: AlignToTopIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 3H3v1h18V3Z" clipRule="evenodd" /><path d="M0 0H8V3H0z" transform="matrix(0 1 1 0 7 7)" /><path d="M0 0H14V3H0z" transform="matrix(0 1 1 0 14 7)" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.svg b/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.svg
new file mode 100644
index 0000000000..a58d6ed611
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 12.5H3v-1h18v1Z" clip-rule="evenodd"/><path d="M7 16H15V19H7z" transform="rotate(-90 7 16)"/><path d="M14 19H28V22H14z" transform="rotate(-90 14 19)"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.tsx b/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.tsx
new file mode 100644
index 0000000000..4d9c28d120
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignVerticalCenterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignVerticalCenterIcon = ({ color, style, ...props}: AlignVerticalCenterIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 12.5H3v-1h18v1Z" clipRule="evenodd" /><path d="M7 16H15V19H7z" transform="rotate(-90 7 16)" /><path d="M14 19H28V22H14z" transform="rotate(-90 14 19)" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align/align.svg b/libs/components/icons/src/auto-icons/align/align.svg
new file mode 100644
index 0000000000..7925bf7844
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align/align.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.4 5.6H5.6v12.8h12.8V5.6ZM4 4v16h16V4H4Z" clip-rule="evenodd"/><path d="M3 3H5V5H3z"/><path d="M3 19H5V21H3z"/><path d="M3 11H5V13H3z"/><path d="M11 3H13V5H11z"/><path d="M11 19H13V21H11z"/><path d="M11 11H13V13H11z"/><path d="M19 3H21V5H19z"/><path d="M19 19H21V21H19z"/><path d="M19 11H21V13H19z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align/align.tsx b/libs/components/icons/src/auto-icons/align/align.tsx
new file mode 100644
index 0000000000..61997d17f6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align/align.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignIcon = ({ color, style, ...props}: AlignIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.4 5.6H5.6v12.8h12.8V5.6ZM4 4v16h16V4H4Z" clipRule="evenodd" /><path d="M3 3H5V5H3z" /><path d="M3 19H5V21H3z" /><path d="M3 11H5V13H3z" /><path d="M11 3H13V5H11z" /><path d="M11 19H13V21H11z" /><path d="M11 11H13V13H11z" /><path d="M19 3H21V5H19z" /><path d="M19 19H21V21H19z" /><path d="M19 11H21V13H19z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/bring-forward/bring-forward.svg b/libs/components/icons/src/auto-icons/bring-forward/bring-forward.svg
new file mode 100644
index 0000000000..638f6aa740
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bring-forward/bring-forward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.566 9.434 12 2.87 5.434 9.434l1.132 1.132L11.2 5.93V21h1.6V5.931l4.634 4.635 1.132-1.132Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bring-forward/bring-forward.tsx b/libs/components/icons/src/auto-icons/bring-forward/bring-forward.tsx
new file mode 100644
index 0000000000..067253a85e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bring-forward/bring-forward.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface BringForwardIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BringForwardIcon = ({ color, style, ...props}: BringForwardIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.566 9.434 12 2.87 5.434 9.434l1.132 1.132L11.2 5.93V21h1.6V5.931l4.634 4.635 1.132-1.132Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.svg b/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.svg
new file mode 100644
index 0000000000..7158fe6f56
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.566 12.434 12 5.87l-6.566 6.565 1.132 1.132L11.2 8.93V21h1.6V8.931l4.634 4.635 1.132-1.132ZM5 3h14v1.6H5V3Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.tsx b/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.tsx
new file mode 100644
index 0000000000..9424307345
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface BringToFrontIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BringToFrontIcon = ({ color, style, ...props}: BringToFrontIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.566 12.434 12 5.87l-6.566 6.565 1.132 1.132L11.2 8.93V21h1.6V8.931l4.634 4.635 1.132-1.132ZM5 3h14v1.6H5V3Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.svg b/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.svg
new file mode 100644
index 0000000000..78934c6d1a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20 21V3h-1v18h1ZM5 21V3H4v18h1Z" clip-rule="evenodd"/><path d="M0 0H10V3H0z" transform="matrix(0 -1 -1 0 13.5 17)"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.tsx b/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.tsx
new file mode 100644
index 0000000000..0871851c6e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface DistributeHorizontalIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DistributeHorizontalIcon = ({ color, style, ...props}: DistributeHorizontalIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20 21V3h-1v18h1ZM5 21V3H4v18h1Z" clipRule="evenodd" /><path d="M0 0H10V3H0z" transform="matrix(0 -1 -1 0 13.5 17)" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.svg b/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.svg
new file mode 100644
index 0000000000..b3189fda48
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.75 4.25h-18v1h18v-1ZM20.75 18.75h-18v1h18v-1Z" clip-rule="evenodd"/><path d="M0 0H10V3H0z" transform="matrix(-1 0 0 1 17 10.5)"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.tsx b/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.tsx
new file mode 100644
index 0000000000..bbaaea88f3
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface DistributeVerticalIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DistributeVerticalIcon = ({ color, style, ...props}: DistributeVerticalIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20.75 4.25h-18v1h18v-1ZM20.75 18.75h-18v1h18v-1Z" clipRule="evenodd" /><path d="M0 0H10V3H0z" transform="matrix(-1 0 0 1 17 10.5)" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/index.ts b/libs/components/icons/src/auto-icons/index.ts
index 8ea2f6c0a0..d8a932e463 100644
--- a/libs/components/icons/src/auto-icons/index.ts
+++ b/libs/components/icons/src/auto-icons/index.ts
@@ -1,4 +1,4 @@
-export const timestamp = 1660270988401;
+export const timestamp = 1660740866491;
 export * from './image/image';
 export * from './format-clear/format-clear';
 export * from './backward-undo/backward-undo';
@@ -129,4 +129,18 @@ export * from './unlock/unlock';
 export * from './more-tags-an-subblocks/more-tags-an-subblocks';
 export * from './page-in-page-tree/page-in-page-tree';
 export * from './pin/pin';
-export * from './add/add';
\ No newline at end of file
+export * from './add/add';
+export * from './align-to-left/align-to-left';
+export * from './align-to-right/align-to-right';
+export * from './distribute-horizontal/distribute-horizontal';
+export * from './distribute-vertical/distribute-vertical';
+export * from './align-to-top/align-to-top';
+export * from './align-to-bottom/align-to-bottom';
+export * from './align-horizontal-center/align-horizontal-center';
+export * from './align-vertical-center/align-vertical-center';
+export * from './bring-forward/bring-forward';
+export * from './send-backward/send-backward';
+export * from './bring-to-front/bring-to-front';
+export * from './send-to-back/send-to-back';
+export * from './align/align';
+export * from './layers/layers';
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/layers/layers.svg b/libs/components/icons/src/auto-icons/layers/layers.svg
new file mode 100644
index 0000000000..9859478a12
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/layers/layers.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.578 8 12 11.211 18.422 8 12 4.789 5.578 8Zm5.975-4.776L3.789 7.106a1 1 0 0 0 0 1.788l7.764 3.882a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-7.764-3.882a1 1 0 0 0-.894 0Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m5.579 12-1.789-.895h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-.001-.001-1.789.894.001.001L12 15.211 5.578 12Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.579 16.094 3.79 15.2h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.789h-.001l-1.789.894.001.001L12 19.306l-6.422-3.211Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/layers/layers.tsx b/libs/components/icons/src/auto-icons/layers/layers.tsx
new file mode 100644
index 0000000000..be23ad2287
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/layers/layers.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface LayersIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LayersIcon = ({ color, style, ...props}: LayersIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M5.578 8 12 11.211 18.422 8 12 4.789 5.578 8Zm5.975-4.776L3.789 7.106a1 1 0 0 0 0 1.788l7.764 3.882a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-7.764-3.882a1 1 0 0 0-.894 0Z" clipRule="evenodd" /><path fillRule="evenodd" d="m5.579 12-1.789-.895h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-.001-.001-1.789.894.001.001L12 15.211 5.578 12Z" clipRule="evenodd" /><path fillRule="evenodd" d="M5.579 16.094 3.79 15.2h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.789h-.001l-1.789.894.001.001L12 19.306l-6.422-3.211Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/send-backward/send-backward.svg b/libs/components/icons/src/auto-icons/send-backward/send-backward.svg
new file mode 100644
index 0000000000..75d31da632
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/send-backward/send-backward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.8 18.069V3h-1.6v15.069l-4.634-4.635-1.132 1.132L12 21.13l6.566-6.565-1.132-1.132L12.8 18.07Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/send-backward/send-backward.tsx b/libs/components/icons/src/auto-icons/send-backward/send-backward.tsx
new file mode 100644
index 0000000000..41cd3ac134
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/send-backward/send-backward.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface SendBackwardIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SendBackwardIcon = ({ color, style, ...props}: SendBackwardIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12.8 18.069V3h-1.6v15.069l-4.634-4.635-1.132 1.132L12 21.13l6.566-6.565-1.132-1.132L12.8 18.07Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/send-to-back/send-to-back.svg b/libs/components/icons/src/auto-icons/send-to-back/send-to-back.svg
new file mode 100644
index 0000000000..a114dfdd62
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/send-to-back/send-to-back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.8 15.069V3h-1.6v12.069l-4.634-4.635-1.132 1.132L12 18.13l6.566-6.565-1.132-1.132L12.8 15.07ZM19 21H5v-1.6h14V21Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/send-to-back/send-to-back.tsx b/libs/components/icons/src/auto-icons/send-to-back/send-to-back.tsx
new file mode 100644
index 0000000000..479a092f28
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/send-to-back/send-to-back.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface SendToBackIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SendToBackIcon = ({ color, style, ...props}: SendToBackIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12.8 15.069V3h-1.6v12.069l-4.634-4.635-1.132 1.132L12 18.13l6.566-6.565-1.132-1.132L12.8 15.07ZM19 21H5v-1.6h14V21Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};

From e8f82ddc5538a6432a68ac6c34cb8a85e04cfa88 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Wed, 17 Aug 2022 21:28:17 +0800
Subject: [PATCH 4/5] feat layers and align

---
 .../src/components/align-panel/index.tsx      | 17 +---
 .../command-panel/AlignOperation.tsx          | 30 ++++++-
 .../components/command-panel/MoveCoverage.tsx | 84 ++++++-------------
 3 files changed, 56 insertions(+), 75 deletions(-)

diff --git a/libs/components/board-draw/src/components/align-panel/index.tsx b/libs/components/board-draw/src/components/align-panel/index.tsx
index 0b470692fd..d0b8092c2c 100644
--- a/libs/components/board-draw/src/components/align-panel/index.tsx
+++ b/libs/components/board-draw/src/components/align-panel/index.tsx
@@ -45,18 +45,16 @@ export const AlignPanel = ({
 };
 
 const Container = styled('div')({
-    width: '120px',
+    width: '170px',
     display: 'flex',
     flexWrap: 'wrap',
 });
 
 const SelectableContainer = styled('div')<{ selected?: boolean }>(
     ({ selected, theme }) => ({
-        width: '20px',
-        height: '20px',
-        // border: `1px solid ${
-        //     selected ? theme.affine.palette.primary : 'rgba(0,0,0,0)'
-        // }`,
+        width: '22px',
+        height: '22px',
+        color: theme.affine.palette.icons,
         borderRadius: '5px',
         overflow: 'hidden',
         margin: '10px',
@@ -65,10 +63,3 @@ const SelectableContainer = styled('div')<{ selected?: boolean }>(
         boxSizing: 'border-box',
     })
 );
-
-const Color = styled('div')({
-    width: '16px',
-    height: '16px',
-    borderRadius: '5px',
-    boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.25)',
-});
diff --git a/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
index 5e70a8e510..d3a8670fce 100644
--- a/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
+++ b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
@@ -1,5 +1,5 @@
 import type { TldrawApp } from '@toeverything/components/board-state';
-import type { TDShape } from '@toeverything/components/board-types';
+import { StretchType, TDShape } from '@toeverything/components/board-types';
 import {
     AlignHorizontalCenterIcon,
     AlignIcon,
@@ -8,6 +8,8 @@ import {
     AlignToRightIcon,
     AlignToTopIcon,
     AlignVerticalCenterIcon,
+    DistributeHorizontalIcon,
+    DistributeVerticalIcon,
 } from '@toeverything/components/icons';
 import {
     IconButton,
@@ -61,11 +63,31 @@ let AlignPanelArr = [
         title: 'Align centerHorizontal',
         icon: <AlignHorizontalCenterIcon></AlignHorizontalCenterIcon>,
     },
+    {
+        name: 'stretchCenterHorizontal',
+        title: 'Align stretch centerHorizontal',
+        icon: <DistributeHorizontalIcon></DistributeHorizontalIcon>,
+    },
+    {
+        name: 'stretchCenterVertical',
+        title: 'Align stretch centerHorizontal',
+        icon: <DistributeVerticalIcon></DistributeVerticalIcon>,
+    },
 ];
 export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
     const theme = useTheme();
-    const setAlign = (alginType: AlignType) => {
-        app.align(alginType);
+    const setAlign = (alginType: string) => {
+        switch (alginType) {
+            case 'stretchCenterHorizontal':
+                app.stretch(StretchType.Horizontal);
+                break;
+            case 'stretchCenterVertical':
+                app.stretch(StretchType.Vertical);
+                break;
+            default:
+                app.align(alginType as AlignType);
+                break;
+        }
     };
 
     return (
@@ -79,7 +101,7 @@ export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
                 ></AlignPanel>
             }
         >
-            <Tooltip content="Fill Color" placement="top-start">
+            <Tooltip content="Align" placement="top-start">
                 <IconButton>
                     <AlignIcon />
                 </IconButton>
diff --git a/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx b/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx
index d5faf978e7..cbca4224fa 100644
--- a/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx
+++ b/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx
@@ -1,44 +1,40 @@
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import {
-    HeadingOneIcon,
-    HeadingThreeIcon,
-    HeadingTwoIcon,
-    LockIcon,
-    TextFontIcon,
+    BringForwardIcon,
+    BringToFrontIcon,
+    LayersIcon,
+    SendBackwardIcon,
+    SendToBackIcon,
 } from '@toeverything/components/icons';
-import {
-    IconButton,
-    Popover,
-    styled,
-    Tooltip,
-} from '@toeverything/components/ui';
+import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
 
 interface FontSizeConfigProps {
     app: TldrawApp;
     shapes: TDShape[];
 }
 
-const _fontSizes = [
+const AlignPanelArr = [
     {
-        name: 'To Front',
-        value: 'tofront',
-        icon: <HeadingOneIcon />,
+        title: 'To Front',
+        name: 'tofront',
+        icon: <BringToFrontIcon />,
     },
     {
-        name: 'Forward',
-        value: 'forward',
-        icon: <HeadingTwoIcon />,
+        title: 'Forward',
+        name: 'forward',
+        icon: <BringForwardIcon />,
     },
     {
-        name: 'Backward',
-        value: 'backward',
-        icon: <HeadingThreeIcon />,
+        title: 'Backward',
+        name: 'backward',
+        icon: <SendBackwardIcon />,
     },
     {
-        name: 'To Back',
-        value: 'toback',
-        icon: <TextFontIcon />,
+        title: 'To Back',
+        name: 'toback',
+        icon: <SendToBackIcon />,
     },
 ];
 
@@ -65,45 +61,17 @@ export const MoveCoverageConfig = ({ app, shapes }: FontSizeConfigProps) => {
             trigger="hover"
             placement="bottom-start"
             content={
-                <div>
-                    {_fontSizes.map(fontSize => {
-                        return (
-                            <ListItemContainer
-                                key={fontSize.value}
-                                onClick={() => moveCoverage(fontSize.value)}
-                            >
-                                {/* {fontSize.icon} */}
-                                <ListItemTitle>{fontSize.name}</ListItemTitle>
-                            </ListItemContainer>
-                        );
-                    })}
-                </div>
+                <AlignPanel
+                    alignOptions={AlignPanelArr}
+                    onSelect={moveCoverage}
+                ></AlignPanel>
             }
         >
-            <Tooltip content="Font Size" placement="top-start">
+            <Tooltip content="Layers" placement="top-start">
                 <IconButton>
-                    <LockIcon />
+                    <LayersIcon />
                 </IconButton>
             </Tooltip>
         </Popover>
     );
 };
-
-const ListItemContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    height: '32px',
-    padding: '4px 12px',
-    color: theme.affine.palette.icons,
-
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    '&:hover': {
-        backgroundColor: theme.affine.palette.hover,
-    },
-}));
-
-const ListItemTitle = styled('span')(({ theme }) => ({
-    marginLeft: '12px',
-    color: theme.affine.palette.primaryText,
-}));

From a7213d1a4df1fc869fd3b3c41c95788fe6b356af Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Wed, 17 Aug 2022 21:33:38 +0800
Subject: [PATCH 5/5] delete token

---
 .env | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.env b/.env
index 45ed0fdf71..63e14bc841 100644
--- a/.env
+++ b/.env
@@ -1,6 +1,5 @@
 # use for download icon from figma
 
-FIGMA_TOKEN = figd_pndtwnAmWY1tnOGUuEYzHNe9woGdcAamrGnoXNsP
-
+FIGMA_TOKEN
 NODE_ENV
 AFFINE_FEATURE_FLAG_TOKEN