Add Theme Preferences Setting

app/css/pages/settings.css

@@ -263,6 +263,10 @@
             @apply text-16 leading-160 font-medium;
         }
     }
+
+    .--selected-theme {
+        @apply outline outline-4 outline-linkColor;
+    }
 }
 #page-settings-donations {
     & .subscription-box {

app/css/ui-kit/filters.css

@@ -12,6 +12,11 @@
         filter: var(--white-filter);
     }
 
+    .filter-white-no-dark {
+        filter: invert(100%) sepia(0%) saturate(7484%) hue-rotate(136deg)
+            brightness(99%) contrast(104%);
+    }
+
     .filter-lightGold {
         filter: var(--lightGold-filter);
     }

app/helpers/react_components/settings/theme_preference_form.rb

@@ -0,0 +1,21 @@
+module ReactComponents
+  module Settings
+    class ThemePreferenceForm < ReactComponent
+      def to_s
+        super("settings-theme-preference-form", {
+          default_theme_preference:,
+          insiders_status: current_user.insiders_status,
+          links: {
+            # TODO: add this field too, check this update URL
+            update: Exercism::Routes.api_settings_url
+          }
+        })
+      end
+
+      # TODO: add these as default values in DB
+      def default_theme_preference
+        %i[eligible eligible_lifetime].include?(current_user.insiders_status) ? 'system' : 'light'
+      end
+    end
+  end
+end

app/javascript/components/settings/PronounsForm.tsx

