feat(web): 优化 issueList 样式

ohbug-org · Jul 6, 2022 · ae787c6 · ae787c6
1 parent 60079f4
commit ae787c6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/packages/web/src/components/issueList.tsx b/packages/web/src/components/issueList.tsx
@@ -27,15 +27,17 @@ const IssueList: FC<Props> = ({ issues }) => {
       h="full"
       overflowX="hidden"
       overflowY="auto"
-      rounded="lg"
       w="full"
     >
       {/* header */}
       <ThemeBox
         bg="gray"
+        border="1px"
+        borderColor="current"
         display="flex"
-        px="2"
-        py="3"
+        overflow="hidden"
+        p="2"
+        rounded="lg"
       >
         <Box w="50%">
           Message
@@ -69,18 +71,22 @@ const IssueList: FC<Props> = ({ issues }) => {
           Users
         </Center>
       </ThemeBox>
-
+      {/* body */}
       <Box>
         {
           issues.map(issue => (
-            <Flex
+            <ThemeBox
               _hover={
                 { bg: rowHoverBg }
               }
+              border="1px"
+              borderColor="current"
+              borderTop="none"
+              borderX="none"
+              display="flex"
               key={issue.id}
               px="2"
               py="3"
-              rounded="sm"
             >
               {/* main */}
               <Box w="50%">
@@ -173,7 +179,7 @@ const IssueList: FC<Props> = ({ issues }) => {
               <Center w="20">
                 {issue._count?.users}
               </Center>
-            </Flex>
+            </ThemeBox>
           ))
         }
       </Box>

diff --git a/packages/web/src/pages/[projectId]/issues/index.tsx b/packages/web/src/pages/[projectId]/issues/index.tsx
@@ -4,6 +4,7 @@ import useSWR from 'swr'
 import IssueList from '~/components/issueList'
 import Loading from '~/components/loading'
 import Pagination from '~/components/pagination'
+import ThemeBox from '~/components/themeBox'
 import Wrapper from '~/components/wrapper'
 import useCurrentProject from '~/hooks/useCurrentProject'
 
@@ -15,25 +16,27 @@ const Issues: NextPage = () => {
   const loading = useMemo(() => !issues, [issues])
 
   return (
-    <Wrapper>
-      {
-        loading
-          ? <Loading />
-          : (
-            <>
-              <IssueList
-                issues={issues}
-              />
-              <Pagination
-                mt="6"
-                onChange={page => setPage(page)}
-                page={page}
-                total={total}
-              />
-            </>
-          )
-      }
-    </Wrapper>
+    <ThemeBox bg="current">
+      <Wrapper>
+        {
+          loading
+            ? <Loading />
+            : (
+              <>
+                <IssueList
+                  issues={issues}
+                />
+                <Pagination
+                  mt="6"
+                  onChange={page => setPage(page)}
+                  page={page}
+                  total={total}
+                />
+              </>
+            )
+        }
+      </Wrapper>
+    </ThemeBox>
   )
 }