feat: WIKI-19593: implementation of new table design #283
Conversation
src/scss/_common.scss
Outdated
| @@ -146,7 +146,7 @@ | |||
| } | |||
|
|
|||
| table { | |||
| color: #333333; | |||
| color: #00000080; | |||
There was a problem hiding this comment.
No need to change that. Because in Figma there is a placeholder text.
| box-sizing: border-box; | ||
| border-radius: 8px; | ||
| border-collapse: collapse; | ||
| border-collapse: separate; |
There was a problem hiding this comment.
I think we should leave border-collapse: collapse;. Because if we have border-collapse: separate; than the border will be 2px wide.
| border-spacing: 0; | ||
| background: $baseColor; | ||
|
|
||
| thead, tr:nth-child(2n) { | ||
| background-color: $tableRowBackgroundColor; | ||
| } | ||
|
|
||
| tr:first-child td:first-child { | ||
| border-top-left-radius: $tableBorderRadius; |
There was a problem hiding this comment.
Why this didn't fit you?
There was a problem hiding this comment.
The issue is there are these weird looking double borders outside of the table:
There was a problem hiding this comment.
Alright, so let's leave as you did
src/scss/_common.scss
Outdated
| border: 1px solid $borderColor; | ||
| text-align: center; | ||
| // Idk about font-size, if you can find better font-size please use it. | ||
| font-size: 1.1rem; |
There was a problem hiding this comment.
let's remove that and leave the font as it is. Because now in tables font size will be bigger than anywhere in the content
src/scss/_common.scss
Outdated
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| border: 1px solid $borderColor; | ||
| text-align: center; |
There was a problem hiding this comment.
Also we don't need to change text-align.
|
The whole point was to add borders between cells, change colors a little bit and increase paddings |
src/scss/_common.scss
Outdated
| } | ||
|
|
||
| tr td:first-child { | ||
| border-top-style: solid; |
There was a problem hiding this comment.
Final touch. Should change this line to border-left: 1px solid $borderColor. So we come from this:
to this:
feat: WIKI-19593: implementation of new table design