@@ -81,7 +81,7 @@ export const PronounsForm = ({
             maxLength={100}
             onChange={(e) => setPronounPart(e.target.value, 0)}
           />
-          answered all my questions. I'll recommend
+          answered all my questions. I'll recommend
           <input
             type="text"
             value={pronounParts[1] || ''}

app/javascript/components/settings/ThemePreferenceForm.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useCallback } from 'react'
+import { FormButton, GraphicalIcon, Icon } from '../common'
+import { useSettingsMutation } from './useSettingsMutation'
+import { FormMessage } from './FormMessage'
+import { ExercismTippy } from '../misc/ExercismTippy'
+
+type Links = {
+  update: string
+}
+
+type RequestBody = {
+  user: {
+    theme_preference: string
+  }
+}
+
+type Theme = {
+  label: string
+  background: string
+  iconFilter: string
+  value: string
+}
+
+const DEFAULT_ERROR = new Error('Unable to update theme preference')
+const THEME_BUTTON_SIZE = 128
+const THEMES: Theme[] = [
+  {
+    label: 'Light',
+    value: 'light',
+    background: 'white',
+    iconFilter: 'textColor1',
+  },
+  {
+    label: 'System',
+    value: 'system',
+    background:
+      'linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(48,43,66,1) 50%)',
+    iconFilter: 'gray',
+  },
+  {
+    label: 'Dark',
+    value: 'dark',
+    background: '#302b42', //russianViolet
+    iconFilter: 'aliceBlue',
+  },
+  {
+    label: 'Accessibility Dark',
+    value: 'accessibility-dark',
+    background: 'black',
+    iconFilter: 'white-no-dark',
+  },
+]
+
+export const ThemePreferenceForm = ({
+  defaultThemePreference,
+  insidersStatus,
+  links,
+}: {
+  defaultThemePreference: string
+  insidersStatus: string
+  links: Links
+}): JSX.Element => {
+  const [theme, setTheme] = useState<string>(defaultThemePreference || '')
+
+  const { mutation, status, error } = useSettingsMutation<RequestBody>({
+    endpoint: links.update,
+    method: 'PATCH',
+    body: { user: { theme_preference: theme } },
+  })
+
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault()
+
+      mutation()
+    },
+    [mutation]
+  )
+
+  return (
+    <form data-turbo="false" onSubmit={handleSubmit}>
+      <h2>Theme</h2>
+      <div className="flex gap-32">
+        {THEMES.map((t: Theme) => (
+          <ThemeButton
+            key={t.label}
+            theme={t}
+            currentTheme={theme}
+            disabled={isDisabled(insidersStatus, t.value)}
+            onClick={() => setTheme(t.value)}
+          />
+        ))}
+      </div>
+      <div className="form-footer">
+        <FormButton status={status} className="btn-primary btn-m">
+          Update theme preference
+        </FormButton>
+        <FormMessage
+          status={status}
+          error={error}
+          defaultError={DEFAULT_ERROR}
+          SuccessMessage={() => <SuccessMessage />}
+        />
+      </div>
+    </form>
+  )
+}
+
+const SuccessMessage = () => {
+  return (
+    <div className="status success">
+      <Icon icon="completed-check-circle" alt="Success" />
+      Your theme preference has been updated!
+    </div>
+  )
+}
+
+function ThemeButton({
+  theme,
+  currentTheme,
+  onClick,
+  disabled = false,
+}: {
+  theme: Theme
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+  currentTheme: string
+  disabled?: boolean
+}) {
+  const selected = theme.value === currentTheme
+
+  return (
+    <ExercismTippy content={disabled && <DisabledTooltip />}>
+      <div className="flex flex-col gap-16 items-center">
+        <button
+          disabled={disabled}
+          id={`${theme.value}-theme`}
+          style={{
+            height: `${THEME_BUTTON_SIZE}px`,
+            width: `${THEME_BUTTON_SIZE}px`,
+            background: `${theme.background}`,
+            filter: disabled ? 'grayscale(0.9)' : '',
+            opacity: disabled ? '60%' : '100%',
+          }}
+          className={`flex items-center justify-center border-1 border-borderColor6 rounded-8 ${
+            selected && '--selected-theme'
+          }`}
+          onClick={onClick}
+        >
+          <GraphicalIcon
+            icon={disabled ? 'lock-circle' : 'logo'}
+            height={32}
+            width={32}
+            className={!disabled ? `filter-${theme.iconFilter}` : ''}
+          />
+        </button>
+        <label className="text-p" htmlFor={`${theme.value}-theme`}>
+          {theme.label}
+        </label>
+      </div>
+    </ExercismTippy>
+  )
+}
+
+function DisabledTooltip(): JSX.Element {
+  return (
+    <div className="flex items-center bg-russianViolet rounded-16 py-8 px-12 text-p-base text-aliceBlue">
+      You must be an&nbsp;
+      <strong style={{ color: 'inherit' }} className="flex items-center">
+        Exercism Insider&nbsp;
+        <GraphicalIcon icon="insiders" height={24} width={24} />
+      </strong>
+      &nbsp;to unlock this theme.
+    </div>
+  )
+}
+
+function isDisabled(insidersStatus: string, theme: string): boolean {
+  const eligible = ['eligible', 'eligible_lifetime'].includes(insidersStatus)
+  const themeDisabled = ['dark', 'system'].includes(theme)
+
+  return !eligible && themeDisabled
+}

app/javascript/components/settings/index.ts

@@ -5,6 +5,7 @@ export { EmailForm } from './EmailForm'
 export { PasswordForm } from './PasswordForm'
 export { TokenForm } from './TokenForm'
 export { UserPreferencesForm } from './UserPreferencesForm'
+export { ThemePreferenceForm } from './ThemePreferenceForm'
 export { CommunicationPreferencesForm } from './CommunicationPreferencesForm'
 export { DeleteAccountButton } from './DeleteAccountButton'
 export { ResetAccountButton } from './ResetAccountButton'

app/javascript/packs/internal.tsx

@@ -266,6 +266,13 @@ initReact({
       links={data.links}
     />
   ),
+  'settings-theme-preference-form': (data: any) => (
+    <Settings.ThemePreferenceForm
+      defaultThemePreference={data.default_theme_preference}
+      insidersStatus={data.insiders_status}
+      links={data.links}
+    />
+  ),
   'settings-communication-preferences-form': (data: any) => (
     <Settings.CommunicationPreferencesForm
       defaultPreferences={camelizeKeysAs<CommunicationPreferences>(

app/views/settings/user_preferences.html.haml

@@ -8,3 +8,7 @@
       %section
         = render ReactComponents::Settings::UserPreferencesForm.new
 
+
+      %section
+        = render ReactComponents::Settings::ThemePreferenceForm.new
+