* Solved padding issue

* Solved margin and colour issue of text
* Addressed some small code-style tweaks that need doing as well before this can be merged

src/components/modals/settings/Section.jsx

@@ -20,7 +20,7 @@ export default class Section extends React.PureComponent {
       transform: transform
     });
 
-    if(this.props.onToggle) {
+    if (this.props.onToggle) {
       this.props.onToggle(display);
     }
   }

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -4,9 +4,8 @@ import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Section from '../Section';
 import { ColorPicker } from 'react-color-gradient-picker';
-import 'react-color-gradient-picker/dist/index.css';
-import hexToRgb from '../../../../helpers/hexToRgb'
-import rgbToHex from '../../../../helpers/rgbToHex'
+import hexToRgb from '../../../../helpers/hexToRgb';
+import rgbToHex from '../../../../helpers/rgbToHex';
 
 export default class BackgroundSettings extends React.PureComponent {
   DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" };
@@ -42,7 +41,7 @@ export default class BackgroundSettings extends React.PureComponent {
     toast(this.props.toastLanguage.reset);
   }
 
-  mapFromGradientSettingsToColorPickerInitalState(gradientSettings) {
+  InitializeColorPickerState(gradientSettings) {
     this.GradientPickerInitalState = {
       points: gradientSettings.gradient.map((g) => {
         const rgb = hexToRgb(g.colour);
@@ -137,7 +136,7 @@ export default class BackgroundSettings extends React.PureComponent {
   }
 
   onColorPickerChange = (attrs, name) => {
-    if(process.env.NODE_ENV == 'development'){
+    if (process.env.NODE_ENV == 'development'){
       console.log(attrs, name);
     }
     this.setState({
@@ -160,7 +159,7 @@ export default class BackgroundSettings extends React.PureComponent {
       let gradientInputs;
       if (gradientHasMoreThanOneColour) {
         if (this.GradientPickerInitalState === undefined) {
-          this.mapFromGradientSettingsToColorPickerInitalState(this.state.gradientSettings);
+          this.InitializeColorPickerState(this.state.gradientSettings);
         }
         gradientInputs = (<ColorPicker
           onStartChange={color => this.onColorPickerChange(color, 'start')}

src/components/widgets/Background.jsx

@@ -6,7 +6,7 @@ export default class Background extends React.PureComponent {
     const { type, angle, gradient } = gradientSettings;
     let style = `background: ${gradient[0].colour};`;
     if (gradient.length > 1) {
-      //Note: Append the gradient for additional browser support.
+      // Note: Append the gradient for additional browser support.
       const stepStyles = gradient.map(g => ` ${g.colour} ${g.stop}%`).join();
       style += ` background: ${type}-gradient(${(type === 'linear' ? (`${angle}deg,`) : '')}${stepStyles})`;
     }
@@ -20,7 +20,7 @@ export default class Background extends React.PureComponent {
     } catch (e) {
       const hexColorRegex = /#[0-9a-fA-F]{6}/s;
       if (hexColorRegex.exec(colour)) {
-        //colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
+        // Colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
         gradientSettings = { "type": "linear", "angle": "180", "gradient": [{ "colour": colour, "stop": 0 }] };
         localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
       }

src/helpers/hexToRgb.js

@@ -1,5 +1,5 @@
-import  rgbToHsv  from './rgbToHsv';
-import  setRgba  from './setRgba';
+import rgbToHsv from './rgbToHsv';
+import setRgba from './setRgba';
 
 const hexRegexp = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;
 

src/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
+import 'react-color-gradient-picker/dist/index.css';
+import './scss/react-color-picker-gradient-picker-custom-styles.scss';
 import './scss/index.scss';
 import 'react-toastify/dist/ReactToastify.css'; // the toast css is based on default so we need to import it
 

src/scss/index.scss

@@ -91,10 +91,4 @@ body {
 
 ::selection {
     background-color: #c2c2c2;
-}
-
-div.picker-area > div.preview > div.color-hue-alpha > div.alpha,
-div.color-preview-area > div > div:nth-child(5)
-{
-    display: none;
 }

src/scss/react-color-picker-gradient-picker-custom-styles.scss

@@ -0,0 +1,17 @@
+//The following CSS is to work around some assumptions made by the react-color-gradient-picker
+* {    
+    box-sizing: inherit; //Required to work around https://github.com/arthay/react-color-gradient-picker/issues/11
+}
+
+div.picker-area > div.preview > div.color-hue-alpha > div.alpha,
+div.color-preview-area > div > div:nth-child(5) {
+    display: none;
+}
+
+.ui-color-picker {
+    margin: 8px -12px;
+}
+
+.input-field .label {
+    color: inherit;
+}