refactor: improve block UI consistency and comment icon styling

- Wrapped heading blocks in rounded pill containers matching paragraph block styling
- Unified comment icon design across all block types (full-width and columns) with consistent SVG speech bubble
- Reduced block wrapper vertical padding (py-1 → py-0.5) and inline toolbar padding for more compact layout
- Added right padding to block content (pr-8) to prevent comment icon overlap with colored backgrounds
- Excluded paragraph,
This commit is contained in:
2025-11-16 10:55:59 -05:00
parent ba86bd4b91
commit 8b2510e9cc
14 changed files with 347 additions and 414 deletions
+25 -304
View File
@@ -10,338 +10,59 @@ documentModelFormat: "block-model-v1"
"title": "Page Tests",
"blocks": [
{
"id": "block_1763234865120_um14zlycy",
"id": "block_1763307699824_r3elleo33",
"type": "heading",
"props": {
"level": 1,
"text": "H1"
"text": "asdassda"
},
"meta": {
"createdAt": "2025-11-15T19:27:45.120Z",
"updatedAt": "2025-11-15T20:06:49.723Z",
"align": "center",
"bgColor": "#dc2626"
"createdAt": "2025-11-16T15:41:39.824Z",
"updatedAt": "2025-11-16T15:41:42.459Z"
}
},
{
"id": "block_1763240860187_hdklpobdf",
"type": "line",
"props": {
"style": "solid"
},
"meta": {
"createdAt": "2025-11-15T21:07:40.187Z",
"updatedAt": "2025-11-15T21:36:29.164Z"
}
},
{
"id": "block_1763234657433_5malb56fe",
"type": "list-item",
"props": {
"kind": "check",
"text": "checkbox",
"checked": false,
"indent": 0,
"align": "left"
},
"meta": {
"createdAt": "2025-11-15T19:24:17.433Z",
"updatedAt": "2025-11-15T20:13:56.404Z",
"bgColor": "#dc2626"
}
},
{
"id": "block_1763237180130_m82opx9yx",
"type": "paragraph",
"props": {
"text": "paragraphe"
},
"meta": {
"createdAt": "2025-11-15T20:06:20.130Z",
"updatedAt": "2025-11-15T20:13:50.464Z",
"bgColor": "#dc2626"
}
},
{
"id": "block_1763234665227_e09ql6sb4",
"type": "list-item",
"props": {
"kind": "bullet",
"text": "bullet",
"indent": 0,
"align": "left"
},
"meta": {
"createdAt": "2025-11-15T19:24:25.227Z",
"updatedAt": "2025-11-15T20:07:27.797Z",
"bgColor": "#dc2626"
}
},
{
"id": "block_1763237840896_fuw5hvm9t",
"type": "columns",
"id": "block_1763308160356_nfhdtf1p1",
"type": "kanban",
"props": {
"columns": [
{
"id": "or66s9hqb",
"blocks": [
"id": "block_1763308177122_doyf2zh37",
"title": "To Do",
"cards": [
{
"id": "block_1763237836743_a06ez4lux",
"type": "paragraph",
"props": {
"text": "paragraphe"
},
"meta": {
"createdAt": "2025-11-15T20:17:16.743Z",
"updatedAt": "2025-11-15T20:17:16.743Z",
"bgColor": "#dc2626"
}
"id": "item_1763308197023_pbeezlint",
"title": "New Card 2",
"description": ""
},
{
"id": "n90fsx72s",
"type": "paragraph",
"props": {
"text": "paragraphe"
},
"children": [],
"meta": {
"bgColor": "#dc2626"
}
"id": "item_1763308195207_1skel85f7",
"title": "New Card 1",
"description": ""
},
{
"id": "tkk3ir62w",
"type": "paragraph",
"props": {
"text": ""
},
"children": []
},
{
"id": "ljyumvc5w",
"type": "paragraph",
"props": {
"text": ""
},
"children": []
},
{
"id": "rae60bsx3",
"type": "paragraph",
"props": {
"text": ""
},
"children": []
},
{
"id": "xa3p8sybb",
"type": "paragraph",
"props": {
"text": ""
},
"children": []
},
{
"id": "qln2xcscy",
"type": "paragraph",
"props": {
"text": ""
},
"children": []
"id": "item_1763308197933_aj34wtfd9",
"title": "New Card 3",
"description": ""
}
],
"width": 50
]
},
{
"id": "s16nsirzh",
"blocks": [
{
"id": "block_1763237223906_8fazui2p9",
"type": "paragraph",
"props": {
"text": "paragraphe"
},
"meta": {
"createdAt": "2025-11-15T20:07:03.906Z",
"updatedAt": "2025-11-15T20:07:24.349Z",
"bgColor": "#dc2626"
}
}
],
"width": 50
"id": "item_1763308190239_dmw2vomdm",
"title": "done",
"cards": []
}
]
},
"meta": {
"createdAt": "2025-11-15T20:17:20.896Z",
"updatedAt": "2025-11-15T22:13:34.707Z"
}
},
{
"id": "block_1763237641170_alnjnsj8c",
"type": "list-item",
"props": {
"kind": "numbered",
"text": "number list 1",
"indent": 0,
"align": "left",
"number": 1
},
"meta": {
"createdAt": "2025-11-15T20:14:01.171Z",
"updatedAt": "2025-11-15T20:14:14.163Z",
"bgColor": "#dc2626"
}
},
{
"id": "block_1763238667046_3xvnp49yo",
"type": "heading",
"props": {
"level": 1,
"text": "H2"
},
"meta": {
"createdAt": "2025-11-15T20:31:07.046Z",
"updatedAt": "2025-11-15T21:07:39.675Z",
"bgColor": "#525252"
}
},
{
"id": "block_1763238706236_v3kaqyax7",
"type": "heading",
"props": {
"level": 1,
"text": ""
},
"meta": {
"createdAt": "2025-11-15T20:31:46.236Z",
"updatedAt": "2025-11-15T21:55:37.233Z"
}
},
{
"id": "block_1763238706552_9zpoiafug",
"type": "table",
"props": {
"rows": [
{
"id": "block_1763248205146_pnw8cifrx",
"cells": [
{
"id": "block_1763248205146_p9wc7se4g",
"text": ""
}
]
}
],
"header": false
},
"meta": {
"createdAt": "2025-11-15T20:31:46.552Z",
"updatedAt": "2025-11-15T23:10:05.176Z"
}
},
{
"id": "block_1763238706720_x5fdjzcm1",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T20:31:46.720Z",
"updatedAt": "2025-11-15T20:32:24.875Z"
}
},
{
"id": "block_1763238706867_cbgv0yetb",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T20:31:46.867Z",
"updatedAt": "2025-11-15T20:31:46.867Z"
}
},
{
"id": "block_1763238707162_bh255zvaf",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T20:31:47.162Z",
"updatedAt": "2025-11-15T20:31:47.162Z"
}
},
{
"id": "block_1763248197366_ynjr796za",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T23:09:57.366Z",
"updatedAt": "2025-11-15T23:09:57.366Z"
}
},
{
"id": "block_1763248197834_sb477zyix",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T23:09:57.834Z",
"updatedAt": "2025-11-15T23:09:57.834Z"
}
},
{
"id": "block_1763248198129_38lauudq6",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T23:09:58.130Z",
"updatedAt": "2025-11-15T23:09:58.130Z"
}
},
{
"id": "block_1763248199064_xs3run960",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T23:09:59.064Z",
"updatedAt": "2025-11-15T23:09:59.064Z"
}
},
{
"id": "block_1763238707334_uupqjbbia",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T20:31:47.334Z",
"updatedAt": "2025-11-15T20:31:47.334Z"
}
},
{
"id": "block_1763238707506_lj73550jb",
"type": "paragraph",
"props": {
"text": ""
},
"meta": {
"createdAt": "2025-11-15T20:31:47.506Z",
"updatedAt": "2025-11-15T20:31:47.506Z"
"createdAt": "2025-11-16T15:49:20.356Z",
"updatedAt": "2025-11-16T15:50:10.618Z"
}
}
],
"meta": {
"createdAt": "2025-11-14T19:38:33.471Z",
"updatedAt": "2025-11-15T23:10:05.176Z"
"updatedAt": "2025-11-16T15:50:10.618Z"
}
}
```