Skip to content

Varkopat/refactor/661/refactor clancard component to match newest figma design #674

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rutjake merged 14 commits into from
Aug 29, 2026
Merged

Varkopat/refactor/661/refactor clancard component to match newest figma design #674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f0b1d2f
Refactor ClanCard component styles to align with latest Figma design …
Varkopat Jun 30, 2026
a08cc37
Continued refactoring ClanCard component styles to align with latest …
Varkopat Jul 1, 2026
c29ac70
Refactor code structure for improved readability and maintainability
Varkopat Jul 2, 2026
8c5f8ac
Refactor ClanCard component to enhance mobile and desktop views, alig…
Varkopat Jul 6, 2026
8f73a51
Refactor ClanCard styles to align with Figma design, adjusting font s…
Varkopat Jul 7, 2026
030d572
Refactor ClanCard mobile layout and styles to enhance responsiveness …
Varkopat Jul 8, 2026
0b52314
Refactor ClanCard component styles and layout to enhance responsivene…
Varkopat Jul 17, 2026
1091e7c
Refactor ClanCard component to update image assets and enhance mobile…
Varkopat Jul 21, 2026
2c53f77
fix(ui): improve MobileCard ClanCard responsiveness and layout alignment
Varkopat Jul 23, 2026
b3074c1
refactor(ClanCard): update media queries and improve image container …
Varkopat Jul 23, 2026
ef5e628
- I added a direct .MobileCard.ClanCard > .TextContainer > .Title1 ru…
Varkopat Jul 24, 2026
149112c
refactor(ClanCard): enhance mobile and desktop badge rendering, add l…
Varkopat Aug 11, 2026
e77439f
refactor(ClanCard): add open clan badge icon and update translations …
Varkopat Aug 14, 2026
d2b56f6
refactor(ClanCard): update badge rendering logic and update the font …
Varkopat Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions frontend-next-migration/src/entities/Clan/config/clanLanguageIcons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { StaticImageData } from 'next/image';
import iconFlagFi from '@/shared/assets/images/clanLogos/CommonFlagFinland.png';

const CLAN_LANGUAGE_ICON_MAP: Record<string, StaticImageData> = {
fi: iconFlagFi,
};

export const getClanLanguageIcon = (language: string | undefined): StaticImageData | undefined => {
if (!language) {
return undefined;
}

return CLAN_LANGUAGE_ICON_MAP[language.toLowerCase()];
};
151 changes: 112 additions & 39 deletions frontend-next-migration/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import { useClientTranslation } from '@/shared/i18n';
import { ModularCard, ModularCardTheme } from '@/shared/ui/v2/ModularCard';
import { MobileCard, MobileCardLink, MobileCardTheme } from '@/shared/ui/v2/MobileCard';
import { getClanLabelIcon } from '@/entities/Clan/config/clanLabelIcons';
import { getClanLanguageIcon } from '@/entities/Clan/config/clanLanguageIcons';
import cardCls from '@/shared/ui/v2/ModularCard/ui/ModularCard.module.scss';
import mobileCardCls from '@/shared/ui/v2/MobileCard/ui/MobileCard.module.scss';
import { PageTitle } from '@/shared/ui/PageTitle';
import { SearchBar } from '../ClanLayout/ClanLayout';
import cls from './ClanAllSubPage.module.scss';
import clanLogo from '@/shared/assets/images/clanLogos/CommonSelectHeart 1.png';
import iconLeaderboard from '@/shared/assets/images/clanLogos/LeaderboardWinFirstPlace.png';
import iconFlagFi from '@/shared/assets/images/clanLogos/CommonFlagFinland 1.png';
import starGray from '@/shared/assets/images/clanLogos/TopPanelMatchmakingPorvarit.png';
import clanLogo from '@/shared/assets/images/clanLogos/ClanLogo_Placeholder.png';
import iconLockClosed from '@/shared/assets/images/clanLogos/lock.png';
import iconClanAgeTeenages from '@/shared/assets/images/clanLogos/ClanAgeTeenages.png';

type ClanItem = GetClansResponse['data']['Clan'][number];

