Updated header

NikkelM · May 25, 2024 · 70c191e · 70c191e
1 parent 83d7e48
commit 70c191e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/html/popup/popup.js b/src/html/popup/popup.js
@@ -385,6 +385,10 @@ async function setPopupDomElemenEventListeners(domElements) {
 
 	// Advanced settings expand button
 	domElements.advancedSettingsExpandButton.addEventListener("click", function () {
+		// Update the text before the animation, as the classlist will change after some time only
+		domElements.advancedSettingsExpandButton.innerText = domElements.advancedSettingsDiv.classList.contains("active") ? "Show Advanced Settings" : "Hide Advanced Settings";
+		domElements.advancedSettingsExpandButton.style.fontWeight = "bold";
+
 		animateSlideOut(domElements.advancedSettingsDiv);
 
 		manageDependents(domElements, domElements.advancedSettingsExpandButton, domElements.advancedSettingsDiv.classList.contains("active"));

diff --git a/static/css/popup.css b/static/css/popup.css
@@ -185,13 +185,18 @@
 	margin: 2px 1px;
 }
 
-/* For the shuffle button, we want some more space around it */
 .shuffleButton {
 	margin-top: 8px;
 	margin-bottom: 8px;
 	font-size: 15px;
 }
 
+.importantButton {
+	font-size: 16px;
+	margin-top: 10px;
+	margin-bottom: 6px;
+}
+
 .randomYoutubeVideoButton:hover {
 	background-color: #444 !important;
 }

diff --git a/static/html/popup.html b/static/html/popup.html
@@ -158,8 +158,7 @@ <h3 id="channelCustomOptionsHeader">Channel settings</h3>
 				</div>
 			</div>
 
-			<h3 class="displayInline" title="These settings are for people with some technical knowledge. Don't worry if you don't know what they're about, they don't add any features!">Advanced Settings</h3>
-			<button id="advancedSettingsExpandButton" class="displayInline">Show</button>
+			<button id="advancedSettingsExpandButton" class="randomYoutubeVideoButton importantButton" title="These settings are for people with some technical knowledge. Don't worry if you don't know what they're about, they don't add any features!"><b>Show Advanced Settings</b></button>
 			<div id="advancedSettingsDiv" class="slideOutContainer">
 				<!-- Custom API key: Option toggle -->
 				<div class="optionsRow">