feat: improved settings and marketplace ui, better custom background support, fix webpack

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

package.json

@@ -49,7 +49,7 @@
     "sass": "^1.42.1",
     "sass-loader": "^12.1.0",
     "source-map-loader": "^3.0.0",
-    "webpack": "^5.54.0",
+    "webpack": "^5.61.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.3.0"
   },

src/components/modals/Modals.jsx

@@ -58,6 +58,7 @@ export default class Modals extends PureComponent {
 
   previewWelcome() {
     localStorage.setItem('showWelcome', false);
+    localStorage.setItem('welcomePreview', true);
     this.setState({
       welcomeModal: false,
       preview: true

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

@@ -14,11 +14,9 @@
     height: 80px;
     width: 260px;
     background: var(--sidebar);
-    transition: 0.5s;
     cursor: pointer;
     margin-right: 20px;
     margin-top: 20px;
-    box-shadow: 0 0 6px rgb(0 0 0 / 30%);
 
     img {
       height: 80px;
@@ -55,7 +53,7 @@
     }
 
     &:hover {
-      transform: scale(1.1);
+      background: var(--tab-active);
     }
   }
 }

src/components/modals/main/scss/modules/_navbar.scss

@@ -1,11 +1,17 @@
 .navbar-item {
   font-size: 22px;
   font-weight: 500;
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--photo-info);
 
   &:hover {
-    color: grey;
-    background: none;
+    svg {
+      background: var(--tab-active);
+    }
+
+    color: var(--modal-text)
   }
 
   span,
@@ -15,6 +21,10 @@
 
   svg {
     font-size: 1.2em !important;
+    width: 60px;
+    padding: 5px;
+    border-radius: 20px;
+    color: var(--photo-info);
   }
 }
 
@@ -30,6 +40,7 @@
   left: 20rem;
   top: 1rem;
   justify-content: center;
+  display: flex;
 
   svg {
     margin-right: 0.5rem;
@@ -53,19 +64,9 @@
 }
 
 .navbar-item-active {
-  background: map-get($theme-colours, 'gradient');
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  color: var(--modal-text);
 
   svg {
-    color: orange;
-  }
-
-  &:hover {
-    background: map-get($theme-colours, 'gradient');
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
+    background: var(--sidebar);
   }
 }

src/components/modals/main/scss/modules/_sidebar.scss

@@ -8,7 +8,7 @@ ul.sidebar {
   border-radius: 12px 0 0 12px;
   text-align: left;
   font-size: 24px;
-  min-height: 100vh;
+  min-height: 110vh;
 
   h1 {
     text-align: center;

src/components/modals/main/scss/modules/_tab-content.scss

@@ -17,14 +17,14 @@
 @media only screen and (max-width: 1920px) {
   .tab-content {
     left: 120px;
-    top: 50px;
+    top: 60px;
   }
 }
 
 @media only screen and (min-width: 1920px) {
   .tab-content {
     left: 350px;
-    top: 7%;
+    top: 9%;
   }
 }
 
@@ -38,6 +38,6 @@
 @media only screen and (max-width: 1200px) {
   .tab-content {
     left: 125px;
-    top: 75px;
+    top: 90px;
   }
 }

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

@@ -24,7 +24,8 @@
   }
 }
 
-.add, .close {
+.add,
+.close {
   @extend %settingsButton;
 
   background-color: map-get($button-colours, 'other');
@@ -43,16 +44,15 @@
 .export,
 .uploadbg,
 .import {
-  @extend %settingsButton;
-
-  background-color: map-get($button-colours, 'other');
-  color: map-get($theme-colours, 'primary');
-  border: 2px solid map-get($button-colours, 'other');
-
-  &:hover {
-    color: map-get($button-colours, 'other');
-    border: 2px solid map-get($button-colours, 'other');
-  }
+  width: 440px;
+  height: 60px;
+  background-color: var(--sidebar);
+  border: none;
+  outline: none;
+  color: var(--modal-text);
+  border-radius: 12px;
+  margin-right: 25px;
+  width: 220px;
 }
 
 .export,
@@ -64,3 +64,29 @@
   height: 10px !important;
   width: 10px !important;
 }
+
+.data-buttons-row {
+  width: 350px;
+  display: flex;
+  flex-direction: row;
+
+  button {
+    background: var(--sidebar);
+    text-align: center;
+    border-radius: 20px;
+    padding: 20px;
+    border: 3px solid var(--tab-active);
+    height: 40px;
+    font-size: 1rem;
+    margin: 0 10px 10px 0;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    color: var(--modal-text);
+
+    &:hover {
+      background: var(--tab-active);
+      cursor: pointer;
+    }
+  }
+}

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

@@ -54,7 +54,7 @@ input {
     width: 280px;
     color: var(--modal-text);
     background: var(--background);
-    border: solid white 1px;
+    border: solid var(--modal-text) 1px;
     padding: 15px 20px;
     border-radius: 4px;
     display: flex !important;

src/components/modals/main/scss/settings/modules/_material-ui.scss

@@ -37,13 +37,11 @@ legend {
 }
 
 .radio-title {
-  text-transform: uppercase;
   font-weight: bold;
   font-size: 1.17rem;
 }
 
 .radio-title-small {
-  text-transform: uppercase;
   font-weight: bold;
   font-size: 1rem;
 }

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

@@ -27,3 +27,28 @@ ul {
     vertical-align: middle;
   }
 }
+
+.images-row {
+  display: flex;
+  flex-wrap: wrap;
+  width: 500px;
+
+  div {
+    width: 100px;
+    height: 100px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-color: var(--sidebar);
+    border: 20px solid var(--sidebar);
+    border-radius: 20px;
+    margin: 0 20px 20px 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    svg {
+      font-size: 1.9em;
+    }
+  }
+}

src/components/modals/main/settings/Text.jsx

@@ -49,7 +49,7 @@ export default class Text extends PureComponent {
     return (
       <>
         {(this.props.textarea === true) ?
-          <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' multiline spellCheck={false} minRows={4} maxRows={10} />
+          <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' multiline spellCheck={false} minRows={4} maxRows={10}  InputLabelProps={{ shrink: true }} />
           : <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' />
         }
         <span className='modalLink' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>

src/components/modals/main/settings/sections/Advanced.jsx

@@ -2,6 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import Modal from 'react-modal';
 import { MenuItem } from '@mui/material';
+import { Upload as ImportIcon, Download as ExportIcon, RestartAlt as ResetIcon } from '@mui/icons-material';
 
 import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
 
@@ -36,11 +37,23 @@ export default class AdvancedSettings extends PureComponent {
           ))}
         </Dropdown>
 
-        <h3>{getMessage('modals.main.settings.sections.advanced.data')}</h3>
-        <br/>
-        <button className='reset' onClick={() => this.setState({ resetModal: true })}>{getMessage('modals.main.settings.buttons.reset')}</button>
-        <button className='export' onClick={() => exportSettings()}>{getMessage('modals.main.settings.buttons.export')}</button>
-        <button className='import' onClick={() => document.getElementById('file-input').click()}>{getMessage('modals.main.settings.buttons.import')}</button>
+        {localStorage.getItem('welcomePreview') !== 'true' ?
+         <>
+           <h3>{getMessage('modals.main.settings.sections.advanced.data')}</h3>
+           <br/>
+           <div className='data-buttons-row'>
+             <button onClick={() => this.setState({ resetModal: true })}>{getMessage('modals.main.settings.buttons.reset')}
+               <ResetIcon/>
+             </button>
+             <button onClick={() => exportSettings()}>{getMessage('modals.main.settings.buttons.export')}
+               <ExportIcon/>
+             </button>
+             <button onClick={() => document.getElementById('file-input').click()}>{getMessage('modals.main.settings.buttons.import')}
+               <ImportIcon/>
+             </button>
+           </div>
+         </>
+        : null}
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => importSettings(e)}/>
 
         <h3>{getMessage('modals.main.settings.sections.advanced.customisation')}</h3>

src/components/modals/main/settings/sections/Appearance.jsx

@@ -46,7 +46,6 @@ export default function AppearanceSettings() {
         <option value='700'>{getMessage('modals.main.settings.sections.appearance.font.weight.bold')}</option>
         <option value='800'>{getMessage('modals.main.settings.sections.appearance.font.weight.extra_bold')}</option>
       </Dropdown>
-      <br/><br/>
       <Dropdown label={getMessage('modals.main.settings.sections.appearance.font.style.title')} name='fontstyle' category='other'>
         <option value='normal'>{getMessage('modals.main.settings.sections.appearance.font.style.normal')}</option>
         <option value='italic'>{getMessage('modals.main.settings.sections.appearance.font.style.italic')}</option>

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

@@ -1,19 +1,23 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
-import { Cancel } from '@mui/icons-material';
-import { TextField } from '@mui/material';
+import { Cancel, AddLink, AddPhotoAlternate } from '@mui/icons-material';
 
 import Checkbox from '../../Checkbox';
 import FileUpload from '../../FileUpload';
 
+import Modal from 'react-modal';
+
+import CustomURLModal from './CustomURLModal';
+
 export default class CustomSettings extends PureComponent {
   getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
     this.state = {
-      customBackground: this.getCustom()
+      customBackground: this.getCustom(),
+      customURLModal: false
     };
   }
 
@@ -44,7 +48,7 @@ export default class CustomSettings extends PureComponent {
   modifyCustomBackground(type, index) {
     const customBackground = this.state.customBackground;
     if (type === 'add') {
-       customBackground.push('');
+      customBackground.push('');
     } else {
       customBackground.splice(index, 1);
     }
@@ -82,34 +86,48 @@ export default class CustomSettings extends PureComponent {
     return data;
   }
     
-  uploadCustombackground(index) {
-    document.getElementById('bg-input').setAttribute('index', index);
+  uploadCustomBackground() {
+    document.getElementById('bg-input').setAttribute('index', this.state.customBackground.length);
     document.getElementById('bg-input').click();
     // to fix loadFunction
     this.setState({
-      currentBackgroundIndex: index
+      currentBackgroundIndex: this.state.customBackground.length
     });
   }
 
+  addCustomURL(e) {
+    this.setState({
+      customURLModal: false,
+      currentBackgroundIndex: this.state.customBackground.length
+    });
+    this.customBackground({ target: { value: e }}, true, this.state.customBackground.length);
+  }
+
   render() {
     return (
       <ul>
         <p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
-        {this.state.customBackground.map((_url, index) => (
-          <Fragment key={index}>
-            <TextField value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)} autoComplete='off' autoCorrect='off' autoCapitalize='off' spellCheck={false} varient='outlined' />
-            {this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
-              <Cancel/>
-            </button> : null}
-            <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{this.getMessage('modals.main.settings.sections.background.source.upload')}</span>
-            {this.videoCustomSettings(index)}
-          </Fragment>
-        ))}
-        <br/><br/>
-        <button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{this.getMessage('modals.main.settings.sections.background.source.add_background')}</button>
-        <br/><br/>
+        <div className='images-row'>
+          {this.state.customBackground.map((_url, index) => (
+            <Fragment key={index}>
+              <div style={{ backgroundImage: `url(${this.state.customBackground[index]})` }}> 
+                {this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
+                  <Cancel/>
+                </button> : null}
+              </div>
+              {this.videoCustomSettings(index)}
+            </Fragment>
+          ))}
+        </div>
+        <div className='data-buttons-row'>
+          <button onClick={() => this.uploadCustomBackground()}>Add background <AddPhotoAlternate/> </button>
+          <button onClick={() => this.setState({ customURLModal: true })}>Add URL <AddLink/></button>
+        </div>
         <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
         {this.props.interval}
+        <Modal closeTimeoutMS={100} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
+          <CustomURLModal modalClose={(e) => this.addCustomURL(e)} />
+        </Modal>
       </ul>
     );
   }

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

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import { Add } from '@mui/icons-material';
+import { TextField } from '@mui/material'; 
+
+export default function CustomURLModal({ modalClose }) {
+  const [url, setURL] = useState('URL');
+
+  return (
+    <>
+      <h1>Add URL</h1>
+      <TextField value={url} onChange={(e) => setURL(e.target.value)} varient='outlined' />
+      <div className='resetfooter'>
+        <button className='round import' style={{ marginLeft: '5px' }} onClick={() => modalClose(url)}>
+          <Add/>
+        </button>
+      </div>
+    </>
+  );
+}

src/components/modals/welcome/welcome.scss

@@ -88,6 +88,7 @@
     border-radius: 40px;
     padding: 20px;
     margin: 10px;
+    border: 3px solid var(--tab-active);
 
     &:hover {
       background: var(--tab-active);
@@ -132,6 +133,7 @@
   background: var(--sidebar);
   color: var(--modal-text);
   cursor: pointer;
+  border: 3px solid var(--tab-active);
 
   &:hover {
     background: var(--tab-active);