diff --git a/src/app/components/elements/inputs/SchoolInput.tsx b/src/app/components/elements/inputs/SchoolInput.tsx index e955cdd0e7..a95439de26 100644 --- a/src/app/components/elements/inputs/SchoolInput.tsx +++ b/src/app/components/elements/inputs/SchoolInput.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useEffect, useState} from "react"; import AsyncCreatableSelect from "react-select/async-creatable"; import {School, ValidationUser} from "../../../../IsaacAppTypes"; -import {schoolNameWithPostcode, siteSpecific, validateUserSchool} from "../../../services"; +import {reactSelectDarkModeStyles, schoolNameWithPostcode, siteSpecific, validateUserSchool} from "../../../services"; import throttle from "lodash/throttle"; import classNames from "classnames"; import {Immutable} from "immer"; @@ -128,6 +128,7 @@ export const SchoolInput = ({userToUpdate, setUserToUpdate, submissionAttempted, loadOptions={searchSchoolsFn} filterOption={() => true} formatCreateLabel={(input) => `Use "${input}" as your school name`} + styles={reactSelectDarkModeStyles} /> } diff --git a/src/app/components/elements/panels/UserTheme.tsx b/src/app/components/elements/panels/UserTheme.tsx index 3461c90906..821ee04425 100644 --- a/src/app/components/elements/panels/UserTheme.tsx +++ b/src/app/components/elements/panels/UserTheme.tsx @@ -1,9 +1,10 @@ import React from "react"; import { DisplaySettings } from "../../../../IsaacAppTypes"; import { MyAccountTab } from "./MyAccountTab"; -import { Label } from "reactstrap"; +import { Alert, Label } from "reactstrap"; import { LightnessTheme, lightnessThemes, useLightnessTheme } from "../../../services/theme"; import classNames from "classnames"; +import { Link } from "react-router-dom"; interface UserThemeProps { setDisplaySettings: (ds: DisplaySettings | ((oldDs?: DisplaySettings) => DisplaySettings)) => void; @@ -39,6 +40,12 @@ export const UserTheme = ({setDisplaySettings}: UserThemeProps) => { onChange={() => setDisplaySettings?.(prev => ({...prev, DARK_MODE: theme.value === "dark"}))} />)} + + Please note that dark mode is a new and extensive feature and, as such, certain areas of the site may not yet be fully optimised for this theme. + We also cannot guarantee e.g. AA accessibility compliance for dark mode at this time. +

+ If you encounter any issues, particularly regarding legibility, please report them to us via the contact form for further investigation. Please include a link to the page containing the issue if possible. +
} />; }; diff --git a/src/app/components/elements/sidebar/MyAccountSidebar.tsx b/src/app/components/elements/sidebar/MyAccountSidebar.tsx index a1e84d1de4..7becbb8d1e 100644 --- a/src/app/components/elements/sidebar/MyAccountSidebar.tsx +++ b/src/app/components/elements/sidebar/MyAccountSidebar.tsx @@ -3,7 +3,6 @@ import { ContentSidebarContext } from "../../../../IsaacAppTypes"; import { ACCOUNT_TAB, ACCOUNT_TABS, ifKeyIsEnter } from "../../../services"; import { StyledTabPicker } from "../inputs/StyledTabPicker"; import { ContentSidebar, SidebarProps } from "../layout/SidebarLayout"; -import { FeatureFlag, useFeatureFlag } from "../../../services/featureFlag"; interface MyAccountSidebarProps extends SidebarProps { editingOtherUser: boolean; @@ -13,13 +12,11 @@ interface MyAccountSidebarProps extends SidebarProps { export const MyAccountSidebar = (props: MyAccountSidebarProps) => { const { editingOtherUser, activeTab, setActiveTab, ...rest } = props; - const isDarkModeFlag = useFeatureFlag(FeatureFlag.SCI_DARK_MODE); return
Account settings