Skip to content

Commit 12e83c2

Browse files
ruibabyruibaby
committed
Improve comment widget UI and styles
1 parent 6de545a commit 12e83c2

15 files changed

Lines changed: 117 additions & 43 deletions

‎packages/comment-widget/src/base-comment-item.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,12 @@ export class BaseCommentItem extends LitElement {
9292
</a>`
9393
: html`<div class="item-author font-medium text-sm">${this.userDisplayName}</div>`
9494
}
95-
<div class="item-meta-info text-xs text-gray-500" title=${formatDate(this.creationTime)}>
95+
<div class="item-meta-info text-xs text-text-2" title=${formatDate(this.creationTime)}>
9696
${timeAgo(this.creationTime)}
9797
</div>
9898
${
9999
!this.approved
100-
? html`<div class="item-meta-info text-xs text-gray-500">${msg('Reviewing')}</div>`
100+
? html`<div class="item-meta-info text-xs text-text-2">${msg('Reviewing')}</div>`
101101
: ''
102102
}
103103
</div>

‎packages/comment-widget/src/base-form.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,13 @@ export class BaseForm extends LitElement {
156156
: ''
157157
}
158158
</div>
159-
<span class="form-account-name text-base text-gray-900 font-semibold">
159+
<span class="form-account-name text-base text-text-1 font-semibold">
160160
${this.currentUser?.spec.displayName || this.currentUser?.metadata.name}
161161
</span>
162162
<button
163163
@click=${this.handleLogout}
164164
type="button"
165-
class="form-logout text-xs text-gray-700 hover:text-gray-900 px-2 transition-all py-1 rounded-md border border-gray-100 opacity-90 hover:border-gray-200 hover:opacity-100 border-solid"
165+
class="form-logout text-xs text-text-2 hover:text-text-1 px-2 transition-all py-1 rounded-md border border-muted-3 opacity-90 hover:border-muted-4 hover:opacity-100 border-solid"
166166
>
167167
${msg('Logout')}
168168
</button>
@@ -224,7 +224,7 @@ export class BaseForm extends LitElement {
224224
placeholder=${msg('Website')}
225225
class="input"
226226
/>
227-
<a href=${this.loginUrl} rel="nofollow" class="form-login-link text-xs transition-all select-none">${msg('(Or login)')}</a>
227+
<a href=${this.loginUrl} rel="nofollow" class="form-login-link text-text-2 hover:text-text-1 text-xs transition-all select-none">${msg('(Or login)')}</a>
228228
</div>`
229229
: ''
230230
}
@@ -267,7 +267,7 @@ export class BaseForm extends LitElement {
267267
<button
268268
.disabled=${this.submitting}
269269
type="submit"
270-
class="form-submit h-10 inline-flex text-sm items-center justify-center gap-2 bg-green text-white px-2 rounded-md hover:opacity-80 transition-all"
270+
class="form-submit h-12 text-sm inline-flex border border-primary-1 border-solid items-center justify-center gap-2 bg-primary-1 text-white px-3 rounded-md hover:opacity-80 transition-all"
271271
>
272272
${
273273
this.submitting

‎packages/comment-widget/src/comment-editor-skeleton.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import './emoji-button';
55
export class CommentEditorSkeleton extends LitElement {
66
protected override render() {
77
return html`<div
8-
class="border rounded-md border-solid border-gray-200 w-full"
8+
class="border rounded-md border-solid border-muted-1 w-full"
99
>
1010
<div class="animate-pulse p-4">
11-
<div class="h-4 mt-1 mb-10px w-20 bg-gray-200 rounded"></div>
11+
<div class="h-4 mt-1 mb-10px w-20 bg-muted-1 rounded"></div>
1212
</div>
1313
<div class="py-2.5 px-3 flex gap-1 m-0 items-center">
1414
${repeat(
@@ -18,7 +18,7 @@ export class CommentEditorSkeleton extends LitElement {
1818
role="button"
1919
class="size-7 flex items-center justify-center cursor-pointer"
2020
>
21-
<div class="size-5 animate-pulse bg-gray-200 rounded-md"></div>
21+
<div class="size-5 animate-pulse bg-muted-1 rounded-md"></div>
2222
</div>
2323
`
2424
)}

‎packages/comment-widget/src/comment-editor.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export class CommentEditor extends LitElement {
148148
protected override render() {
149149
return html` ${this.loading ? html`<comment-editor-skeleton></comment-editor-skeleton>` : ''}
150150
<div
151-
class="border rounded-md border-solid border-[var(--component-form-input-border-color)] focus-within:border-[var(--component-form-input-border-color-focus)] transition-all"
151+
class="border rounded-md border-solid border-muted-1 focus-within:border-primary-1 transition-all"
152152
?hidden=${this.loading}
153153
@click=${this.setFocus}
154154
>
@@ -171,7 +171,7 @@ export class CommentEditor extends LitElement {
171171
private renderActionItem(item: ActionItem, editor?: Editor) {
172172
if (item.type === 'separator') {
173173
return html`<li class="flex items-center" aria-hidden="true">
174-
<div class="w-1px bg-gray-100 rounded-full h-3"></div>
174+
<div class="w-1px bg-muted-1 rounded-full h-3"></div>
175175
</li>`;
176176
}
177177

@@ -184,7 +184,7 @@ export class CommentEditor extends LitElement {
184184
title=${item.displayName?.()}
185185
@click=${() => item.run?.(editor)}
186186
role="button"
187-
class="size-7 hover:bg-gray-100 active:bg-gray-200 ${isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-500 hover:text-gray-900'} rounded-md flex items-center justify-center cursor-pointer"
187+
class="size-7 hover:bg-muted-3 active:bg-muted-2 ${isActive ? 'bg-muted-3 text-text-1' : 'text-text-3 hover:text-text-1'} rounded-md flex items-center justify-center cursor-pointer transition-all"
188188
>
189189
<i class="size-5 ${item.icon}"></i>
190190
</div>
@@ -217,7 +217,7 @@ export class CommentEditor extends LitElement {
217217
}
218218
219219
.tiptap p.is-editor-empty:first-child::before {
220-
color: #adb5bd;
220+
color: var(--halo-cw-text-3-color, #6B7280);
221221
content: attr(data-placeholder);
222222
float: left;
223223
height: 0;

‎packages/comment-widget/src/comment-item.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export class CommentItem extends LitElement {
121121
.userWebsite=${this.comment?.spec.owner.annotations?.website}
122122
>
123123
<button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}">
124-
<div class="icon-button-icon ">
124+
<div class="icon-button-icon">
125125
${
126126
this.upvoted
127127
? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500"></i>`

‎packages/comment-widget/src/comment-list.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export class CommentList extends LitElement {
149149
? html` <loading-block></loading-block>`
150150
: html`
151151
<div class="comment-list-main mt-5">
152-
<div class="comment-stats font-medium my-3 text-sm">
152+
<div class="comment-stats font-medium my-3 text-sm text-text-1">
153153
<span>${msg(html`${this.comments.total} Comments`)}</span>
154154
</div>
155155

‎packages/comment-widget/src/comment-pagination.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export class CommentPagination extends LitElement {
5959
</li>`;
6060
} else {
6161
return html`<li>
62-
<button class="pagination-button px-3.5 ${this.page === number ? 'bg-gray-100' : ''}" @click=${() => this.gotoPage(number)} ?disabled=${number === this.page}>
62+
<button class="pagination-button px-3.5 ${this.page === number ? 'bg-muted-3' : ''}" @click=${() => this.gotoPage(number)} ?disabled=${number === this.page}>
6363
${number}
6464
</button>
6565
</li>`;

‎packages/comment-widget/src/emoji-button.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ export class EmojiButton extends LitElement {
175175
this.emojiLoading
176176
? html`<icon-loading></icon-loading>`
177177
: html`<div
178-
class="i-mdi-sticker-emoji size-5 text-gray-500 hover:text-gray-900"
178+
class="i-mdi-sticker-emoji size-5 text-text-3 hover:text-text-1"
179179
@click=${this.handleOpenEmojiPicker}
180180
></div>`
181181
}

‎packages/comment-widget/src/reply-item.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export class ReplyItem extends LitElement {
158158
slot="pre-content"
159159
@mouseenter=${() => this.handleSetActiveQuoteReply(this.quoteReply)}
160160
@mouseleave=${() => this.handleSetActiveQuoteReply()}
161-
class="quote-badge inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-100 text-gray-900 text-sm font-medium"
161+
class="quote-badge inline-flex items-center gap-1 px-2 py-1 rounded-md bg-muted-2 text-text-1 text-sm font-medium"
162162
><i class="i-ic:round-reply"></i><span>${this.quoteReply?.owner.displayName}</span>
163163
</span>
164164
<br slot="pre-content" />`

‎packages/comment-widget/src/styles/content.css‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
/* forked from https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown.css */
22
.markdown-body {
3-
/* light */
43
--focus-outlineColor: #0969da;
54
--fgColor-accent: #0969da;
6-
--bgColor-muted: #f6f8fa;
7-
--bgColor-neutral-muted: #818b981f;
85
--bgColor-attention-muted: #fff8c5;
9-
--borderColor-default: #d1d9e0;
10-
--borderColor-muted: #d1d9e0b3;
116
}
127

138
.markdown-body {
149
-ms-text-size-adjust: 100%;
1510
-webkit-text-size-adjust: 100%;
1611
margin: 0;
17-
color: var(--base-color);
12+
color: var(--halo-cw-text-1-color);
1813
font-family: var(--base-font-family);
1914
font-size: var(--base-font-size);
2015
line-height: var(--base-line-height);
@@ -44,7 +39,7 @@
4439

4540
.markdown-body mark {
4641
background-color: var(--bgColor-attention-muted);
47-
color: var(--base-color);
42+
color: var(--halo-cw-text-1-color);
4843
}
4944

5045
.markdown-body sub,
@@ -83,11 +78,11 @@
8378
box-sizing: content-box;
8479
overflow: hidden;
8580
background: transparent;
86-
border-bottom: 1px solid var(--borderColor-muted);
81+
border-bottom: 1px solid var(--halo-cw-muted-1-color);
8782
height: 0.25em;
8883
padding: 0;
8984
margin: 1.4em 0;
90-
background-color: var(--borderColor-default);
85+
background-color: var(--halo-cw-muted-1-color);
9186
border: 0;
9287
}
9388

@@ -162,6 +157,14 @@
162157
list-style-type: lower-alpha;
163158
}
164159

160+
.markdown-body ul {
161+
list-style-type: disc;
162+
}
163+
164+
.markdown-body ol {
165+
list-style-type: decimal;
166+
}
167+
165168
.markdown-body code {
166169
font-family:
167170
ui-monospace,
@@ -253,7 +256,7 @@
253256
margin: 0;
254257
font-size: 85%;
255258
white-space: break-spaces;
256-
background-color: var(--bgColor-neutral-muted);
259+
background-color: var(--halo-cw-muted-1-color);
257260
border-radius: 6px;
258261
}
259262

0 commit comments

Comments
 (0)