better icon-settings-expand

Author: MukjepScarlet

src-theme/src/routes/clickgui/Module.svelte

@@ -133,7 +133,8 @@
 </div>
 
 <style lang="scss">
-  @use "../../colors.scss" as *;
+  @use "../../colors" as *;
+  @use "./icon-settings-expand" as *;
 
   .module {
     position: relative;
@@ -178,21 +179,8 @@
 
     &.has-settings {
       .name::after {
-        content: "";
-        display: block;
-        position: absolute;
-        height: 10px;
-        width: 10px;
-        right: 15px;
-        top: 50%;
-        background-image: url("/img/clickgui/icon-settings-expand.svg");
-        background-position: center;
-        background-repeat: no-repeat;
+        @include icon-settings-expand($right: 15px);
         opacity: 0.5;
-        transform-origin: 50% 50%;
-        transform: translateY(-50%) rotate(-90deg);
-        transition: ease opacity 0.2s,
-        ease transform 0.4s;
       }
 
       &.expanded .name::after {

src-theme/src/routes/clickgui/icon-settings-expand.scss

@@ -0,0 +1,38 @@
+/*!
+ * This file is part of LiquidBounce (https://github.com/CCBlueX/LiquidBounce)
+ *
+ * Copyright (c) 2015 - 2025 CCBlueX
+ *
+ * LiquidBounce is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LiquidBounce is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with LiquidBounce. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@mixin icon-settings-expand(
+  $size: 10px,
+  $right: 10px,
+  $rotate: -90deg,
+) {
+  content: "";
+  display: block;
+  position: absolute;
+  height: $size;
+  width: $size;
+  right: $right;
+  top: 50%;
+  background-image: url("/img/clickgui/icon-settings-expand.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  transform-origin: 50% 50%;
+  transform: translateY(-50%) rotate($rotate);
+  transition: ease opacity 0.2s, ease transform 0.4s;
+}

src-theme/src/routes/clickgui/setting/bind/SwitchBindAction.svelte

@@ -38,7 +38,8 @@
     }
 </script>
 
-<button on:click|stopPropagation={switchAction}>
+<!-- svelte-ignore a11y_consider_explicit_label -->
+<button style="--direction: {direction}" on:click|stopPropagation={switchAction}>
     <span class="chosen-holder">
         {#key chosen}
             <span
@@ -49,30 +50,30 @@
         {/key}
     </span>
 
-    <span class="arrow-wrapper" class:jiggle bind:this={arrowWrapper}>
-        <ExpandArrow
-                expanded={false}
-                expandable={false}
-                compact={true}
-                dimmed={true}
-        />
+    <span class="arrow arrow-right" class:jiggle bind:this={arrowWrapper}>
     </span>
 </button>
 
 <style lang="scss">
   @use "../../../../colors" as *;
+  @use "../../icon-settings-expand" as *;
 
-  @keyframes jiggle-right {
+  @keyframes jiggle {
     0% { transform: translateX(0); }
-    50% { transform: translateX(2px); }
+    50% { transform: translateX(calc(var(--direction) * 2px)); }
     100% { transform: translateX(0); }
   }
 
-  .arrow-wrapper {
-    display: flex;
+  .arrow {
+    width: 10px;
+
+    &.arrow-right::after {
+      @include icon-settings-expand($size: 10px, $right: auto);
+      color: $clickgui-text-dimmed-color;
+    }
 
     &.jiggle {
-      animation: jiggle-right 200ms ease;
+      animation: jiggle 200ms ease;
     }
   }
 

src-theme/src/routes/clickgui/setting/common/Dropdown.svelte

@@ -53,6 +53,7 @@
 
 <style lang="scss">
   @use "../../../../colors.scss" as *;
+  @use "../../icon-settings-expand" as *;
 
   .dropdown {
     position: relative;
@@ -90,20 +91,7 @@
     }
 
     .text::after {
-      content: "";
-      display: block;
-      position: absolute;
-      height: 10px;
-      width: 10px;
-      right: 10px;
-      top: 50%;
-      background-image: url("/img/clickgui/icon-settings-expand.svg");
-      background-position: center;
-      background-repeat: no-repeat;
-      transform-origin: 50% 50%;
-      transform: translateY(-50%) rotate(-90deg);
-      transition: ease opacity 0.2s,
-      ease transform 0.4s;
+      @include icon-settings-expand();
     }
   }
 

src-theme/src/routes/clickgui/setting/common/ExpandArrow.svelte

@@ -2,26 +2,21 @@
     import {createEventDispatcher} from "svelte";
 
     export let expanded: boolean;
-    export let expandable: boolean = true;
-    export let compact = false;
-    export let dimmed = false;
 
     const dispatch = createEventDispatcher();
 
     function handleClick() {
-        if (expandable) {
-            expanded = !expanded;
-            dispatch("click");
-        }
+        expanded = !expanded;
+        dispatch("click");
     }
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
-<button class="arrow" class:expanded class:compact class:dimmed on:click={handleClick}
+<button class="arrow" class:expanded on:click={handleClick}
 ></button>
 
 <style lang="scss">
-  @use "../../../../colors" as *;
+  @use "../../icon-settings-expand" as *;
 
   .arrow {
     width: 20px;
@@ -30,33 +25,8 @@
     background-color: transparent;
     border: none;
 
-    &.compact {
-      width: 10px;
-    }
-
-    &.dimmed {
-      color: $clickgui-text-dimmed-color;
-    }
-
     &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      height: 10px;
-      width: 10px;
-      right: 0;
-      top: 50%;
-      background-image: url("/img/clickgui/icon-settings-expand.svg");
-      background-position: center;
-      background-repeat: no-repeat;
-      transform-origin: 50% 50%;
-      transform: translateY(-50%) rotate(-90deg);
-      transition: ease opacity 0.2s,
-      ease transform 0.4s;
-    }
-
-    &::after.compact {
-      right: auto;
+      @include icon-settings-expand($right: 0);
     }
 
     &.expanded::after {