Expand Down Expand Up @@ -118,34 +118,82 @@ const ClansViewMobile = ({ clans }: MobileProps) => {
className={cls.MobileCardItem}
>
<MobileCard theme={MobileCardTheme.CLAN}>
<MobileCard.Texts
title1={clan.name}
title2={''}
/>

<MobileCard.Image
alt={`${clan.name} logo`}
src={clanLogo}
backgroundColor="transparent"
/>

<MobileCard.Texts
title1={''}
title2={''}
title1={clan.name}
title2={``}
>
<div className={mobileCardCls.ClanInfoRow}>
<Image
src={starGray}
alt="score"
className={mobileCardCls.ClanInfoIcon}
/>
<span className={mobileCardCls.ClanInfoValue}>
{clan.gameCoins}
<span className={mobileCardCls.ClanInfoBadges}>
{clan.isOpen === false && (
<span title={t('badge_closed')}>
<Image
src={iconLockClosed}
alt={t('badge_closed')}
className={mobileCardCls.ClanInfoIcon}
/>
</span>
)}

{clan.isOpen === false && (
<>
{clan.ageRange === 'Adults' && (
<span title={t('badge_adults')}>
<Image
src={iconClanAgeTeenages}
alt={t('badge_adults')}
className={mobileCardCls.ClanInfoIcon}
/>
</span>
)}

{(() => {
const languageIcon = getClanLanguageIcon(
clan.language,
);
return languageIcon ? (
<span
title={`${t('language')}: ${clan.language}`}
>
<Image
src={languageIcon}
alt={clan.language ?? t('language')}
className={
mobileCardCls.ClanInfoIcon
}
/>
</span>
) : null;
})()}
</>
)}
</span>
</div>

<div className={mobileCardCls.ClanMembersRow}>
{t('members')} {clan.playerCount} / 30
<div className={mobileCardCls.ClanInfoStats}>
<p className={mobileCardCls.ClanInfoValue}>
{t('members')} {clan.playerCount} / 30
</p>
</div>

<div className={mobileCardCls.ClanLabels}>
{clan.labels?.slice(0, 3).map((label) => (
<span
className={mobileCardCls.ClanLabel}
key={label}
title={label}
>
<Image
src={getClanLabelIcon(label)}
alt={label}
/>
</span>
))}
</div>
</MobileCard.Texts>
</MobileCard>
Expand Down Expand Up @@ -184,25 +232,51 @@ const ClansViewDesktop = ({ clans, onClickToClan }: DesktopProps) => {
<ModularCard.Texts.Body>
<div className={cardCls.ClanInfoRow}>
<span className={cardCls.ClanInfoBadges}>
<Image
src={iconLeaderboard}
alt="leaderboard"
className={cardCls.ClanInfoIcon}
/>
<Image
src={iconFlagFi}
alt="flag"
className={cardCls.ClanInfoIcon}
/>
</span>
{clan.isOpen === false && (
<span title={t('badge_closed')}>
<Image
src={iconLockClosed}
alt={t('badge_closed')}
className={cardCls.ClanInfoIcon}
/>
</span>
)}

<span className={cardCls.ClanInfoStats}>
<span className={cardCls.ClanInfoValue}>
{t('members')} {clan.playerCount} / 30
</span>
<span className={cardCls.ClanInfoValue}>
{clan.gameCoins}
</span>
{clan.isOpen === false && (
<>
{clan.ageRange === 'Adults' && (
<span title={t('badge_adults')}>
<Image
src={iconClanAgeTeenages}
alt={t('badge_adults')}
className={cardCls.ClanInfoIcon}
/>
</span>
)}

{(() => {
const languageIcon = getClanLanguageIcon(
clan.language,
);
return languageIcon ? (
<span
title={`${t('language')}: ${clan.language}`}
>
<Image
src={languageIcon}
alt={clan.language ?? t('language')}
className={cardCls.ClanInfoIcon}
/>
</span>
) : null;
})()}
</>
)}
</span>
</div>
<div className={cardCls.ClanInfoStats}>
<span className={cardCls.ClanInfoValue}>
{t('members')} {clan.playerCount} / 30
</span>
</div>
<div className={cardCls.ClanLabels}>
Expand All @@ -218,7 +292,6 @@ const ClansViewDesktop = ({ clans, onClickToClan }: DesktopProps) => {
alt={label}
className={cardCls.ClanLabelIcon}
/>
<span className={cardCls.ClanLabelText}>{label}</span>
</span>
))}
</div>
Expand Down
Binary file added frontend-next-migration/src/shared/assets/images/clanLogos/ClanAgeTeenages.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tend-next-migration/src/shared/assets/images/clanLogos/ClanLogo_Placeholder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 .../images/clanLogos/CommonFlagFinland 1.png → ...ts/images/clanLogos/CommonFlagFinland.png
View file
Open in desktop
File renamed without changes
Binary file added frontend-next-migration/src/shared/assets/images/clanLogos/CommonLockOpen.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 5 additions & 2 deletions frontend-next-migration/src/shared/i18n/locales/en/clan.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
"search_btn_text": "Search",
"no_result": "No clans found for your search.",
"rating": "Rating",
"position": "Position:",
"clan": "Clan",
"clans": "Clans",
"clans": "Clans",
"clans_title": "All Clans",
"coins": "Coins",
"tag": "Tag",
Expand Down Expand Up @@ -53,5 +54,7 @@
"losses": "Losses",
"leaderboard-title": "Leaderboard",
"browse-clans": "Browse Clans",
"store-title": "Store"
"store-title": "Store",
"badge_adults": "Adults only",
"badge_closed": "Closed clan"
}
5 changes: 4 additions & 1 deletion frontend-next-migration/src/shared/i18n/locales/fi/clan.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"clan_deleted": "Klaani poistettiin onnistuneesti",
"clan_delete_cancelled": "Poisto peruutettiin",
"rating": "Rating",
"position": "Sijoitus:",
"clan": "Klaani",
"clans": "Klaanit",
"clans_title": "Kaikki Klaanit",
Expand Down Expand Up @@ -53,5 +54,7 @@
"losses": "Tappiot",
"leaderboard-title": "Tulostaulukko",
"browse-clans": "Selaa Klaaneja",
"store-title": "Kauppa"
"store-title": "Kauppa",
"badge_adults": "Vain aikuisille",
"badge_closed": "Suljettu klaani"
}
Loading