add dark mode screenshot [percy]

codecrafters-io · Jul 23, 2024 · 689251d · 689251d
1 parent fea6a5b
commit 689251d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/app/components/tracks-page/track-card.hbs b/app/components/tracks-page/track-card.hbs
@@ -12,7 +12,7 @@
   {{! Text }}
   <div class="mb-8">
     <div class="flex items-center flex-wrap gap-y-2 pr-16">
-      <div class="text-gray-600 mr-2" data-test-track-name>
+      <div class="text-gray-600 dark:text-gray-400 mr-2" data-test-track-name>
         {{@language.name}}
       </div>
 
@@ -36,8 +36,8 @@
       />
     {{else}}
       <div class="flex items-center">
-        {{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-300"}}
-        <span class="text-xs text-gray-400">{{this.stagesCount}} stages</span>
+        {{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>
       </div>
     {{/if}}
 
@@ -50,7 +50,7 @@
         {{/if}}
       </span>
 
-      {{svg-jar "arrow-right" class="w-4 fill-current text-gray-300 group-hover:text-teal-500 transition-colors"}}
+      {{svg-jar "arrow-right" class="w-4 fill-current text-gray-300 dark:text-gray-700 group-hover:text-teal-500 transition-colors"}}
     </div>
   </div>
 </div>
diff --git a/app/routes/course.ts b/app/routes/course.ts
@@ -11,7 +11,6 @@ import type Transition from '@ember/routing/transition';
 import { StepList } from 'codecrafters-frontend/utils/course-page-step-list';
 import { inject as service } from '@ember/service';
 import { next } from '@ember/runloop';
-import RouteInfoMetadata, { RouteColorScheme } from 'codecrafters-frontend/utils/route-info-metadata';
 
 export type ModelType = {
   course: CourseModel;

diff --git a/tests/acceptance/view-courses-test.js b/tests/acceptance/view-courses-test.js
@@ -35,6 +35,22 @@ module('Acceptance | view-courses', function (hooks) {
     assert.notOk(catalogPage.courseCardByName('Build your own SQLite').hasBetaLabel, 'live challenges should not have beta label');
   });
 
+  test('it renders with dark mode', async function (assert) {
+    testScenario(this.server);
+    signIn(this.owner, this.server);
+
+    const darkMode = this.owner.lookup('service:dark-mode');
+    darkMode.updateLocalStoragePreference('dark');
+
+    const course = this.server.schema.courses.findBy({ slug: 'grep' });
+    course.update({ releaseStatus: 'beta' });
+
+    await catalogPage.visit();
+    assert.strictEqual(catalogPage.courseCards.length, 5, 'expected 5 course cards to be present');
+
+    await percySnapshot('Catalog Page - Dark Mode');
+  });
+
   test('it renders alpha courses if user is staff', async function (assert) {
     testScenario(this.server);
     signInAsStaff(this.owner, this.server);