fix: various ui fixes, fix create tab

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

src/components/modals/main/marketplace/sections/Create.jsx

@@ -3,7 +3,9 @@ import { PureComponent } from 'react';
 import { 
   SettingsRounded as Settings, 
   PhotoOutlined as Photos, 
-  FormatQuoteOutlined as Quotes
+  FormatQuoteOutlined as Quotes,
+  Upload as ImportIcon,
+  Download as ExportIcon,
 } from '@mui/icons-material';
 import { TextField } from '@mui/material';
 import { toast } from 'react-toastify';
@@ -119,9 +121,7 @@ export default class Create extends PureComponent {
 
   importQuotes() {
     this.setState({
-      addonData: {
-        quotes: JSON.parse(localStorage.getItem('customQuote')) || []
-      }
+      addonData: JSON.parse(localStorage.getItem('customQuote')) || []
     });
 
     toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
@@ -130,7 +130,16 @@ export default class Create extends PureComponent {
   importPhotos() {
     let data = [];
     try {
-      data = JSON.parse(localStorage.getItem('customBackground'));
+      const current = JSON.parse(localStorage.getItem('customBackground')) || [];
+      data = current.map((item) => {
+        return {
+          photographer: '???',
+          location: '???',
+          url: {
+            default: item
+          }
+        }
+      });
       toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
     } catch (e) {
       console.log(e);
@@ -138,9 +147,7 @@ export default class Create extends PureComponent {
     }
 
     this.setState({
-      addonData: {
-        photos: data
-      }
+      addonData: data
     });
   }
 
@@ -228,17 +235,19 @@ export default class Create extends PureComponent {
         <div className='themesToggleArea'>
           <div className='options'>
             <div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
+              <ExportIcon/>
               <span>{getMessage('modals.main.addons.create.settings.current')}</span>
             </div>
             <div className={this.state.settingsClasses.json} onClick={() => document.getElementById('file-input').click()}>
+              <ImportIcon/>
               <span>{getMessage('modals.main.addons.create.settings.json')}</span>
             </div>
           </div>
         </div>
         <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
         <br/><br/>
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
+        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextSettingsDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
     
@@ -253,18 +262,16 @@ export default class Create extends PureComponent {
           <option value='quote_api'>{getMessage('modals.main.addons.create.quotes.api.title')}</option>
         </Dropdown>
         {this.state.addonMetadata.type === 'quote_api' ? <>
-          <h3>{getMessage('modals.main.addons.create.quotes.api.title')}</h3>
           <TextField label={getMessage('modals.main.addons.create.quotes.api.url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.url} onInput={(e) => this.updateQuotePack(e.target.value, 'url')}/>
           <TextField label={getMessage('modals.main.addons.create.quotes.api.name')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.name} onInput={(e) => this.updateQuotePack(e.target.value, 'name')}/>
           <TextField label={getMessage('modals.main.addons.create.quotes.api.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.author} onInput={(e) => this.updateQuotePack(e.target.value, 'author')}/>
           <br/><br/>
         </> : <>
-          <h3>{getMessage('modals.main.addons.create.quotes.local.title')}</h3>
-          <button onClick={() => this.importQuotes()} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
+          <button onClick={() => this.importQuotes()} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
           <br/><br/>
         </>}
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
+        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }}disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 
@@ -273,11 +280,10 @@ export default class Create extends PureComponent {
     const addPhotos = (
       <>
         <h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
-        <h3>{getMessage('modals.main.addons.create.quotes.local.title')}</h3>
         <button onClick={() => this.importPhotos()} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
         <br/><br/>
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
+        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 

src/components/modals/main/marketplace/sections/Sideload.jsx

@@ -31,7 +31,7 @@ export default class Sideload extends PureComponent {
       failedReason = this.getMessage('modals.main.addons.sideload.errors.no_type');
     } else if (!input.version) {
       failedReason = this.getMessage('modals.main.addons.sideload.errors.no_version');
-    } else if (input.type === 'photos' && (!input.photos || !input.photos.length || !input.photos[0].url.default || !input.photos[0].photographer || !input.photos[0].location)) {
+    } else if (input.type === 'photos' && (!input.photos || !input.photos.length || !input.photos[0].url || !input.photos[0].url.default || !input.photos[0].photographer || !input.photos[0].location)) {
       failedReason = this.getMessage('modals.main.addons.sideload.errors.invalid_photos');
     } else if (input.type === 'quotes' && (!input.quotes || !input.quotes.length || !input.quotes[0].quote || !input.quotes[0].author)) {
       failedReason = this.getMessage('modals.main.addons.sideload.errors.invalid_quotes');

src/components/modals/main/scss/marketplace/modules/_item.scss

@@ -53,6 +53,7 @@ p.description {
   background: var(--sidebar);
   width: 350px;
   border-radius: 12px;
+  min-height: 180px;
 
   h4 {
     cursor: initial !important;
@@ -74,4 +75,5 @@ p.description {
 
 .overview {
   font-size: 30px !important;
+  margin-top: 33px;
 }

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

@@ -54,6 +54,9 @@
   margin-right: 25px;
   width: 220px;
   cursor: pointer;
+  border-radius: 24px;
+  border: 3px solid var(--tab-active);
+  font-size: 1rem;
 
   &:hover {
     background-color: var(--tab-active);

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

@@ -25,3 +25,8 @@
   border-radius: 50%;
   padding-right: 5px;
 }
+
+.contacth3 {
+  font-size: 1.5rem;
+  margin-bottom: 0.8em !important;
+}

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

@@ -93,7 +93,7 @@ export default class About extends PureComponent {
         <p>{this.getMessage('modals.main.settings.sections.about.version.title')} {variables.constants.VERSION} ({this.state.update})</p>
         <a href={variables.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
 
-        <h3>{this.getMessage('modals.main.settings.sections.about.contact_us')}</h3>
+        <h3 className='contacth3'>{this.getMessage('modals.main.settings.sections.about.contact_us')}</h3>
         <a href={'mailto:' + variables.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
         <a href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
         <a href={'https://instagram.com/' + variables.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>