From 89b3cb208008a17560e8e0d4f92e39d7d4296ee9 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Sun, 28 Jul 2024 18:38:14 +0200
Subject: [PATCH] add .inset-outline style for list toggle

---
 dist/index.js                    | 3 ++-
 dist/styles.css                  | 9 +++++++--
 src/View/ChatPages/boardPage.tsx | 2 +-
 src/View/ChatPages/taskPage.tsx  | 1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index 17b955c0..5b9163b7 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -4191,7 +4191,7 @@
     ), /* @__PURE__ */ createElement(
       "button",
       {
-        class: "ghost board-toggle-button",
+        class: "ghost board-toggle-button inset-outline",
         "aria-label": translations.chatPage.task.toggleBoardButtonAudioLabel,
         "on:click": boardViewModel.taskPageViewModel.toggleBoardList,
         "toggle:selected": boardViewModel.taskPageViewModel.isShowingBoadList
@@ -4299,6 +4299,7 @@
       /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
         "input",
         {
+          class: "no-outline",
           "bind:value": taskPageViewModel.newBoardNameInput,
           "on:enter": taskPageViewModel.createBoard,
           placeholder: translations.chatPage.task.newBoardNamePlaceholder
diff --git a/dist/styles.css b/dist/styles.css
index 5b703f8e..9a1e2279 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -29,7 +29,7 @@ ANIMATION
 }
 
 .slide-up {
-  animation: slide-up var(--animation-duration)
+  animation: slide-up var(--animation-duration);
 }
 
 /*
@@ -383,7 +383,7 @@ hr {
 
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
     label.tile *
-  ),
+  ):not(.no-outline),
 label.tile:has(input:focus),
 label.tile:has(textarea:focus),
 textarea:focus:not(label.tile *),
@@ -391,6 +391,11 @@ textarea:focus:not(label.tile *),
   outline: var(--outline-width) solid var(--primary);
 }
 
+.inset-outline[selected] {
+  outline: none;
+  box-shadow: var(--primary) 0 0 0 var(--outline-width) inset;
+}
+
 /* border-radius */
 * {
   border-radius: 0px;
diff --git a/src/View/ChatPages/boardPage.tsx b/src/View/ChatPages/boardPage.tsx
index 40dc1b98..c624504e 100644
--- a/src/View/ChatPages/boardPage.tsx
+++ b/src/View/ChatPages/boardPage.tsx
@@ -66,7 +66,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
             <span class="icon">arrow_back</span>
           </button>
           <button
-            class="ghost board-toggle-button"
+            class="ghost board-toggle-button inset-outline"
             aria-label={translations.chatPage.task.toggleBoardButtonAudioLabel}
             on:click={boardViewModel.taskPageViewModel.toggleBoardList}
             toggle:selected={boardViewModel.taskPageViewModel.isShowingBoadList}
diff --git a/src/View/ChatPages/taskPage.tsx b/src/View/ChatPages/taskPage.tsx
index 1563e9e5..4e79a609 100644
--- a/src/View/ChatPages/taskPage.tsx
+++ b/src/View/ChatPages/taskPage.tsx
@@ -55,6 +55,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
           <div class="toolbar">
             <div class="flex-row width-input">
               <input
+              class="no-outline"
                 bind:value={taskPageViewModel.newBoardNameInput}
                 on:enter={taskPageViewModel.createBoard}
                 placeholder={translations.chatPage.task.newBoardNamePlaceholder}