Fix/UI issue (#946)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>

apps/web/src/components/workspace-modal/styles.ts

@@ -19,12 +19,14 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
   return {
     marginLeft: '15px',
     p: {
+      color: theme.colors.popoverColor,
       height: '20px',
-      fontSize: theme.font.xs,
+      fontSize: theme.font.sm,
       ...displayFlex('flex-start', 'center'),
     },
     svg: {
       marginRight: '10px',
+      fontSize: '16px',
     },
   };
 });
@@ -54,13 +56,12 @@ export const StyledCard = styled.div<{
     border: `1px solid ${borderColor}`,
     ...displayFlex('flex-start', 'flex-start'),
     marginBottom: '24px',
+    transition: 'background .2s',
     ':hover': {
       background: theme.colors.hoverBackground,
       '.add-icon': {
-        border: `1.5px dashed ${theme.colors.primaryColor}`,
-        svg: {
-          fill: theme.colors.primaryColor,
-        },
+        borderColor: theme.colors.primaryColor,
+        color: theme.colors.primaryColor,
       },
     },
   };
@@ -103,6 +104,7 @@ export const StyledHelperContainer = styled.div(({ theme }) => {
     color: theme.colors.iconColor,
     marginLeft: '15px',
     fontWeight: 400,
+    fontSize: theme.font.h6,
     ...displayFlex('center', 'center'),
   };
 });
@@ -126,11 +128,10 @@ export const StyleWorkspaceAdd = styled.div(() => {
     width: '58px',
     height: '58px',
     borderRadius: '100%',
-    textAlign: 'center',
     background: '#f4f5fa',
     border: '1.5px dashed #f4f5fa',
-    lineHeight: '58px',
-    marginTop: '2px',
+    transition: 'background .2s',
+    ...displayFlex('center', 'center'),
   };
 });
 export const StyledModalHeader = styled('div')(({ theme }) => {