Update text color classes for comment widget UI

Author: ruibaby

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

@@ -109,13 +109,13 @@ export class BaseCommentItem extends LitElement {
           
           ${this.ua && this.configMapData?.basic.showCommenterDevice ? html`<commenter-ua-bar .ua=${this.ua}></commenter-ua-bar>` : ''}
 
-          <time class="item-meta-info text-xs text-text-2" title=${formatDate(this.creationTime)}>
+          <time class="item-meta-info text-xs text-text-3" title=${formatDate(this.creationTime)}>
             ${timeAgo(this.creationTime)}
           </time>
 
           ${
             !this.approved
-              ? html`<div class="item-meta-info text-xs text-text-2">${msg('Reviewing')}</div>`
+              ? html`<div class="item-meta-info text-xs text-text-3">${msg('Reviewing')}</div>`
               : ''
           }
         </div>

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

@@ -162,7 +162,7 @@ export class BaseForm extends LitElement {
       <button
         @click=${this.handleLogout}
         type="button"
-        class="form-logout text-xs text-text-2 hover:text-text-1 px-2 transition-all py-1.5 rounded-base border border-muted-3 opacity-90 hover:border-muted-4 hover:opacity-100 border-solid"
+        class="form-logout text-xs text-text-3 hover:text-text-1 px-3 transition-all py-2 rounded-base border border-muted-3 opacity-100 hover:border-muted-4 hover:opacity-70 border-solid"
       >
         ${msg('Logout')}
       </button>
@@ -224,7 +224,7 @@ export class BaseForm extends LitElement {
                 placeholder=${msg('Website')}
                 class="input"
               />
-              <a tabindex="-1" 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>
+              <a tabindex="-1" href=${this.loginUrl} rel="nofollow" class="form-login-link text-text-3 hover:text-text-1 text-xs transition-all select-none">${msg('(Or login)')}</a>
             </div>`
             : ''
         }
@@ -235,7 +235,7 @@ export class BaseForm extends LitElement {
             !this.currentUser && !this.allowAnonymousComments
               ? html`<button
                 @click=${this.handleOpenLoginPage}
-                class="form-login text-xs text-text-2 hover:text-text-1 px-2 transition-all py-1.5 rounded-base border border-muted-3 opacity-90 hover:border-muted-4 hover:opacity-100 border-solid"
+                class="form-login text-xs text-text-3 hover:text-text-1 px-3 transition-all py-2 rounded-base border border-muted-3 opacity-100 hover:border-muted-4 hover:opacity-70 border-solid"
                 type="button"
               >
                 ${msg('Login')}

packages/comment-widget/src/comment-replies.ts

@@ -74,7 +74,7 @@ export class CommentReplies extends LitElement {
       ${
         this.hasNext && !this.loading
           ? html` <div class="replies-next flex justify-center my-2">
-            <button class="replies-next-button" @click=${this.fetchNext}>${msg('Load more')}</button>
+            <button class="replies-next-button pagination-button" @click=${this.fetchNext}>${msg('Load more')}</button>
           </div>`
           : ''
       }

packages/comment-widget/src/commenter-ua-bar.ts

@@ -81,7 +81,7 @@ export class CommenterUABar extends LitElement {
           ? html`
             <div class="inline-flex items-center gap-1 bg-muted-3 rounded-base px-1.5 py-1">
               ${osIcon ? html`<i class="${osIcon} opacity-90 size-3"></i>` : ''}
-              <span class="text-xs text-text-2">${[os.name, os.version].filter(Boolean).join(' ')}</span>
+              <span class="text-xs text-text-3">${[os.name, os.version].filter(Boolean).join(' ')}</span>
             </div>
             `
           : ''
@@ -91,7 +91,7 @@ export class CommenterUABar extends LitElement {
           ? html`
             <div class="inline-flex items-center gap-1 bg-muted-3 rounded-base px-1.5 py-1">
               ${browserIcon ? html`<i class="${browserIcon} opacity-90 size-3"></i>` : ''}
-              <span class="text-xs text-text-2">${[browser.name, browser.major].filter(Boolean).join(' ')}</span>
+              <span class="text-xs text-text-3">${[browser.name, browser.major].filter(Boolean).join(' ')}</span>
             </div>
             `
           : ''