Add extensions dark mode styles

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

@@ -2,7 +2,7 @@
 <div
   class="py-2 px-4 border border-transparent border-b-0
     {{if @isActive 'bg-white dark:bg-gray-925 border-gray-300 dark:border-gray-800/60'}}
-    rounded-t text-sm text-gray-800 dark:text-gray-100"
+    rounded-t text-sm text-gray-800 dark:text-gray-50"
   role="button"
   data-test-tab-header
   ...attributes

app/components/course-card.hbs

@@ -26,7 +26,7 @@
       </div>
     </div>
 
-    <div class="text-sm leading-relaxed text-gray-500 pr-10" data-test-course-description>
+    <div class="text-sm leading-relaxed text-gray-600 dark:text-gray-400 pr-10" data-test-course-description>
       {{#if this.isSkeleton}}
         <div>
           <div class="relative inline-block w-full">{{#each (repeat 15)}}&nbsp;{{/each}}
@@ -64,8 +64,8 @@
             <FreeCourseLabel @course={{@course}} />
           {{else}}
             <div class="flex items-center">
-              {{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-300 dark:text-gray-700"}}
-              <span class="text-xs text-gray-400 dark:text-gray-600">{{@course.stages.length}} stages</span>
+              {{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
+              <span class="text-xs text-gray-500">{{@course.stages.length}} stages</span>
             </div>
           {{/if}}
         {{/if}}

app/components/course-page/base-stages-completed-card.hbs

@@ -1,13 +1,13 @@
 <CoursePage::InstructionsCard ...attributes data-test-base-stages-completed-card>
   <:header>
-    <div class="flex items-center mb-6 border-b pb-2">
+    <div class="flex items-center mb-6 border-b dark:border-gray-800/60 pb-2">
       <img src={{this.congratulationsImage}} alt="Congratulations!" class="mr-3 w-10 h-10" />
-      <span class="font-semibold text-lg text-gray-700">Base Stages Complete!</span>
+      <span class="font-semibold text-lg text-gray-800 dark:text-gray-50">Base Stages Complete!</span>
     </div>
   </:header>
 
   <:content>
-    <div class="text-gray-700 leading-7 prose" data-test-instructions-text>
+    <div class="prose dark:prose-invert" data-test-instructions-text>
       <p>
         Nice work! You&apos;ve completed all the base stages for this challenge.
       </p>

app/components/course-page/configure-extensions-modal.hbs

@@ -1,5 +1,5 @@
 <ModalBody @isWide={{true}} @allowManualClose={{true}} @onClose={{@onClose}} class="w-full" data-test-configure-extensions-modal>
-  <div class="mb-6 font-semibold text-2xl text-gray-600 mr-8">
+  <div class="mb-6 font-semibold text-2xl text-gray-800 dark:text-gray-50 mr-8">
     Configure Extensions
   </div>
 
@@ -13,11 +13,11 @@
     {{/each}}
   </div>
 
-  <div class="border-b pb-1 mb-6 flex items-center gap-2">
-    <h1 class="text-2xl text-gray-700 font-bold tracking-tighter">Vote on future extensions</h1>
+  <div class="border-b dark:border-gray-800/60 pb-1 mb-6 flex items-center gap-2">
+    <h1 class="text-2xl text-gray-800 dark:text-gray-50 font-bold tracking-tighter">Vote on future extensions</h1>
 
     <div>
-      {{svg-jar "information-circle" class="w-4 h-4 fill-current text-gray-200 hover:text-gray-300"}}
+      {{svg-jar "information-circle" class="w-4 h-4 fill-current text-gray-300 dark:text-gray-700 hover:text-gray-400 dark:hover:text-gray-600"}}
       <EmberTooltip @text={{"These are ideas for extensions we'll build in the future. Vote to let us know which ones you're interested in!"}} />
     </div>
   </div>

app/components/course-page/configure-extensions-modal/extension-card.hbs

@@ -1,14 +1,15 @@
 <div
-  class="group bg-white p-5 rounded-md shadow-sm flex flex-col border
-    {{if this.optimisticValueForIsActivated 'border-gray-300' 'border-gray-200'}}
+  class="group bg-white dark:bg-gray-900 p-5 rounded-md shadow-sm flex flex-col border
+    {{if this.optimisticValueForIsActivated 'border-gray-300 dark:border-gray-700/60' 'border-gray-200 dark:border-gray-800/60'}}
     relative"
   ...attributes
   data-test-course-extension-card
 >
   <div class="flex items-start justify-between mb-3">
     <div class="flex items-center gap-3 mr-2 mb-0.5">
       <div
-        class="{{if this.optimisticValueForIsActivated 'text-teal-600' 'text-gray-700'}} font-bold text-xl tracking-tight"
+        class="{{if this.optimisticValueForIsActivated 'text-teal-600 dark:text-teal-500' 'text-gray-800 dark:text-gray-50'}}
+          font-bold text-xl tracking-tight"
         data-test-course-extension-name
       >
         {{@extension.name}}

app/components/course-page/configure-github-integration-modal.hbs

@@ -1,5 +1,5 @@
 <ModalBody @allowManualClose={{true}} @onClose={{@onClose}} class="w-full" data-test-configure-github-integration-modal>
-  <div class="mb-6 font-semibold text-2xl text-gray-600 mr-8">
+  <div class="mb-6 font-semibold text-2xl text-gray-800 dark:text-gray-50 mr-8">
     Publish to GitHub
   </div>
 

app/components/course-page/configure-github-integration-modal/fix-github-app-installation-prompt.hbs

@@ -1,7 +1,11 @@
-<div class="border rounded flex items-start p-4 border-red-300 bg-red-50" data-test-fix-github-app-installation-prompt ...attributes>
+<div
+  class="border rounded flex items-start p-4 border-red-300 bg-red-50 dark:border-red-700/40 dark:bg-red-950/40"
+  data-test-fix-github-app-installation-prompt
+  ...attributes
+>
   {{svg-jar "exclamation" class="w-8 h-8 mr-2 mt-2 flex-shrink-0 text-red-400"}}
 
-  <div class="text-red-700 text-sm leading-relaxed">
+  <div class="text-red-700 dark:text-red-300 text-sm leading-relaxed">
     {{#if @githubAppInstallation.isUninstalled}}
       <div class="mb-3 leading-relaxed">
         Looks like the CodeCrafters GitHub app was uninstalled from your account. Click below to reinstall it.

app/components/course-page/configure-github-integration-modal/step.hbs

@@ -1,6 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
 <div ...attributes>
-  <div class="text-teal-600 border-b font-bold text-lg inline-block mb-3">{{@title}}</div>
+  <div class="text-teal-600 dark:text-teal-500 border-b dark:border-gray-800 font-bold text-lg inline-block mb-3">{{@title}}</div>
 
   {{yield}}
 </div>

app/components/course-page/course-completed-card.hbs

@@ -1,12 +1,12 @@
 <CoursePage::InstructionsCard ...attributes data-test-course-completed-card>
   <:header>
-    <div class="flex items-center mb-6 border-b pb-2">
+    <div class="flex items-center mb-6 border-b dark:border-gray-800/60 pb-2">
       <img src={{this.congratulationsImage}} alt="Congratulations!" class="mr-3 w-10 h-10" />
-      <span class="font-semibold text-lg text-gray-700">Challenge Complete!</span>
+      <span class="font-semibold text-lg text-gray-800 dark:text-gray-50">Challenge Complete!</span>
     </div>
   </:header>
   <:content>
-    <div class="text-gray-700 leading-7 prose" data-test-instructions-text>
+    <div class="prose dark:prose-invert" data-test-instructions-text>
       <p>
         Congratulations are in order. Only ~{{@repository.course.roundedCompletionPercentage}}% of users that attempt this challenge end up completing
         all stages, and you're one of them!

app/components/course-page/share-progress-modal.hbs

@@ -1,12 +1,12 @@
 <ModalBody @allowManualClose={{true}} @onClose={{@onClose}} class="w-full" data-test-share-progress-modal>
-  <div class="mb-6 font-semibold text-2xl text-gray-600 mr-6">
+  <div class="mb-6 font-semibold text-2xl text-gray-800 dark:text-gray-50 mr-6">
     Share your progress with friends
   </div>
 
   {{! template-lint-disable require-input-label }}
   <Textarea
     @value={{this.copyableText}}
-    class="border border-gray-200 rounded w-full p-4 placeholder-gray-300 mb-3"
+    class="border border-gray-200 dark:border-gray-800/60 rounded w-full p-4 placeholder-gray-300 dark:placeholder-gray-700 mb-3 bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-50"
     rows="5"
     placeholder={{this.copyableText}}
     data-test-copyable-text

app/components/course-page/share-progress-modal.ts

@@ -42,9 +42,9 @@ export default class ShareProgressModalComponent extends Component<Signature> {
 
   get defaultCopyableText() {
     if (this.selectedSocialPlatform === 'twitter') {
-      return `Just completed Stage #2 of the @codecraftersio ${this.args.repository.course.name} challenge in ${this.args.repository.language?.name}.\n\nhttps://app.codecrafters.io/courses/${this.args.repository.course.slug}/overview`;
+      return `I'm working on the @codecraftersio ${this.args.repository.course.name} challenge in ${this.args.repository.language?.name}.\n\nhttps://app.codecrafters.io/courses/${this.args.repository.course.slug}/overview`;
     } else {
-      return `Just completed Stage #2 of the CodeCrafters ${this.args.repository.course.name} challenge in ${this.args.repository.language?.name}.\n\nhttps://app.codecrafters.io/courses/${this.args.repository.course.slug}/overview`;
+      return `I'm working on the CodeCrafters ${this.args.repository.course.name} challenge in ${this.args.repository.language?.name}.\n\nhttps://app.codecrafters.io/courses/${this.args.repository.course.slug}/overview`;
     }
   }
 

app/components/course-page/share-progress-modal/icon.ts

@@ -1,9 +1,12 @@
 import Component from '@glimmer/component';
-import { capitalize } from '@ember/string';
+import DarkModeService from 'codecrafters-frontend/services/dark-mode';
 import discordLogoImage from 'codecrafters-frontend/images/social-icons/discord.svg';
 import linkedinLogoImage from 'codecrafters-frontend/images/social-icons/linkedin.svg';
 import slackLogoImage from 'codecrafters-frontend/images/social-icons/slack.svg';
 import twitterLogoImage from 'codecrafters-frontend/images/social-icons/twitter.svg';
+import twitterWhiteLogoImage from 'codecrafters-frontend/images/social-icons/twitter-white.svg';
+import { capitalize } from '@ember/string';
+import { service } from '@ember/service';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -18,6 +21,8 @@ interface Signature {
 type SocialPlatform = 'twitter' | 'slack' | 'discord' | 'linkedin';
 
 export default class CoursePageShareProgressModalIconComponent extends Component<Signature> {
+  @service declare darkMode: DarkModeService;
+
   get isSelected(): boolean {
     return this.args.selectedSocialPlatform === this.args.platform;
   }
@@ -27,23 +32,12 @@ export default class CoursePageShareProgressModalIconComponent extends Component
   }
 
   get platformLogoImage(): string {
-    if (this.args.platform === 'discord') {
-      return discordLogoImage;
-    }
-
-    if (this.args.platform === 'linkedin') {
-      return linkedinLogoImage;
-    }
-
-    if (this.args.platform === 'slack') {
-      return slackLogoImage;
-    }
-
-    if (this.args.platform === 'twitter') {
-      return twitterLogoImage;
-    }
-
-    throw new Error(`Unknown platform: ${this.args.platform}`);
+    return {
+      discord: discordLogoImage,
+      linkedin: linkedinLogoImage,
+      slack: slackLogoImage,
+      twitter: this.darkMode.isEnabled ? twitterWhiteLogoImage : twitterLogoImage,
+    }[this.args.platform];
   }
 }
 

app/components/course-page/step-list-item.hbs

@@ -42,7 +42,7 @@
     </div>
   {{/if}}
 
-  <span class="text-sm {{if @isActive 'text-teal-500' 'text-gray-600 dark:text-gray-400'}} mt-0.5 font-semibold truncate">
+  <span class="text-sm {{if @isActive 'text-teal-500' 'text-gray-700 dark:text-gray-300'}} mt-0.5 font-semibold truncate">
     {{@step.title}}
   </span>
 </LinkTo>

app/components/tracks-page/track-card.hbs

@@ -31,8 +31,8 @@
       <TracksPage::TrackCard::ProgressBar @completedStagesCount={{this.completedStagesCount}} @stagesCount={{this.stagesCount}} />
     {{else}}
       <div class="flex items-center">
-        {{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-300 dark:text-gray-700"}}
-        <span class="text-xs text-gray-400 dark:text-gray-600">{{this.stagesCount}} stages</span>
+        {{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
+        <span class="text-xs text-gray-500">{{this.stagesCount}} stages</span>
       </div>
     {{/if}}
 

app/components/vote-page/submit-course-extension-idea-card.hbs

@@ -1,5 +1,5 @@
 <div
-  class="group border-2 border-dashed hover:border-gray-400 px-5 py-10 lg:py-20 rounded-md flex flex-col items-center justify-center text-gray-400 hover:text-gray-600"
+  class="group border-2 border-dashed dark:border-gray-800/60 hover:border-gray-400 dark:hover:border-gray-700 px-5 py-10 lg:py-20 rounded-md flex flex-col items-center justify-center text-gray-400 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-200"
   data-test-submit-course-idea-card
   role="button"
   {{on "click" this.handleClick}}

app/controllers/course/base-stages-completed.ts

@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import type { ModelType } from 'codecrafters-frontend/routes/course/base-stages-completed';
+
+export default class BaseStagesCompletedController extends Controller {
+  declare model: ModelType;
+}

app/routes/course/base-stages-completed.ts

@@ -0,0 +1,6 @@
+import type { ModelType as CourseModelType } from 'codecrafters-frontend/routes/course';
+import BaseRoute from 'codecrafters-frontend/utils/base-route';
+
+export type ModelType = CourseModelType;
+
+export default class BaseStagesCompletedRoute extends BaseRoute {}

app/templates/course/base-stages-completed.hbs

@@ -1,4 +1,3 @@
 <div class="pt-8 pb-16">
-  {{! @glint-expect-error @model is not typed yet }}
   <CoursePage::BaseStagesCompletedCard @repository={{@model.activeRepository}} />
 </div>

tests/acceptance/course-page/share-progress-test.js

@@ -67,20 +67,24 @@ module('Acceptance | course-page | share-progress', function (hooks) {
 
     await coursePage.completedStepNotice.shareProgressButton.click();
     assert.ok(coursePage.shareProgressModal.isVisible, 'progress banner modal is visible');
-    assert.true(
-      coursePage.shareProgressModal.copyableText.value.includes(
-        'Just completed Stage #2 of the @codecraftersio Build your own Redis challenge in Go.',
-      ),
+
+    assert.contains(
+      coursePage.shareProgressModal.copyableText.value,
+      "I'm working on the @codecraftersio Build your own Redis challenge in Go.",
       'correct copyable text is shown',
     );
-    assert.true(
-      coursePage.shareProgressModal.copyableText.value.includes('https://app.codecrafters.io/courses/redis/overview'),
+
+    assert.contains(
+      coursePage.shareProgressModal.copyableText.value,
+      'https://app.codecrafters.io/courses/redis/overview',
       'correct link in copyable text is shown',
     );
 
     await coursePage.shareProgressModal.socialPlatformIcons[1].click();
-    assert.true(
-      coursePage.shareProgressModal.copyableText.value.includes('Just completed Stage #2 of the CodeCrafters Build your own Redis challenge in Go.'),
+
+    assert.contains(
+      coursePage.shareProgressModal.copyableText.value,
+      "I'm working on the CodeCrafters Build your own Redis challenge in Go.",
       'correct copyable text is shown',
     );
   });