From cbfb48fc1abe816182c6a8bf9fd978e5b79194ec Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Sat, 24 May 2025 20:17:02 +0100
Subject: [PATCH] polish: theme fixes

---
 apps/app-frontend/src/pages/Skins.vue         |  3 +-
 packages/assets/styles/variables.scss         |  6 ++
 .../ui/src/components/skin/CapeButton.vue     |  4 +-
 .../components/skin/CapeLikeTextButton.vue    |  6 +-
 .../ui/src/components/skin/SkinButton.vue     | 16 ++---
 .../components/skin/SkinLikeTextButton.vue    | 61 ++++++++++++++-----
 .../components/skin/SkinPreviewRenderer.vue   |  2 +-
 7 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index ccc16012f..d3e823df2 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -309,6 +309,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
             <template #overlay-buttons>
               <Button
                 color="green"
+                class="pointer-events-auto"
                 aria-label="Edit skin"
                 @click.stop="(e) => editSkinModal?.show(e, skin)"
               >
@@ -319,7 +320,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
                 v-tooltip="'Delete skin'"
                 aria-label="Delete skin"
                 color="red"
-                class="!rounded-[100%]"
+                class="!rounded-[100%] pointer-events-auto"
                 icon-only
                 @click.stop="() => confirmDeleteSkin(skin)"
               >
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index f46f24e37..7014ff795 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -68,6 +68,8 @@
   --color-button-bg-selected: var(--color-brand);
   --color-button-text-selected: var(--color-accent-contrast);
 
