Merge pull request #35 from prezly/fix/mt-5190-table-looks-bad-in-mar…

…cel-theme [MT-5190] Fix - Table looks bad in marcel theme
prezly · Jul 25, 2022 · 4ce7a95 · 4ce7a95
2 parents aac739b + 4b22ec4
commit 4ce7a95
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/src/elements/Table/Table.scss b/src/elements/Table/Table.scss
@@ -1,31 +1,35 @@
 @import "styles/variables";
 
-.prezly-table {
+.prezly-slate-table {
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
 
     &--withBorders {
-        .prezly-table-row,
-        .prezly-table-cell {
+        .prezly-slate-table-row,
+        .prezly-slate-table-cell {
             border: 1px solid $color-grey-300;
         }
     }
 }
 
-.prezly-table-row {
+.prezly-slate-table-row {
     color: $color-grey-700;
     font-size: $font-size-s;
 }
 
-.prezly-table-cell {
+.prezly-slate-table-cell {
     min-width: 40px;
     min-height: 40px;
     padding: $spacing-1-5;
     outline: none !important;
 
-    > p {
-        margin: 0;
+    > *:first-child {
+        margin-top: 0;
+    }
+
+    > *:last-child {
+        margin-bottom: 0;
     }
 
     &--header {

diff --git a/src/elements/Table/Table.tsx b/src/elements/Table/Table.tsx
@@ -11,8 +11,8 @@ export function Table({ children, node }: Props) {
     return (
         <TableContextProvider table={node}>
             <table
-                className={classNames('prezly-table', {
-                    ['prezly-table--withBorders']: node.border,
+                className={classNames('prezly-slate-table', {
+                    ['prezly-slate-table--withBorders']: node.border,
                 })}
             >
                 <tbody>{children}</tbody>

diff --git a/src/elements/Table/TableCell.tsx b/src/elements/Table/TableCell.tsx
@@ -21,8 +21,8 @@ export function TableCell({ children, node }: Props) {
 
     return (
         <Cell
-            className={classNames('prezly-table-cell', {
-                ['prezly-table-cell--header']: isHeaderCell,
+            className={classNames('prezly-slate-table-cell', {
+                ['prezly-slate-table-cell--header']: isHeaderCell,
             })}
             colSpan={node.colspan}
             rowSpan={node.rowspan}

diff --git a/src/elements/Table/TableRow.tsx b/src/elements/Table/TableRow.tsx
@@ -6,5 +6,5 @@ interface Props extends HTMLAttributes<HTMLTableCellElement> {
 }
 
 export function TableRow({ children }: Props) {
-    return <tr className="prezly-table-row">{children}</tr>;
+    return <tr className="prezly-slate-table-row">{children}</tr>;
 }