V4.6.6-1 (#656)

projects/app/src/pages/dataset/list/index.tsx

@@ -7,7 +7,8 @@ import {
   useDisclosure,
   Card,
   MenuButton,
-  Image
+  Image,
+  Button
 } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useDatasetStore } from '@/web/core/dataset/store/dataset';
@@ -131,8 +132,8 @@ const Kb = () => {
   );
 
   return (
-    <PageContainer isLoading={isFetching}>
-      <Flex pt={3} px={5} alignItems={'center'}>
+    <PageContainer isLoading={isFetching} insertProps={{ px: [5, '48px'] }}>
+      <Flex pt={[4, '30px']} alignItems={'center'} justifyContent={'space-between'}>
         {/* url path */}
         <ParentPaths
           paths={paths.map((path, i) => ({
@@ -161,23 +162,14 @@ const Kb = () => {
             offset={[-30, 10]}
             width={120}
             Button={
-              <MenuButton
-                _hover={{
-                  color: 'blue.500'
-                }}
-              >
-                <Flex
-                  alignItems={'center'}
-                  border={theme.borders.base}
-                  px={5}
-                  py={2}
-                  borderRadius={'md'}
-                  cursor={'pointer'}
-                >
-                  <AddIcon mr={2} />
-                  <Box>{t('Create New')}</Box>
-                </Flex>
-              </MenuButton>
+              <Button variant={'primaryOutline'} px={0}>
+                <MenuButton h={'100%'}>
+                  <Flex alignItems={'center'} px={'20px'}>
+                    <AddIcon mr={2} />
+                    <Box>{t('Create New')}</Box>
+                  </Flex>
+                </MenuButton>
+              </Button>
             }
             menuList={[
               {
@@ -203,25 +195,26 @@ const Kb = () => {
         )}
       </Flex>
       <Grid
-        p={5}
-        gridTemplateColumns={['1fr', 'repeat(3,1fr)', 'repeat(4,1fr)', 'repeat(5,1fr)']}
+        py={5}
+        gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
         gridGap={5}
         userSelect={'none'}
       >
         {formatDatasets.map((dataset) => (
-          <Card
+          <Box
             display={'flex'}
             flexDirection={'column'}
             key={dataset._id}
             py={3}
             px={5}
             cursor={'pointer'}
+            borderWidth={1.5}
+            borderColor={dragTargetId === dataset._id ? 'primary.600' : 'borderColor.low'}
+            bg={'white'}
+            borderRadius={'lg'}
             minH={'130px'}
-            border={theme.borders.md}
-            boxShadow={'none'}
             position={'relative'}
             data-drag-id={dataset.type === DatasetTypeEnum.folder ? dataset._id : undefined}
-            borderColor={dragTargetId === dataset._id ? 'blue.500' : ''}
             draggable
             onDragStart={(e) => {
               setDragStartId(dataset._id);
@@ -250,8 +243,8 @@ const Kb = () => {
               setDragTargetId(undefined);
             }}
             _hover={{
-              boxShadow: '1px 1px 10px rgba(0,0,0,0.2)',
-              borderColor: 'transparent',
+              borderColor: 'primary.300',
+              boxShadow: '1.5',
               '& .delete': {
                 display: 'block'
               }
@@ -287,7 +280,7 @@ const Kb = () => {
                     h={'22px'}
                     borderRadius={'md'}
                     _hover={{
-                      color: 'blue.500',
+                      color: 'primary.500',
                       '& .icon': {
                         bg: 'myGray.100'
                       }
@@ -419,7 +412,7 @@ const Kb = () => {
               <MyIcon mr={1} name={dataset.icon as any} w={'12px'} />
               <Box color={'myGray.500'}>{t(dataset.label)}</Box>
             </Flex>
-          </Card>
+          </Box>
         ))}
       </Grid>
       {myDatasets.length === 0 && (