feat: add preview mue button to welcome modal

src/components/helpers/preview/Preview.jsx

@@ -0,0 +1,11 @@
+import './preview.scss';
+
+export default function Preview(props) {
+  return (
+    <div className='preview'>
+      <h3>NOTICE</h3>
+      <h1>You are currently in preview mode. Settings will be reset on closing this tab.</h1>
+      <button className='uploadbg' onClick={() => props.setup()}>Continue Setup</button>
+    </div>
+  );
+}

src/components/helpers/preview/preview.scss

@@ -0,0 +1,15 @@
+.preview {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  padding: 15px;
+  color: var(--modal-text);
+  background: var(--background);
+  max-width: 300px;
+  border-radius: 0.7em;
+  z-index: 999;
+
+  h1 {
+    font-size: 1rem;
+  }
+}

src/components/modals/Modals.jsx

@@ -5,6 +5,7 @@ import Hotkeys from 'react-hot-keys';
 
 import Main from './main/Main';
 import Navbar from '../widgets/navbar/Navbar';
+import Preview from '../helpers/preview/Preview';
 
 import EventBus from 'modules/helpers/eventbus';
 
@@ -20,7 +21,8 @@ export default class Modals extends PureComponent {
       mainModal: false,
       updateModal: false,
       welcomeModal: false,
-      feedbackModal: false
+      feedbackModal: false,
+      preview: false
     };
   }
 
@@ -49,10 +51,20 @@ export default class Modals extends PureComponent {
     this.setState({
       welcomeModal: false
     });
+    EventBus.dispatch('refresh', 'widgetsWelcomeDone');
     EventBus.dispatch('refresh', 'widgets');
     EventBus.dispatch('refresh', 'backgroundwelcome');
   }
 
+  previewWelcome() {
+    localStorage.setItem('showWelcome', false);
+    this.setState({
+      welcomeModal: false,
+      preview: true
+    });
+    EventBus.dispatch('refresh', 'widgetsWelcome');
+  }
+
   toggleModal(type, action) {
     this.setState({
       [type]: action
@@ -72,9 +84,10 @@ export default class Modals extends PureComponent {
         </Modal>
         <Suspense fallback={renderLoader()}>
           <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay welcomeoverlay' shouldCloseOnOverlayClick={false} ariaHideApp={false}>
-            <Welcome modalClose={() => this.closeWelcome()}/>
+            <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()}/>
           </Modal>
         </Suspense>
+        {this.state.preview ? <Preview setup={() => window.location.reload()}/> : null}
         {variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? <Hotkeys keyName={variables.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null} 
       </>
     );

src/components/modals/welcome/Welcome.jsx

@@ -99,6 +99,7 @@ export default class WelcomeModal extends PureComponent {
             <WelcomeSections currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>
           </div>
           <div className='buttons'>
+            {(this.state.currentTab === 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.props.modalSkip()}>Preview</button> : null} 
             {(this.state.currentTab !== 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.changeTab(true)}>{this.getMessage('modals.welcome.buttons.previous')}</button> : null}
             <button className='close' onClick={() => this.changeTab()}>{this.state.buttonText}</button>
           </div>

src/components/widgets/Widgets.jsx

@@ -18,7 +18,8 @@ export default class Widgets extends PureComponent {
   constructor() {
     super();
     this.state = {
-      order: JSON.parse(localStorage.getItem('order'))
+      order: JSON.parse(localStorage.getItem('order')),
+      welcome: localStorage.getItem('showWelcome')
     };
     // widgets we can re-order
     this.widgets = {
@@ -42,12 +43,29 @@ export default class Widgets extends PureComponent {
           order: JSON.parse(localStorage.getItem('order'))
         });
       }
+
+      if (data === 'widgetsWelcome') { 
+        this.setState({
+          welcome: localStorage.getItem('showWelcome')
+        });
+        localStorage.setItem('showWelcome', true);
+        window.onbeforeunload = () => {
+          localStorage.clear();
+        }
+      }
+
+      if (data === 'widgetsWelcomeDone') {
+        this.setState({
+          welcome: localStorage.getItem('showWelcome')
+        });
+        window.onbeforeunload = null;
+      }
     });
   }
 
   render() {
     // don't show when welcome is there
-    if (localStorage.getItem('showWelcome') !== 'false') {
+    if (this.state.welcome !== 'false') {
       return <div id='widgets'></div>;
     }