From a8be9664bb38e3df6b49b9510bd6d259152a8519 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Tue, 24 Jun 2025 19:56:27 +0100
Subject: [PATCH] fix: polish

---
 .../ui/src/components/skin/SkinLikeTextButton.vue | 11 ++++-------
 .../src/components/skin/SkinPreviewRenderer.vue   | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/skin/SkinLikeTextButton.vue b/packages/ui/src/components/skin/SkinLikeTextButton.vue
index b7ab8765e..b5ceda4a3 100644
--- a/packages/ui/src/components/skin/SkinLikeTextButton.vue
+++ b/packages/ui/src/components/skin/SkinLikeTextButton.vue
@@ -21,14 +21,11 @@ const pressed = ref(false)
   <div
     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' : '',
-    ]"
+    :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 transition-all duration-200"
-      :class="props.selected ? 'selected' : ''"
+      :class="selected ? 'selected' : ''"
       @mousedown="pressed = true"
       @mouseup="pressed = false"
       @mouseleave="pressed = false"
@@ -59,8 +56,8 @@ const pressed = ref(false)
       var(--color-brand) -76.68%,
       rgba(27, 217, 106, 0.534) -38.61%,
       rgba(12, 89, 44, 0.6) 100.4%
-    ),
-    var(--color-bg);
+  ),
+  var(--color-bg);
 }
 
 .skin-btn-bg.selected:hover,
diff --git a/packages/ui/src/components/skin/SkinPreviewRenderer.vue b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
index 55bcfebd2..0248a18a8 100644
--- a/packages/ui/src/components/skin/SkinPreviewRenderer.vue
+++ b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
@@ -14,14 +14,13 @@
     </div>
     <div
       v-if="nametag"
-      class="absolute top-[18%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md pointer-events-none z-10 font-minecraft nametag-bg transition-all duration-200"
+      class="absolute top-[18%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md pointer-events-none z-10 font-minecraft text-gray nametag-bg transition-all duration-200"
       :style="{ fontSize: nametagFontSize }"
     >
       {{ nametagText }}
     </div>
 
     <TresCanvas
-      v-show="isReady"
       shadows
       alpha
       :antialias="antialias"
@@ -34,6 +33,8 @@
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
       @pointerleave="onPointerUp"
+      class="transition-opacity duration-500"
+      :class="{'opacity-0': !isReady, 'opacity-100': isReady}"
     >
       <Suspense>
         <Group>
@@ -86,7 +87,11 @@
       <TresDirectionalLight :position="[2, 4, 3]" :intensity="1.2" :cast-shadow="true" />
     </TresCanvas>
 
-    <div v-if="!isReady" class="w-full h-full flex items-center justify-center">
+    <div
+      v-if="!isReady"
+      class="w-full h-full flex items-center justify-center transition-opacity duration-500"
+      :class="{'opacity-100': !isReady, 'opacity-0': isReady}"
+    >
       <div class="text-primary">Loading...</div>
     </div>
   </div>
@@ -648,8 +653,8 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .nametag-bg {
-  background: linear-gradient(308.68deg, rgba(0, 0, 0, 0) -52.46%, rgba(100, 100, 100, 0.1) 94.75%),
-    rgba(0, 0, 0, 0.2);
+  background: linear-gradient(308.68deg, rgba(50, 50, 50, 0.2) -52.46%, rgba(100, 100, 100, 0.2) 94.75%),
+  rgba(0, 0, 0, 0.2);
   box-shadow:
     inset -0.5px -0.5px 0px rgba(0, 0, 0, 0.25),
     inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.05);