add secondary buttons

index.html

@@ -21,7 +21,7 @@
                         href="docs/index.html"
                         target="_blank"
                     >
-                        <button class="icon-button">
+                        <button class="icon-button secondary">
                             <img
                                 src="https://chatgpt.com/favicon.ico"
                                 width="20"
@@ -72,7 +72,7 @@
                             💾 Save
                         </button>
 
-                        <button id="load-button">
+                        <button id="load-button" class="secondary">
                             📄 Load
                         </button>
                     </div>

src/index.js

@@ -114,10 +114,10 @@ runButton.onclick = () => {
 
     if (codeRunner.isRunning) {
         runButton.textContent = "✋ Stop";
-        runButton.classList.add("active");
+        runButton.classList.add("running");
     } else {
         runButton.textContent = "🏃 Run";
-        runButton.classList.remove("active");
+        runButton.classList.remove("running");
     }
 };
 

style.css

@@ -257,15 +257,27 @@ button {
     white-space: nowrap;
 }
 
-.dropdown-wrapper:has(.active) button,
-button:active {
-    background-color: #065275;
-}
-
 button:hover {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
 }
 
+button.secondary {
+    background-color: #616161;
+}
+
+button.secondary:active {
+    background-color: #424242;
+}
+
+#run-button {
+    transition-duration: 0s;
+    background-color: #388e3c;
+}
+
+#run-button.running {
+    background-color: #d32f2f;
+}
+
 footer {
     position: absolute;
     bottom: 1px;