feat: modify style & add edgeless toolbar

packages/app/src/components/shortcuts-modal/style.ts

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 
 export const StyledShortcutsModal = styled.div(({ theme }) => ({
   width: '268px',
@@ -19,9 +19,7 @@ export const StyledTitle = styled.div(({ theme }) => ({
   color: theme.colors.textColor,
   fontWeight: '600',
   fontSize: theme.font.sm,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  ...displayFlex('center', 'center'),
   svg: {
     width: '20px',
     marginRight: '14px',
@@ -38,9 +36,7 @@ export const StyledSubTitle = styled.div(({ theme }) => ({
   padding: '0 16px',
 }));
 export const StyledModalHeader = styled.div(({ theme }) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
+  ...displayFlex('space-between', 'center'),
   height: '36px',
   width: '100%',
   padding: '8px 16px 0 16px',
@@ -54,9 +50,7 @@ export const StyledModalHeader = styled.div(({ theme }) => ({
 
 export const StyledListItem = styled.div(({ theme }) => ({
   height: '32px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
+  ...displayFlex('space-between', 'center'),
   fontSize: theme.font.xs,
   padding: '0 16px',
 }));
@@ -68,6 +62,11 @@ export const CloseButton = styled('div')(({ theme }) => {
     borderRadius: '5px',
     color: theme.colors.iconColor,
     cursor: 'pointer',
+    ...displayFlex('center', 'center'),
+    svg: {
+      width: '15px',
+      height: '15px',
+    },
     ':hover': {
       background: theme.colors.hoverBackground,
     },