fix: change borders in table

digitable-lol · Sep 2, 2024 · 50cb871 · 50cb871
1 parent 608d85e
commit 50cb871
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/application/frontend/src/components/ReportsTable/ReportsTable.styled.ts b/application/frontend/src/components/ReportsTable/ReportsTable.styled.ts
@@ -18,19 +18,25 @@ export const AuthorAvatar = styled(Avatar)`
 export const StyledTableCell = styled(TableCell)`
   display: flex;
   align-items: center;
-  border-bottom: none;
+  padding: 16px;
 `
 
 export const StyledTableRow = styled(TableRow)`
-  &:first-child ${StyledTableCell} {
-    border-bottom: 1px solid rgba(224, 224, 224, 1);
+  &:not(:first-of-type) ${StyledTableCell} {
+    border-top: 1px solid rgba(224, 224, 224, 1);
   }
 
-  &:not(:first-child) ${StyledTableCell} {
+  &:last-child ${StyledTableCell} {
     border-bottom: none;
   }
 `
 
+export const TableHeaderRow = styled(TableRow)`
+  ${StyledTableCell} {
+    border-bottom: 2px solid rgba(224, 224, 224, 1);
+  }
+`
+
 export const AuthorContainer = styled.div`
   display: flex;
   align-items: center;
@@ -45,4 +51,5 @@ export const DateText = styled(Typography).attrs({
 
 export const CustomTableContainer = styled(TableContainer)`
   box-shadow: none;
+  border: none;
 `
diff --git a/application/frontend/src/components/ReportsTable/ReportsTable.tsx b/application/frontend/src/components/ReportsTable/ReportsTable.tsx
@@ -13,6 +13,7 @@ import {
   ProjectName,
   StyledTableCell,
   StyledTableRow,
+  TableHeaderRow,
 } from "./ReportsTable.styled"
 
 export interface Report {
@@ -34,13 +35,13 @@ export const ReportsTable: React.FC<ReportsTableProps> = ({ reports }) => {
     <CustomTableContainer>
       <Table>
         <TableHead>
-          <StyledTableRow>
+          <TableHeaderRow>
             <StyledTableCell>Name</StyledTableCell>
             <StyledTableCell>Status</StyledTableCell>
             <StyledTableCell>Author</StyledTableCell>
             <StyledTableCell>Start Date</StyledTableCell>
             <StyledTableCell>End Date</StyledTableCell>
-          </StyledTableRow>
+          </TableHeaderRow>
         </TableHead>
         <TableBody>
           {reports.map((report) => (