Merge pull request #3265 from codecrafters-io/dark-mode-comment-styles-update

style: update comment form and comment card styles for dark mode

Author: rohitpaulk

app/components/comment-card/index.hbs

@@ -17,7 +17,7 @@
         {{if
           @comment.parentComment
           'py-1'
-          'bg-gray-100 dark:bg-gray-800 rounded-t py-2 px-4 border-b border-gray-200 dark:border-white/5 shadow-xs'
+          'bg-gray-100 dark:bg-gray-825 rounded-t py-2 px-4 border-b border-gray-200 dark:border-white/5 shadow-xs'
         }}"
     >
       <div class="flex items-center flex-wrap">
@@ -30,15 +30,10 @@
           {{@comment.user.username}}
         </a>
 
-        <UserLabel @user={{@comment.user}} @context={{@comment.contextForUserLabel}} class="ml-1" />
-
-        {{#if (eq @comment.user.username "codecrafters-bot")}}
-          <span class="bg-gray-400 dark:bg-gray-500 text-white ml-1 px-1 py-0.5 rounded-sm font-semibold text-xs">
-            bot
-          </span>
-        {{/if}}
+        <UserLabel @user={{@comment.user}} @context={{@comment.contextForUserLabel}} class="ml-1.5" />
 
         <div class="bg-gray-300 dark:bg-white/5 w-1 h-1 ml-1.5 mr-1.5 rounded-full"></div>
+
         <div class="text-xs text-gray-400 dark:text-gray-500">
           {{date-from-now @comment.createdAt}}
         </div>
@@ -128,7 +123,7 @@
   {{/if}}
 
   {{#if (gt this.visibleChildComments.length 0)}}
-    <div class="bg-gray-50 dark:bg-gray-800 py-2 px-4 border-t border-gray-200 dark:border-white/5 {{if this.shouldShowReplyForm '' 'rounded-b'}}">
+    <div class="bg-gray-50 dark:bg-gray-825 py-2 px-4 border-t border-gray-200 dark:border-white/5 {{if this.shouldShowReplyForm '' 'rounded-b'}}">
       {{#each this.visibleChildComments as |childComment|}}
         <div class="flex items-start">
           <a href={{childComment.user.codecraftersProfileUrl}} class="mt-0.5 flex items-center shrink-0" target="_blank" rel="noopener noreferrer">
@@ -156,7 +151,7 @@
         Hide rejected replies
       </TertiaryButton>
     </div>
-    <div class="bg-gray-50 dark:bg-gray-800 py-2 px-4 border-t border-gray-200 dark:border-white/5 rounded-b">
+    <div class="bg-gray-50 dark:bg-gray-825 py-2 px-4 border-t border-gray-200 dark:border-white/5 rounded-b">
       {{#each this.rejectedChildComments as |childComment|}}
         <div class="flex items-start">
           <a href={{childComment.user.codecraftersProfileUrl}} class="mt-0.5 flex items-center shrink-0" target="_blank" rel="noopener noreferrer">

app/components/comment-form/index.hbs

@@ -1,19 +1,13 @@
 <div class="w-full bg-white dark:bg-gray-850" data-test-comment-form ...attributes {{will-destroy this.handleWillDestroy}}>
   <div
-    class="bg-gray-100 dark:bg-gray-800 pt-1.5 px-2 border-b border-gray-300 dark:border-white/10 flex items-center
-      {{if this.isReplying '' 'rounded-t'}}"
+    class="bg-gray-100 dark:bg-gray-825 pr-2 border-b border-gray-300 dark:border-white/10 flex items-center {{if this.isReplying '' 'rounded-t'}}"
   >
-    <div class="transform translate-y-px flex">
+    <div class="-mt-px -ml-px -mb-px flex">
       {{! @glint-expect-error Not ts-ified yet}}
       <CommentForm::TabHeader @text="Write" @isActive={{eq this.activeTab "write"}} {{on "click" (fn this.setActiveTab "write")}} />
 
       {{! @glint-expect-error Not ts-ified yet}}
-      <CommentForm::TabHeader
-        @text="Preview"
-        @isActive={{eq this.activeTab "preview"}}
-        {{on "click" (fn this.setActiveTab "preview")}}
-        class="ml-1"
-      />
+      <CommentForm::TabHeader @text="Preview" @isActive={{eq this.activeTab "preview"}} {{on "click" (fn this.setActiveTab "preview")}} />
     </div>
   </div>
 
@@ -24,7 +18,7 @@
         <Textarea
           {{! @glint-expect-error commentMarkdown is typed as a computed prop?}}
           @value={{this.comment.bodyMarkdown}}
-          class="text-black dark:text-white leading-relaxed border border-gray-300 dark:border-white/10 rounded-sm w-full p-2 text-sm bg-gray-100 dark:bg-gray-800 focus:bg-white dark:focus:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-500 focus:outline-hidden focus:ring-2 focus:ring-teal-600"
+          class="text-black dark:text-white leading-relaxed border border-gray-300 dark:border-white/10 rounded-sm w-full p-2 text-sm bg-white dark:bg-gray-850 focus:bg-white dark:focus:bg-gray-850 placeholder-gray-500 dark:placeholder-gray-500 focus:outline-hidden focus:ring-2 focus:ring-teal-600"
           placeholder={{this.placeholderText}}
           rows="5"
           required="true"

app/components/comment-form/tab-header.hbs

@@ -1,8 +1,12 @@
 {{! @glint-nocheck: not typesafe yet }}
 <div
-  class="py-2 px-4 border border-b-0
-    {{if @isActive 'bg-white dark:bg-gray-850 border-gray-300 dark:border-white/10' 'border-transparent'}}
-    rounded-t text-sm text-gray-800 dark:text-gray-50"
+  class="py-2.5 px-4 border border-b-0
+    {{if
+      @isActive
+      'bg-white dark:bg-gray-850 border-gray-300 dark:border-white/10 text-gray-800 dark:text-gray-50'
+      'border-transparent text-gray-600 dark:text-gray-300'
+    }}
+    rounded-t text-sm"
   role="button"
   data-test-tab-header
   ...attributes

app/components/user-label.hbs

@@ -1,6 +1,6 @@
 {{#if this.label}}
-  <span class="bg-gray-400 text-white px-1 py-0.5 rounded-sm font-semibold text-xs" data-test-user-label ...attributes>
+  <Pill @color="gray" data-test-user-label ...attributes>
     {{this.label.text}}
     <EmberTooltip @text={{this.label.tooltipText}} />
-  </span>
+  </Pill>
 {{/if}}

app/components/user-label.ts

@@ -49,8 +49,19 @@ export default class UserLabel extends Component<UserLabelSignature> {
         text: 'challenge author',
         tooltipText: 'This user is the author of one or more CodeCrafters challenges',
       };
+    } else if (this.args.user.username === 'codecrafters-bot') {
+      return {
+        text: 'bot',
+        tooltipText: 'Your friendly neighborhood bot',
+      };
     } else {
       return null;
     }
   }
 }
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    UserLabel: typeof UserLabel;
+  }
+}

app/components/user-page/sidebar-container.hbs

@@ -46,16 +46,13 @@
   {{/if}}
 
   <div class="flex flex-col gap-4">
-    <div>
-      <div class="text-xs text-gray-400">
-        joined
-        {{date-from-now @user.createdAt}}
-      </div>
-
-      {{! @glint-expect-error not ts-ified yet }}
-      <UserLabel @user={{@user}} />
+    <div class="text-xs text-gray-400">
+      joined
+      {{date-from-now @user.createdAt}}
     </div>
 
+    <UserLabel @user={{@user}} class="self-start" />
+
     {{#if this.currentUser.isAdmin}}
       <TertiaryButton @size="extra-small" data-test-admin-profile-button class="w-fit">
         <a href={{@user.adminProfileUrl}} target="_blank" rel="noopener noreferrer">Admin Profile</a>

app/tailwind.config.js

@@ -44,6 +44,7 @@ module.exports = {
       },
       colors: {
         gray: {
+          825: '#1A2538',
           850: '#172033',
           925: '#0A1120',
         },