ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: 테이블 스타일 수정

Browse Source
This commit is contained in:
chanii8
2025-03-31 15:10:38 +09:00
parent c3fdf92f5c
commit 8117ca5c2c
5 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/src/app/styles/components.css
+1 -1
View File
@@ -120,8 +120,8 @@
/* 블랙 테마 */
[data-theme="black"] {
.card-border {
border-color: #3f4042;
background-color: rgba(255, 255, 255, 0.065);
border-color: #38383a;
}
.card-header {
border-bottom-color: #3f4042;
packages/common/components/src/ui/data-table/index.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ function DataTable<T>({
<TableRow
key={row.id}
onClick={() => onRowClick?.(row.original)}
className={onRowClick ? "cursor-pointer hover:bg-muted" : ""}
className={onRowClick ? "cursor-pointer hover:bg-accent" : ""}
>
{row.getVisibleCells().map((cell) => {
const { meta } = cell.column.columnDef;
packages/common/components/src/ui/page-title/index.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const PageTitle = ({
return (
<div className="flex w-full items-center justify-between px-[1.8rem] pt-[2rem]">
<h2 className="text-[2.4rem] font-semibold text-title">{title}</h2>
{menuPaths.length && (
{menuPaths.length > 0 && (
<div className="flex items-center gap-3">
<i className="diveicon di-home-fill text-foreground" />
{menuPaths?.map((path, i) => (
packages/common/components/src/ui/table/index.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
}
const Table = React.forwardRef<HTMLTableElement, TableProps>(
({ className, variant, ...props }, ref) => (
({ className, variant = "default", ...props }, ref) => (
<div className="relative w-full">
<table
ref={ref}
packages/common/components/src/ui/table/table.css
+25 -13
View File
@@ -1,38 +1,50 @@
@tailwind components;
@layer components {
.table-ui tr {
@apply border-0 hover:bg-accent;
}
.table-ui th {
@apply bg-[#5987bf] px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2] text-[#fff];
@apply px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2];
}
.table-ui td {
@apply border-b border-b-border px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2] text-label;
@apply px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2];
}
.table-ui.default th {
@apply bg-[#5987bf] text-[#fff];
}
.table-ui.default td {
@apply border-b border-b-border text-label;
}
.table-ui.secondary th {
@apply border border-border bg-[#eaf3fb] text-[#647784];
}
.table-ui.secondary td {
@apply border border-border;
}
.table-ui.line th {
@apply border-0 border-b-2 border-t border-b-[#d4e0ea] border-t-[#d4e0ea] bg-[#fff] text-[#555];
.table-ui.line tr {
@apply border-b border-t border-[#d4e0ea] bg-transparent;
}
.table-ui.line td {
@apply border-b border-b-border;
.table-ui.line th {
@apply border-b-2 border-[#d4e0ea] text-[#555];
}
[data-theme="black"] {
.table-ui th {
@apply bg-[#5e7b9c] text-[#fff];
.table-ui.default tr {
@apply bg-[#545556];
}
.table-ui.default th {
@apply bg-[#62686d];
}
.table-ui.secondary tr {
@apply bg-[#565b5f];
}
.table-ui.secondary th {
@apply bg-[#1a1c1d];
@apply bg-[#5e7b9c] text-[#fff];
}
.table-ui.line th {
@apply bg-[#0a0a0a];
@apply text-[#fff];
}
}
}