feat: Appearance Setting (Dark Mode)

src/js/components/fields/__snapshots__/radiogroup.test.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/fields/radiogroup.tsx should render  1`] = `
+<fieldset
+  className="mb-1"
+  id="appearance"
+>
+  <div>
+    <legend
+      className="mb-1 text-base font-medium dark:text-white"
+    >
+      Appearance
+    </legend>
+    <p
+      className="text-sm text-gray-500"
+    >
+      This is some helper text
+    </p>
+  </div>
+  <div
+    aria-labelledby="appearance"
+    className="flex items-center space-x-4 py-2"
+    role="group"
+  >
+    <div
+      className="flex items-center mt-1"
+    >
+      <input
+        checked={false}
+        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+        id="appearance_one"
+        name="appearance"
+        onChange={[MockFunction]}
+        type="radio"
+        value="one"
+      />
+      <label
+        className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+        htmlFor="appearance_one"
+      >
+        Value 1
+      </label>
+    </div>
+    <div
+      className="flex items-center mt-1"
+    >
+      <input
+        checked={true}
+        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+        id="appearance_two"
+        name="appearance"
+        onChange={[MockFunction]}
+        type="radio"
+        value="two"
+      />
+      <label
+        className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+        htmlFor="appearance_two"
+      >
+        Value 2
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;

src/js/components/fields/radiogroup.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as TestRendener from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react';
+
+import { FieldRadioGroup } from './radiogroup';
+
+describe('components/fields/radiogroup.tsx', () => {
+  const props = {
+    label: 'Appearance',
+    name: 'appearance',
+    placeholder: 'This is some helper text',
+    options: [
+      { label: 'Value 1', value: 'one' },
+      { label: 'Value 2', value: 'two' },
+    ],
+    onChange: jest.fn(),
+    value: 'two',
+  };
+
+  it('should render ', () => {
+    const tree = TestRendener.create(<FieldRadioGroup {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should check that NProgress is getting called in getDerivedStateFromProps (loading)', function () {
+    const { getByLabelText } = render(<FieldRadioGroup {...props} />);
+    fireEvent.click(getByLabelText('Value 1'));
+    expect(props.onChange).toHaveBeenCalledTimes(1);
+  });
+});

src/js/components/fields/radiogroup.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { RadioGroupItem } from '../../../types';
+
+export const FieldRadioGroup = ({
+  label,
+  placeholder,
+  name,
+  options,
+  onChange,
+  value,
+}: {
+  name: string;
+  label: string;
+  placeholder?: string;
+  options: RadioGroupItem[];
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+}) => {
+  return (
+    <fieldset id={name} className="mb-1">
+      <div>
+        <legend className="mb-1 text-base font-medium dark:text-white">
+          {label}
+        </legend>
+        {placeholder && <p className="text-sm text-gray-500">{placeholder}</p>}
+      </div>
+
+      <div
+        className="flex items-center space-x-4 py-2"
+        role="group"
+        aria-labelledby={name}
+      >
+        {options.map((item) => {
+          return (
+            <div
+              className="flex items-center mt-1"
+              key={`radio_item_${item.value.toLowerCase()}`}
+            >
+              <input
+                type="radio"
+                className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                id={`${name}_${item.value.toLowerCase()}`}
+                name={name}
+                value={item.value}
+                onChange={onChange}
+                checked={item.value === value}
+              />
+              <label
+                htmlFor={`${name}_${item.value.toLowerCase()}`}
+                className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+              >
+                {item.label}
+              </label>
+            </div>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+};

src/js/components/ui/checkbox.tsx

@@ -5,23 +5,35 @@ interface IFieldCheckbox {
   label: string;
   checked: boolean;
   onChange: any;
+  placeholder?: string;
 }
 
 export const FieldCheckbox = (props: IFieldCheckbox) => {
   return (
-    <div className="mt-1 mb-2">
-      <label className="inline-flex items-center mt-2">
+    <div className="flex items-start mt-1 mb-3">
+      <div className="flex items-center h-5">
         <input
           type="checkbox"
-          className="h-5 w-5"
+          id={props.name}
+          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
           checked={props.checked}
           onChange={props.onChange}
         />
+      </div>
 
-        <span className="ml-4 text-gray-700 dark:text-white">
+      <div className="ml-3 text-sm">
+        <label
+          htmlFor={props.name}
+          className="font-medium text-gray-700 dark:text-gray-200"
+        >
           {props.label}
-        </span>
-      </label>
+        </label>
+        {props.placeholder && (
+          <p className="text-gray-500 dark:text-gray-300">
+            {props.placeholder}
+          </p>
+        )}
+      </div>
     </div>
   );
 };

src/js/middleware/settings.ts

@@ -1,12 +1,17 @@
 import { UPDATE_SETTING } from '../actions';
-import { restoreSetting, setAutoLaunch } from '../utils/comms';
+import { setAppearance } from '../utils/appearance';
+import { setAutoLaunch } from '../utils/comms';
 
 export default () => (next) => (action) => {
   switch (action.type) {
     case UPDATE_SETTING:
       if (action.setting === 'openAtStartup') {
         setAutoLaunch(action.value);
       }
+
+      if (action.setting === 'appearance') {
+        setAppearance(action.value);
+      }
   }
 
   return next(action);

src/js/reducers/__snapshots__/settings.test.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`reducers/settings.ts should handle UPDATE_SETTING 1`] = `
 Object {
+  "appearance": "SYSTEM",
   "markOnClick": false,
   "openAtStartup": false,
   "participating": true,
@@ -12,6 +13,7 @@ Object {
 
 exports[`reducers/settings.ts should handle UPDATE_SETTING 2`] = `
 Object {
+  "appearance": "SYSTEM",
   "markOnClick": false,
   "openAtStartup": true,
   "participating": false,
@@ -22,6 +24,7 @@ Object {
 
 exports[`reducers/settings.ts should return the initial state 1`] = `
 Object {
+  "appearance": "SYSTEM",
   "markOnClick": false,
   "openAtStartup": false,
   "participating": false,

src/js/reducers/settings.ts

@@ -1,12 +1,14 @@
 import { UPDATE_SETTING } from '../actions';
 import { SettingsState } from '../../types/reducers';
+import { Appearance } from '../../types';
 
 const initialState: SettingsState = {
   participating: false,
   playSound: true,
   showNotifications: true,
   markOnClick: false,
   openAtStartup: false,
+  appearance: Appearance.SYSTEM,
 };
 
 export default function reducer(state = initialState, action): SettingsState {