From 24092f84b5a75de4a761bad23737c9ecb3402375 Mon Sep 17 00:00:00 2001 From: Pratibha Vishwakarma Date: Mon, 22 Dec 2025 19:11:05 -0500 Subject: [PATCH 1/2] Update leaderboard modal styles and avatar asset --- .../Modals/LeaderboardModal.scss | 492 ++++++++++++++---- .../Modals/LeaderboardModal.tsx | 142 +++-- .../student/Leaderboard_User_avatar_all.png | Bin 0 -> 3967 bytes 3 files changed, 482 insertions(+), 152 deletions(-) create mode 100644 react-ystemandchess/src/images/student/Leaderboard_User_avatar_all.png diff --git a/react-ystemandchess/src/Pages/NewStudentProfile/Modals/LeaderboardModal.scss b/react-ystemandchess/src/Pages/NewStudentProfile/Modals/LeaderboardModal.scss index dcbab263..a174df2d 100644 --- a/react-ystemandchess/src/Pages/NewStudentProfile/Modals/LeaderboardModal.scss +++ b/react-ystemandchess/src/Pages/NewStudentProfile/Modals/LeaderboardModal.scss @@ -3,6 +3,7 @@ $green: #82c341; $yellow: #e9df6e; +$header-yellow: #EAD94C; $panel-tint: #e5f3d2; $row: #bad33b; $row-alt: #c4da58; @@ -10,125 +11,280 @@ $text: #151515; $ink: #231f20; /* modal/page gutters */ -$gutter-left: 24px; -$gutter-right: 32px; +$gutter-left: 50px; +$gutter-right: 50px; /* table-only gutters (tight) */ -$table-gutter-left: 10px; -$table-gutter-right: 10px; +$table-gutter-left: 20px; +$table-gutter-right: 20px; -.lb-headbar { display: none !important; } +.lb-headbar { + display: none !important; +} /* ===== Modal shell ===== */ .modal-overlay { - position: fixed; inset: 0; - display: flex; justify-content: center; align-items: center; - background: rgba(0,0,0,.25); z-index: 999; + position: fixed; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + background: rgba(0, 0, 0, 0.25); + z-index: 999; } + .modal-content { width: min(920px, 92vw); max-height: 80vh; - overflow-y: auto; - overflow-x: hidden; /* stop page-level x scroll */ + overflow-y: auto; /* outer popup scroll */ + overflow-x: hidden; background: $panel-tint; border-radius: 16px; padding: 24px 16px 12px; position: relative; - box-shadow: 0 8px 30px rgba(0,0,0,.25); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); } + .close-button { - position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; - display: inline-flex; align-items: center; justify-content: center; - font-size: 1.75rem; background: none; border: none; color: red; font-weight: 800; cursor: pointer; z-index: 2; + position: absolute; + top: 8px; + right: 8px; + width: 40px; + height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1.75rem; + background: none; + border: none; + color: red; + font-weight: 800; + cursor: pointer; + z-index: 2; +} + +/* ===== Header (top of modal) ===== */ +.lb-header { + position: relative; + height: 70px; + margin: 0 0 12px; + padding-right: 64px; + margin-left: $gutter-left; + margin-right: $gutter-right; +} + +.lb-heading { + height: 64px; + display: flex; + align-items: stretch; + gap: 0; +} + +.lb-heading > * { + margin: 0; } -/* ===== Header (smaller, flush, no overlap) ===== */ -.lb-header { position: relative; height: 64px; margin: 0 0 12px; padding-right: 64px; margin-left: $gutter-left; margin-right: $gutter-right; } -.lb-heading { height: 64px; display: flex; align-items: stretch; gap: 0; } -.lb-heading > * { margin: 0; } .lb-backpill { - flex: 0 0 64px; width: 64px; height: 64px; border: 0; border-radius: 10px 0 0 10px; - background: $yellow; display: flex; align-items: center; justify-content: center; - font-size: 14px; font-weight: 700; color: $text; line-height: 1.1; + flex: 0 0 70px; + width: 70px; + height: 70px; + border: 0; + border-radius: 10px 0 0 10px; + background: $yellow; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 700; + color: $text; + line-height: 1.1; } + .lb-title { - flex: 1 1 auto; height: 64px; margin-left: -1px; border-radius: 0 10px 10px 0; - background: $green; color: $text; display: flex; align-items: center; justify-content: center; - padding: 0 16px; font-family: "Lato", system-ui, sans-serif; font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); + flex: 1 1 auto; + height: 70px; + margin-left: -1px; + border-radius: 0 10px 10px 0; + background: $green; + color: $text; + display: flex; + align-items: center; + justify-content: center; + padding: 0 16px; + font-family: "Lato", system-ui, sans-serif; + font-weight: 800; + font-size: clamp(20px, 2.2vw, 26px); +} + +.lb-crown-img { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + width: 36px; } -.lb-crown-img { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 36px; } /* ===== Filters ===== */ -.lb-filters, .lb-table-wrap, .lb-loadmore { width: 100%; } +.lb-filters, +.lb-table-wrap, +.lb-loadmore { + width: 100%; +} + .lb-filters { - margin-left: $gutter-left; margin-right: $gutter-right; - display: flex; justify-content: center; align-items: center; flex-wrap: wrap; - gap: 16px; padding: 16px 0; margin-top: 8px; margin-bottom: 12px; + margin-left: -10px; + margin-right: 10px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 16px; + padding: 16px 0; + margin-top: 8px; + margin-bottom: 12px; + select { - appearance: none; width: 200px; min-height: 40px; padding: 8px 36px 8px 10px; - font: 16px/1.25 "Roboto", system-ui, sans-serif; color: $ink; - background: #fff; border: 2px solid $ink; border-radius: 6px; + appearance: none; + width: 200px; + min-height: 40px; + padding: 8px 36px 8px 10px; + font: 16px/1.25 "Roboto", system-ui, sans-serif; + color: $ink; + background: #fff; + border: 2px solid $ink; + border-radius: 6px; background-image: url("data:image/svg+xml;utf8,"); - background-repeat: no-repeat; background-size: 14px; background-position: right 10px center; + background-repeat: no-repeat; + background-size: 14px; + background-position: right 10px center; } } -/* ===== Table wrapper — NO width calc, boxed, tight gutters ===== */ +/* ===== Table wrapper ===== */ .lb-table-wrap { - /* column sizing */ --col-rank: clamp(54px, 7.5vw, 80px); --col-score: clamp(82px, 11vw, 104px); --cols-available: calc(100% - var(--col-rank) - var(--col-score)); - --col-name: calc(var(--cols-available) * 0.20); /* tighter Name */ - --col-school:calc(var(--cols-available) * 0.80); + --col-name: calc(var(--cols-available) * 0.20); + --col-school: calc(var(--cols-available) * 0.80); box-sizing: border-box; - width: 100%; /* inherit container width */ + width: 100%; max-width: calc(100% - (#{$table-gutter-left} + #{$table-gutter-right})); - margin-left: $table-gutter-left; /* tight left gutter */ - margin-right: $table-gutter-right;/* tight right gutter */ + margin-left: $table-gutter-left; + margin-right: $table-gutter-right; - background: $row; border-radius: 24px; padding: 12px; - box-shadow: inset 0 2px 6px rgba(0,0,0,.08); + background: $row; + border-radius: 24px; + padding: 12px 12px 28px; + box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08); - overflow-y: auto; - overflow-x: hidden; /* kill x-scroll */ - max-height: calc(80vh - 64px - 40px - 70px); - /* remove extra right-side reserve that created a visual gap */ - scrollbar-gutter: auto; + overflow: visible; /* no inner scroll */ } /* ===== Table ===== */ .lb-table { - width: 100%; max-width: 100%; - border-collapse: separate; border-spacing: 0; table-layout: fixed; - background: transparent; color: $text; + width: 100%; + max-width: 100%; + border-collapse: separate; + border-spacing: 0; + table-layout: fixed; + background: transparent; + color: $text; } -.lb-table colgroup .col-rank { width: var(--col-rank); } -.lb-table colgroup .col-name { width: var(--col-name); min-width: 96px; } -.lb-table colgroup .col-school { width: var(--col-school); } -.lb-table colgroup .col-score { width: var(--col-score); } -/* sticky header */ +.lb-table colgroup .col-rank { + width: var(--col-rank); +} +.lb-table colgroup .col-name { + width: var(--col-name); + min-width: 96px; +} +.lb-table colgroup .col-school { + width: var(--col-school); +} +.lb-table colgroup .col-score { + width: var(--col-score); +} + + +.lb-table thead { + position: static; + top: auto; + z-index: auto; +} + +/* rounded capsule row like screenshot */ +.lb-table thead tr { + overflow: hidden; + border-radius: 50px; /* adjust radius to taste */ +} + +/* header cells */ .lb-table thead th { - position: sticky; top: 0; z-index: 3; - background: #ead94c; color: #231f20; - font-family: "Lato", system-ui, sans-serif; font-size: 17px; font-weight: 800; - padding: 8px 10px; text-align: left; box-shadow: 0 2px 0 #cbbf42; background-clip: padding-box; + background: $header-yellow; + color: $text; + font-family: "Lato", system-ui, sans-serif; + font-size: 17px; + font-weight: 800; + padding: 12px 10px; + text-align: left; + border: none; /* remove borders on header */ + box-shadow: none; /* remove extra line under header */ +} + +/* rounded ends */ +.lb-table thead th:first-child { + border-top-left-radius: 22px; + border-bottom-left-radius: 22px; + text-align: center; +} +.lb-table thead th:last-child { + border-top-right-radius: 22px; + border-bottom-right-radius: 22px; + text-align: center; +} + +/* center text for first and last columns; others default left */ +.lb-table thead th:nth-child(1), +.lb-table thead th:nth-child(4) { + text-align: center; } -.lb-table thead th:nth-child(1), .lb-table thead th:nth-child(4) { text-align: center; } /* sort button */ -.lb-sort-btn { background: none; border: 0; padding: 0; margin: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: inherit; font: inherit; } -.lb-sort-icon { width: 16px; height: 10px; display: block; transition: transform .18s ease; } -.lb-sort-icon.asc { transform: rotate(180deg); } -.lb-sort-icon path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } - -/* rows */ -.lb-table tbody tr { background: $row; } -.lb-table tbody tr:nth-child(even) { background: $row-alt; } +.lb-sort-btn { + background: none; + border: 0; + padding: 0; + margin: 0; + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; + color: inherit; + font: inherit; +} + +.lb-sort-icon { + width: 16px; + height: 10px; + transition: transform 0.18s ease; +} + +.lb-sort-icon.asc { + transform: rotate(180deg); +} + +/* ===== Rows ===== */ +.lb-table tbody tr { + background: $row; +} +.lb-table tbody tr:nth-child(even) { + background: $row-alt; +} + .lb-table tbody td { - padding: 8px 10px; + padding: 10px 10px; vertical-align: middle; font-family: "Poppins", system-ui, sans-serif; font-size: 15px; @@ -137,66 +293,178 @@ $table-gutter-right: 10px; color: $text; border-top: 1px solid #91a725; } -.lb-table tbody tr:first-child td { border-top: none; } -/* nowrap Rank/Score; wrap Name/School to avoid overflow */ +/* remove the first border line directly under header */ +.lb-table tbody tr:first-child td { + border-top: none; +} + +/* Rank & Score nowrap */ .lb-table tbody td:nth-child(1), -.lb-table tbody td:nth-child(4) { text-align: center; white-space: nowrap; } +.lb-table tbody td:nth-child(4) { + text-align: center; + white-space: nowrap; +} + +/* Name & School wrap */ .lb-table tbody td:nth-child(2), -.lb-table tbody td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-width: 0; } - -/* visuals */ -.lb-user { display: flex; align-items: center; gap: 10px; min-width: 0; } -.lb-rank-img { display: inline-block; width: 26px; height: 26px; background: no-repeat center/contain; } -.lb-rank-img.rank-1 { width: 28px; height: 28px; } -.lb-avatar { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #222; box-shadow: inset 0 0 0 3px #ffe680; } -.lb-avatar.blue{ box-shadow: inset 0 0 0 3px #60a5fa; } -.lb-avatar.red { box-shadow: inset 0 0 0 3px #ef4444; } -.lb-avatar.teal{ box-shadow: inset 0 0 0 3px #14b8a6; } -.lb-avatar.gold{ box-shadow: inset 0 0 0 3px #facc15; } - -/* emphasis */ +.lb-table tbody td:nth-child(3) { + white-space: normal; + overflow-wrap: anywhere; + word-break: break-word; + min-width: 0; +} + +/* avatar row layout */ +.lb-user { + display: flex; + align-items: center; + gap: 10px; +} + +/* avatar image */ +.lb-avatar-img { + width: 28px; + height: 28px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; +} + +/* Rank Badges */ +.lb-rank-img { + display: inline-block; + width: 26px; + height: 26px; + background: no-repeat center / contain; +} + +/* Top-3 Bold */ .lb-table tbody tr[data-rank="1"] td, .lb-table tbody tr[data-rank="2"] td, -.lb-table tbody tr[data-rank="3"] td { font-weight: 600; } +.lb-table tbody tr[data-rank="3"] td { + font-weight: 600; +} + +/* ensure inner spans inherit bold */ +.lb-table tbody tr[data-rank="1"] td *, +.lb-table tbody tr[data-rank="2"] td *, +.lb-table tbody tr[data-rank="3"] td * { + font-weight: inherit; +} + +/* ===== Load More ===== */ +.lb-loadmore { + display: flex; + align-items: center; + justify-content: center; + position: relative; + margin: 28px 0 16px 0; + width: 100%; +} + +.lb-loadmore::before { + content: ""; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 80%; + height: 2px; + background: $header-yellow; + z-index: 0; +} -/* load more aligned with tight table gutters */ -.lb-loadmore { display: flex; justify-content: center; margin: 12px $table-gutter-right 12px $table-gutter-left; } -.lb-load-btn { background: #f7d46a; border: none; padding: 8px 18px; border-radius: 18px; font-weight: 800; font-size: 14px; color: black; box-shadow: inset 0 2px 0 #e2b84f; cursor: pointer; } +.lb-load-btn { + position: relative; + z-index: 1; + background: $header-yellow; + border: none; + padding: 10px 90px; + border-radius: 30px; + font-weight: 700; + font-size: 16px; + color: #151515; + cursor: pointer; + transition: background 0.18s ease, transform 0.18s ease, + box-shadow 0.18s ease; +} + +.lb-load-btn:hover:not(:disabled) { + background: $header-yellow; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); +} + +.lb-load-btn:active:not(:disabled) { + background: $header-yellow; + transform: translateY(0); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); +} + +.lb-load-btn:disabled { + background: $yellow; + cursor: default; +} /* ===== Small screens ===== */ @media (max-width: 640px) { - $gl: 14px; $gr: 18px; + $gl: 14px; + $gr: 18px; - .modal-content { width: 92vw; max-height: 78vh; padding: 20px 12px 12px; } + .modal-content { + width: 92vw; + max-height: 78vh; + padding: 20px 12px 12px; + } - .lb-header { height: 56px; padding-right: 52px; margin-left: $gl; margin-right: $gr; } - .lb-heading { height: 56px; } - .lb-backpill { width: 56px; height: 56px; font-size: 13px; border-radius: 8px 0 0 8px; } - .lb-title { height: 56px; font-size: clamp(18px, 5vw, 22px); border-radius: 0 8px 8px 0; margin-left: -1px; } - .lb-crown-img { right: 14px; width: 30px; } + .lb-header { + height: 56px; + padding-right: 52px; + margin-left: $gl; + margin-right: $gr; + } - .lb-filters { margin-left: $gl; margin-right: $gr; } + .lb-heading { + height: 56px; + } + + .lb-backpill { + width: 56px; + height: 56px; + font-size: 13px; + border-radius: 8px 0 0 8px; + } + + .lb-title { + height: 56px; + font-size: clamp(18px, 5vw, 22px); + border-radius: 0 8px 8px 0; + margin-left: -1px; + } + + .lb-crown-img { + right: 14px; + width: 30px; + } + + .lb-filters { + margin-left: $gl; + margin-right: $gr; + } .lb-table-wrap { - --col-rank: clamp(48px, 12vw, 68px); - --col-score: clamp(76px, 22vw, 94px); - --cols-available: calc(100% - var(--col-rank) - var(--col-score)); - --col-name: calc(var(--cols-available) * 0.18); - --col-school:calc(var(--cols-available) * 0.82); - - width: 100%; - max-width: calc(100% - (#{$table-gutter-left} + #{$table-gutter-right})); margin-left: $table-gutter-left; margin-right: $table-gutter-right; + padding: 10px 10px 24px; + } - padding: 10px; - max-height: calc(78vh - 56px - 40px - 70px); - overflow-x: hidden; + .lb-table tbody td { + font-size: 14px; + padding: 7px 8px; } - .lb-table thead th { font-size: 15px; padding: 7px 8px; } - .lb-table tbody td { font-size: 14px; padding: 7px 8px; } - .lb-avatar { width: 24px; height: 24px; } - .lb-rank-img { width: 24px; height: 24px; } + .lb-avatar-img { + width: 26px; + height: 26px; + } } diff --git a/react-ystemandchess/src/Pages/NewStudentProfile/Modals/LeaderboardModal.tsx b/react-ystemandchess/src/Pages/NewStudentProfile/Modals/LeaderboardModal.tsx index 1c2ef837..44eb9624 100644 --- a/react-ystemandchess/src/Pages/NewStudentProfile/Modals/LeaderboardModal.tsx +++ b/react-ystemandchess/src/Pages/NewStudentProfile/Modals/LeaderboardModal.tsx @@ -1,3 +1,5 @@ +// src/Pages/NewStudentProfile/Modals/LeaderboardModal.tsx + import React, { useEffect, useMemo, useState } from "react"; import "./LeaderboardModal.scss"; import { ReactComponent as LeaderboardIcon } from "../../../images/student/leaderboard_sidebar_icon.svg"; @@ -6,6 +8,12 @@ import rank1Img from "../../../images/student/Leaderboard_rank_1.svg"; import rank2Img from "../../../images/student/Leaderboard_rank_2.svg"; import rank3Img from "../../../images/student/Leaderboard_rank_3.svg"; +// AVATAR IMAGES +import avatar1 from "../../../images/student/Leaderboard_User_avatar_1.png"; +import avatar2 from "../../../images/student/Leaderboard_User_avatar_2.png"; +import avatar3 from "../../../images/student/Leaderboard_User_avatar_3.png"; +import avatarAll from "../../../images/student/Leaderboard_User_avatar_all.png"; + type Props = { onClose: () => void }; type Row = { @@ -13,7 +21,6 @@ type Row = { name: string; school: string; score: number; - avatar?: "blue" | "red" | "teal" | "gold"; }; const LeaderboardModal: React.FC = ({ onClose }) => { @@ -22,26 +29,29 @@ const LeaderboardModal: React.FC = ({ onClose }) => { }; useEffect(() => { - const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose(); + const onKey = (e: KeyboardEvent) => { + if (e.key === "Escape") onClose(); + }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [onClose]); + // SAMPLE DATA const rows: Row[] = [ - { rank: 1, name: "princel04", school: "Jefferson Middle", score: 3882, avatar: "blue" }, - { rank: 2, name: "jesse_chess", school: "Pine View School", score: 3790, avatar: "red" }, - { rank: 3, name: "mary_rose", school: "Archimedean Middle Conservatory", score: 3780, avatar: "teal" }, - { rank: 4, name: "user_name", school: "school-name", score: 3680, avatar: "gold" }, - { rank: 5, name: "user_name", school: "school-name", score: 3480, avatar: "gold" }, - { rank: 6, name: "user_name", school: "school-name", score: 3110, avatar: "gold" }, - { rank: 7, name: "user_name", school: "school-name", score: 2950, avatar: "gold" }, - { rank: 8, name: "user_name", school: "school-name", score: 2856, avatar: "gold" }, - { rank: 9, name: "user_name", school: "school-name", score: 2712, avatar: "gold" }, - { rank: 10, name: "user_name", school: "school-name", score: 2636, avatar: "gold" }, - { rank: 11, name: "user_name", school: "school-name", score: 2632, avatar: "gold" } + { rank: 1, name: "princel04", school: "Jefferson Middle", score: 3882 }, + { rank: 2, name: "jesse_chess", school: "Pine View School", score: 3790 }, + { rank: 3, name: "mary_rose", school: "Archimedean Middle Conservatory", score: 3780 }, + { rank: 4, name: "user_name", school: "school-name", score: 3680 }, + { rank: 5, name: "user_name", school: "school-name", score: 3480 }, + { rank: 6, name: "user_name", school: "school-name", score: 3110 }, + { rank: 7, name: "user_name", school: "school-name", score: 2950 }, + { rank: 8, name: "user_name", school: "school-name", score: 2856 }, + { rank: 9, name: "user_name", school: "school-name", score: 2712 }, + { rank: 10, name: "user_name", school: "school-name", score: 2636 }, + { rank: 11, name: "user_name", school: "school-name", score: 2632 }, ]; - const [rankAsc, setRankAsc] = useState(true); // rank 1 on top by default + const [rankAsc, setRankAsc] = useState(true); const sortedRows = useMemo(() => { const copy = [...rows]; @@ -49,6 +59,17 @@ const LeaderboardModal: React.FC = ({ onClose }) => { return copy; }, [rows, rankAsc]); + // SHOW ONLY FIRST 4 ROWS INITIALLY + const [visibleCount, setVisibleCount] = useState(4); + const visibleRows = sortedRows.slice(0, visibleCount); + + const handleLoadMore = () => { + setVisibleCount(sortedRows.length); + }; + + const allLoaded = visibleCount >= sortedRows.length; + + // RANK BADGES const badgeForRank = (rank: number) => { if (rank === 1) return rank1Img; if (rank === 2) return rank2Img; @@ -56,36 +77,61 @@ const LeaderboardModal: React.FC = ({ onClose }) => { return null; }; + // AVATAR IMAGE SELECTION + const avatarForRank = (rank: number) => { + if (rank === 1) return avatar1; + if (rank === 2) return avatar2; + if (rank === 3) return avatar3; + return avatarAll; + }; + return (
-
- +
+ {/* Header */}
-

