feat(client): intro styling

SoftVarE-Group · Dec 12, 2023 · e35f209 · e35f209
1 parent 0047259
commit e35f209
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html
@@ -14,7 +14,7 @@
     <h1>UVL Playground</h1>
     <h2 id="connection" style="color: red;"></h2>
 </div>
-<button id="tutorialButton">Give me a quick tutorial!</button>
+<button class="tutorial-button" id="tutorialButton">?</button>
 <div>
     <dialog id="dialog">
         <div>

diff --git a/WebSocketClient/src/intro.ts b/WebSocketClient/src/intro.ts
@@ -30,6 +30,9 @@ export const initIntroJS = () => {
       });
 
     button?.addEventListener("click", () => {
+        intro.setOption("exitOnOverlayClick", false);
+        intro.setOption("overlayOpacity", 0);
+        intro.setOption("disableInteraction", true);
         intro.start();
     });
 

diff --git a/WebSocketClient/style.css b/WebSocketClient/style.css
@@ -140,4 +140,23 @@ a:active {
     color: #ff4040;
     text-decoration: none;
     font-weight: normal;
-}
+}
+
+.tutorial-button {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #bdc3c7; /* Light gray color for dark mode */
+    color: #34495e; /* Dark text color for dark mode */
+    border: none;
+    border-radius: 50%;
+    padding: 15px;
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease;
+  }
+
+  .tutorial-button:hover {
+    background-color: #95a5a6; /* Darker gray on hover for dark mode */
+  }