Remove the notification for dark mode

Author: shepmaster

ui/frontend/Notifications.tsx

@@ -3,11 +3,9 @@ import { Portal } from 'react-portal';
 
 import { Close } from './Icon';
 import { useAppDispatch, useAppSelector } from './hooks';
-import { swapTheme } from './reducers/configuration';
-import { seenDarkMode, seenRustSurvey2023 } from './reducers/notifications';
+import { seenRustSurvey2023 } from './reducers/notifications';
 import { allowLongRun, wsExecuteKillCurrent } from './reducers/output/execute';
 import * as selectors from './selectors';
-import { Theme } from './types';
 
 import * as styles from './Notifications.module.css';
 
@@ -17,63 +15,13 @@ const Notifications: React.FC = () => {
   return (
     <Portal>
       <div className={styles.container}>
-        <DarkModeNotification />
         <RustSurvey2023Notification />
         <ExcessiveExecutionNotification />
       </div>
     </Portal>
   );
 };
 
-const DarkModeNotification: React.FC = () => {
-  const showIt = useAppSelector(selectors.showDarkModeSelector);
-
-  const dispatch = useAppDispatch();
-  const seenIt = useCallback(() => dispatch(seenDarkMode()), [dispatch]);
-  const swapToLight = useCallback(() => dispatch(swapTheme(Theme.Light)), [dispatch]);
-  const swapToDark = useCallback(() => dispatch(swapTheme(Theme.Dark)), [dispatch]);
-  const swapToSystem = useCallback(() => dispatch(swapTheme(Theme.System)), [dispatch]);
-
-  return showIt ? (
-    <Notification onClose={seenIt}>
-      <p>The playground now has a dark mode! Sample the themes here:</p>
-
-      <table>
-        <tr>
-          <th>
-            <button className={styles.swapTheme} onClick={swapToSystem}>
-              System
-            </button>
-          </th>
-          <td>Use your system&apos;s preference</td>
-        </tr>
-
-        <tr>
-          <th>
-            <button className={styles.swapTheme} onClick={swapToLight}>
-              Light
-            </button>
-          </th>
-          <td>The classic playground style</td>
-        </tr>
-
-        <tr>
-          <th>
-            <button className={styles.swapTheme} onClick={swapToDark}>
-              Dark
-            </button>
-          </th>
-          <td>Reduce the number of photons hitting your eyeballs</td>
-        </tr>
-      </table>
-
-      <p>
-        You can change the current UI theme (and the editor&apos;s theme) in the configuration menu.
-      </p>
-    </Notification>
-  ) : null;
-};
-
 const RustSurvey2023Notification: React.FC = () => {
   const showIt = useAppSelector(selectors.showRustSurvey2023Selector);
 

ui/frontend/reducers/notifications.ts

@@ -11,7 +11,7 @@ interface State {
   seenMonacoEditorAvailable: boolean; // expired
   seenRustSurvey2022: boolean; // expired
   seenRustSurvey2023: boolean;
-  seenDarkMode: boolean;
+  seenDarkMode: boolean; // expired
 }
 
 const initialState: State = {
@@ -23,7 +23,7 @@ const initialState: State = {
   seenMonacoEditorAvailable: true,
   seenRustSurvey2022: true,
   seenRustSurvey2023: false,
-  seenDarkMode: false,
+  seenDarkMode: true,
 };
 
 const slice = createSlice({
@@ -32,10 +32,6 @@ const slice = createSlice({
   reducers: {
     notificationSeen: (state, action: PayloadAction<Notification>) => {
       switch (action.payload) {
-        case Notification.DarkMode: {
-          state.seenDarkMode = true;
-          break;
-        }
         case Notification.RustSurvey2023: {
           state.seenRustSurvey2023 = true;
           break;
@@ -47,7 +43,6 @@ const slice = createSlice({
 
 const { notificationSeen } = slice.actions;
 
-export const seenDarkMode = () => notificationSeen(Notification.DarkMode);
 export const seenRustSurvey2023 = () => notificationSeen(Notification.RustSurvey2023);
 
 export default slice.reducer;

ui/frontend/selectors/index.ts

@@ -360,13 +360,6 @@ const notificationsSelector = (state: State) => state.notifications;
 
 const NOW = new Date();
 
-const DARK_MODE_END = new Date('2024-10-15T00:00:00Z');
-const DARK_MODE_OPEN = NOW <= DARK_MODE_END;
-export const showDarkModeSelector = createSelector(
-  notificationsSelector,
-  notifications => DARK_MODE_OPEN && !notifications.seenDarkMode,
-);
-
 const RUST_SURVEY_2023_END = new Date('2024-01-15T00:00:00Z');
 const RUST_SURVEY_2023_OPEN = NOW <= RUST_SURVEY_2023_END;
 export const showRustSurvey2023Selector = createSelector(
@@ -375,7 +368,6 @@ export const showRustSurvey2023Selector = createSelector(
 );
 
 export const anyNotificationsToShowSelector = createSelector(
-  showDarkModeSelector,
   showRustSurvey2023Selector,
   excessiveExecutionSelector,
   (...allNotifications) => allNotifications.some(n => n),

ui/frontend/types.ts

@@ -165,6 +165,5 @@ export enum Focus {
 }
 
 export enum Notification {
-  DarkMode = 'dark-mode',
   RustSurvey2023 = 'rust-survey-2023',
 }