Leaderboard

+

+ Leaderboard +

{/* Filters */} -
- + + + - + + + - + + +
- {/* Table */} + {/* TABLE */}
@@ -97,46 +143,55 @@ const LeaderboardModal: React.FC = ({ onClose }) => { - - - - + + + - {sortedRows.map((r) => { + {visibleRows.map((r) => { const badge = badgeForRank(r.rank); + const avatar = avatarForRank(r.rank); + return ( + + @@ -146,9 +201,16 @@ const LeaderboardModal: React.FC = ({ onClose }) => {
+ NameSchoolScoreNameSchoolScore
{badge ? ( ) : ( r.rank )} - + {`${r.name} {r.name} {r.school} {r.score}
- {/* Load More */} + {/* LOAD MORE (OUTSIDE TABLE WRAP, POPUP SCROLLS) */}
- +
diff --git a/react-ystemandchess/src/images/student/Leaderboard_User_avatar_all.png b/react-ystemandchess/src/images/student/Leaderboard_User_avatar_all.png new file mode 100644 index 0000000000000000000000000000000000000000..c8ee4e54b3973d6b391244b8076fc02fdc3de0a2 GIT binary patch literal 3967 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 Z{{a>h(v{n;eDweT002ovPDHLkV1k3}eZ2qx literal 0 HcmV?d00001 From 3332fa93cc68ba08006bce20406f8bddc94c0b71 Mon Sep 17 00:00:00 2001 From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com> Date: Tue, 23 Dec 2025 17:41:27 +0100 Subject: [PATCH 2/2] Fix import paths for avatar images --- .../student-profile/Modals/LeaderboardModal.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/react-ystemandchess/src/features/student/student-profile/Modals/LeaderboardModal.tsx b/react-ystemandchess/src/features/student/student-profile/Modals/LeaderboardModal.tsx index 92aa88b6..4c94588c 100644 --- a/react-ystemandchess/src/features/student/student-profile/Modals/LeaderboardModal.tsx +++ b/react-ystemandchess/src/features/student/student-profile/Modals/LeaderboardModal.tsx @@ -1,5 +1,3 @@ -// src/Pages/NewStudentProfile/Modals/LeaderboardModal.tsx - import React, { useEffect, useMemo, useState } from "react"; import "./LeaderboardModal.scss"; import { ReactComponent as LeaderboardIcon } from "../../../../assets/images/student/leaderboard_sidebar_icon.svg"; @@ -9,10 +7,10 @@ import rank2Img from "../../../../assets/images/student/Leaderboard_rank_2.svg"; import rank3Img from "../../../../assets/images/student/Leaderboard_rank_3.svg"; // AVATAR IMAGES -import avatar1 from "../../../images/student/Leaderboard_User_avatar_1.png"; -import avatar2 from "../../../images/student/Leaderboard_User_avatar_2.png"; -import avatar3 from "../../../images/student/Leaderboard_User_avatar_3.png"; -import avatarAll from "../../../images/student/Leaderboard_User_avatar_all.png"; +import avatar1 from "../../../../assets/images/student/Leaderboard_User_avatar_1.png"; +import avatar2 from "../../../../assets/images/student/Leaderboard_User_avatar_2.png"; +import avatar3 from "../../../../assets/images/student/Leaderboard_User_avatar_3.png"; +import avatarAll from "../../../../assets/images/student/Leaderboard_User_avatar_all.png"; type Props = { onClose: () => void };