Added theme.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

package.json

@@ -8,27 +8,27 @@
     "build": "webextension-scripts build"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.22",
-    "@fortawesome/free-solid-svg-icons": "^5.10.2",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "^7.1.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.8",
     "@types/redux-logger": "^3.0.7",
-    "bootstrap": "^4.3.1",
-    "immer": "^3.2.0",
-    "react": "^16.9.0",
-    "react-bootstrap": "^1.0.0-beta.12",
-    "react-dom": "^16.9.0",
-    "react-redux": "^7.1.1",
+    "bootstrap": "^4.4.1",
+    "bootswatch": "^4.4.1",
+    "immer": "^5.0.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
     "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
-    "typescript": "^3.6.4",
-    "webext-redux": "^2.1.4",
-    "webextension-scripts": "^0.5.4"
+    "webext-redux": "^2.1.6",
+    "webextension-scripts": "^0.6.0"
   },
   "devDependencies": {
-    "prettier": "^1.18.2"
+    "@types/react": "^16.9.15",
+    "@types/react-dom": "^16.9.4",
+    "@types/react-redux": "^7.1.5",
+    "prettier": "^1.19.1",
+    "typescript": "^3.7.3"
   },
   "eslintConfig": {
     "extends": "eslint-config-webextension"

src/components/Select.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export interface SelectProps {
+  children: any;
+  label: string;
+  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  value: string;
+}
+
+export default function Select({ children, label, onChange, value }: SelectProps) {
+  return (
+    <div>
+      <label>{label}</label>
+      <select onChange={onChange} value={value}>
+        {children}
+      </select>
+    </div>
+  );
+}

src/components/Theme.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { selectOptions } from '../store/options/selectors';
+
+export interface ThemeProps {
+  children: any;
+}
+
+export default function Theme({ children }: ThemeProps) {
+  const options = useSelector(selectOptions);
+
+  useEffect(() => {
+    switch (options.themes.mts) {
+      case 'cerulean':
+      case 'cosmo':
+      case 'cyborg':
+      case 'darkly':
+      case 'flatly':
+      case 'journal':
+      case 'litera':
+      case 'lumen':
+      case 'lux':
+      case 'materia':
+      case 'minty':
+      case 'pulse':
+      case 'sandstone':
+      case 'simplex':
+      case 'sketchy':
+      case 'slate':
+      case 'solar':
+      case 'spacelab':
+      case 'superhero':
+      case 'united':
+      case 'yeti':
+        require(`bootswatch/dist/${options.themes.mts}/bootstrap.min.css`);
+        break;
+      default:
+        require('bootstrap/dist/css/bootstrap.css');
+        break;
+    }
+  }, [options.themes.mts]);
+
+  return <>{children}</>;
+}

src/pages/options/components/App.tsx

@@ -1,32 +1,14 @@
-import React, { useState } from 'react';
-import Nav from 'react-bootstrap/Nav';
-import Tab from 'react-bootstrap/Tab';
+import React from 'react';
 
+import { OptionsPane } from './OptionsPane';
 import { ChangeLogPane } from './ChangeLogPane';
-import { OptionsPane } from '../containers/OptionsPane';
+import Theme from '../../../components/Theme';
 
 export function App() {
-  const [key, setKey] = useState('options');
-
-  function onSelect(k: string) {
-    setKey(k);
-  }
-
   return (
-    <Tab.Container activeKey={key} onSelect={onSelect}>
-      <Nav variant="pills">
-        <Nav.Item >
-          <Nav.Link eventKey="options">Options</Nav.Link>
-        </Nav.Item>
-        <Nav.Item>
-          <Nav.Link eventKey="change-log">Change Log</Nav.Link>
-        </Nav.Item>
-      </Nav>
-
-      <Tab.Content>
-        <OptionsPane />
-        <ChangeLogPane />
-      </Tab.Content>
-    </Tab.Container>
+    <Theme>
+      <OptionsPane />
+      <ChangeLogPane />
+    </Theme>
   );
 }

src/pages/options/components/ChangeLogPane.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Tab from 'react-bootstrap/Tab';
 
 const versions = {
   '3.0.0': {
@@ -10,7 +9,7 @@ const versions = {
 
 export function ChangeLogPane() {
   return (
-    <Tab.Pane className="p-1" eventKey="change-log">
+    <div>
       {Object.entries(versions).map(([key, value]) => (
         <div key={key}>
           <h5>
@@ -23,6 +22,6 @@ export function ChangeLogPane() {
           </ul>
         </div>
       ))}
-    </Tab.Pane>
+    </div>
   );
 }

src/pages/options/containers/OptionsPane.tsx → src/pages/options/components/OptionsPane.tsx

@@ -1,84 +1,95 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import Tab from 'react-bootstrap/Tab';
 
-import { selectOptions } from '../../../store/options/selectors';
-import { optionsUpdateScripts } from '../../../store/options/actions';
 import { Checkbox } from '../../../components/Checkbox';
+import Select from '../../../components/Select';
+
+import { selectOptions } from '../../../store/options/selectors';
+import { optionsScriptsToggle, optionsThemesSet } from '../../../store/options/actions';
 
 export function OptionsPane() {
   const dispatch = useDispatch();
   const options = useSelector(selectOptions);
 
   return (
-    <Tab.Pane className="p-1" eventKey="options">
+    <div>
       <h5>Scripts</h5>
 
       <Checkbox
         label="Auto Accept Unchecker"
         checked={options.scripts.autoAcceptUnchecker}
-        onChange={() => dispatch(optionsUpdateScripts('autoAcceptUnchecker'))}
+        onChange={() => dispatch(optionsScriptsToggle('autoAcceptUnchecker'))}
       />
 
       <Checkbox
         label="Block List"
         checked={options.scripts.blockList}
-        onChange={() => dispatch(optionsUpdateScripts('blockList'))}
+        onChange={() => dispatch(optionsScriptsToggle('blockList'))}
       />
 
       <Checkbox
         label="Confirm Return Hit"
         checked={options.scripts.confirmReturnHit}
-        onChange={() => dispatch(optionsUpdateScripts('confirmReturnHit'))}
+        onChange={() => dispatch(optionsScriptsToggle('confirmReturnHit'))}
       />
 
       <Checkbox
         label="Hit Exporter"
         checked={options.scripts.hitExporter}
-        onChange={() => dispatch(optionsUpdateScripts('hitExporter'))}
+        onChange={() => dispatch(optionsScriptsToggle('hitExporter'))}
       />
 
       <Checkbox
         label="MTS HIT Tracker"
         checked={options.scripts.mtsHitTracker}
-        onChange={() => dispatch(optionsUpdateScripts('mtsHitTracker'))}
+        onChange={() => dispatch(optionsScriptsToggle('mtsHitTracker'))}
       />
 
       <Checkbox
         label="Pagination Last Page"
         checked={options.scripts.paginationLastPage}
-        onChange={() => dispatch(optionsUpdateScripts('paginationLastPage'))}
+        onChange={() => dispatch(optionsScriptsToggle('paginationLastPage'))}
       />
 
       <Checkbox
         label="Queue Info Enhancer"
         checked={options.scripts.queueInfoEnhancer}
-        onChange={() => dispatch(optionsUpdateScripts('queueInfoEnhancer'))}
+        onChange={() => dispatch(optionsScriptsToggle('queueInfoEnhancer'))}
       />
 
       <Checkbox
         label="Rate Limit Reloader"
         checked={options.scripts.rateLimitReloader}
-        onChange={() => dispatch(optionsUpdateScripts('rateLimitReloader'))}
+        onChange={() => dispatch(optionsScriptsToggle('rateLimitReloader'))}
       />
 
       <Checkbox
         label="Turkerview"
         checked={options.scripts.turkerview}
-        onChange={() => dispatch(optionsUpdateScripts('turkerview'))}
+        onChange={() => dispatch(optionsScriptsToggle('turkerview'))}
       />
 
       <Checkbox
         label="Turkopticon"
         checked={options.scripts.turkopticon}
-        onChange={() => dispatch(optionsUpdateScripts('turkopticon'))}
+        onChange={() => dispatch(optionsScriptsToggle('turkopticon'))}
       />
 
       <Checkbox
         label="Workspace Expander"
         checked={options.scripts.workspaceExpander}
-        onChange={() => dispatch(optionsUpdateScripts('workspaceExpander'))}
+        onChange={() => dispatch(optionsScriptsToggle('workspaceExpander'))}
       />
-    </Tab.Pane>
+
+      <Select
+        label="MTurk Suite Theme"
+        onChange={(event) => dispatch(optionsThemesSet({ mts: event.currentTarget.value as any }))}
+        value={options.themes.mts}
+      >
+        <option value="default">default</option>
+        <option value="darkly">darkly</option>
+        <option value="flatly">flatly</option>
+      </Select>
+    </div>
   );
 }

src/pages/options/index.tsx

@@ -1,5 +1,3 @@
-import 'bootstrap/dist/css/bootstrap.css';
-
 import React from 'react';
 import ReactDom from 'react-dom';
 import { Provider } from 'react-redux';

src/store/options/actions.ts

@@ -1,8 +1,15 @@
-import { OptionsScriptsToggleAction } from './types';
+import { OptionsScriptsToggleAction, OptionsThemesSetAction } from './types';
 
-export function optionsUpdateScripts(payload: OptionsScriptsToggleAction['payload']): OptionsScriptsToggleAction {
+export function optionsScriptsToggle(payload: OptionsScriptsToggleAction['payload']): OptionsScriptsToggleAction {
   return {
     type: 'OPTIONS_SCRIPTS_TOGGLE',
     payload,
   };
 }
+
+export function optionsThemesSet(payload: OptionsThemesSetAction['payload']) {
+  return {
+    type: 'OPTIONS_THEMES_SET',
+    payload,
+  };
+}

src/store/options/reducers.ts

@@ -8,6 +8,9 @@ export function optionsReducer(state = OptionsInitialState, action: OptionsActio
       case 'OPTIONS_SCRIPTS_TOGGLE':
         draftState.scripts[action.payload] = !draftState.scripts[action.payload];
         break;
+      case 'OPTIONS_THEMES_SET':
+        draftState.themes = { ...draftState.themes, ...action.payload };
+        break;
     }
   });
 }

src/store/options/types.ts

@@ -12,13 +12,62 @@ export const OptionsInitialState = {
     turkopticon: true,
     workspaceExpander: true,
   },
+  themes: {
+    mts: 'default',
+    mturk: 'default',
+  },
 };
 
-export type OptionsState = typeof OptionsInitialState;
+export interface OptionsState {
+  scripts: {
+    autoAcceptUnchecker: boolean;
+    blockList: boolean;
+    confirmReturnHit: boolean;
+    hitExporter: boolean;
+    mtsHitTracker: boolean;
+    paginationLastPage: boolean;
+    queueInfoEnhancer: boolean;
+    rateLimitReloader: boolean;
+    turkerview: boolean;
+    turkopticon: boolean;
+    workspaceExpander: boolean;
+  };
+  themes: {
+    mts:
+      | 'default'
+      | 'cerulean'
+      | 'cosmo'
+      | 'cyborg'
+      | 'darkly'
+      | 'flatly'
+      | 'journal'
+      | 'litera'
+      | 'lumen'
+      | 'lux'
+      | 'materia'
+      | 'minty'
+      | 'pulse'
+      | 'sandstone'
+      | 'simplex'
+      | 'sketchy'
+      | 'slate'
+      | 'solar'
+      | 'spacelab'
+      | 'superhero'
+      | 'united'
+      | 'yeti';
+    mturk: 'default';
+  };
+}
 
 export interface OptionsScriptsToggleAction {
   type: 'OPTIONS_SCRIPTS_TOGGLE';
   payload: keyof OptionsState['scripts'];
 }
 
-export type OptionsActionTypes = OptionsScriptsToggleAction;
+export interface OptionsThemesSetAction {
+  type: 'OPTIONS_THEMES_SET';
+  payload: Partial<OptionsState['themes']>;
+}
+
+export type OptionsActionTypes = OptionsScriptsToggleAction | OptionsThemesSetAction;