Merge pull request #3241 from codecrafters-io/fix-dark-mode-flicker

Fix Dark Mode flickering when switching between dark-mode-enabled routes

Author: VasylMarchuk

app/components/concepts-page/concept-card.hbs

@@ -64,7 +64,10 @@
         {{/if}}
       </span>
 
-      {{svg-jar "arrow-right" class="w-4 fill-current text-gray-300 dark:text-gray-700 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 dark:group-hover:text-teal-500 transition-colors"
+      }}
     </div>
   </div>
 </LinkTo>

app/components/course-card/index.hbs

@@ -20,7 +20,7 @@
     <div class="flex items-center mb-3 flex-wrap gap-y-2 pr-10">
       <div class="text-lg font-semibold text-gray-800 dark:text-gray-200 mr-2" data-test-course-name>
         {{#if this.isSkeleton}}
-          <span class="inline-block bg-gray-100 rounded-sm">{{#each (repeat 30)}}&nbsp;{{/each}}</span>
+          <span class="inline-block bg-gray-100 dark:bg-gray-800 rounded-sm">{{#each (repeat 30)}}&nbsp;{{/each}}</span>
         {{else}}
           <span>{{this.course.name}}</span>
         {{/if}}
@@ -89,7 +89,10 @@
           {{/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 dark:group-hover:text-teal-500 transition-colors"
+        }}
       {{/if}}
     </div>
   </div>

app/components/course-stage-screencast-preview.hbs

@@ -34,7 +34,10 @@
             View
           </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 dark:group-hover:text-teal-500 transition-colors"
+          }}
         </div>
       </div>
     </div>

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

@@ -45,7 +45,10 @@
         {{/if}}
       </span>
 
-      {{svg-jar "arrow-right" class="w-4 fill-current text-gray-300 dark:text-gray-700 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 dark:group-hover:text-teal-500 transition-colors"
+      }}
     </div>
   </div>
 </div>

app/routes/catalog-loading.ts

@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+import RouteInfoMetadata, { RouteColorScheme } from 'codecrafters-frontend/utils/route-info-metadata';
+
+export default class CatalogLoadingRoute extends Route {
+  buildRouteInfoMetadata() {
+    return new RouteInfoMetadata({ allowsAnonymousAccess: true, colorScheme: RouteColorScheme.Both });
+  }
+}

app/routes/loading.ts

@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+import RouteInfoMetadata, { RouteColorScheme } from 'codecrafters-frontend/utils/route-info-metadata';
+
+export default class LoadingRoute extends Route {
+  buildRouteInfoMetadata() {
+    return new RouteInfoMetadata({ allowsAnonymousAccess: true, colorScheme: RouteColorScheme.Both });
+  }
+}

app/routes/roadmap-loading.ts

@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+import RouteInfoMetadata, { RouteColorScheme } from 'codecrafters-frontend/utils/route-info-metadata';
+
+export default class RoadmapLoadingRoute extends Route {
+  buildRouteInfoMetadata() {
+    return new RouteInfoMetadata({ allowsAnonymousAccess: true, colorScheme: RouteColorScheme.Both });
+  }
+}

app/templates/catalog-loading.hbs

@@ -1,7 +1,7 @@
 {{page-title "Catalog"}}
 
 <div class="container mx-auto lg:max-w-(--breakpoint-lg) pt-6 md:pt-10 pb-10 md:pb-48 px-3 md:px-6" data-test-loading>
-  <div class="border-b border-gray-200 pb-2 mb-6">
+  <div class="border-b border-gray-200 dark:border-white/5 pb-2 mb-6">
     <h1 class="text-3xl text-gray-700 font-bold tracking-tighter">Challenges</h1>
   </div>
 
@@ -11,7 +11,7 @@
     {{/each}}
   </div>
 
-  <div class="border-b border-gray-200 pb-2 mb-6">
+  <div class="border-b border-gray-200 dark:border-white/5 pb-2 mb-6">
     <h1 class="text-3xl text-gray-700 font-bold tracking-tighter">Language Tracks</h1>
   </div>