From af2edeb7375ae03a91c818731d43523014959c68 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Tue, 23 Nov 2021 18:11:36 +0000
Subject: [PATCH] fix: various ui fixes, fix create tab

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
---
 .../main/marketplace/sections/Create.jsx      | 42 +++++++++++--------
 .../main/marketplace/sections/Sideload.jsx    |  2 +-
 .../main/scss/marketplace/modules/_item.scss  |  2 +
 .../modals/main/scss/settings/_buttons.scss   |  3 ++
 .../scss/settings/modules/tabs/_about.scss    |  5 +++
 .../modals/main/settings/sections/About.jsx   |  2 +-
 src/components/modals/welcome/welcome.scss    | 10 +++++
 .../widgets/navbar/scss/_notes.scss           |  1 +
 8 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index c5cfd9ac..8754edfd 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/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>
       </>
     );
 
diff --git a/src/components/modals/main/marketplace/sections/Sideload.jsx b/src/components/modals/main/marketplace/sections/Sideload.jsx
index 122def02..6a293304 100644
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/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');
diff --git a/src/components/modals/main/scss/marketplace/modules/_item.scss b/src/components/modals/main/scss/marketplace/modules/_item.scss
index 62b40bae..c7060ac3 100644
--- a/src/components/modals/main/scss/marketplace/modules/_item.scss
+++ b/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;
 }
diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss
index 4b1e7561..31f29631 100644
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/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);
diff --git a/src/components/modals/main/scss/settings/modules/tabs/_about.scss b/src/components/modals/main/scss/settings/modules/tabs/_about.scss
index c1672a2d..4fc9ea6b 100644
--- a/src/components/modals/main/scss/settings/modules/tabs/_about.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 4d184010..c823932c 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/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>
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index af065f1b..ad71f2ac 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -90,6 +90,12 @@
     margin: 10px;
     border: 3px solid var(--tab-active);
 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+
     &:hover {
       background: var(--tab-active);
       cursor: pointer;
@@ -98,6 +104,10 @@
     span {
       font-size: 1rem;
     }
+
+    svg {
+      font-size: 2.5em;
+    }
   }
 
   .auto {
diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss
index 2d623e72..edc05c76 100644
--- a/src/components/widgets/navbar/scss/_notes.scss
+++ b/src/components/widgets/navbar/scss/_notes.scss
@@ -24,6 +24,7 @@
   top: 80%;
   margin-left: -150px;
   max-height: 80vh !important;
+  font-size: 1rem !important;
 
   textarea {
     max-height: 65vh !important;