fix: light mode skeleton style

packages/website-ue/src/components/Skeleton/index.css

@@ -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);
-}

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);
+}

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} />;
 }

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%;
+      }
     }
   }
 }

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>
   );
 }