feat: improve auto-like toggle button

assets/icons/auto_like.svg

@@ -0,0 +1 @@
+<svg height="24" viewBox="0 -960 960 960" width="24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><path fill="#ffffff" d="m 767.44724,-185.36401 c 2.87737,0 5.51184,-1.1989 7.90342,-3.59671 2.39781,-2.39158 3.59671,-5.02606 3.59671,-7.90342 v -350.68395 c 0,-2.87737 -1.1989,-5.51184 -3.59671,-7.90342 -2.39158,-2.39781 -5.02605,-3.59671 -7.90342,-3.59671 H 192.55276 c -2.87737,0 -5.51184,1.1989 -7.90342,3.59671 -2.39781,2.39158 -3.59671,5.02605 -3.59671,7.90342 v 6.60236 90.13981 H 125 v -88.9012 -7.84097 c 0,-18.87729 6.53947,-34.8554 19.61842,-47.93434 13.07895,-13.07895 29.05706,-19.61843 47.93434,-19.61843 h 574.89448 c 18.87728,0 34.85539,6.53948 47.93434,19.61843 C 828.46053,-582.40349 835,-566.42538 835,-547.54809 v 350.68395 c 0,18.87728 -6.53947,34.85539 -19.61842,47.93434 -13.07895,13.07894 -29.05706,19.61842 -47.93434,19.61842 H 549.53899 l 23.69866,-56.05263 z m -577.0525,-481.47342 v -56.05264 h 579.21052 v 56.05264 z M 302.5,-774.63599 v -56.05263 h 355 v 56.05263 z" style="stroke-width:0.934211" /><path fill="#ffffff" d="M 444.37543,-104.40272 H 212.34209 v -291.14271 l 137.86733,-138.26669 39.7058,34.32667 c 3.70421,3.2036 6.77024,7.76206 9.19809,13.67535 2.42786,5.91329 3.64179,11.82659 3.64179,17.73988 v 1.56528 l -21.33043,70.95951 h 127.46227 c 16.99496,0 32.16904,6.69593 45.52222,20.0878 13.35319,13.39186 20.02979,28.60991 20.02979,45.65411 v 9.91346 c 0,3.28014 -0.34684,6.79682 -1.04051,10.55002 -0.69367,3.74971 -1.73418,7.01593 -3.12151,9.79866 l -65.55204,156.00658 c -4.8557,11.13091 -13.09305,20.43564 -24.71206,27.91422 -11.61902,7.47857 -23.49814,11.21786 -35.6374,11.21786 z M 270.0903,-170.14463 h 174.28513 l 63.47099,-149.74543 v -9.91346 H 307.02834 l 21.85067,-89.22116 -58.78871,58.95901 z m 0,-189.92104 v 189.92104 z m -57.74821,-35.47976 v 65.74191 h -46.30262 v 159.65889 h 46.30262 v 65.74191 H 100.48746 v -291.14271 z" style="stroke-width:0.521762" /></svg>

