Varkopat/refactor/661/refactor clancard component to match newest figma design - #674
Conversation
…Figma design specifications
…ning with latest design specifications and improving layout for clan information display
…izes and media queries for improved responsiveness
…and align with Figma design, improving information display and visual consistency. Updated MobileCard.module.scss so mobile clan cards now: - allow ClanInfoBadges to wrap and use full width - keep badge icons smaller and better spaced - show ClanInfoStats in a flexible column instead of a cramped block - let ClanInfoValue wrap cleanly on small screens - render ClanLabels in a responsive row with smaller, pill-style chips Validation: Checked the updated stylesheet for errors: none found.
…ss and align with Figma design, improving visual consistency and information display.
… styles for improved layout and responsiveness
- Fix ClanCard layout flow and height constraints across mobile and tablet viewports - Constrain image container max-height to stop clan logos from overlapping titles - Apply primary color accent to clan titles with ellipsis text-overflow truncation - Restructure stats and badge rows to stack vertically on narrow screens
…styles for better responsiveness
…le so the title uses var(--primary-color) reliably. Validation: checked the diff and selector location. - Refactored media queries in MobileCard ClanCard. - Polished the UI so it better matches Figma designs.
|
"I don't know if this is an already known issue, but for some reason the clans page doesn't load on the build server. On dev server it works fine." |
It works now, thanks for the tip! |
There was a problem hiding this comment.
Visually everything looks good, but there are some functional issues.
It seems that you completely replaced the enums logic, that determined what badge the clan card was given in response.
You should only give a clan card the "only adults" badge when clan has ageRange set to Adults. Same goes for if the clan is isOpen: false it should render the lock badge.
From the issue: "Update the clanLabel, status icons, and tags inside the card to match the exact placement in the Figma design." this can be confusing, but we are only talking about the placement of badges, not when and if they should be rendered in that place.
Todo:
- Fix badge rendering to be based off real backend data. Age, lock and language badges.
- Change title font size from
var(--font-sw-xxxl)tovar(--font-sw-xxl)(you did as in Figma, but in reality the font got clamped way too high) - Add tooltips to badges, so user knows what they mean on
hover(remember i18n) - Remove the star badge from the card. (I think its for the top 1 clan, but since the endpoint on the page doesnt return position data, we cant implement it yet.)
…anguage icons, and update styles for improved responsiveness
Codecov Report❌ Patch coverage is
🚀 New features to boost your workflow:
|
Skoivumaki
left a comment
Skoivumaki
left a comment
There was a problem hiding this comment.
Almost perfect! The font is wrong for line "Members... etc" and remove position text since we are not using it. Also don't render the red lock at all. If clan is open, it doesn't need any badges etc. (the current clan closed badge is good as is)
There was a problem hiding this comment.
Requested changes done. The "members" text font was still wrong, but this might be a Next/browser issue for me with development runtime. I expect you checked the build version to look correct? @Varkopat
Yes, I have checked the build version to look correct. |
Rutjake
left a comment
Rutjake
left a comment
There was a problem hiding this comment.
Nice work! Looks good to me.
3 participants
📄 Pull Request Overview
Closes #661
🔧 Changes Made
Refactored the clan card UI to better align with the latest Figma design, including updated title styling, metadata positioning, and improved card spacing for a more polished presentation.
Improved responsiveness and layout consistency across mobile and modular card variants by adjusting image container sizing, media queries, and related styles for better behavior across breakpoints.
Refactoring / Cleanup
Simplified and consolidated clan card-related styling in the shared mobile and modular card components to make the implementation easier to maintain and more consistent.
✅ Checklist Before Submission
console.log()or other debugging statements are left.📝 Additional Information
I don't know if this is an already known issue, but for some reason the clans page doesn't load on the build server. On dev server it works fine.
EDIT 29.7.2026: Like Sakari pointed out in his comment, I only needed to change the build server to use port 5173. Now it works on build server too.