feat: background settings improvements

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/modals/main/scss/marketplace/_main.scss

@@ -231,6 +231,11 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;*/
   }
+  button {
+    svg {
+      font-size: 1rem;
+    }
+  }
   .buttonsRow {
     display: flex;
     flex-flow: row;

src/components/modals/main/scss/settings/_main.scss

@@ -88,33 +88,45 @@ h4 {
   }
 }
 
-.dropzone {
+.photosEmpty {
-  @include themed() {
+  height: 400px;
-    background: t($modal-sidebar);
+  display: grid;
-    border: 3px solid t($modal-sidebarActive);
+  place-items: center;
-    color: t($color);
+  button {
-    border-radius: 12px;
+    padding: 0 20px 0 20px;
-    font-size: 1rem;
+  }
+}
+
+.imagesTopBar {
+  padding-top: 25px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+  div:nth-child(1) {
     display: flex;
+    flex-flow: row;
     align-items: center;
-    flex-flow: column;
+    gap: 20px;
-    justify-content: center;
-    gap: 10px;
-    transition: 0.5s;
-    padding: 45px 25px 45px 25px;
     svg {
-      font-size: 48px;
+      font-size: 30px;
+      @include themed() {
+        color: t($subColor);
+      }
     }
-    .title {
+    div {
-      font-size: 18px;
+      display: flex;
-    }
+      flex-flow: column;
-    &:hover {
-      border-style: dashed;
-    }
-    button {
-      width: 80% !important;
     }
   }
+  .topbarbuttons {
+    display: flex;
+    flex-flow: row;
+    gap: 25px;
+  }
+  button {
+    padding: 0 20px 0 20px;
+  }
 }
 
 .statsGrid {

src/components/modals/main/scss/settings/modules/tabs/_order.scss

@@ -45,16 +45,20 @@
 }
 
 .images-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  height: 250px;
+  padding: 20px;
+  grid-gap: 20px;
   @include themed() {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
     div {
       background: t($modal-sidebar);
       padding: 10px;
       box-shadow: 0 0 0 4px t($modal-sidebarActive);
       border-radius: t($borderRadius);
       gap: 10px;
+      display: flex;
+      justify-content: center;
       img {
         width: auto;
         height: 100px;

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

@@ -98,6 +98,7 @@ export default class BackgroundSettings extends PureComponent {
 
     const APISettings = (
       <>
+        {interval}
         <SettingsItem
           title={getMessage('modals.main.settings.sections.background.api')}
           subtitle={getMessage('modals.main.settings.sections.background.api_subtitle')}
@@ -168,7 +169,6 @@ export default class BackgroundSettings extends PureComponent {
             onChange={(e) => this.setState({ backgroundAPI: e })}
           />
         </SettingsItem>
-        {interval}
       </>
     );
 
@@ -217,7 +217,7 @@ export default class BackgroundSettings extends PureComponent {
           className="mainTitle"
           onClick={() => this.setState({ backgroundSettingsSection: false })}
         >
-          {getMessage('modals.main.settings.sections.background.title')}{' '}
+          <span className='backTitle'>{getMessage('modals.main.settings.sections.background.title')}{' '}</span>
           <MdOutlineKeyboardArrowRight />{' '}
           {getMessage('modals.main.settings.sections.background.source.title')}
         </span>

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

@@ -1,7 +1,14 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 import { toast } from 'react-toastify';
-import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
+import {
+  MdCancel,
+  MdAddLink,
+  MdAddPhotoAlternate,
+  MdPersonalVideo,
+  MdOutlineFileUpload,
+  MdFolder,
+} from 'react-icons/md';
 import EventBus from 'modules/helpers/eventbus';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
 import { videoCheck } from 'modules/helpers/background/widget';
@@ -14,7 +21,7 @@ import Modal from 'react-modal';
 import CustomURLModal from './CustomURLModal';
 
 export default class CustomSettings extends PureComponent {
-  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+  getMessage = (text, obj) => variables.language.getMessage(variables.languagecode, text, obj || {});
 
   constructor() {
     super();
@@ -165,9 +172,10 @@ export default class CustomSettings extends PureComponent {
     return (
       <>
         {this.props.interval}
-        <div className="settingsRow settingsNoBorder" style={{ alignItems: 'flex-start' }}>
+
+        {/*<div className="settingsRow settingsNoBorder" style={{ alignItems: 'flex-start' }}>
           <div className="content">
-            <div className="images-row">
+            {/*<div className="images-row">
               {this.state.customBackground.map((url, index) => (
                 <div key={index}>
                   <img
@@ -185,8 +193,9 @@ export default class CustomSettings extends PureComponent {
                   ) : null}
                 </div>
               ))}
-            </div>
+                  </div>
           </div>
+
           <div className="action">
             <div className="dropzone" ref={this.customDnd}>
               <MdAddPhotoAlternate />
@@ -210,6 +219,74 @@ export default class CustomSettings extends PureComponent {
               <MdAddLink />
             </button>
           </div>
+        </div>*/}
+
+        <div className="dropzone" ref={this.customDnd}>
+          <div className="imagesTopBar">
+            <div>
+            <MdAddPhotoAlternate />
+            <div>
+              <span className="title">Custom Images</span>
+              <span className="subtitle">Select images from your local computer</span>
+            </div>
+            </div>
+            <div className='topbarbuttons'>
+              <button onClick={() => this.uploadCustomBackground()}>
+                Upload
+                <MdOutlineFileUpload />
+              </button>
+              <button onClick={() => this.setState({ customURLModal: true })}>
+                {this.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
+                <MdAddLink />
+              </button>
+            </div>
+          </div>
+          <div className="dropzone-content">
+            {this.state.customBackground.length > 0 ? (
+              <div className="images-row">
+                {this.state.customBackground.map((url, index) => (
+                  <div key={index}>
+                    <img
+                      alt={'Custom background ' + (index || 0)}
+                      src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`}
+                    />
+                    {this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
+                    {this.state.customBackground.length > 0 ? (
+                      <button
+                        className="iconButton"
+                        onClick={() => this.modifyCustomBackground('remove', index)}
+                      >
+                        <MdCancel />
+                      </button>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="photosEmpty">
+                <div className="emptyNewMessage">
+                  <MdAddPhotoAlternate />
+                  <span className="title">
+                    {this.getMessage(
+                      'modals.main.settings.sections.background.source.drop_to_upload',
+                    )}
+                  </span>
+                  <span className="subtitle">
+                    {this.getMessage(
+                      'modals.main.settings.sections.background.source.formats',
+                      {
+                        list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
+                      },
+                    )}
+                  </span>
+                  <button onClick={() => this.uploadCustomBackground()}>
+                    {this.getMessage('modals.main.settings.sections.background.source.select')}
+                    <MdFolder/>
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
         <FileUpload
           id="bg-input"

src/scss/_variables.scss

@@ -126,6 +126,16 @@ $themes: (
     @include themed() {
       color: t($color);
     }
+
+    .backTitle {
+      cursor: pointer;
+      @include themed() {
+        color: t($subColor);
+        &:hover {
+          color: t($color);
+        }
+      }  
+    }
   }
 
   .title {