diff --git a/packages/website-ue/src/components/TankCard/index.module.css b/packages/website-ue/src/components/TankCard/index.module.css index 7b2be21fa..164e03e2a 100644 --- a/packages/website-ue/src/components/TankCard/index.module.css +++ b/packages/website-ue/src/components/TankCard/index.module.css @@ -23,12 +23,18 @@ } .icon { - width: 13rem; - height: 8rem; + width: 11rem; + height: 7rem; position: relative; background-size: 140%; background-position: 40% center; + + .cover { + width: 100%; + height: 100%; + background: linear-gradient(transparent 75%, var(--gray-1)); + } } } diff --git a/packages/website-ue/src/components/TankCard/index.tsx b/packages/website-ue/src/components/TankCard/index.tsx index 9b49c054a..cadf68bc5 100644 --- a/packages/website-ue/src/components/TankCard/index.tsx +++ b/packages/website-ue/src/components/TankCard/index.tsx @@ -1,16 +1,24 @@ import { api } from "../../core/api/dynamic"; import { useAwait } from "../../hooks/useAwait"; import { useGameStrings } from "../../hooks/useGameStrings"; +import { useLocale } from "../../hooks/useLocale"; import type { PopularTank } from "../../protos/popular_tanks"; +import { LinkI18n } from "../LinkI18n"; import { Text } from "../Text"; import styles from "./index.module.css"; export function TankCard({ id }: PopularTank) { const tank = useAwait(() => api.tank(id), `tank-${id}`); const gameStrings = useGameStrings("TankEntity"); + const locale = useLocale(); return ( -
+
+ > +
+
{gameStrings[tank.tank!.name!.value]} -
+
); }