Refactoring

src/components/ConfigurationItem/ConfigurationItem.css

@@ -16,25 +16,6 @@ input.ConfigurationItemInput {
   box-sizing: border-box;
 }
 
-.ConfigurationItemSelect {
-  display: block;
-  margin: 0;
-  padding: 2px;
-  border-radius: var(--border_radius);
-  background: rgba(160, 160, 160, 0.1);
-  border: none;
-  box-shadow: none;
-  outline: none;
-  color: var(--text_color);
-  box-sizing: border-box;
-}
-
-.ConfigurationItemOption {
-  background: rgba(10, 10, 15, 0.8);
-  border-color: rgba(10, 10, 20, 0.9);
-  color: var(--text_color);
-}
-
 .ConfigurationInfo {
   cursor: pointer;
 }

src/components/ConfigurationItem/ConfigurationItem.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import './ConfigurationItem.css';
-import settings from '../../assets/settings';
+import CheckBox from '../UI/CheckBox/CheckBox';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
 import {connect} from 'react-redux';
+import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {notifyInfo} from '../../redux/actions/error_actions';
+import settings from '../../assets/settings';
+import DropDown from '../UI/DropDown/DropDown';
 
 const mapDispatchToProps = dispatch => {
   return {
@@ -36,15 +38,9 @@ export default connect(null, mapDispatchToProps)(props => {
   let data;
   switch (props.template.type) {
     case "bool":
-      data = (
+      data = <CheckBox changed={handleChanged}
-        <label className='CheckBoxOwner'>
+                       checked={props.value}
-          <input checked={JSON.parse(props.value)}
+                       disabled={props.readOnly}/>;
-                 disabled={props.readOnly}
-                 onChange={e=>handleChanged(e)}
-                 type='checkbox'/>
-          <span className='CheckMark'/>
-        </label>
-      );
     break;
 
     case "double":
@@ -58,20 +54,12 @@ export default connect(null, mapDispatchToProps)(props => {
     break;
 
     case "list":
-      const options = props.items.map((s, i) => {
+      data = <DropDown alt
-        return (
+                       auto
-          <option className={'ConfigurationItemOption'} key={i} value={s}>{s}</option>
+                       changed={handleChanged}
-        );
-      });
-
-      data = (
-        <select onChange={e=>handleChanged(e)}
-                className={'ConfigurationItemSelect'}
                        disabled={props.readOnly}
-                value={props.value}>
+                       items={props.items}
-          {options}
+                       selected={props.value} />;
-        </select>
-      );
     break;
 
     case "string":

src/components/MountItem/MountItem.js

@@ -11,6 +11,7 @@ import RootElem from '../UI/RootElem/RootElem';
 import {displayConfiguration, removeRemoteMount, setProviderState} from '../../redux/actions/mount_actions';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import { faTrashAlt} from '@fortawesome/free-solid-svg-icons';
+import CheckBox from '../UI/CheckBox/CheckBox';
 
 const mapStateToProps = (state, ownProps) => {
   return {
@@ -125,13 +126,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
               colSpan={28}
               row={secondRow}
               rowSpan={7}>
-      <label className='CheckBoxOwner'>Auto-mount
+      <CheckBox changed={handleAutoMountChanged}
-        <input checked={props.PState.AutoMount}
+                checked={props.PState.AutoMount} label={'Auto-mount'}/>
-               id={'checkbox_am_' + props.provider}
-               onChange={handleAutoMountChanged}
-               type='checkbox'/>
-        <span className='CheckMark'/>
-      </label>
     </RootElem>
   );
 
@@ -140,13 +136,9 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
               colSpan={24}
               row={secondRow}
               rowSpan={7}>
-      <label className='CheckBoxOwner'>Restart
+      <CheckBox changed={handleAutoRestartChanged}
-        <input checked={props.PState.AutoRestart}
+                checked={props.PState.AutoRestart}
-               id={'checkbox_ar_' + props.provider}
+                label={'Restart'}/>
-               onChange={handleAutoRestartChanged}
-               type='checkbox'/>
-        <span className='CheckMark'/>
-      </label>
     </RootElem>
   );
 

src/components/UI/CheckBox/CheckBox.css

@@ -0,0 +1,76 @@
+.CheckBoxOwner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* Customize the label (the container) */
+label.CheckBoxLabel {
+  position: relative;
+  padding-left: 24px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+label.CheckBoxLabel input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.CheckBoxCheckMark {
+  display: block;
+  margin: 0;
+  border-radius: var(--border_radius);
+  background-color: var(--control_background);
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+}
+
+/* On mouse-over, add a grey background color */
+label.CheckBoxLabel:hover input[type=checkbox] ~ .CheckBoxCheckMark {
+  background-color: var(--control_background_hover);
+}
+
+/* When the checkbox is checked, add a blue background */
+label.CheckBoxLabel input:checked ~ .CheckBoxCheckMark {
+  background-color: var(--control_background);
+}
+
+/* Create the CheckBoxCheckMark/indicator (hidden when not checked) */
+.CheckBoxCheckMark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the CheckBoxCheckMark when checked */
+label.CheckBoxLabel input:checked ~ .CheckBoxCheckMark:after {
+  display: block;
+}
+
+/* Style the CheckBoxCheckMark/indicator */
+label.CheckBoxLabel .CheckBoxCheckMark:after {
+  left: 6px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--heading_text_color);
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}

src/components/UI/CheckBox/CheckBox.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import './CheckBox.css';
+
+export default props => {
+  return (
+    <div className={'CheckBoxOwner'}>
+      <label className='CheckBoxLabel'>{props.label}
+        <input checked={JSON.parse(props.checked)}
+               disabled={props.disabled}
+               onChange={props.changed}
+               type='checkbox'/>
+        <span className='CheckBoxCheckMark'/>
+      </label>
+    </div>
+  );
+};

src/components/UI/DropDown/DropDown.css

@@ -19,6 +19,24 @@
   box-sizing: border-box;
 }
 
+.DropDownSelect.Alt {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: 0;
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: rgba(160, 160, 160, 0.1);
+  border: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+}
+
+.DropDownSelect.Auto {
+  width: auto;
+  height: auto;
+}
+
 .DropDownOption {
   background: rgba(10, 10, 15, 0.9);
   border-color: rgba(10, 10, 20, 0.9);

src/components/UI/DropDown/DropDown.js

@@ -10,7 +10,10 @@ export default props => {
 
   return (
     <div className={'DropDown'}>
-      <select className={'DropDownSelect'} disabled={props.disabled} onChange={props.changed} value={props.selected}>
+      <select className={'DropDownSelect' + (props.auto ? ' Auto ' : '') + (props.alt ? ' Alt ' : '') }
+              disabled={props.disabled}
+              onChange={props.changed}
+              value={props.selected}>
         {options}
       </select>
     </div>

src/css/checkbox.css

@@ -1,68 +0,0 @@
-/* Customize the label (the container) */
-label.CheckBoxOwner {
-	position: relative;
-	padding-left: 24px;
-	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-/* Hide the browser's default checkbox */
-label.CheckBoxOwner input[type=checkbox] {
-	position: absolute;
-	opacity: 0;
-	cursor: pointer;
-	height: 0;
-	width: 0;
-}
-
-/* Create a custom checkbox */
-.CheckMark {
-	display: block;
-	margin: 0;
-	border-radius: var(--border_radius);
-	background-color: var(--control_background);
-	box-sizing: border-box;
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 20px;
-	width: 20px;
-}
-
-/* On mouse-over, add a grey background color */
-label.CheckBoxOwner:hover input[type=checkbox] ~ .CheckMark {
-	background-color: var(--control_background_hover);
-}
-
-/* When the checkbox is checked, add a blue background */
-label.CheckBoxOwner input:checked ~ .CheckMark {
-	background-color: var(--control_background);
-}
-
-/* Create the CheckMark/indicator (hidden when not checked) */
-.CheckMark:after {
-	content: "";
-	position: absolute;
-	display: none;
-}
-
-/* Show the CheckMark when checked */
-label.CheckBoxOwner input:checked ~ .CheckMark:after {
-	display: block;
-}
-
-/* Style the CheckMark/indicator */
-label.CheckBoxOwner .CheckMark:after {
-	left: 6px;
-	top: 1px;
-	width: 5px;
-	height: 10px;
-	border: solid var(--heading_text_color);
-	border-width: 0 3px 3px 0;
-	-webkit-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
-}

src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import './css/checkbox.css';
 import App from './App';
 import createAppStore from './redux/store/createAppStore';
 import {getIPCRenderer} from './utils';