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

Open
Varkopat wants to merge 11 commits into
base: dev
Choose a base branch
from
Open

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
11 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
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
93 changes: 65 additions & 28 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 @@ -14,10 +14,11 @@ 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 clanLogo from '@/shared/assets/images/clanLogos/ClanLogo_Placeholder.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 iconFlagFi from '@/shared/assets/images/clanLogos/CommonFlagFinland.png';
import iconCommonLockOpen from '@/shared/assets/images/clanLogos/CommonLockOpen.png';
import iconClanAgeTeenages from '@/shared/assets/images/clanLogos/ClanAgeTeenages.png';

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

Expand Down Expand Up @@ -118,34 +119,62 @@ 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}>
<Image
src={iconLeaderboard}
alt="leaderboard"
className={mobileCardCls.ClanInfoIcon}
/>
<Image
src={iconCommonLockOpen}
alt="lock"
className={mobileCardCls.ClanInfoIcon}
/>
<Image
src={iconClanAgeTeenages}
alt="teenage"
className={mobileCardCls.ClanInfoIcon}
/>
<Image
src={iconFlagFi}
alt="flag"
className={mobileCardCls.ClanInfoIcon}
/>
</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>
<p className={mobileCardCls.ClanInfoValue}>
{t('position')} {clan.positionLeaderboard ?? '-'}
</p>
</div>

<div className={mobileCardCls.ClanLabels}>
{clan.labels?.slice(0, 3).map((label) => (
<span
className={mobileCardCls.ClanLabel}
key={label}
>
<Image
src={getClanLabelIcon(label)}
alt={label}
/>
</span>
))}
</div>
</MobileCard.Texts>
</MobileCard>
Expand Down Expand Up @@ -189,20 +218,29 @@ const ClansViewDesktop = ({ clans, onClickToClan }: DesktopProps) => {
alt="leaderboard"
className={cardCls.ClanInfoIcon}
/>
<Image
src={iconCommonLockOpen}
alt="lock"
className={cardCls.ClanInfoIcon}
/>
<Image
src={iconClanAgeTeenages}
alt="teenage"
className={cardCls.ClanInfoIcon}
/>
<Image
src={iconFlagFi}
alt="flag"
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>
</div>
<div className={cardCls.ClanInfoStats}>
<span className={cardCls.ClanInfoValue}>
{t('members')} {clan.playerCount} / 30
</span>
<span className={cardCls.ClanInfoValue}>
{t('position')} {clan.positionLeaderboard ?? '-'}
</span>
</div>
<div className={cardCls.ClanLabels}>
Expand All @@ -218,7 +256,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.
3 changes: 2 additions & 1 deletion 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
1 change: 1 addition & 0 deletions 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
Loading
Loading