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,14 @@
 <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/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>