+  --color-gradient-button-bg: linear-gradient(180deg, #f8f9fa 0%, #dce0e6 100%);
+
   --loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #00af5c 100%);
 
   --color-platform-fabric: #8a7b71;
@@ -182,6 +184,8 @@ html {
   --color-button-bg-selected: var(--color-brand-highlight);
   --color-button-text-selected: var(--color-brand);
 
+  --color-gradient-button-bg: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
+
   --loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #1ffa9a 100%);
 
   --color-platform-fabric: #dbb69b;
@@ -222,6 +226,8 @@ html {
     rgba(9, 18, 14, 0.6) 10%,
     rgba(19, 31, 23, 0.5) 100%
   );
+
+  --color-gradient-button-bg: linear-gradient(180deg, #1b1b20 0%, #25262b 100%);
 }
 
 .retro-mode {
diff --git a/packages/ui/src/components/skin/CapeButton.vue b/packages/ui/src/components/skin/CapeButton.vue
index 986c7d6c2..a64fa29fb 100644
--- a/packages/ui/src/components/skin/CapeButton.vue
+++ b/packages/ui/src/components/skin/CapeButton.vue
@@ -35,7 +35,7 @@ const highlighted = computed(() => props.selected ?? props.isEquipped)
       :class="
         highlighted
           ? `bg-brand highlighted-outer-glow`
-          : `bg-button-bg opacity-75 group-hover:opacity-100`
+          : `bg-button-bg brightness-95 group-hover:brightness-100`
       "
       class="block p-[3px] rounded-lg border-0 group-active:scale-95 transition-all"
     >
@@ -80,7 +80,7 @@ const highlighted = computed(() => props.selected ?? props.isEquipped)
   content: '';
   position: absolute;
   inset: 0;
-  box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 0.4);
   z-index: 2;
 }
 
diff --git a/packages/ui/src/components/skin/CapeLikeTextButton.vue b/packages/ui/src/components/skin/CapeLikeTextButton.vue
index 8ce4e6a5d..ef8a9cad9 100644
--- a/packages/ui/src/components/skin/CapeLikeTextButton.vue
+++ b/packages/ui/src/components/skin/CapeLikeTextButton.vue
@@ -26,17 +26,17 @@ withDefaults(
         'block rounded-lg group-active:scale-95 transition-all border-2 relative',
         highlighted
           ? 'border-brand highlighted-glow'
-          : 'border-transparent opacity-75 group-hover:opacity-100',
+          : 'border-transparent brightness-95 group-hover:brightness-100',
       ]"
     >
       <span class="block p-[3px] rounded-lg bg-button-bg">
         <span
-          class="flex flex-col items-center justify-center aspect-[10/16] w-[60px] min-h-[96px] rounded-[5px] bg-black/10 relative overflow-hidden"
+          class="flex flex-col items-center justify-center aspect-[10/16] w-[60px] min-h-[96px] rounded-[5px] bg-black/10 relative overflow-hidden text-primary z-10"
         >
           <div class="mb-1">
             <slot name="icon"></slot>
           </div>
-          <span class="text-xs group-hover:text-white" :class="{ 'text-white': highlighted }">
+          <span class="text-xs">
             <slot></slot>
           </span>
         </span>
diff --git a/packages/ui/src/components/skin/SkinButton.vue b/packages/ui/src/components/skin/SkinButton.vue
index e86035690..75a9279aa 100644
--- a/packages/ui/src/components/skin/SkinButton.vue
+++ b/packages/ui/src/components/skin/SkinButton.vue
@@ -34,7 +34,7 @@ function onImageLoad(type: 'forward' | 'backward') {
   <div
     v-tooltip="tooltip ?? undefined"
     class="group flex relative overflow-hidden rounded-xl border-solid border-2 transition-colors duration-200"
-    :class="[selected ? 'border-brand' : 'border-transparent hover:border-white/50']"
+    :class="[selected ? 'border-brand' : 'border-transparent hover:border-inverted']"
   >
     <button
       class="skin-btn-bg absolute inset-0 cursor-pointer p-0 border-none group-hover:brightness-125"
@@ -74,8 +74,7 @@ function onImageLoad(type: 'forward' | 'backward') {
 
     <span
       v-if="$slots['overlay-buttons']"
-      class="absolute inset-0 flex items-end justify-start p-1 gap-1 translate-y-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
-      style="pointer-events: none"
+      class="pointer-events-none absolute inset-0 flex items-end justify-start p-1 gap-1 translate-y-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
     >
       <slot name="overlay-buttons" />
     </span>
@@ -90,9 +89,9 @@ function onImageLoad(type: 'forward' | 'backward') {
 .skeleton {
   background: linear-gradient(
     90deg,
-    var(--color-bg, #f0f0f0) 25%,
-    var(--color-raised-bg, #e0e0e0) 50%,
-    var(--color-bg, #f0f0f0) 75%
+    var(--color-bg) 25%,
+    var(--color-raised-bg) 50%,
+    var(--color-bg) 75%
   );
   background-size: 200% 100%;
   animation: wave 1500ms infinite linear;
@@ -108,8 +107,9 @@ function onImageLoad(type: 'forward' | 'backward') {
 }
 
 .skin-btn-bg {
-  background: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
+  background: var(--color-gradient-button-bg);
 }
+
 .skin-btn-bg.selected {
   background: linear-gradient(
       157.61deg,
@@ -117,7 +117,7 @@ function onImageLoad(type: 'forward' | 'backward') {
       rgba(27, 217, 106, 0.534) -38.61%,
       rgba(12, 89, 44, 0.6) 100.4%
     ),
-    #27292f;
+    var(--color-bg);
 }
 
 .skin-btn-bg.selected:hover,
diff --git a/packages/ui/src/components/skin/SkinLikeTextButton.vue b/packages/ui/src/components/skin/SkinLikeTextButton.vue
index 3018630ae..b7ab8765e 100644
--- a/packages/ui/src/components/skin/SkinLikeTextButton.vue
+++ b/packages/ui/src/components/skin/SkinLikeTextButton.vue
@@ -1,41 +1,70 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    selected?: boolean
+    tooltip?: string
+  }>(),
+  {
+    selected: false,
+    tooltip: undefined,
+  },
+)
+
+const emit = defineEmits<{ (e: 'click'): void }>()
+
 const pressed = ref(false)
 </script>
 
 <template>
   <div
-    class="relative border-2 border-transparent rounded-xl overflow-hidden"
-    :class="{ 'scale-95': pressed }"
+    v-tooltip="tooltip ?? undefined"
+    class="group relative overflow-hidden rounded-xl border-2 transition-all duration-200"
+    :class="[
+      props.selected ? 'border-brand' : 'border-transparent hover:border-inverted',
+      pressed ? 'scale-95' : '',
+    ]"
   >
     <button
-      class="absolute inset-0 skin-like-text-bg rounded-xl cursor-pointer p-0 border-none"
+      class="skin-btn-bg absolute inset-0 cursor-pointer p-0 border-none group-hover:brightness-125 transition-all duration-200"
+      :class="props.selected ? 'selected' : ''"
       @mousedown="pressed = true"
       @mouseup="pressed = false"
       @mouseleave="pressed = false"
+      @click="emit('click')"
     ></button>
+
     <div
-      class="relative w-full h-full flex flex-col items-center justify-center pointer-events-none"
+      class="relative w-full h-full flex flex-col items-center justify-center pointer-events-none z-10"
     >
-      <div class="mb-2">
-        <slot name="icon"></slot>
+      <div v-if="$slots.icon" class="mb-2">
+        <slot name="icon" />
       </div>
-      <span class="text-md text-center px-2">
-        <slot></slot>
+      <span class="text-md text-center px-2 text-primary">
+        <slot />
       </span>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.skin-like-text-bg {
-  background: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
-  transition:
-    filter 200ms ease-in-out,
-    box-shadow 200ms ease-in-out;
+.skin-btn-bg {
+  background: var(--color-gradient-button-bg);
 }
-.skin-like-text-bg:hover {
-  filter: brightness(var(--hover-brightness));
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+.skin-btn-bg.selected {
+  background: linear-gradient(
+      157.61deg,
+      var(--color-brand) -76.68%,
+      rgba(27, 217, 106, 0.534) -38.61%,
+      rgba(12, 89, 44, 0.6) 100.4%
+    ),
+    var(--color-bg);
+}
+
+.skin-btn-bg.selected:hover,
+.group:hover .skin-btn-bg.selected {
+  filter: brightness(1.15);
 }
 </style>
diff --git a/packages/ui/src/components/skin/SkinPreviewRenderer.vue b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
index 4f20ed5d4..5f75b2b48 100644
--- a/packages/ui/src/components/skin/SkinPreviewRenderer.vue
+++ b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
@@ -9,7 +9,7 @@
     </div>
     <div
       v-if="nametag"
-      class="absolute top-[13%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md text-[200%] pointer-events-none z-10 font-minecraft text-primary nametag-bg"
+      class="absolute top-[13%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md text-[200%] pointer-events-none z-10 font-minecraft text-inverted nametag-bg"
     >
       {{ nametag }}
     </div>