feat: better remove background button

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/main/settings/sections/background/Background.jsx

@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
+import { Cancel } from '@material-ui/icons';
 
 import Checkbox from '../../Checkbox';
 import Dropdown from '../../Dropdown';
@@ -200,8 +201,10 @@ export default class BackgroundSettings extends PureComponent {
           <p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
           {this.state.customBackground.map((_url, index) => (
             <Fragment key={index}>
-              {this.state.customBackground.length > 1 ? <button className='reset round round-small' onClick={() => this.removeCustomBackground(index)}>x</button> : null}
               <input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)}></input>
+              {this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.removeCustomBackground(index)}>
+                <Cancel/>
+              </button> : null}
               <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.ypload')}</span>
               {this.videoCustomSettings(index)}
               <br/><br/>  

src/scss/modules/_buttons.scss

@@ -87,3 +87,26 @@
     font-size: 2em;
   }
 }
+
+.cleanButton {
+  background: none;
+  border: none;
+  vertical-align: middle;
+
+  svg {
+    fill: #ff4757;
+    border-radius: 100%;
+    background-color: var(--background);
+    height: 1.2em;
+    width: 1.2em;
+    cursor: pointer;
+    transition: ease 0.5s;
+
+    &:hover {
+      border-radius: 100%;
+      background: #ff4757;
+      fill: var(--background);
+      transition: ease 0.5s;
+    }
+  }
+}