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