Design changes

assets/css/index.css

@@ -28,16 +28,16 @@
 :root[theme="dark"] {
 	--background: rgb(40, 40, 40);
 	--text: white;
-	--box-main: rgb(80, 80, 80);
-	--box-toggle: rgb(70, 70, 70);
-	--box-toggleOn: rgb(28 232 138);
+	--box-main: rgb(62, 60, 60);
+	--box-toggle: rgb(47, 47, 47);
+	--box-toggleOn: rgb(2, 123, 63);
 	--item-bg: rgb(75, 75, 75);
 	--box-shadow: none;
-	--select: rgb(127, 253, 127);
-	--greenBtn: #6acd29;
-	--greenBtn-bottom: #4c8824;
-	--redBtn: #d64d4f;
-	--redBtn-bottom: #854243;
+	--select: rgb(68 214 141);
+	--greenBtn: #56a025;
+	--greenBtn-bottom: #3e6c20;
+	--redBtn: #c82b2d;
+	--redBtn-bottom: #803334;
 	--blueBtn: rgb(80, 128, 230);
 	--blueBtn-bottom: rgb(44, 78, 180);
 }
@@ -257,11 +257,12 @@ body {
 .playlistItem {
 	display: flex;
 	position: relative;
-	width: 86%;
+	width: 94%;
+	height: 25px;
 	background-color: var(--item-bg);
 	color: var(--text);
 	padding: 10px 25px;
-	border-radius: 25px;
+	border-radius: 15px;
 	align-items: center;
 	justify-content: space-between;
 	margin: 10px auto;
@@ -304,7 +305,6 @@ body {
 .itemProgress {
 	font-weight: bold;
 	cursor: pointer;
-	margin-top: 10px;
 }
 .progressBar {
 	width: 90%;
@@ -353,6 +353,12 @@ body {
 	color: var(--text);
 }
 
+#videoBox, #audioBox {
+	background-color: var(--box-toggle);
+	padding: 10px;
+	border-radius: 10px;
+}
+
 #audioExtract, .separationBox {
 	margin: 10px;
 	padding: 10px;
@@ -409,9 +415,26 @@ body {
 	font-family: "JetBrains";
 }
 
+.audioSelect {
+	width: 180px;
+}
+
+#videoTypeSelect {
+	width: 160px
+}
+
+#audioQualitySelect {
+	width: 230px;
+}
+
+#link {
+	padding: 10px;
+}
+
 #videoFormatSelect, #audioFormatSelect, #audioForVideoFormatSelect {
 	font-family: JetBrains, monospace;
 	font-size: medium;
+	width: 400px;
 }
 
 label {
@@ -485,6 +508,8 @@ input[type="number"]::-webkit-outer-spin-button {
 
 #incorrectMsg {
 	color: var(--redBtn);
+	display: none;
+	/* TODO: add display visible in js code*/
 }
 
 #errorBtn {
@@ -548,6 +573,14 @@ button {
 	font-size: large;
 }
 
+#extractBtn {
+	width: 150px;
+}
+
+#download, #audioDownload {
+	width: 140px;
+}
+
 #clearBtn {
 	display: none;
 }

html/index.html

@@ -169,24 +169,33 @@
         <!-- Extraction options start -->
         <div id="audioExtract">
             <h2 id="extractHeader">Extract Audio</h2>
-            <label class="formatSelect">Select Format </label>
-            <select id="extractSelection" class="select">
-                <option value="mp3">Mp3</option>
-                <option value="m4a">M4a</option>
-                <option value="opus">Opus</option>
-                <option value="wav">Wav</option>
-                <option value="alac">Alac</option>
-                <option value="flac">Flac</option>
-                <option value="vorbis">Vorbis (ogg)</option>
-            </select>
-            <label class="extractQualitySelect" id="extractQualitySelectTxt">Select Quality</label>
-            <select id="extractQualitySelect" class="select">
-                <option id="extractQualityNormal" value="5">Normal</option>
-                <option id="extractQualityBest" value="0">Best</option>
-                <option id="extractQualityGood" value="2">Good</option>
-                <option id="extractQualityBad" value="8">Bad</option>
-                <option id="extractQualityWorst" value="10">Worst</option>
-            </select>
+            <div>
+                <div>
+                    <label class="formatSelect">Select Format </label>
+                    <select id="extractSelection" class="select audioSelect">
+                        <option value="mp3">Mp3</option>
+                        <option value="m4a">M4a</option>
+                        <option value="opus">Opus</option>
+                        <option value="wav">Wav</option>
+                        <option value="alac">Alac</option>
+                        <option value="flac">Flac</option>
+                        <option value="vorbis">Vorbis (ogg)</option>
+                    </select>
+                </div>
+
+                <div>
+                    <label class="extractQualitySelect" id="extractQualitySelectTxt">Select Quality</label>
+                    <select id="extractQualitySelect" class="select audioSelect">
+                        <option id="extractQualityNormal" value="5">Normal</option>
+                        <option id="extractQualityBest" value="0">Best</option>
+                        <option id="extractQualityGood" value="2">Good</option>
+                        <option id="extractQualityBad" value="8">Bad</option>
+                        <option id="extractQualityWorst" value="10">Worst</option>
+                    </select>
+                </div>
+            </div>
+
+
             <br>
             <button id="extractBtn">Extract</button>
         </div>

html/playlist.html

@@ -100,6 +100,7 @@
             </div>
             <br>
             <button class="submitBtn" id="download">Download</button>
+            <br><br>
         </div>
 
         <div id="audioBox">
@@ -131,6 +132,7 @@
 
         </div>
 
+        <br>
         <button id="advancedToggle" class="advancedToggle">More options</button>
         <br>
 

translations/en.json

@@ -70,7 +70,7 @@
 	"Preferred video quality": "Preferred video quality",
 	"Preferred audio format": "Preferred audio format",
 	"Best": "Best",
-	"File saved.": "File saved.",
+	"File saved.": "File saved",
 	"Open download folder": "Open download folder",
 	"Path:": "Path:",
 	"Select config file": "Select config file",