misc. adjustments for overall look

src/components/App.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { Gain } from 'tone';
+import * as Tone from 'tone';
 import toNumber from 'lodash/toNumber';
 import RangeInput from './shared/RangeInput';
 import Track from './Track';
@@ -16,9 +16,10 @@ import { getParamsFromUrl, isTracksStateType, updateUrlQuery } from '../helpers'
 import '../styles/index.scss';
 import { RiPlayFill, RiStopFill, RiAddFill } from 'react-icons/ri';
 import IconButton from './shared/IconButton';
-import * as Tone from 'tone';
 import { updateAudioState } from '../helpers/tone';
 import { trackColors } from '../lib/constants';
+import SliderInput from './shared/SliderInput';
+import { PiSpeakerSimpleHighFill } from 'react-icons/pi';
 
 const App = memo(() => {
   const dispatch = useAppDispatch();
@@ -46,7 +47,7 @@ const App = memo(() => {
 
   // init component
   useEffect(() => {
-    const outputNode = new Gain(volume).toDestination();
+    const outputNode = new Tone.Gain(volume).toDestination();
     dispatch(setGlobalAudioComponent('outputNode', outputNode));
     updateAudioFromUrlQuery(outputNode);
   }, [updateAudioFromUrlQuery]);
@@ -98,12 +99,34 @@ const App = memo(() => {
       <div id='github-link'>
         <a href='https://github.com/vincentreynaud/genscapes'>See Github Repository</a>
       </div>
+      <div id='instructions'>
+        <h1>Genscapes</h1>
+        <h3 className='mb-4'>Generate soundscapes in the browser</h3>
+        <p>[ ! ] This App is a Work in Progress</p>
+        <p>Click on the play button to start the audio.</p>
+        <p>[ ! ] Please wait a few seconds for the first notes to start, depending on their length and intervals.</p>
+        <p>Click on the [ + ] button to add a new track.</p>
+        <p>Adjust the settings on each track and listen to the changes.</p>
+        <p>Share your compositions by copying and sending the page url.</p>
+      </div>
       <div id='main-controls'>
         <IconButton id='play-button' onClick={togglePlay} onMouseDown={enableToneOnMobile}>
           {playing ? <RiStopFill /> : <RiPlayFill />}
         </IconButton>
-        <div id='volume'>
-          <RangeInput label='' min={0} max={1} step={0.1} unit='' value={volume} onChange={handleChangeGlobalParam} />
+        <div id='volume' className='d-flex row'>
+          <SliderInput
+            label={<PiSpeakerSimpleHighFill />}
+            min={0}
+            max={1}
+            step={0.1}
+            unit=''
+            value={volume}
+            onChange={handleChangeGlobalParam}
+            sliderWidth='6rem'
+          />
+          {/* <div style={{ fontSize: '20px' }}>
+            
+          </div> */}
         </div>
       </div>
       <div id='tracks-view'>

src/components/Track.tsx

@@ -229,7 +229,7 @@ export default function Track({ trackId, color }: Props) {
 
   return (
     <>
-      <div id={`track-${trackId}`} className={`container-fluid ${color}`}>
+      <div id={`track-${trackId}`} className={`container-fluid ps-3 ${color}`}>
         <div className='row'>
           {signalChainParams.map((mod, i) => {
             if (isSourceParamsModule(mod)) {

src/components/TrackSettings.tsx

@@ -35,7 +35,7 @@ export default function TrackSettings({
 
   return (
     <div className='track-settings'>
-      <section className='container-fluid'>
+      <section className='container-fluid ps-5'>
         <div className='row'>
           <PolySynth onParamChange={onModuleParamChange} params={sourceParams as PolySynthParamsModule} />
           {effectsParams.map((effect, i) => {
@@ -45,7 +45,7 @@ export default function TrackSettings({
           <AddButton onAdd={onAddEffect} />
         </div>
       </section>
-      <section className='container-fluid'>
+      <section className='container-fluid ps-5'>
         <div className='row'>
           <Composition onParamChange={onTrackParamChange} params={sequParams} setCurrentScale={setCurrentScale} />
         </div>

src/components/shared/SliderInput.tsx

@@ -64,7 +64,7 @@ export default function SliderInput({
             onChange={handleInput}
           />
           <span className='slider-value'>{formatValue(value, unit)}</span>
-          <Progress className='slider-progress' color='primary' value={(value * 100) / (max - min)} />
+          <Progress className='slider-progress' value={(value * 100) / (max - min)} />
         </div>
       </div>
     </div>

src/styles/_bootstrap-custom.scss

@@ -1,9 +1,24 @@
+@import '~bootstrap/scss/functions';
+
 $black: #18181b;
 $white: #e8e6e3;
 $primary: #37f6ff80;
 
-@import '~bootstrap/scss/bootstrap-utilities.scss';
+// fail
+$colors: (
+  'success': $primary,
+);
+
+@import '~bootstrap/scss/variables';
+// @import '~bootstrap/scss/variables-dark';
+@import '~bootstrap/scss/maps';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
+
+@import '~bootstrap/scss/root';
 @import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/helpers';
+@import '~bootstrap/scss/utilities/api';
 @import '~bootstrap/scss/type';
 @import '~bootstrap/scss/vendor/rfs';
 @import '~bootstrap/scss/containers';

src/styles/_mixins.scss

@@ -1,3 +1,3 @@
 @mixin trackColor($color) {
-  background-color: rgba($color, 0.025);
+  background-color: rgba($color, 0.05);
 }

src/styles/index.scss

@@ -55,13 +55,21 @@ a {
 .app {
   height: 100vh;
   position: relative;
-}
 
-#github-link {
-  text-align: right;
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
+  #instructions {
+    position: absolute;
+    top: 10svh;
+    left: 50%;
+    transform: translateX(-50%);
+    color: $white;
+    z-index: -1;
+  }
+  #github-link {
+    text-align: right;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+  }
 }
 
 #main-controls {
@@ -91,6 +99,7 @@ a {
   height: calc(100vh - #{$main-controls-height});
   display: flex;
   flex-flow: column-reverse;
+  z-index: 100;
 }
 
 #body {
@@ -230,6 +239,7 @@ span.control-value {
       -ms-transition: none;
       -o-transition: none;
       transition: none;
+      background-color: $primary;
     }
   }
 
@@ -238,18 +248,13 @@ span.control-value {
   }
 }
 
-// because i didn't manage to overwrite bootstrap's primary 😡
-div[id^='track-'] .bg-primary,
-.modal .bg-primary {
-  background-color: $primary !important;
-}
-
 div[id^='track-'] {
   padding: map-get($spacers, 2);
   padding-right: 8rem;
   position: relative;
   border-bottom: $track-border;
-  backdrop-filter: brightness(120%);
+  backdrop-filter: brightness(130%) blur(12px);
+  z-index: 100;
 
   &:nth-last-child(2) {
     border-top: $track-border;