improve highlight style, improve filter button marker

src/View/ChatPages/boardPage.tsx

@@ -20,14 +20,6 @@ export function BoardPage(
 ) {
     boardViewModel.loadData();
 
-    const filterIcon = React.createProxyState(
-        [boardViewModel.isFilterActive],
-        () =>
-            boardViewModel.isFilterActive.value
-                ? "filter_alt"
-                : "filter_alt_off",
-    );
-
     // main content
     const mainContent = React.createProxyState(
         [boardViewModel.selectedPage],
@@ -142,11 +134,9 @@ export function BoardPage(
                                 .filterTasksButtonAudioLabel
                         }
                         on:click={boardViewModel.showFilterModal}
+                        toggle:selected={boardViewModel.isFilterActive}
                     >
-                        <span
-                            class="icon"
-                            subscribe:innerText={filterIcon}
-                        ></span>
+                        <span class="icon">filter_alt</span>
                     </button>
                     <button
                         class="ghost"

src/View/ChatPages/messagePage.tsx

@@ -19,14 +19,6 @@ export function MessagePage(
         return ChatMessage(coreViewModel, chatMessageViewModel);
     };
 
-    const filterIcon = React.createProxyState(
-        [messagePageViewModel.isFilterActive],
-        () =>
-            messagePageViewModel.isFilterActive.value
-                ? "filter_alt"
-                : "filter_alt_off",
-    );
-
     const messageContainer = (
         <div
             id="message-container"
@@ -76,11 +68,11 @@ export function MessagePage(
                                     coreViewModel.translations.chatPage.message
                                         .filterMessagesButtonAudioLabel
                                 }
+                                toggle:selected={
+                                    messagePageViewModel.isFilterActive
+                                }
                             >
-                                <span
-                                    class="icon"
-                                    subscribe:innerText={filterIcon}
-                                ></span>
+                                <span class="icon">filter_alt</span>
                             </button>
                         </span>
                     </div>

src/View/Components/chatEntry.tsx

@@ -5,11 +5,11 @@ import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
 export function ChatEntry(chatViewModel: ChatViewModel) {
     const view = (
         <button
-            class="tile colored-tile chat-entry"
+            class="tile colored-tile chat-entry animate-highlight"
             set:color={chatViewModel.settingsPageViewModel.color}
             style="height: 8rem"
             on:click={chatViewModel.open}
-            toggle:unread={chatViewModel.hasUnreadMessages}
+            toggle:highlight={chatViewModel.hasUnreadMessages}
         >
             <span
                 class="shadow"

src/View/Components/ribbonButton.tsx

@@ -13,7 +13,7 @@ export function RibbonButton(
 ) {
     return (
         <button
-            class="ribbon-button"
+            class="ribbon-button animate-highlight"
             aria-label={label}
             toggle:selected={isSelected}
             toggle:highlight={isHighlighted}

src/View/chatPage.css

@@ -186,7 +186,15 @@ body[showing-chat] #chat-page-wrapper {
     > .pane-wrapper
     > .pane
     > .toolbar
-    button.ribbon-button {
+    button.ribbon-button,
+#chat-page
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    button[selected] {
     min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
@@ -197,6 +205,17 @@ body[showing-chat] #chat-page-wrapper {
     color: var(--primary);
 }
 
+#chat-page
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    button[selected]:not(.ribbon-button) {
+    margin: var(--gap-between-tiles);
+}
+
 #chat-page > div > #ribbon button > .icon,
 #chat-page
     > div
@@ -214,12 +233,6 @@ body[showing-chat] #chat-page-wrapper {
     width: 100%;
 }
 
-#chat-page > div > #ribbon .ribbon-button[highlight] {
-    background: rgb(255, 217, 0) !important;
-    color: black;
-    outline-color: black;
-}
-
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
     height: var(--ribbon-size);
 

src/View/homePage.css

@@ -45,15 +45,6 @@
     grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 }
 
-.chat-entry[unread] {
-    border: var(--outline-width) solid black;
-}
-
-.chat-entry[unread]:not(:hover):not(:active) {
-    background: rgb(255, 217, 0) !important;
-    color: black;
-}
-
 @media (min-width: 640px) {
     #home-page > div {
         overflow-x: hidden;