From 8b8353297dba01447746a928617b5396de0fa92b Mon Sep 17 00:00:00 2001
From: David Ralph <davetheprogrammer2@gmail.com>
Date: Tue, 27 Oct 2020 15:10:40 +0000
Subject: [PATCH] WIP modal improvements as well as some fixes etc

---
 src/App.jsx                         |  2 +-
 src/components/modals/MainModal.jsx | 10 +++++++---
 src/scss/modules/_buttons.scss      |  3 ++-
 src/scss/modules/_modal.scss        | 11 +++++++++--
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e91dc1e7..5f13d415 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -73,7 +73,7 @@ export default class App extends React.PureComponent {
             <Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <MainModal
                 language={language}
-                modalClose={() => this.setState({ mainsModal: false })} />
+                modalClose={() => this.setState({ mainModal: false })} />
             </Modal>
             <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Update
diff --git a/src/components/modals/MainModal.jsx b/src/components/modals/MainModal.jsx
index 73f69978..c9d0428d 100644
--- a/src/components/modals/MainModal.jsx
+++ b/src/components/modals/MainModal.jsx
@@ -4,6 +4,10 @@ import Settings from './tabs/Settings';
 import Addons from './tabs/Addons';
 import Marketplace from './tabs/Marketplace';
 
+import SettingsIcon from '@material-ui/icons/Settings';
+import AddonsIcon from '@material-ui/icons/Widgets';
+import MarketplaceIcon from '@material-ui/icons/ShoppingBasket';
+
 export default class MainModal extends React.PureComponent {
     constructor(...args) {
         super(...args);
@@ -62,9 +66,9 @@ export default class MainModal extends React.PureComponent {
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.language.modals.title}</h1>
         <div className='tab'>
-          <button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}>{this.props.language.modals.marketplace}</button>
-          <button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}>{this.props.language.modals.addons}</button>
-          <button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}>{this.props.language.modals.settings}</button>
+          <button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}><MarketplaceIcon/> {this.props.language.modals.marketplace}</button>
+          <button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}><AddonsIcon/> {this.props.language.modals.addons}</button>
+          <button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}><SettingsIcon/> {this.props.language.modals.settings}</button>
         </div>
         <br/>
         {this.state.tab}
diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss
index e9b66edf..909d2fc2 100644
--- a/src/scss/modules/_buttons.scss
+++ b/src/scss/modules/_buttons.scss
@@ -10,6 +10,7 @@
   font-size: 20px;
   border-radius: 24px;
   background: none;
+  box-shadow: 0 5px 15px rgba(46, 213, 115, .4);
 
   &:hover {
     outline: none;
@@ -35,9 +36,9 @@
 
 .reset {
   @extend %settingsButton;
+  margin-left: 5px;
   background-color: map-get($button-colours, 'reset');
   border: 2px solid map-get($button-colours, 'reset');
-  margin-left: 5px;
 
   &:hover {
     border: 2px solid map-get($button-colours, 'reset');
diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss
index be344c42..f067dbde 100644
--- a/src/scss/modules/_modal.scss
+++ b/src/scss/modules/_modal.scss
@@ -30,8 +30,10 @@
 }
 
 .closeModal {
-  float: right;
-  font-size: 2em;
+  position: absolute;
+  top: 1rem;
+  right: 2rem;
+  font-size: 4em;
   cursor: pointer;
 
   &:hover {
@@ -173,4 +175,9 @@
   background: #34495e;
   border-top-right-radius: map-get($modal, "border-radius");
   border-bottom-right-radius: map-get($modal, "border-radius");
+}
+
+.tablinks svg {
+  top: 0.125em;
+  position: relative;
 }
\ No newline at end of file