Restyled based on Eartharoid's suggestions.

Used Google translate for languages other than English.

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

@@ -145,7 +145,7 @@ export default class BackgroundSettings extends React.PureComponent {
       colourSettings = (
         <div>
           {gradientInputs}
-          {this.state.gradientSettings.gradient[0].colour !== 'Disabled' ? (<button type="button" className="add" onClick={this.addColour}>+</button>) : null}
+          {this.state.gradientSettings.gradient[0].colour !== 'Disabled' ? (<button type="button" className="add" onClick={this.addColour}>{this.props.language.background.addColour}</button>) : null}
         </div>);
     }
 

src/scss/modules/_buttons.scss

@@ -61,12 +61,8 @@
 
 .add {
   @extend %settingsButton;
-  padding: 5px;
-  width: 25px;
   background-color: map-get($button-colours, "other");
   border: 2px solid map-get($button-colours, "other");
-  text-align: center;
-  vertical-align: sub;
 
   &:hover {
     color: map-get($button-colours, "other");
@@ -77,15 +73,17 @@
 
 .remove {
   @extend %settingsButton;
+  border-radius: 4px;
   padding: 5px;
   width: 25px;
-  background-color: map-get($button-colours, "reset");
-  border: 2px solid map-get($button-colours, "reset");
+  background-color: map-get($modal, "background");
+  border: 2px solid map-get($modal, "background");
+  color: map-get($modal, "text");
   text-align: center;
   vertical-align: sub;
 
   &:hover {
-    color: map-get($button-colours, "reset");
+    color: map-get($button-colours, "background");
     border: 2px solid map-get($button-colours, "reset");
     background: none;
   }

src/translations/en.json

@@ -43,7 +43,8 @@
             "customURL": "Custom Background URL",
             "custombackground": "Custom Background",
             "customcolour": "Custom Background Colour",
-            "upload": "Upload"
+            "upload": "Upload",
+            "addColour": "Add colour"
         },
         "searchbar": {
             "title": "Search Bar",

src/translations/fr.json

@@ -40,7 +40,8 @@
             "blur": "Ajuster le flou",
             "customURL": "URL D'arrière-plan personnalisée",
             "custombackground": "D'arrière-plan personnalisée",
-            "customcolour": "Couleur d'arrière-plan personnalisée"
+            "customcolour": "Couleur d'arrière-plan personnalisée",
+            "addColour": "Ajouter de la couleur"
         },
         "searchbar": {
             "title": "Barre de Recherche",

src/translations/nl.json

@@ -41,7 +41,8 @@
             "customURL": "Aangepaste Achtergrond URL",
             "custombackground": "Aangepaste Achtergrond",
             "customcolour": "Aangepaste Achtergrondkleur",
-            "upload": "Uploaden"
+            "upload": "Uploaden",
+            "addColour": "Kleur toevoegen"
         },
         "searchbar": {
             "title": "Zoekbalk",

src/translations/no.json

@@ -40,7 +40,8 @@
             "blur": "Juster Blur",
             "customURL": "Personlig bakgrunn URL",
             "custombackground": "Personlig bakgrunn",
-            "customcolour": "Personlig Bakgrunn Farge"
+            "customcolour": "Personlig Bakgrunn Farge",
+            "addColour": "Legg til farge"
         },
         "searchbar": {
             "title": "Søkebar",

src/translations/ru.json

@@ -42,7 +42,8 @@
             "customURL": "Ссылка для пользовательского фона",
             "custombackground": "Пользовательский фон",
             "customcolour": "Пользовательский цвет фона",
-            "upload": "Загрузить"
+            "upload": "Загрузить",
+            "addColour": "Добавить цвет"
         },
         "searchbar": {
             "title": "Панель поиска",