More Settings

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
2026-07-17 14:04:09 +02:00 · 2020-07-18 22:00:34 +01:00
parent 3e80586620
commit 7c055d6aff
17 changed files with 321 additions and 263 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,12 +7,14 @@ import Quote from './components/Quote';
 import Search from './components/Search';
 import Credit from './components/Credit';
 import Navbar from './components/Navbar';
-import Settings from './components/Settings';
-import Update from './components/Update';
 import Toast from './components/Toast';
 import Modal from 'react-modal';
 import './scss/index.scss'; 

+const Settings = React.lazy(() => import('./components/Settings'));
+const Update = React.lazy(() => import('./components/Update'));
+const renderLoader = () => <div></div>;
+
 //* App
 export default class App extends React.Component {
  // Modal stuff
@@ -25,15 +27,34 @@ export default class App extends React.Component {
    };
  }

+  setDefaultSettings() {
+    localStorage.clear();
+
+    localStorage.setItem('time', true);
+    localStorage.setItem('greeting', true);
+    localStorage.setItem('background', true);
+    localStorage.setItem('quote', true);
+    localStorage.setItem('searchBar', true);
+    localStorage.setItem('blur', 0);
+    localStorage.setItem('copyButton', false);
+    localStorage.setItem('seconds', false);
+    localStorage.setItem('24hour', false);
+    localStorage.setItem('offlineMode', false);
+    localStorage.setItem('webp', false);
+    localStorage.setItem('events', true);
+
+    // Set theme depending on user preferred
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) localStorage.setItem('darkTheme', true);
+    else localStorage.setItem('darkTheme', false);
+
+    // Finally we set this to true so it doesn't run the function on every load
+    localStorage.setItem('firstRun', true);
+    window.location.reload();
+  }
+
  // Render all the components
  render() {
-    if (!localStorage.getItem('firstRun')) {
-      localStorage.setItem('time', true);
-      localStorage.setItem('greeting', true);
-      localStorage.setItem('background', true);
-      localStorage.setItem('quote', true);
-      localStorage.setItem('firstRun', true);
-    }
+    if (!localStorage.getItem('firstRun')) this.setDefaultSettings();

    let modalClassList = 'Modal';
    const darkTheme = localStorage.getItem('darkTheme');
@@ -43,20 +64,22 @@ export default class App extends React.Component {
      <React.Fragment>
        <div id='backgroundImage'></div>
        <Background/>
-        <Search/>
        <div id='center'>
+        <Search/>
        <Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
            <Greeting/>
            <Clock/> 
            <Quote />
            <Credit/>
            <Toast/>
-            <Modal isOpen={this.state.settingsModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
-              <Settings modalClose={() => this.setState({ settingsModal: false })} />
-            </Modal>
-            <Modal isOpen={this.state.updateModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
-              <Update modalClose={() => this.setState({ updateModal: false })} />
-            </Modal>
+            <React.Suspense fallback={renderLoader()}>
+              <Modal isOpen={this.state.settingsModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
+                <Settings modalClose={() => this.setState({ settingsModal: false })} setDefaultSettings={() => this.setDefaultSettings()} />
+              </Modal>
+              <Modal isOpen={this.state.updateModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
+                <Update modalClose={() => this.setState({ updateModal: false })} />
+              </Modal>
+            </React.Suspense>
        </div>
      </React.Fragment>
    );
--- a/src/components/Background.jsx
+++ b/src/components/Background.jsx
@@ -27,6 +27,18 @@ export default class Background extends React.Component {
    const enabled = localStorage.getItem('offlineMode');
    if (enabled === 'true') return this.doOffline();

+    const colour = localStorage.getItem('customBackgroundColour');
+    if (colour) {
+      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-color: ${colour}`); // Set background and blur etc
+    }
+
+    const custom = localStorage.getItem('customBackground');
+    if (custom) {
+      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${custom})`); // Set background and blur etc
+    }
+
    try { // First we try and get an image from the API...
      let requestURL;
      const enabled = localStorage.getItem('webp');
--- a/src/components/Clock.jsx
+++ b/src/components/Clock.jsx
@@ -16,9 +16,7 @@ export default class Clock extends React.Component {
      const now = new Date();
      let sec = '';
  
-      if (localStorage.getItem('seconds') === 'true') {
-        sec = `:${('00' + now.getSeconds()).slice(-2)}`;
-      }
+      if (localStorage.getItem('seconds') === 'true') sec = `:${('00' + now.getSeconds()).slice(-2)}`;

      if (localStorage.getItem('24hour') === 'true') {
        this.setState({ 
--- a/src/components/Greeting.jsx
+++ b/src/components/Greeting.jsx
@@ -39,7 +39,7 @@ export default class Greeting extends React.Component {
    let data = localStorage.getItem('greetingName');

    if (typeof data === 'string') {
-      data = data.replace(/\s/g, '');
+      data = data.replace(/\s/g, ' ');
      if (data.length > 0) name = `, ${data}`;
    }

--- a/src/components/Quote.jsx
+++ b/src/components/Quote.jsx
@@ -28,9 +28,7 @@ export default class Quote extends React.Component {
    try { // First we try and get a quote from the API...
      let data = await fetch('https://api.muetab.xyz/getQuote');
      data = await data.json();
-      if (data.statusCode === 429) { // If we hit the ratelimit, we fallback to local quotes
-        this.doOffline();
-      }
+      if (data.statusCode === 429) this.doOffline(); // If we hit the ratelimit, we fallback to local quotes
      this.setState({ 
        quote: '"' + data.quote + '"', 
        author: data.author 
@@ -42,9 +40,9 @@ export default class Quote extends React.Component {

  copyQuote() {
    copy(`${this.state.quote} - ${this.state.author}`);
-    var x = document.getElementById('toast');
-    x.className = "show";
-    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
+    let toast = document.getElementById('toast');
+    toast.className = 'show';
+    setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000);
  } 

  componentDidMount() {
@@ -54,18 +52,13 @@ export default class Quote extends React.Component {
  }

  render() {
+    let copy = <FileCopy className='copyButton' onClick={() => this.copyQuote() }></FileCopy>;
+    const enabled = localStorage.getItem('copyButton');
+    if (enabled === 'false') copy = '';
+
    return [
        <h1 className='quote'>{`${this.state.quote}`}</h1>,
-        <h1 className='quoteauthor'>{this.state.author} <FileCopy className='copyButton' onClick={() => this.copyQuote() }></FileCopy></h1>,
+    <h1 className='quoteauthor'>{this.state.author} {copy}</h1>,
    ];
  }
- 
- 
- 
- 
- 
- 
- 
- 
- 
 }
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -13,7 +13,7 @@ export default class Settings extends React.Component {

    localStorage.setItem(key, val);
    //document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF';
-    console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
+    // console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
  }

  toggleExtra(element, element2) {
@@ -24,9 +24,43 @@ export default class Settings extends React.Component {
  saveStuff() {
    localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance
    localStorage.setItem('greetingName', document.getElementById('greetingName').value);
+    localStorage.setItem('customBackground', document.getElementById('customBackground').value);
+    if (!document.getElementById('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value);
    window.location.reload();
  }

+  resetItem(key) {
+    switch (key) {
+      case 'greetingName':
+        localStorage.setItem('greetingName', '');
+        document.getElementById('greetingName').value = '';
+        break;
+      case 'customBackgroundColour':
+        localStorage.setItem('customBackgroundColour', '');
+        document.getElementById('customBackgroundColour').enabled = 'false';
+        break;
+      case 'customBackground':
+        localStorage.setItem('customBackground', '');
+        document.getElementById('customBackground').value = '';
+        break;
+      case 'blur':
+        localStorage.setItem('blur', 0);
+        document.getElementById('blurRange').value = 0;
+        document.getElementById('blurAmount').innerText = '0';
+        break;
+      default:
+        console.log('[ERROR] resetItem requires a key!');
+    }
+    this.showToast();
+  }
+
+  showToast() {
+    let toast = document.getElementById('toast');
+    toast.innerText = 'Reset successfully!';
+    toast.className = 'show';
+    setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000);
+  }
+
  componentDidMount() {
    document.getElementById('greetingName').value = localStorage.getItem('greetingName');

@@ -50,6 +84,10 @@ export default class Settings extends React.Component {
        tag.checked = value;
      }
    }
+
+    document.addEventListener('keyup', (event) => {
+      if (event.keyCode === 13) this.saveStuff();
+    });
  }

  render() {
@@ -91,7 +129,7 @@ export default class Settings extends React.Component {
            <label htmlFor="3">Events</label>
            </ul>
            <ul>
-              <p>Name for greeting</p>
+              <p>Name for greeting <a className="modalLink" onClick={() => this.resetItem('greetingName')}>Reset</a></p>
              <input type='text' id='greetingName'></input>
            </ul>
          </li>
@@ -102,7 +140,8 @@ export default class Settings extends React.Component {
          <label className="switch">
            <input id="quoteStatus" type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
            <span className="slider"></span>
-          </label>   <li className="extraSettings">
+          </label>
+          <li className="extraSettings">
            <ul>
            <input id="5" type="checkbox" onClick={()=> this.setItem('copyButton')} id='copyButtonStatus' />
            <label htmlFor="5">Copy Button</label>
@@ -118,21 +157,29 @@ export default class Settings extends React.Component {
          </label>
          <li className="extraSettings">
            <ul>
-              <p>Adjust Blur (<span id='blurAmount'></span>%)</p>
+              <p>Adjust Blur (<span id='blurAmount'></span>%) <a className="modalLink" onClick={() => this.resetItem('blur')}>Reset</a></p>
            </ul>
            <ul>
              <input className="range" type="range" min="0" max="100" id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
            </ul>
+            <ul>
+              <p>Custom Background URL <a className="modalLink" onClick={() => this.resetItem('customBackground')}>Reset</a></p>
+              <input type='text' id='customBackground'></input>
+            </ul>
+            <ul>
+              <p>Custom Background Colour <a className="modalLink" onClick={() => this.resetItem('customBackgroundColour')}>Reset</a></p>
+              <input type='color' id='customBackgroundColour'></input>
+            </ul>
          </li>
        </div>
        <div className='section'>
          <h4>Search Bar</h4>
-          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} />
+          {/* <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} /> */ }
          <label className="switch">
            <input type="checkbox" onClick={()=> this.setItem('searchBar')} id='searchBarStatus'  />
            <span className="slider"></span>
          </label>
-          <li className="extraSettings">
+          {/* <li className="extraSettings">
            <ul>
            <label htmlFor="4">Search Engine</label>
            <select name="4" id='searchBar'>
@@ -142,7 +189,7 @@ export default class Settings extends React.Component {
              <option value="custom">Custom</option>
            </select>
            </ul>
-          </li>
+          </li> */}
        </div>
        <div className='section'>
          <h4>Offline Mode</h4>
@@ -166,6 +213,7 @@ export default class Settings extends React.Component {
          </label>
        </div>
        <button className="apply" onClick={() => this.saveStuff()}>Apply</button>
+        <button className="reset" onClick={() => this.props.setDefaultSettings()}>Reset</button>
      </div>
      
    </div>;
--- a/src/components/Update.jsx
+++ b/src/components/Update.jsx
@@ -4,9 +4,9 @@ export default class Update extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
-      title: '',
+      title: 'Loading...',
      date: '',
-      content: ''
+      content: 'Loading...'
    };
 }

--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -8,14 +8,58 @@
@import 'modules/modal';
@import 'modules/settings';
@import 'modules/toast';
-@import 'modules/miscellaneous';
+
+body {
+    background: #2f3640;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: 'Lexend Deca', sans-serif;
+    overflow: hidden;
+}
+
+#center {
+    margin-left: 2vw;
+    margin-right: 2vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+}
+
+::placeholder {
+    color: #ffffff;
+    opacity: 1;
+}
+
+#root {
+    min-height: 100vh;
+    display: grid;
+    color: white;
+}

 #backgroundImage {
-    height:100vh;
+    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
    border: none;
+    transform: scale(1.1);
 }
+
+
+
+@font-face {
+    font-family: 'Lexend Deca';
+    src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
+}
--- a/src/scss/modules/_miscellaneous.scss
+++ b/src/scss/modules/_miscellaneous.scss
@@ -1,45 +0,0 @@
-body {
-  background: #2f3640;
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: 'Lexend Deca';
-  overflow: hidden;
-}
-
-#center {
-  margin-left: 2vw;
-  margin-right: 2vw;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  text-align: center;
-  position:absolute;
-  top: 0; 
-  bottom: 0; 
-  left: 0; 
-  right: 0;
-  margin: auto;
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
-}
-
-::placeholder {
-  color: #ffffff;
-  opacity: 1;
-}
-
-#root {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: fixed;
-  min-height: 100vh;
-  display: grid;
-  color: white;
-}
-
-@font-face {
-  font-family: 'Lexend Deca';
-  src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
-}
--- a/src/scss/modules/_modal.scss
+++ b/src/scss/modules/_modal.scss
@@ -1,14 +1,21 @@
 .Modal {
+  color: #000;
  background-color: #fff;
-  width: 600px;
-  margin: 0 auto;
-  margin-top: 40px;
+  box-shadow: 0 0 200px rgba(0, 0, 0, 0.3);
  border: none;
  opacity: 1;
  z-index: -2;
-  height: auto;
  padding: 20px;
  cursor: hand;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+a.modalLink {
+  color: #5352ed;
+  cursor: pointer;
 }

 .Overlay {
@@ -19,83 +26,44 @@
  bottom: 0;
 }

-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked+.slider {
-  background-color: #2196F3;
-}
-
-input:focus+.slider {
-  box-shadow: 0 0 1px #2196F3;
-}
-
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-
-.Modal:focus {
-  outline: 0;
-}
-
 .closeModal {
  float: right;
  font-size: 2em;
  cursor: pointer;
-}

-.closeModal:hover {
-  color: grey;
+  &:hover {
+    color: grey;
+  }
 }

 .dark {
  background-color: #2f3542 !important;
  color: white !important;
-}
+}
+
+.ReactModal__Html--open,
+.ReactModal__Body--open {
+  overflow: hidden; /* prevents background page from scrolling when the modal is open */
+}
+
+.ReactModal__Overlay {
+  position: fixed;
+  z-index: 999999;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 90vh;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.ReactModal__Content {
+  width: 500px;
+  max-width: 600px;
+  max-height: calc(100vh - 10vh);
+  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+  overflow-y: auto;
+  position: relative;
+}
--- a/src/scss/modules/_quote.scss
+++ b/src/scss/modules/_quote.scss
@@ -3,8 +3,6 @@
  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }

-
-
@media screen and (min-width: 600px) {
  .quote {
    margin-left: 30%;
--- a/src/scss/modules/_search.scss
+++ b/src/scss/modules/_search.scss
@@ -10,7 +10,7 @@

    input[type=text] {
        font-size: calc(5px + 1.2vmin);
-        background: none;
+        background: transparent;
        border: 2px solid #ffff;
        padding: 10px;
        color: #ffff;
--- a/src/scss/modules/_settings.scss
+++ b/src/scss/modules/_settings.scss
@@ -1,11 +1,4 @@
-.Modal {
-  width: auto;
-  color: #000;
-  background-color: #fff;
-  max-width: 500px;
-  box-shadow: 0 0 200px rgba(0, 0, 0, 0.3);
-  z-index: 4;
-}
+$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);

 .switch {
  position: relative;
@@ -13,12 +6,12 @@
  width: 60px;
  height: 34px;
  float: right;
-}

-.switch input { 
-  opacity: 0;
-  width: 0;
-  height: 0;
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
 }

 .slider {
@@ -32,36 +25,57 @@
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+
+  &.round:before {
+    border-radius: 50%;
+  }
 }

-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-  border-radius: 50%;
+input {
+  &[type=text] {
+    width: 200px;
+    padding: 0.5rem 1rem;
+    box-sizing: border-box;
+    border-image-slice: 1;
+    border-image-source: $gradient;
+    outline: none;
+    font-family: 'Lexend Deca', sans-serif;
+    background: transparent;
+  }
+
+  &:checked + .slider {
+    background: $gradient;
+  
+    &:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+  }
+
+  &:focus + .slider {
+    box-shadow: 0 0 1px #e67e22;
+  }
 }

-input:checked + .slider {
-  background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+::-webkit-scrollbar {
+  width: 5px;
+  background: #555;
 }

-input:focus + .slider {
-  box-shadow: 0 0 1px #e67e22;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
-}
-
-
 h4, .switch, .expandIcons {
  display: inline;
  font-size: 1.4em;
@@ -76,14 +90,12 @@ h4, #engines {
  margin-bottom: 20px;
 }

-
-.apply {
+%settingsButton {
  height: 45px;
  width: 130px;
  text-align: center;
  border: none;
  transition: 0.25s;
-  background-color: #dd3b67;
  color: #fff;
  cursor: pointer;
  display: inline-block;
@@ -97,7 +109,6 @@ h4, #engines {

  &:before {
    content: '';
-    background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
    position: absolute;
    width: 0%;
    top: 0;
@@ -117,6 +128,23 @@ h4, #engines {
  }
 }

+.apply {
+  @extend %settingsButton;
+  background-color: #dd3b67;
+  &:before {
+    background: $gradient;
+  }
+}
+
+.reset {
+  @extend %settingsButton;
+  background-color: #ffb032;
+  margin-left: 20px;
+  &:before {
+    background: linear-gradient(90deg, #dd3b67 0%, #ffb032 100%);
+  }
+}
+
 .expandIcons {
  position: relative;
  font-size: 25px;
@@ -126,14 +154,17 @@ h4, #engines {
  transition-duration: 0.5s;
 }

-$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
-
 .extraSettings {
  display: none;
  border-left: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%);
+
+  > p {
+    margin: 0;
+    padding: 0;
+  }
 }

 ul {
@@ -145,11 +176,6 @@ li {
  margin-top: 1px;
 }

-.extraSettings > p {
-  margin: 0;
-  padding: 0;
-}
-
 .range {
  -webkit-appearance: none;
  width: 200px;
@@ -160,32 +186,22 @@ li {
  background: #ecf0f1;
  border-radius: 12px;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
-}

-.range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 25px;
-  height: 25px;
-  border-radius: 12px;
-  background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);;
-  cursor: pointer;
-}
-
-.range::-moz-range-thumb {
-  width: 25px;
-  height: 25px;
-  border-radius: 12px;
-  background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);;
-  cursor: pointer;
-}
-
-input[type=text] {
-  width: 200px;
-  padding: 0.5rem 1rem;
-  box-sizing: border-box;
-  border-image-slice: 1;
-  border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
-  outline: none;
-  font-family: 'Lexend Deca', sans-serif;
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 12px;
+    background: $gradient;
+    cursor: pointer;
+  }
+  
+  &::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 12px;
+    background: $gradient;
+    cursor: pointer;
+  }
 }
--- a/src/scss/modules/_toast.scss
+++ b/src/scss/modules/_toast.scss
@@ -15,6 +15,23 @@
    width: auto;
    bottom: 30px;
    right: 30px;
+
+    &.show {
+        visibility: visible;
+        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+        animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    }
+
+    > img {
+        height: 20px;
+        width: auto;
+        float: left;
+    }
+
+    > hr {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
 }

 .copyButton, hr {
@@ -30,11 +47,6 @@ hr {
    margin-right: 10px;
 }

-#toast.show {
-    visibility: visible;
-    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
-    animation: fadein 0.5s, fadeout 0.5s 2.5s;
-}

@-webkit-keyframes fadein {
    from {
@@ -82,15 +94,4 @@ hr {
        bottom: 0;
        opacity: 0;
    }
-}
-
-#toast>img {
-    height: 20px;
-    width: auto;
-    float: left;
-}
-
-#toast>hr {
-    margin-left: 10px;
-    margin-right: 10px;
 }