Skip to content
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

Feat/update general styles #46

Merged
merged 9 commits into from
Dec 2, 2024
Merged

Feat/update general styles #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
85c7fc0
feat: replace logo
arazaki Dec 2, 2024
afd2e43
build: add font
arazaki Dec 2, 2024
173bc24
style: adjust global css - add font, change background
arazaki Dec 2, 2024
9feac3d
chore: lint
arazaki Dec 2, 2024
9cb2dac
feat: add button and replace logo
arazaki Dec 2, 2024
64f4018
feat: add subheading and adjust styles
arazaki Dec 2, 2024
4a4e514
style: adjust general styles according to figma
arazaki Dec 2, 2024
0c76f91
style: removed mb and adjust font size
arazaki Dec 2, 2024
c891403
style: adjust font-size
arazaki Dec 2, 2024
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
Binary file added public/fonts/Bootzy TM.ttf
View file
Open in desktop
Binary file not shown.
25 changes: 7 additions & 18 deletions public/logo.svg
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.
19 changes: 19 additions & 0 deletions public/logo_old.svg
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.
16 changes: 7 additions & 9 deletions src/components/ContentContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { FC, ReactNode } from 'react';
import styles from './ContentContainer.module.css';
import { FC, ReactNode } from "react"
import styles from "./ContentContainer.module.css"

interface Props {
children: React.ReactNode;
children: React.ReactNode
}

export const ContentContainer: FC<{ children: ReactNode }> = ({ children }) => {
return (
<div className={`flex-1 container mx-auto ${styles.container}`}>
<div className="h-full w-full flex flex-col justify-center">
{children}
</div>
<div className={`container mx-auto flex-1 ${styles.container}`}>
<div className="flex w-full flex-col justify-center">{children}</div>
</div>
);
};
)
}
27 changes: 11 additions & 16 deletions src/components/leaderboard/LeaderboardMedals.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
flex-direction: column;
min-width: 8rem;
max-width: 10rem;
min-height: 155px;
align-items: center;
gap: 0.75rem;
transition: all 0.3s ease;
Expand All @@ -27,6 +28,7 @@
.firstPlace {
/* transform: scale(1.15); */
margin: 0 1rem;
min-height: 198px;
}

.imageWrapper {
Expand Down Expand Up @@ -58,7 +60,6 @@
position: absolute;
top: 1px;
left: -4px;
width: 2rem;
display: flex;
width: 30px;
height: 30px;
Expand All @@ -69,10 +70,6 @@
z-index: 1;
font-family: var(--font-family-base);
border-radius: 100px;
font-family: 700;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}

.firstPlacemedal {
Expand All @@ -82,14 +79,17 @@

.gold {
background-color: #ffa600;
@apply text-xl font-bold text-white;
}

.silver {
background-color: #858585;
@apply text-base font-bold text-white;
}

.bronze {
background-color: #d56b00;
@apply text-base font-bold text-white;
}

.userInfo {
Expand All @@ -102,17 +102,13 @@
}

.name {
color: #fff;
text-align: center;
font-family: var(--font-family-base);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@apply text-xl font-semibold text-white;
}

.scoreWrapper {
Expand Down Expand Up @@ -146,6 +142,11 @@
padding: 1rem;
}

.medalHolder {
max-width: 100px;
min-width: 100px;
}

.firstPlace {
/* transform: scale(1.1); */
margin: 0 0.5rem;
Expand All @@ -164,12 +165,6 @@
.medal {
width: 30px;
height: 30px;
font-size: 20px;
font-weight: 700;
}

.name {
font-size: 0.75rem;
}

.score {
Expand Down
18 changes: 9 additions & 9 deletions src/components/leaderboard/LeaderboardMedals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const SkeletonMedal: FC<{ position: number }> = ({ position }) => {
<div
className={`${styles.imageWrapper} ${
isFirstPlace ? styles.firstPlaceImage : ""
}`}
} inline-flex`}
>
<div
className={`${styles.medal} ${getMedalClass(position)} ${
Expand All @@ -39,10 +39,10 @@ const SkeletonMedal: FC<{ position: number }> = ({ position }) => {
{displayPosition}
</div>
<div
className={`${styles.skeletonCircle}`}
className={`${styles.skeletonCircle} flex-grow`}
style={{
width: size,
height: size,
maxWidth: size,
maxHeight: size,
}}
/>
</div>
Expand Down Expand Up @@ -124,7 +124,7 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
<span className={styles.score}>
{sortedUsers[1]?.score
? sortedUsers[1].score.toFixed(2)
: "0.00"}
: "-"}
</span>
</div>
</div>
Expand Down Expand Up @@ -165,8 +165,8 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
<div
className={styles.placeholderImage}
style={{
width: "80px",
height: "80px",
maxWidth: "80px",
maxHeight: "80px",
}}
/>
)}
Expand All @@ -184,7 +184,7 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
<span className={`${styles.score} ${styles.firstPlaceScore}`}>
{sortedUsers?.[0]?.score
? sortedUsers?.[0].score.toFixed(2)
: "0.00"}
: "-"}
</span>
</div>
</div>
Expand Down Expand Up @@ -239,7 +239,7 @@ const LeaderboardMedals: FC<{ users: TUser[]; isLoading: boolean }> = ({
<span className={styles.score}>
{sortedUsers?.[2]?.score
? sortedUsers?.[2].score.toFixed(2)
: "0.00"}
: "-"}
</span>
</div>
</div>
Expand Down
Loading