feat(ui): add syncable dark mode (freeCodeCamp#56243)

Co-authored-by: Ahmad Abdolsaheb <[email protected]> Co-authored-by: Oliver Eyton-Williams <[email protected]> Co-authored-by: Sem Bauke <[email protected]>
moT01 · Dec 10, 2024 · 0b77e59 · 0b77e59
1 parent 674a318
commit 0b77e59
Show file tree

Hide file tree

Showing 31 changed files with 218 additions and 225 deletions.
diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
@@ -14,7 +14,7 @@ import MicrosoftLogo from '../assets/icons/microsoft-logo';
 import { createFlashMessage } from '../components/Flash/redux';
 import { Loader } from '../components/helpers';
 import RedirectHome from '../components/redirect-home';
-import { Themes } from '../components/settings/theme';
+import { LocalStorageThemes } from '../redux/types';
 import { showCert, fetchProfileForUser } from '../redux/actions';
 import {
   showCertSelector,
@@ -273,7 +273,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
           data-playwright-test-label='donation-form'
         >
           <MultiTierDonationForm
-            defaultTheme={Themes.Default}
+            defaultTheme={LocalStorageThemes.Light}
             handleProcessing={handleProcessing}
             isMinimalForm={true}
             paymentContext={PaymentContext.Certificate}

diff --git a/client/src/client-only-routes/show-settings.test.tsx b/client/src/client-only-routes/show-settings.test.tsx
@@ -42,7 +42,7 @@ const loggedInProps = {
   navigate: navigate,
   showLoading: false,
   submitNewAbout: jest.fn(),
-  toggleNightMode: jest.fn(),
+  toggleTheme: jest.fn(),
   updateSocials: jest.fn(),
   updateIsHonest: jest.fn(),
   updatePortfolio: jest.fn(),

diff --git a/client/src/client-only-routes/show-settings.tsx b/client/src/client-only-routes/show-settings.tsx
@@ -17,7 +17,6 @@ import DangerZone from '../components/settings/danger-zone';
 import Email from '../components/settings/email';
 import Honesty from '../components/settings/honesty';
 import Privacy from '../components/settings/privacy';
-import { type ThemeProps, Themes } from '../components/settings/theme';
 import UserToken from '../components/settings/user-token';
 import ExamToken from '../components/settings/exam-token';
 import { hardGoTo as navigate } from '../redux/actions';
@@ -33,7 +32,6 @@ import {
   updateMyHonesty,
   updateMyQuincyEmail,
   updateMySound,
-  updateMyTheme,
   updateMyKeyboardShortcuts,
   verifyCert,
   resetMyEditorLayout
@@ -42,7 +40,7 @@ import {
 const { apiLocation } = envData;
 
 // TODO: update types for actions
-type ShowSettingsProps = Pick<ThemeProps, 'toggleNightMode'> & {
+type ShowSettingsProps = {
   createFlashMessage: typeof createFlashMessage;
   isSignedIn: boolean;
   navigate: (location: string) => void;
@@ -75,7 +73,6 @@ const mapDispatchToProps = {
   createFlashMessage,
   navigate,
   submitNewAbout,
-  toggleNightMode: (theme: Themes) => updateMyTheme({ theme }),
   toggleSoundMode: (sound: boolean) => updateMySound({ sound }),
   toggleKeyboardShortcuts: (keyboardShortcuts: boolean) =>
     updateMyKeyboardShortcuts({ keyboardShortcuts }),
@@ -91,7 +88,6 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
   const {
     createFlashMessage,
     isSignedIn,
-    toggleNightMode,
     toggleSoundMode,
     toggleKeyboardShortcuts,
     resetEditorLayout,
@@ -121,7 +117,6 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
       isHonest,
       sendQuincyEmail,
       username,
-      theme,
       keyboardShortcuts
     },
     navigate,
@@ -163,13 +158,11 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
             {t('settings.for', { username: username })}
           </h1>
           <MiscSettings
-            currentTheme={theme}
             keyboardShortcuts={keyboardShortcuts}
             sound={sound}
             editorLayout={editorLayout}
             resetEditorLayout={resetEditorLayout}
             toggleKeyboardShortcuts={toggleKeyboardShortcuts}
-            toggleNightMode={toggleNightMode}
             toggleSoundMode={toggleSoundMode}
           />
           <Spacer size='m' />

diff --git a/client/src/components/Donation/donate-form.tsx b/client/src/components/Donation/donate-form.tsx
@@ -21,10 +21,10 @@ import {
   isDonatingSelector,
   signInLoadingSelector,
   donationFormStateSelector,
-  completedChallengesSelector
+  completedChallengesSelector,
+  themeSelector
 } from '../../redux/selectors';
-import { Themes } from '../settings/theme';
-import { DonateFormState } from '../../redux/types';
+import { LocalStorageThemes, DonateFormState } from '../../redux/types';
 import type { CompletedChallenge } from '../../redux/prop-types';
 import { CENTS_IN_DOLLAR, formattedAmountLabel } from './utils';
 import DonateCompletion from './donate-completion';
@@ -61,7 +61,7 @@ type PostCharge = (data: {
 
 type DonateFormProps = {
   postCharge: PostCharge;
-  defaultTheme?: Themes;
+  defaultTheme?: LocalStorageThemes;
   email: string;
   handleProcessing?: () => void;
   editAmount?: () => void;
@@ -72,10 +72,10 @@ type DonateFormProps = {
   isDonating: boolean;
   showLoading: boolean;
   t: TFunction;
-  theme: Themes;
   updateDonationFormState: (state: DonationApprovalData) => unknown;
   paymentContext: PaymentContext;
   completedChallenges: CompletedChallenge[];
+  theme: LocalStorageThemes;
 };
 
 const mapStateToProps = createSelector(
@@ -85,21 +85,23 @@ const mapStateToProps = createSelector(
   donationFormStateSelector,
   userSelector,
   completedChallengesSelector,
+  themeSelector,
   (
     showLoading: DonateFormProps['showLoading'],
     isSignedIn: DonateFormProps['isSignedIn'],
     isDonating: DonateFormProps['isDonating'],
     donationFormState: DonateFormState,
-    { email, theme }: { email: string; theme: Themes },
-    completedChallenges: CompletedChallenge[]
+    { email }: { email: string },
+    completedChallenges: CompletedChallenge[],
+    theme: LocalStorageThemes
   ) => ({
     isSignedIn,
     isDonating,
     showLoading,
     donationFormState,
     email,
-    theme,
-    completedChallenges
+    completedChallenges,
+    theme
   })
 );
 

diff --git a/client/src/components/Donation/multi-tier-donation-form.tsx b/client/src/components/Donation/multi-tier-donation-form.tsx
@@ -17,7 +17,7 @@ import {
   defaultTierAmount,
   type DonationAmount
 } from '../../../../shared/config/donation-settings'; // You can further extract these into separate components and import them
-import { Themes } from '../settings/theme';
+import { LocalStorageThemes } from '../../redux/types';
 import { formattedAmountLabel, convertToTimeContributed } from './utils';
 import DonateForm from './donate-form';
 
@@ -26,7 +26,7 @@ type MultiTierDonationFormProps = {
   handleProcessing?: () => void;
   paymentContext: PaymentContext;
   isMinimalForm?: boolean;
-  defaultTheme?: Themes;
+  defaultTheme?: LocalStorageThemes;
   isAnimationEnabled?: boolean;
 };
 function SelectionTabs({

diff --git a/client/src/components/Donation/paypal-button.tsx b/client/src/components/Donation/paypal-button.tsx
@@ -12,7 +12,7 @@ import {
 } from '../../../../shared/config/donation-settings';
 import envData from '../../../config/env.json';
 import { userSelector, signInLoadingSelector } from '../../redux/selectors';
-import { Themes } from '../settings/theme';
+import { LocalStorageThemes } from '../../redux/types';
 import { DonationApprovalData, PostPayment } from './types';
 import PayPalButtonScriptLoader from './paypal-button-script-loader';
 
@@ -34,7 +34,7 @@ type PaypalButtonProps = {
   isPaypalLoading: boolean;
   t: (label: string) => string;
   ref?: Ref<PaypalButton>;
-  theme: Themes;
+  theme: LocalStorageThemes;
   isSubscription?: boolean;
   handlePaymentButtonLoad: (provider: 'stripe' | 'paypal') => void;
   isMinimalForm: boolean | undefined;
@@ -91,7 +91,7 @@ class PaypalButton extends Component<PaypalButtonProps, PaypalButtonState> {
     const { duration, planId, amount } = this.state;
     const { t, theme, isPaypalLoading, isMinimalForm } = this.props;
     const isSubscription = duration !== 'one-time';
-    const buttonColor = theme === Themes.Night ? 'white' : 'gold';
+    const buttonColor = theme === LocalStorageThemes.Dark ? 'white' : 'gold';
     if (!paypalClientId) {
       return null;
     }

diff --git a/client/src/components/Donation/stripe-card-form.tsx b/client/src/components/Donation/stripe-card-form.tsx
@@ -11,14 +11,14 @@ import type {
 import React, { useState } from 'react';
 
 import { PaymentProvider } from '../../../../shared/config/donation-settings';
-import { Themes } from '../settings/theme';
+import { LocalStorageThemes } from '../../redux/types';
 import { DonationApprovalData, PostPayment } from './types';
 
 interface FormPropTypes {
   onDonationStateChange: (donationState: DonationApprovalData) => void;
   postPayment: (arg0: PostPayment) => void;
   t: (label: string) => string;
-  theme: Themes;
+  theme: LocalStorageThemes;
   processing: boolean;
 }
 
@@ -80,7 +80,7 @@ export default function StripeCardForm({
       base: {
         fontSize: '18px',
         fontFamily: 'Lato, sans-serif',
-        color: `${theme === Themes.Night ? '#fff' : '#0a0a23'}`,
+        color: `${theme === LocalStorageThemes.Dark ? '#fff' : '#0a0a23'}`,
         '::placeholder': {
           color: `#858591`
         }

diff --git a/client/src/components/Donation/wallets-button.tsx b/client/src/components/Donation/wallets-button.tsx
@@ -6,7 +6,7 @@ import type { PaymentRequest, Stripe } from '@stripe/stripe-js';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Themes } from '../settings/theme';
+import { LocalStorageThemes } from '../../redux/types';
 import {
   PaymentProvider,
   DonationDuration
@@ -17,7 +17,7 @@ import { DonationApprovalData, PostPayment } from './types';
 interface WrapperProps {
   label: string;
   amount: number;
-  theme: Themes;
+  theme: LocalStorageThemes;
   duration: DonationDuration;
   postPayment: (arg0: PostPayment) => void;
   onDonationStateChange: (donationState: DonationApprovalData) => void;
@@ -145,7 +145,7 @@ const WalletsButton = ({
             style: {
               paymentRequestButton: {
                 type: 'default',
-                theme: theme === Themes.Night ? 'light' : 'dark',
+                theme: theme === LocalStorageThemes.Light ? 'light' : 'dark',
                 height: '43px'
               }
             },

diff --git a/client/src/components/Flash/redux/index.ts b/client/src/components/Flash/redux/index.ts
@@ -4,10 +4,10 @@ import {
   FlashState,
   State,
   FlashApp,
-  FlashMessageArg
+  FlashMessageArg,
+  LocalStorageThemes
 } from '../../../redux/types';
 import { playTone } from '../../../utils/tone';
-import { Themes } from '../../settings/theme';
 import { FlashMessages } from './flash-messages';
 
 export const flashMessageSelector = (state: State): FlashState['message'] =>
@@ -33,7 +33,7 @@ export const createFlashMessage = (
 ): ReducerPayload<FlashActionTypes.CreateFlashMessage> => {
   // Nightmode theme has special tones
   if (flash.variables?.theme) {
-    void playTone(flash.variables.theme as Themes);
+    void playTone(flash.variables.theme as LocalStorageThemes);
   } else if (flash.message !== FlashMessages.None) {
     void playTone(flash.message);
   }