Merge branch 'master' into 241-code-cleanup-setTool-export-issue

package.json

@@ -39,13 +39,13 @@
     "@playwright/test": "^1.39.0",
     "@types/node": "20.10.3",
     "@types/wicg-file-system-access": "^2023.10.4",
-    "electron": "^27.1.2",
+    "electron": "^28.0.0",
     "electron-packager": "^17.1.2",
     "gts": "^5.2.0",
     "http-server": "^14.1.1",
     "playwright": "^1.39.0",
     "typedoc": "^0.25.4",
-    "typescript": "~5.2.2",
+    "typescript": "~5.3.2",
     "vite": "^4.5.0",
     "vite-plugin-singlefile": "^0.13.5",
     "vitest": "^0.34.6"

src/index.css

@@ -139,36 +139,40 @@ p {
     user-select: none; 
 }
 
-/* input[type="checkbox"] {
-    display: none;
-} */
-
 .toggle-switch {
   position: relative;
-  display: inline-block;
+  display: block;
   width: 60px;
   height: 34px;
+  color: var(--mode-btn-icon-color);
+  margin:auto;
 }
 
 .toggle-switch .switch-track {
-  background-color: var(--mode-btn-bg);
-  border-radius: 34px;
+  background-color: var(--sidebar-border);
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   transition: background-color 0.3s;
+  border: var(--mode-btn-border); 
+  border-radius: var(--mode-btn-radius);
+  box-shadow: var(--mode-btn-shadow);
+  color: var(--mode-btn-icon-color);
 }
 
 .toggle-switch .switch-thumb {
-  background-color: var(--p-text);
-  border-radius: 50%;
+  background-color: var(--mode-btn-icon-color);
   width: 26px;
   height: 26px;
   position: absolute;
+  margin: 3%;
   top: 4px;
   left: 4px;
   transition: transform 0.3s, background-color 0.3s;
+  border-radius: var(--mode-btn-radius);
+  box-shadow: var(--mode-btn-shadow);
+  color: var(--mode-btn-icon-color);
 }
 
 input[type="checkbox"]:checked+.toggle-switch .switch-track {
@@ -181,10 +185,16 @@ input[type="checkbox"]:checked+.toggle-switch .switch-thumb {
 
 .toggle-switch+p::before {
   content: "Draw mode";
+  display:block;
+  text-align:center;
+  margin: 15% auto;
 }
 
 input[type="checkbox"]:checked+.toggle-switch+p::before {
   content: "Proof mode";
+  display:block; 
+  text-align:center;
+  margin: 15% auto;
 }
 
 #ProofButtons {