improve highlight style, improve filter button marker

dist/index.css

@@ -376,7 +376,8 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: center;
 }
 #chat-page > div > #ribbon button.ribbon-button,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar 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));
@@ -384,6 +385,9 @@ body[showing-chat] #chat-page-wrapper {
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   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 > #main > div > .pane-wrapper > .pane > .toolbar button > .icon {
   font-size: 1.1rem;
@@ -391,11 +395,6 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #ribbon > span {
   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);
   overflow-x: auto;
@@ -447,13 +446,6 @@ body[showing-chat] #chat-page-wrapper {
   gap: var(--gap-between-tiles);
   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;

dist/index.js

@@ -3443,7 +3443,7 @@
     return /* @__PURE__ */ createElement(
       "button",
       {
-        class: "ribbon-button",
+        class: "ribbon-button animate-highlight",
         "aria-label": label,
         "toggle:selected": isSelected,
         "toggle:highlight": isHighlighted,
@@ -3738,10 +3738,6 @@
     const ChatMessageViewModelToView = (chatMessageViewModel) => {
       return ChatMessage4(coreViewModel2, chatMessageViewModel);
     };
-    const filterIcon = createProxyState(
-      [messagePageViewModel.isFilterActive],
-      () => messagePageViewModel.isFilterActive.value ? "filter_alt" : "filter_alt_off"
-    );
     const messageContainer = /* @__PURE__ */ createElement(
       "div",
       {
@@ -3773,15 +3769,10 @@
       {
         class: "ghost",
         "on:click": messagePageViewModel.openFilterModal,
-        "aria-label": coreViewModel2.translations.chatPage.message.filterMessagesButtonAudioLabel
+        "aria-label": coreViewModel2.translations.chatPage.message.filterMessagesButtonAudioLabel,
+        "toggle:selected": messagePageViewModel.isFilterActive
       },
-      /* @__PURE__ */ createElement(
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt")
-        "span",
-        {
-          class: "icon",
-          "subscribe:innerText": filterIcon
-        }
-      )
     ))), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
       "input",
       {
@@ -4371,10 +4362,6 @@
   // src/View/ChatPages/boardPage.tsx
   function BoardPage(coreViewModel2, boardViewModel) {
     boardViewModel.loadData();
-    const filterIcon = createProxyState(
-      [boardViewModel.isFilterActive],
-      () => boardViewModel.isFilterActive.value ? "filter_alt" : "filter_alt_off"
-    );
     const mainContent = createProxyState(
       [boardViewModel.selectedPage],
       () => {
@@ -4459,15 +4446,10 @@
       {
         class: "ghost",
         "aria-label": coreViewModel2.translations.chatPage.task.filterTasksButtonAudioLabel,
-        "on:click": boardViewModel.showFilterModal
+        "on:click": boardViewModel.showFilterModal,
+        "toggle:selected": boardViewModel.isFilterActive
       },
-      /* @__PURE__ */ createElement(
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt")
-        "span",
-        {
-          class: "icon",
-          "subscribe:innerText": filterIcon
-        }
-      )
     ), /* @__PURE__ */ createElement(
       "button",
       {
@@ -6279,11 +6261,11 @@
     const view = /* @__PURE__ */ createElement(
       "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
       },
       /* @__PURE__ */ createElement(
         "span",

dist/styles.css

@@ -62,6 +62,9 @@ body {
     --text-error: #da1e28;
     --text-info: #0043ce;
 
+        --highlight-background: linear-gradient(45deg, hsl(30, 100%, 50%), hsl(40, 100%, 50%));
+    --highlight-color: black;
+
     --link: #0f62fe;
     --link-hover: #0043ce;
 
@@ -164,6 +167,7 @@ select:not(.tile *),
 }
 
 @media (hover: hover) {
+
     button:hover,
     select:hover,
     button.tile.ghost:hover {
@@ -353,9 +357,7 @@ footer {
     border-top: 1px solid var(--surface-border);
 }
 
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(label.tile *),
-        label.tile *
-    ),
 label.tile,
 select:not(label.tile *),
 textarea:not(label.tile *) {
@@ -370,9 +372,7 @@ hr {
     border-bottom: 1px solid var(--border) !important;
 }
 
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(label.tile *):not(.no-outline),
-        label.tile *
-    ):not(.no-outline),
 label.tile:has(input:focus),
 label.tile:has(textarea:focus),
 textarea:focus:not(label.tile *),
@@ -692,10 +692,7 @@ select {
 }
 
 article>div {
-    padding-bottom: calc(
+    padding-bottom: calc(var(--menu-height-mobile) + var(--control-height) + var(--content-padding));
-        var(--menu-height-mobile) + var(--control-height) +
-            var(--content-padding)
-    );
 }
 
 label:not(.inline) {
@@ -1037,10 +1034,7 @@ menu {
 }
 
 article>div {
-    padding-bottom: calc(
+    padding-bottom: calc(var(--menu-height-mobile) + var(--header-height) + var(--content-padding));
-        var(--menu-height-mobile) + var(--header-height) +
-            var(--content-padding)
-    );
 }
 
 /* overflow */
@@ -1126,6 +1120,7 @@ main {
 
 /* tablet & up */
 @media (min-width: 640px) {
+
     /* basic */
     .mobile-only {
         display: none !important;
@@ -1210,6 +1205,28 @@ main {
     }
 }
 
+/*
+STATE
+*/
+
+[highlight]:not(:hover):not(:active) {
+    color: var(--highlight-color) !important;
+    background: var(--highlight-background) !important;
+}
+
+[highlight].animate-highlight {
+    animation: 3s infinite highlight;
+}
+
+@keyframes highlight {
+    30%, 60% {
+        opacity: 1;
+    }
+    0%, 100% {
+        opacity: .1;
+    }
+}
+
 /*
 ICONS
  */

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
+                        <span class="icon">filter_alt</span>
-                            class="icon"
-                            subscribe:innerText={filterIcon}
-                        ></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
+                                <span class="icon">filter_alt</span>
-                                    class="icon"
-                                    subscribe:innerText={filterIcon}
-                                ></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;