feat: ui impovement for the volume controls

[amitanshusahu]

This fixes issue #2180

• replaced "Effect volume" with "SFX"
• made the slider thumb like a pill, and bigger

My wallet address is 0x35e866D1C52DACBA5275Ddb01637B1e19ce902B1

Screenshots of the changes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ancientbeast	✅ Ready (Inspect)	Visit Preview	Apr 20, 2023 2:31am

[ghost]

👇 Click on the image for a new way to code review

Legend

[DreadKnight]

@amitanshusahu Heya! Almost there, idea with keeping text short is to include it on the button itself.
Ideally also pull please update master to make sure you're not making a regression, as #2210 added -/+
There will be more audio page related issues coming soon, so stay tuned. On Brave button seems a bit off:

[amitanshusahu]

@amitanshusahu Heya! Almost there, idea with keeping text short is to include it on the button itself. Ideally also pull please update master to make sure you're not making a regression, as #2210 added -/+ There will be more audio page related issues coming soon, so stay tuned. On Brave button seems a bit off:

oh i get it.. my bad i didn't update the master..

and taking about the text inside the button .. that would need a custom component to be made with html, css & js.. because these is no other way of doing it with just css..

alternatively we can design the button as an png and use it something like this

#sfx::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('button.png'); / * using the designed image here */
}

if you agree with this i can push the changes ..

[DreadKnight]

@amitanshusahu Understood. Quickly searched around and seen a scenario where a generated svg was used ;) https://stackoverflow.com/questions/68033352/using-an-svg-as-a-css-background-image-on-input-range-thumb
Nice thing would be that its customizable (but not fully reusable), as we'll have another slider with VOL text #2228
We should probably use a svg file imported as background (instead of code generated svg) instead of a png file.

[DreadKnight]

Merging this as it is, because I've figured how to integrate the sliders better within the player soon based on #2227 etc.

[DreadKnight]

@amitanshusahu Bounty 🪙 sent -> https://www.mintme.com/explorer/tx/0xf13055c11b46a2ef2faf750074789645590146d0cbf3aabb0ed63e464e8d2e70

Feel free to poke at other issues as well 😎