From 14d358955169e35cf30f6751d037cb3b6a69c6f4 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Sun, 28 Nov 2021 20:00:22 +0000
Subject: [PATCH] fix: create tab

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
---
 .../main/marketplace/sections/Create.jsx      | 38 +++++++++++++------
 src/components/modals/welcome/welcome.scss    |  5 ++-
 src/index.js                                  |  2 +-
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index 0772f853..a253a3b0 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -68,8 +68,8 @@ export default class Create extends PureComponent {
     this.setState({
       addonData: settings,
       settingsClasses: {
-        current: input ? 'toggle lightTheme' : 'toggle lightTheme active',
-        json: input ? 'toggle lightTheme active' : 'toggle lightTheme'
+        current: input ? 'toggle lightTheme' : 'toggle lightTheme',
+        json: input ? 'toggle lightTheme' : 'toggle lightTheme'
       }
     });
 
@@ -232,9 +232,9 @@ export default class Create extends PureComponent {
     const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
     const importSettings = (
       <>
-        <h3>{getMessage('modals.mwelcome.sections.title')}</h3>
-        <div className='themesToggleArea'>
-          <div className='options'>
+        <h3>{getMessage('modals.welcome.sections.settings.title')}</h3>
+        <div className='themesToggleArea' >
+          <div className='options' style={{ maxWidth: '512px' }}>
             <div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
               <ExportIcon/>
               <span>{getMessage('modals.main.addons.create.settings.current')}</span>
@@ -268,11 +268,18 @@ export default class Create extends PureComponent {
           <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/>
         </> : <>
-          <button onClick={() => this.importQuotes()} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
-          <br/><br/>
+        <div className='themesToggleArea'>
+          <div className='options'>
+            <div onClick={() => this.importQuotes()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
+              <ExportIcon/>
+              <span>{getMessage('modals.main.addons.create.settings.current')}</span>
+            </div>
+          </div>
+        </div>
+        <br/>
         </>}
         <button onClick={() => this.changeTab(2)} className='uploadbg'>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }}disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 
@@ -281,8 +288,15 @@ export default class Create extends PureComponent {
     const addPhotos = (
       <>
         <h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
-        <button onClick={() => this.importPhotos()} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
-        <br/><br/>
+        <div className='themesToggleArea'>
+          <div className='options'>
+            <div onClick={() => this.importPhotos()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
+              <ExportIcon/>
+              <span>{getMessage('modals.main.addons.create.settings.current')}</span>
+            </div>
+          </div>
+        </div>
+        <br/>
         <button onClick={() => this.changeTab(2)} className='uploadbg'>{getMessage('modals.welcome.buttons.previous')}</button>
         <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
@@ -292,13 +306,13 @@ export default class Create extends PureComponent {
       <>
         <div className='themesToggleArea'>
           <div className='options'>
-            <div onClick={() => this.downloadAddon()} className='toggle lightTheme' style={{ width: '60%' }}>
+            <div onClick={() => this.downloadAddon()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
               <ExportIcon/>
               <span>{getMessage('modals.main.addons.create.finish.download')}</span>
             </div>
           </div>
         </div>
-        <br/><br/>
+        <br/>
         <button onClick={() => this.changeTab((this.state.addonMetadata.type === 'quote_api') ? 'quotes' : this.state.addonMetadata.type)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
       </>
     );
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index 919ac78e..c1da6b28 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -79,7 +79,7 @@
 
 .themesToggleArea {
   .active {
-    background: var(--tab-active) !important;
+    background: var(--tab-active);
   }
 
   .toggle {
@@ -96,9 +96,10 @@
     align-content: center;
     justify-content: center;
 
+    cursor: pointer;
+
     &:hover {
       background: var(--tab-active);
-      cursor: pointer;
     }
 
     span {
diff --git a/src/index.js b/src/index.js
index 71ebc223..b4a7f785 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,7 +22,7 @@ if (languagecode === 'en') {
 }
 
 variables.language = new I18n(variables.languagecode, {
-  de: require('./translations/de_DE.json'),
+  de_DE: require('./translations/de_DE.json'),
   en_GB: require('./translations/en_GB.json'),
   en_US: require('./translations/en_US.json'),
   es: require('./translations/es.json'),