Refactor clan card UI to match latest Figma design - #673
Closed
Varkopat wants to merge 55 commits into
Closed
Conversation
… header now uses the new glass component)
…d-component Eemeli/enhancement/618/cloud card component
… layout and updated block composition
…oaders-FIXED Liisa/enhancement/623 skeleton loaders fixed
…uals, updated spacing and refined responsive styling
…/Join-Us-Page-Update
…and link styling, fixed image positioning, and corrected external link icon behavior across breakpoints
…styles - Implemented FooterContact component for displaying contact information with email links and a "Work With Us" section. - Created FooterInfo component to present additional information with links to relevant pages. - Developed FooterLinks component to manage navigation links in the footer. - Added corresponding SCSS styles for each component to ensure proper layout and design.
…dimensions and styles
…nt-family adjustments and background color changes
…, including logo integration and layout adjustments
What changed: - Added wide-screen variables at min-width: 1920px. - Footer inner layout can now expand from 120rem up to 160rem on very wide screens. - Column padding scales from the normal 4rem up to 8rem. - Logo scales beyond the standard 275 x 270 proportion on 4k, capped at 24rem x 23.5rem. - Social bar height, social icon size, icon gap, footer text blocks, and copyright size also scale gently for 4k. - Kept standard desktop sizing intact at normal desktop widths. Other changes: - Removed max-width from mobile. - Fixed fonts. Fonts are now loading hopefully. - Removed unnecessary properties and opacities. Tests passed: - Focused footer tests - npm.cmd run lint passed with only existing unrelated warnings.
…y with Figma designs
…ct global variables.
…site-footer-to-match-figma-designs Varkopat/enhancement/644/update site footer to match figma designs
…ont-page-to-figma-V2 Casimir/enhancement/648 match front page to figma v2
…age-Update Eemeli/enhancement/641/join us page update
…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.
Varkopat
requested review from
Rutjake,
Skoivumaki,
leolabdev and
patinen
as code owners
July 27, 2026 14:26
5 tasks
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔧 Changes Made
♻️ Refactoring / Cleanup