Merge pull request #2044 from codecrafters-io/add-dark-mode-upgrade-flow

add dark mode upgrade flow

Author: rohitpaulk

app/components/course-leaderboard.hbs

@@ -6,10 +6,10 @@
   {{else}}
     <div class="flex items-center justify-between mb-2 pl-4">
       <div class="flex items-center">
-        <span class="uppercase text-teal-500 text-xs font-bold">RECENT ATTEMPTS</span>
+        <span class="uppercase text-teal-500 dark:text-teal-600 text-xs font-bold">RECENT ATTEMPTS</span>
 
         <span
-          class="text-white bg-teal-500 text-xs font-bold rounded px-1.5 py-0.5 ml-2
+          class="text-white dark:text-teal-400 bg-teal-500 dark:bg-teal-900 border border-teal-500 dark:border-teal-700 text-xs font-bold rounded px-1.5 py-0.5 ml-2
             {{if this.isLoadingEntries 'opacity-0' 'opacity-100'}}
             transition-all"
         >

app/components/course-leaderboard/invite-button-entry.hbs

@@ -7,7 +7,7 @@
   </div>
 
   {{#unless @isCollapsed}}
-    <div class="text-xs text-gray-600 ml-2 group-hover/invite-entry:underline group-hover/invite-entry:text-teal-600">
+    <div class="text-xs text-gray-600 dark:text-gray-400 ml-2 group-hover/invite-entry:underline group-hover/invite-entry:text-teal-600">
       {{@text}}
     </div>
   {{/unless}}

app/components/course-page/collapse-leaderboard-button.hbs

@@ -1,5 +1,5 @@
 <button
-  class="rounded-full border border-gray-300 dark:border-gray-800 bg-white dark:bg-gray-900 flex items-center justify-center p-1.5 transform scale-100 hover:scale-105 hover:border-gray-400 hover:bg-gray-200 transition-all"
+  class="rounded-full border border-gray-300 dark:border-gray-800 bg-white dark:bg-gray-900 flex items-center justify-center p-1.5 transform scale-100 hover:scale-105 hover:border-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 transition-all"
   ...attributes
   type="button"
 >

app/components/course-page/expand-leaderboard-button.hbs

@@ -1,5 +1,5 @@
 <button
-  class="rounded-full border border-gray-300 dark:border-gray-800 bg-white dark:bg-gray-900 flex items-center justify-center p-1.5 transform scale-100 hover:scale-105 hover:border-gray-400 hover:bg-gray-200 transition-all"
+  class="rounded-full border border-gray-300 dark:border-gray-800 bg-white dark:bg-gray-900 flex items-center justify-center p-1.5 transform scale-100 hover:scale-105 hover:border-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 transition-all"
   ...attributes
   type="button"
 >

app/components/header/account-dropdown.hbs

@@ -54,13 +54,15 @@
       <Header::AccountDropdownLink @text="Get Help" @icon="question-mark-circle" {{on "click" (fn this.handleGetHelpClick dd.actions)}} />
       <Header::AccountDropdownLink @text="Settings" @icon="cog" {{on "click" (fn this.handleSettingsLinkClick dd.actions)}} />
 
-      <div class="flex items-center justify-between gap-8 px-3 py-1.5">
-        <span class="text-sm text-gray-800">
-          Theme
-        </span>
+      {{#if this.featureFlags.canSeeDarkModeToggle}}
+        <div class="flex items-center justify-between gap-8 px-3 py-1.5">
+          <span class="text-sm text-gray-800">
+            Theme
+          </span>
 
-        <DarkModeToggleWithUpgradePrompt @size="small" />
-      </div>
+          <DarkModeToggleWithUpgradePrompt @size="small" />
+        </div>
+      {{/if}}
 
       <div class="h-px my-2 mx-3 bg-gray-200" />
 

app/components/leaderboard-entry.hbs

@@ -1,9 +1,8 @@
-{{! @glint-nocheck }}
 <LinkTo
   @route={{@route}}
   @model={{or @routeModel "dummy"}}
   class="flex items-center justify-between py-1.5 group/leaderboard-entry cursor-pointer pl-4 border-l-2
-    {{if @isForCurrentUser 'border-teal-500' 'border-transparent'}}"
+    {{if @isForCurrentUser 'border-teal-500 dark:border-teal-600' 'border-transparent'}}"
   data-test-leaderboard-entry
 >
   <div class="flex items-center min-w-0">
@@ -13,17 +12,17 @@
       {{else}}
         <AvatarImage
           @user={{@user}}
-          class="w-8 h-8 border border-gray-300 rounded shadow-sm group-hover/leaderboard-entry:shadow transition-shadow"
+          class="w-8 h-8 border border-gray-300 dark:border-gray-700 rounded shadow-sm group-hover/leaderboard-entry:shadow transition-shadow dark:opacity-90"
         />
       {{/if}}
     </div>
 
     {{#unless @isCollapsed}}
       {{#if this.isSkeleton}}
-        <span class="text-xs inline-block rounded bg-gray-200 mr-2">{{#each (repeat 30)}}&nbsp;{{/each}}</span>
+        <span class="text-xs inline-block rounded bg-gray-200 dark:bg-gray-800 mr-2">{{#each (repeat 30)}}&nbsp;{{/each}}</span>
       {{else}}
         <span
-          class="text-xs text-gray-600 group-hover/leaderboard-entry:underline mr-2 flex-shrink truncate"
+          class="text-xs text-gray-600 dark:text-gray-400 group-hover/leaderboard-entry:underline mr-2 flex-shrink truncate"
           data-test-username
         >{{@user.username}}</span>
       {{/if}}
@@ -35,35 +34,39 @@
     <div class="flex items-center flex-shrink-0">
       <span
         class="mr-2 text-xs font-bold
-          {{if (eq @status 'evaluating') 'text-yellow-500' 'text-teal-500'}}
+          {{if (eq @status 'evaluating') 'text-yellow-500 dark:text-yellow-600' 'text-teal-500 dark:text-teal-600'}}
           {{if @isForCurrentUser 'opacity-100' 'opacity-0'}}
           group-hover/leaderboard-entry:opacity-100 transition-opacity"
         data-test-progress-text
       >
         {{#if this.isSkeleton}}
-          <span class="inline-block bg-gray-200">{{#each (repeat 6)}}&nbsp;{{/each}}</span>
+          <span class="inline-block bg-gray-200 dark:bg-gray-800">{{#each (repeat 6)}}&nbsp;{{/each}}</span>
         {{else}}
           {{@progressNumerator}}
           /
           {{@progressDenominator}}
         {{/if}}
       </span>
       {{#if this.isSkeleton}}
-        <div class="w-12 h-3.5 rounded bg-gray-200" />
+        <div class="w-12 h-3.5 rounded bg-gray-200 dark:bg-gray-800" />
       {{else}}
         <div
-          class="w-12 h-3.5 rounded flex overflow-hidden border group-hover/leaderboard-entry:bg-white transition-all
+          class="w-12 h-3.5 rounded flex overflow-hidden border group-hover/leaderboard-entry:bg-white dark:group-hover/leaderboard-entry:bg-gray-800 transition-all
             {{if
               (eq @status 'evaluating')
-              'bg-yellow-50 border-yellow-500 animate-pulse'
-              'bg-teal-50 border-teal-500 group-hover/leaderboard-entry:shadow-sm'
+              'bg-yellow-50 dark:bg-yellow-900/80 border-yellow-500 dark:border-yellow-700 animate-pulse'
+              'bg-teal-50 dark:bg-teal-900/80 border-teal-500 dark:border-teal-700 group-hover/leaderboard-entry:shadow-sm'
             }}"
           data-test-progress-bar-container
         >
           {{!s Look like a tailwind 3.3.0 bug, from-0% and to-100% are required to make the gradient work }}
           <div
             class="bg-gradient-to-r from-0% to-100%
-              {{if (eq @status 'evaluating') 'from-yellow-500 to-yellow-400' 'from-teal-500 to-teal-400'}}
+              {{if
+                (eq @status 'evaluating')
+                'from-yellow-500 dark:from-yellow-600 to-yellow-400 dark:to-yellow-500'
+                'from-teal-500 dark:from-teal-600 to-teal-400 dark:to-teal-600'
+              }}
               transition-all"
             style={{this.progressBarWidthStyle}}
           >

app/components/leaderboard-entry.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import type UserModel from 'codecrafters-frontend/models/user';
+import { htmlSafe } from '@ember/template';
+
+interface Signature {
+  Element: HTMLAnchorElement;
+
+  Args: {
+    progressDenominator: number;
+    progressNumerator: number;
+    route: string;
+    routeModel: string;
+    status: string;
+    isForCurrentUser?: boolean;
+    isCollapsed?: boolean;
+    user: UserModel;
+  };
+
+  Blocks: {
+    afterUsername: [];
+  };
+}
+
+export default class LeaderboardEntryComponent extends Component<Signature> {
+  get isSkeleton(): boolean {
+    return !this.args.user;
+  }
+
+  get progressBarWidthStyle() {
+    return htmlSafe(`width: ${this.progressPercentage}%;`);
+  }
+
+  get progressPercentage(): number {
+    return 100 * (this.args.progressNumerator / this.args.progressDenominator);
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    LeaderboardEntry: typeof LeaderboardEntryComponent;
+  }
+}

app/components/leaderboard-entry.ts

@@ -8,7 +8,7 @@ import type LocalStorageService from 'codecrafters-frontend/services/local-stora
 import FastBootService from 'ember-cli-fastboot/services/fastboot';
 import RouteInfoMetadata, { RouteColorScheme } from 'codecrafters-frontend/utils/route-info-metadata';
 
-const LOCAL_STORAGE_KEY = 'dark-mode-preference';
+const LOCAL_STORAGE_KEY = 'dark-mode-preference-v2';
 
 export type LocalStoragePreference = 'system' | 'dark' | 'light' | null;
 export type SystemPreference = 'dark' | 'light';