From a3fb4a6522d3e1e2dd2b1d0f74f618e01a9cfa04 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Sun, 14 Nov 2021 14:44:16 +0000
Subject: [PATCH] fix: update experimental tab

---
 .../scss/settings/modules/_material-ui.scss     |  4 ++++
 .../main/settings/sections/Experimental.jsx     | 17 ++++++++++-------
 src/components/modals/welcome/Welcome.jsx       |  2 +-
 src/modules/helpers/settings/modals.js          | 11 +++++++++++
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/modals/main/scss/settings/modules/_material-ui.scss b/src/components/modals/main/scss/settings/modules/_material-ui.scss
index 6aa3acf1..7203d7de 100644
--- a/src/components/modals/main/scss/settings/modules/_material-ui.scss
+++ b/src/components/modals/main/scss/settings/modules/_material-ui.scss
@@ -97,3 +97,7 @@ legend,
 .MuiPaper-root {
   background-color: var(--background) !important;
 }
+
+.MuiSlider-valueLabel {
+  background-color: var(--tab-active) !important;
+}
diff --git a/src/components/modals/main/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx
index 41f19a82..00d15da0 100644
--- a/src/components/modals/main/settings/sections/Experimental.jsx
+++ b/src/components/modals/main/settings/sections/Experimental.jsx
@@ -1,11 +1,16 @@
 import variables from 'modules/variables';
+import { useState } from 'react';
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
+import { TextField } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
+import { values } from 'modules/helpers/settings/modals';
 
 export default function ExperimentalSettings() {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+  const [eventType, setEventType] = useState();
+  const [eventName, setEventName] = useState();
 
   return (
     <>
@@ -13,14 +18,12 @@ export default function ExperimentalSettings() {
       <p>{getMessage('modals.main.settings.sections.experimental.warning')}</p>
       <h3>{getMessage('modals.main.settings.sections.experimental.developer')}</h3>
       <Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
-      <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />
-      <br/>
+      <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' marks={values('experimental')} element='.other' />
       <p>Send Event</p>
-      Type <input type='text' id='eventType'/>
-      <br/><br/>
-      Name <input type='text' id='eventName'/>
-      <br/><br/>
-      <button className='uploadbg' onClick={() => EventBus.dispatch(document.getElementById('eventType').value, document.getElementById('eventName').value)}>Send</button>
+      <TextField label={'Type'} value={eventType} onChange={(e) => setEventType(e.target.value)} spellCheck={false} varient='outlined' InputLabelProps={{ shrink: true }} />
+      <TextField label={'Name'} value={eventName} onChange={(e) => setEventName(e.target.value)} spellCheck={false} varient='outlined' InputLabelProps={{ shrink: true }} />
+      <br/>
+      <button className='uploadbg' onClick={() => EventBus.dispatch(eventType, eventName)}>Send</button>
       <br/><br/>
       <button className='reset' style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
     </>
diff --git a/src/components/modals/welcome/Welcome.jsx b/src/components/modals/welcome/Welcome.jsx
index 8fa244c9..6b07101f 100644
--- a/src/components/modals/welcome/Welcome.jsx
+++ b/src/components/modals/welcome/Welcome.jsx
@@ -91,7 +91,7 @@ export default class WelcomeModal extends PureComponent {
     return (
       <div className='welcomeContent'>
         <section>
-          <img className='showcaseimg' alt='celebration' draggable={false} src={this.state.image} />
+          <img className='showcaseimg' alt='sidebar icon' draggable={false} src={this.state.image} />
           <ProgressBar count={this.images} currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>  
         </section>
         <section>
diff --git a/src/modules/helpers/settings/modals.js b/src/modules/helpers/settings/modals.js
index 401e07b1..12dba47a 100644
--- a/src/modules/helpers/settings/modals.js
+++ b/src/modules/helpers/settings/modals.js
@@ -64,6 +64,17 @@ export function values(type) {
       { value: 50, label: '50%' }, 
       { value: 75, label: '75%' }, 
       { value: 100, label: '100%' }
+    ],
+    experimental: [
+      { value: 0, label: '0s' },
+      { value: 500, label: '0.5s' }, 
+      { value: 1000, label: '1s' }, 
+      { value: 1500, label: '1.5s' }, 
+      { value: 2000, label: '2s' }, 
+      { value: 2500, label: '2.5s' }, 
+      { value: 3000, label: '3s' }, 
+      { value: 4000, label: '4s' }, 
+      { value: 5000, label: '5s'}
     ]
   };