new improved UI

vinaykharayat · May 1, 2021 · da264be · da264be
1 parent 285265c
commit da264be
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/browserAction/index.html b/browserAction/index.html
@@ -9,7 +9,7 @@
 <body>
     <div id="header">
         <img src="/icons/icon.png" id="logo">
-        <span id="title">Speaker <span style="color: white;">Booster</span></span>
+        <span id="title">Speaker <span style="color:#EAEAEA;">Booster</span></span>
     </div>
     <span id="volumeBoosterTitle">Volume Booster</span>
     <div id="volumeBoosterContainer">
@@ -21,7 +21,7 @@
         <input id="volumeSlider" name="volumeSlider" type="range" min="1" max="10" value="1">
         <img src="/icons/high-volume.png" id="highVolume">
 
-        <label id="volumePercentage"></label>
+        <label id="volumePercentage" style="display: none;"></label>
         <script src="script.js"></script>
     </div>
 </body>

diff --git a/browserAction/script.js b/browserAction/script.js
@@ -7,7 +7,7 @@ let mVolumeDownButton = document.querySelector("#lowVolume");
 let mVolumeUpButton = document.querySelector("#highVolume");
 let mLogo = document.querySelector("#logo");
 
-volumneValue.innerText = sliderNode.value + "%";
+volumneValue.innerText = sliderNode.value * 10 + "%";
 console.log(mVolumeDownButton);
 mVolumeUpButton.addEventListener("click", (e) => {
     let statusValue = browser.storage.local.get("status");

diff --git a/browserAction/style.css b/browserAction/style.css
@@ -10,7 +10,8 @@
 
 body {
     width: 320px;
-    height: 360px;
+    height: 200px;
+    background: #EAEAEA;
 }
 
 #logo {