assets/icons/auto_like_disabled.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="24"
-   viewBox="0 -960 960 960"
-   width="24"
-   fill="#e8eaed"
-   version="1.1"
-   id="svg1"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1" />
-  <path
-     d="m 520.92907,-327.82878 34.9134,38.1164 H 368.60595 v -189.50038 l 38.11633,38.15053 v 113.23345 z m -233.9302,-228.698 v 228.698 h 81.60708 v 38.1164 H 248.88253 v -304.9307 z"
-     id="path1-5"
-     style="stroke-width:0.635272" />
-  <path
-     d="M 645.68629,-334.18148 718.98401,-505.705 v -43.0016 c 0,-2.2827 -0.73268,-4.1568 -2.19804,-5.6222 -1.46537,-1.4653 -3.33942,-2.198 -5.62217,-2.198 H 492.73179 l 31.85891,-139.2707 -116.2955,115.81281 -28.93858,-25.3463 157.84424,-156.92241 21.49761,21.4977 c 2.6385,2.6385 4.83019,6.1324 6.57507,10.482 1.74064,4.3494 2.61096,8.447 2.61096,12.2925 v 6.448 l -26.97366,116.8901 H 711.1638 c 12.08712,0 22.76394,4.6354 32.03043,13.9061 9.27075,9.2665 13.90612,19.9433 13.90612,32.0304 v 41.0449 c 0,2.6385 -0.34305,5.4888 -1.02914,8.5508 -0.68186,3.062 -1.44631,5.9144 -2.29333,8.5571 l -77.84207,183.75752 z"
-     id="path1-5-4"
-     style="stroke-width:0.635272" />
-  <path
-     d="m 829.77231,-42.419903 -129.15,-129.149987 c -31.48667,23.12667 -65.92333,40.99999 -103.31,53.61998 -37.38667,12.61333 -77.13,18.920007 -119.23,18.920007 -52.56667,0 -101.96667,-9.976677 -148.2,-29.929997 -46.23333,-19.94666 -86.45,-47.01999 -120.65,-81.21999 -34.2,-34.2 -61.27332,-74.41667 -81.21999,-120.65 -19.95332,-46.23333 -29.929987,-95.63333 -29.929987,-148.2 0,-42.1 6.306667,-81.84333 18.919997,-119.23 12.61999,-37.38667 30.49332,-71.82333 53.61998,-103.31 l -121.309977,-121.31 42.77,-42.76 780.459977,780.459991 z m -351.69,-116.609987 c 33.59333,0 65.36333,-5.02667 95.31,-15.08 29.94667,-10.04667 57.69,-23.86667 83.23,-41.46 l -442,-442 c -17.59333,25.54 -31.41333,53.28333 -41.46,83.23 -10.05333,29.94667 -15.08,61.71667 -15.08,95.31 0,88.66667 31.16667,164.16667 93.5,226.5 62.33333,62.33333 137.83333,93.5 226.5,93.5 z m 320,-113.85 -44.38,-44.38 c 14.25333,-23.59333 25.21333,-48.93 32.88,-76.01 7.66667,-27.08 11.5,-55.66667 11.5,-85.76 0,-88.66667 -31.16667,-164.16667 -93.5,-226.5 -62.33333,-62.33333 -137.83333,-93.5 -226.5,-93.5 -30,0 -58.56333,3.83333 -85.69,11.5 -27.12667,7.66667 -52.48667,18.62667 -76.08,32.88 l -44.38,-44.38 c 29.98667,-19.07333 62.31333,-33.84333 96.98,-44.31 34.67333,-10.46 71.06333,-15.69 109.17,-15.69 52.56667,0 101.96667,9.97667 148.2,29.93 46.23333,19.94667 86.45,47.02 120.65,81.22 34.2,34.2 61.27333,74.41667 81.22,120.65 19.95333,46.23333 29.93,95.63333 29.93,148.2 0,38.10667 -5.23,74.49667 -15.69,109.17 -10.46667,34.66667 -25.23667,66.99333 -44.31,96.98 z"
-     id="path1-4" />
-</svg>

assets/icons/auto_like_enabled.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="24"
-   viewBox="0 -960 960 960"
-   width="24"
-   fill="#e8eaed"
-   version="1.1"
-   id="svg1"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1" />
-  <path
-     d="m 480.07,-100 q -78.84,0 -148.21,-29.92 -69.37,-29.92 -120.68,-81.21 -51.31,-51.29 -81.25,-120.63 Q 100,-401.1 100,-479.93 q 0,-78.84 29.92,-148.21 29.92,-69.37 81.21,-120.68 51.29,-51.31 120.63,-81.25 69.34,-29.93 148.17,-29.93 78.84,0 148.21,29.92 69.37,29.92 120.68,81.21 51.31,51.29 81.25,120.63 29.93,69.34 29.93,148.17 0,78.84 -29.92,148.21 -29.92,69.37 -81.21,120.68 -51.29,51.31 -120.63,81.25 Q 558.9,-100 480.07,-100 Z M 480,-160 q 134,0 227,-93 93,-93 93,-227 0,-134 -93,-227 -93,-93 -227,-93 -134,0 -227,93 -93,93 -93,227 0,134 93,227 93,93 227,93 z m 0,-320 z"
-     id="path1" />
-  <path
-     d="m 635.90945,-289.71238 h -267.3035 v -304.9307 l 168.59491,-167.6103 21.49761,21.4977 c 2.6385,2.6385 4.83019,6.1324 6.57507,10.482 1.74064,4.3494 2.61096,8.447 2.61096,12.2925 v 6.448 l -26.97366,116.8901 H 711.1638 c 12.08712,0 22.76394,4.6354 32.03043,13.9061 9.27075,9.2665 13.90612,19.9433 13.90612,32.0304 v 41.0449 c 0,2.6385 -0.34305,5.4888 -1.02914,8.5508 -0.68186,3.062 -1.44631,5.9144 -2.29333,8.5571 l -72.81491,171.8158 c -3.64646,8.1442 -9.75355,15.0178 -18.32126,20.6209 -8.5677,5.6031 -17.47845,8.4047 -26.73226,8.4047 z m -229.18717,-38.1164 h 229.18717 c 1.79148,0 3.62317,-0.4891 5.49511,-1.4675 1.87617,-0.9783 3.30342,-2.6067 4.28173,-4.8852 l 73.29772,-171.5235 v -43.0016 c 0,-2.2827 -0.73268,-4.1568 -2.19804,-5.6222 -1.46537,-1.4653 -3.33942,-2.198 -5.62217,-2.198 H 492.73179 l 31.85891,-139.2707 -117.86842,117.3792 z m 0,-250.5895 v 250.5895 z m -38.11633,-16.2248 v 38.1163 h -81.60708 v 228.698 h 81.60708 v 38.1164 H 248.88253 v -304.9307 z"
-     id="path1-5"
-     style="stroke-width:0.635272" />
-</svg>

