From 9bcaff9fd3f9ed6f55431ad6bb0b48cd01afab8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 28 Apr 2026 15:50:32 -0500
Subject: [PATCH] fix: light mode skeleton style

---
 .../src/components/Skeleton/index.css         | 17 -------------
 .../src/components/Skeleton/index.module.css  | 25 +++++++++++++++++++
 .../src/components/Skeleton/index.tsx         |  4 +--
 .../src/components/TankCard/index.module.css  | 20 +++++++++++----
 .../src/components/TankCard/index.tsx         | 10 +++++---
 5 files changed, 48 insertions(+), 28 deletions(-)
 delete mode 100644 packages/website-ue/src/components/Skeleton/index.css
 create mode 100644 packages/website-ue/src/components/Skeleton/index.module.css

diff --git a/packages/website-ue/src/components/Skeleton/index.css b/packages/website-ue/src/components/Skeleton/index.css
deleted file mode 100644
index 2eb07b403..000000000
--- a/packages/website-ue/src/components/Skeleton/index.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@keyframes skeleton-animation {
-  0% {
-    background-color: var(--black-a6);
-  }
-  50% {
-    background-color: var(--black-a5);
-  }
-  100% {
-    background-color: var(--black-a6);
-  }
-}
-
-.skeleton {
-  animation: skeleton-animation var(--duration-subtle) ease infinite;
-
-  border-radius: var(--space-2);
-}
diff --git a/packages/website-ue/src/components/Skeleton/index.module.css b/packages/website-ue/src/components/Skeleton/index.module.css
new file mode 100644
index 000000000..c468ffd6b
--- /dev/null
+++ b/packages/website-ue/src/components/Skeleton/index.module.css
@@ -0,0 +1,25 @@
+@keyframes skeleton-animation {
+  0% {
+    background-color: var(--color-1);
+  }
+  50% {
+    background-color: var(--color-2);
+  }
+  100% {
+    background-color: var(--color-1);
+  }
+}
+
+.skeleton {
+  --color-1: var(--black-a5);
+  --color-2: var(--black-a4);
+
+  :global(:root.dark) & {
+    --color-1: var(--white-a3);
+    --color-2: var(--white-a2);
+  }
+
+  animation: skeleton-animation var(--duration-subtle) ease infinite;
+
+  border-radius: var(--space-2);
+}
diff --git a/packages/website-ue/src/components/Skeleton/index.tsx b/packages/website-ue/src/components/Skeleton/index.tsx
index b8ec3e726..3106c6f36 100644
--- a/packages/website-ue/src/components/Skeleton/index.tsx
+++ b/packages/website-ue/src/components/Skeleton/index.tsx
@@ -1,9 +1,9 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
-import "./index.css";
+import styles from "./index.module.css";
 
 export interface SkeletonProps extends ComponentProps<"div"> {}
 
 export function Skeleton({ className, ...props }: SkeletonProps) {
-  return <div className={classNames("skeleton", className)} {...props} />;
+  return <div className={classNames(styles.skeleton, className)} {...props} />;
 }
diff --git a/packages/website-ue/src/components/TankCard/index.module.css b/packages/website-ue/src/components/TankCard/index.module.css
index 9c3555cb4..dbb82ae54 100644
--- a/packages/website-ue/src/components/TankCard/index.module.css
+++ b/packages/website-ue/src/components/TankCard/index.module.css
@@ -35,13 +35,23 @@
   }
 
   .name {
-    white-space: nowrap;
-    overflow: hidden;
+    display: flex;
     width: 100%;
-    text-overflow: ellipsis;
 
-    .skeleton {
-      width: 100%;
+    justify-content: center;
+
+    .text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &[data-skeleton="true"] {
+        width: 100%;
+      }
+
+      .skeleton {
+        width: 100%;
+      }
     }
   }
 }
diff --git a/packages/website-ue/src/components/TankCard/index.tsx b/packages/website-ue/src/components/TankCard/index.tsx
index 9241bc4f7..1aadb4ae0 100644
--- a/packages/website-ue/src/components/TankCard/index.tsx
+++ b/packages/website-ue/src/components/TankCard/index.tsx
@@ -50,10 +50,12 @@ export function TankCard(props: PropsWithSkeleton<TankCardProps>) {
         {props.skeleton && <Skeleton className={styles.icon} />}
       </div>
 
-      <Text className={styles.name}>
-        {props.skeleton && <InlineSkeleton className={styles.skeleton} />}
-        {!props.skeleton && gameStrings![tank!.tank!.name!.value]}
-      </Text>
+      <div className={styles.name}>
+        <Text className={styles.text} data-skeleton={props.skeleton}>
+          {props.skeleton && <InlineSkeleton className={styles.skeleton} />}
+          {!props.skeleton && gameStrings![tank!.tank!.name!.value]}
+        </Text>
+      </div>
     </LinkI18n>
   );
 }