addons: Minor settings page refactor

src/addons/settings/settings.css

@@ -138,7 +138,7 @@ a:active, a:focus {
     outline: none;
     cursor: pointer;
     background-color: transparent;
-    background-image: url("./search.svg");
+    background-image: url("./icons/search.svg");
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -148,7 +148,7 @@ a:active, a:focus {
     border-color: #222222;
 }
 .search-input:not([value=""]) ~ .search-button {
-    background-image: url("./clear.svg") !important;
+    background-image: url("./icons/clear.svg") !important;
 }
 
 .feedback-button-outer {
@@ -503,7 +503,7 @@ a:active, a:focus {
 .setting input[type="checkbox"]:checked {
     border-color: $motion-primary;
     background-color: $motion-primary;
-    background-image: url("./check.svg");
+    background-image: url("./icons/check.svg");
 }
 .setting input[type="checkbox"]:hover:not(:focus) {
     border-color: $motion-tertiary;

src/addons/settings/settings.jsx

@@ -28,11 +28,11 @@ import {detectLocale} from '../../lib/detect-locale';
 import {getInitialDarkMode} from '../../lib/tw-theme-hoc.jsx';
 import SettingsStore from '../settings-store-singleton';
 import Channels from '../channels';
-import extensionImage from './extension.svg';
-import brushImage from './brush.svg';
-import undoImage from './undo.svg';
-import expandImageBlack from './expand.svg';
-import infoImage from './info.svg';
+import extensionImage from './icons/extension.svg';
+import brushImage from './icons/brush.svg';
+import undoImage from './icons/undo.svg';
+import expandImageBlack from './icons/expand.svg';
+import infoImage from './icons/info.svg';
 import styles from './settings.css';
 import '../polyfill';
 import '../../lib/normalize.css';
@@ -309,6 +309,20 @@ TextInput.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
+const ColorInput = props => (
+    <input
+        type="color"
+        id={props.id}
+        value={props.value}
+        onChange={props.onChange}
+    />
+);
+ColorInput.propTypes = {
+    id: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.string.isRequired
+};
+
 const ResetButton = ({
     addonId,
     settingId,
@@ -388,9 +402,8 @@ const Setting = ({
             {setting.type === 'color' && (
                 <React.Fragment>
                     {label}
-                    <input
+                    <ColorInput
                         id={uniqueId}
-                        type="color"
                         value={value}
                         onChange={e => SettingsStore.setAddonSetting(addonId, settingId, e.target.value)}
                     />