assets/resources.json

@@ -7,8 +7,7 @@
   "doc-changelog": "/changelog.md",
   "icon-advanced_mode": "icons/plus_circle_small.svg",
   "icon-arrow_down": "icons/arrow_down.svg",
-  "icon-auto_like_disabled": "icons/auto_like_disabled.svg",
-  "icon-auto_like_enabled": "icons/auto_like_enabled.svg",
+  "icon-auto_like": "icons/auto_like.svg",
   "icon-clear_list": "icons/clear_list.svg",
   "icon-delete": "icons/delete.svg",
   "icon-error": "icons/error.svg",

src/components/longButton.ts

@@ -61,6 +61,7 @@ export async function createLongBtn({
     btnElem = document.createElement("div");
 
   if("toggle" in rest && rest.toggle) {
+    btnElem.classList.add("bytm-toggle");
     if("toggleInitialState" in rest && rest.toggleInitialState)
       btnElem.classList.add("toggled");
   }

src/features/input.css

@@ -1,7 +1,6 @@
 :root {
   --bytm-auto-like-btn-color: #c47df4;
-  --bytm-auto-like-btn-color-toggled: rgba(201, 122, 254, 0.25);
-  --bytm-auto-like-btn-color-toggled-hover: rgba(201, 122, 254, 0.5);
+  --bytm-auto-like-btn-bg-color: rgba(201, 122, 254, 0.25);
 }
 
 .bytm-auto-like-channel-row-left-cont {
@@ -64,12 +63,12 @@
   box-sizing: border-box;
 }
 
-.bytm-auto-like-toggle-btn.toggled {
-  background-color: var(--bytm-auto-like-btn-color-toggled, rgba(255, 255, 255, 0.25));
+.bytm-auto-like-toggle-btn:active {
+  background-color: var(--bytm-auto-like-btn-bg-color);
 }
 
-.bytm-auto-like-toggle-btn.toggled:hover {
-  background-color: var(--bytm-auto-like-btn-color-toggled-hover, rgba(255, 255, 255, 0.5));
+.bytm-auto-like-toggle-btn.toggled {
+  background-color: var(--bytm-auto-like-btn-bg-color, rgba(255, 255, 255, 0.25));
 }
 
 .bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {

src/features/input.ts

@@ -240,7 +240,7 @@ async function addAutoLikeToggleBtn(sibling: HTMLElement, chanId: string, chanNa
   const chan = autoLikeChannelsStore.getData().channels.find((ch) => ch.id === chanId);
 
   const buttonEl = await createLongBtn({
-    resourceName: `icon-auto_like${chan?.enabled ? "_enabled" : "_disabled"}`,
+    resourceName: "icon-auto_like",
     text: t("auto_like"),
     title: t("auto_like_channel_toggle"),
     toggle: true,
@@ -253,7 +253,7 @@ async function addAutoLikeToggleBtn(sibling: HTMLElement, chanId: string, chanNa
       }
 
       const imgEl = buttonEl.querySelector<HTMLElement>(".bytm-generic-btn-img");
-      const imgHtml = await resourceToHTMLString(`icon-auto_like_${toggled ? "enabled" : "disabled"}`);
+      const imgHtml = await resourceToHTMLString("icon-auto_like");
       if(imgEl && imgHtml)
         imgEl.innerHTML = imgHtml;
 

src/features/layout.css

@@ -33,10 +33,13 @@
 }
 
 .bytm-generic-btn:active {
-  background-color: #5f5f5f;
   animation: flashBorder 0.4s ease 1;
 }
 
+.bytm-generic-btn:not(.bytm-toggle):active {
+  background-color: #5f5f5f;
+}
+
 .bytm-generic-btn.long {
   --bytm-generic-btn-width: 136px;
   padding: 0px;
@@ -65,13 +68,13 @@
 
 @keyframes flashBorder {
   0% {
-    border: 1px solid transparent;
+    border: 1px solid initial;
   }
   20% {
     border: 1px solid #808080;
   }
   100% {
-    border: 1px solid transparent;
+    border: 1px solid initial;
   }
 }