WIP

src/ui/components/Header.css

@@ -24,7 +24,7 @@
 }
 
 .header__options {
-  padding: 0 2rem;
+  padding: 0 2rem 0;
   text-align: right;
 }
 
@@ -36,8 +36,7 @@
   color: var(--color-text);
   padding-top: 1rem;
   height: 100%;
-  margin-left: 10px;
-  /* background-color: aqua; */
+  margin-left: 0.5rem;
   text-align: center;
 }
 

src/ui/components/Header.tsx

@@ -1,9 +1,9 @@
 import { Component, createSignal } from "solid-js";
 import { Handlers } from "../../types";
-// import { state, setState } from "../../state";
+import { state, setState } from "../../state";
 import "./Header.css";
 
-const Header: Component<{ handlers: Handlers }> = () => {
+const Header: Component<{ handlers: Handlers }> = (props) => {
   const [darkMode, setDarkMode] = createSignal(true);
 
   return (
@@ -15,6 +15,36 @@ const Header: Component<{ handlers: Handlers }> = () => {
         {/* <div class="header__options-ico" onClick={() => {}}>
           <i class="las la-question-circle"></i>
         </div> */}
+        <div
+          class="header__options-ico"
+          onClick={() => {
+            props.handlers.toggleSound();
+          }}
+          title={state.boardConfig.sounds ? "MUTE" : "SOUND ON"}
+        >
+          <i
+            classList={{
+              las: true,
+              "la-volume-mute": !state.boardConfig.sounds,
+              "la-volume-up": state.boardConfig.sounds,
+            }}
+          ></i>
+        </div>
+        <div
+          class="header__options-ico"
+          onClick={() => {
+            props.handlers.toggleSpeech();
+          }}
+          title={state.boardConfig.speech ? "SPEECH OFF" : "SPEECH ON"}
+        >
+          <i
+            classList={{
+              las: true,
+              "la-deaf": !state.boardConfig.speech,
+              "la-assistive-listening-systems": state.boardConfig.speech,
+            }}
+          ></i>
+        </div>
         <div
           class="header__options-ico"
           onClick={() => {

src/ui/components/Share.tsx

@@ -81,17 +81,6 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
         >
           <i class="las la-cloud"></i>
         </button>
-        <button
-          classList={{
-            options__button: true,
-            "options__button--last": true,
-            "options__button--active": state.boardConfig.sounds,
-          }}
-          onClick={props.handlers.toggleSound}
-          title={state.boardConfig.sounds ? "MUTE" : "SOUND ON"}
-        >
-          <i class="las la-volume-up"></i>
-        </button>
       </div>
       <hr />
       <div className="share__fen">