Skip to content

Commit c7c872e

Browse files
kevinjosethomaskevinjosethomas
committed
feat: correctly size Profile page
1 parent 2de7b68 commit c7c872e

File tree

5 files changed

+53
-42
lines changed

5 files changed

+53
-42
lines changed

Diff for: ‎src/components/Profile/GameList.tsx

+22-11
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const GameList = () => {
7373

7474
return (
7575
<div className="flex w-full flex-col overflow-hidden rounded border border-white border-opacity-10 md:w-[600px]">
76-
<div className="flex flex-row items-center justify-start gap-4 border-b border-white border-opacity-10 bg-background-1 px-4 py-4 md:px-6">
77-
<p className="text-2xl font-bold md:text-2xl">Your Games</p>
76+
<div className="flex flex-row items-center justify-start gap-4 border-b border-white border-opacity-10 bg-background-1 px-2 py-3 md:px-4">
77+
<p className="text-xl font-bold md:text-xl">Your Games</p>
7878
</div>
7979
<div className="grid select-none grid-cols-4 border-b-2 border-white border-opacity-10">
8080
<Header
@@ -114,17 +114,28 @@ export const GameList = () => {
114114
<a
115115
key={index}
116116
href={`/analysis/${game.id}/${selected}`}
117-
className={`group flex w-full cursor-pointer items-center gap-2 pr-2 ${index % 2 === 0 ? 'bg-background-1/40' : 'bg-background-1/20'} hover:bg-background-1/80`}
117+
className={`group flex w-full cursor-pointer items-center gap-2 pr-1 ${index % 2 === 0 ? 'bg-background-1/30' : 'bg-background-1/10'} hover:bg-background-2`}
118118
>
119-
<div className="flex h-full w-10 items-center justify-center bg-background-1 py-1 group-hover:bg-white/5">
120-
<p className="text-secondary">{index + 1}</p>
119+
<div className="flex h-full w-9 items-center justify-center bg-background-2 py-1 group-hover:bg-white/5">
120+
<p className="text-sm text-secondary">{index + 1}</p>
121121
</div>
122-
<div className="flex flex-1 items-center justify-between py-1">
123-
<p className="text-secondary">{game.label}</p>
124-
<p className="text-secondary">{game.result}</p>
122+
<div className="flex flex-1 items-center justify-between overflow-hidden py-1">
123+
<p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-primary">
124+
{game.label}
125+
</p>
126+
<p className="whitespace-nowrap text-sm font-light text-secondary">
127+
{game.result}
128+
</p>
125129
</div>
126130
</a>
127131
))}
132+
<div className="flex flex-1 items-start justify-center gap-1 py-2 md:items-center">
133+
<span className="material-symbols-outlined text-sm text-secondary">
134+
chess_pawn
135+
</span>
136+
<p className="text-xs text-secondary">Play more games...</p>
137+
<p className="ml-2 text-xs text-secondary">₍^. .^₎⟆</p>
138+
</div>
128139
</div>
129140
</div>
130141
)
@@ -144,11 +155,11 @@ function Header({
144155
return (
145156
<button
146157
onClick={() => setSelected(name)}
147-
className={`relative flex items-center justify-center py-1 ${selected === name ? 'bg-human-4/20' : 'bg-background-1/60 hover:bg-background-1'} transition duration-200`}
158+
className={`relative flex items-center justify-center md:py-1 ${selected === name ? 'bg-human-4/30' : 'bg-background-1/80 hover:bg-background-2'} `}
148159
>
149-
<div className="flex items-center justify-start gap-1">
160+
<div className="flex items-center justify-start">
150161
<p
151-
className={`transition duration-200 ${selected === name ? 'text-human-2/80' : 'text-primary/80'} `}
162+
className={`text-xs transition duration-200 ${selected === name ? 'text-human-2' : 'text-primary'}`}
152163
>
153164
{label}
154165
</p>

Diff for: ‎src/components/Profile/ProfileColumn.tsx

+19-19
Original file line numberDiff line numberDiff line change
@@ -21,34 +21,34 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
2121

2222
return (
2323
<div className="flex w-full flex-col overflow-hidden rounded border border-white border-opacity-10">
24-
<div className="flex flex-row items-center justify-start gap-4 bg-background-1 px-6 py-4 md:px-6">
25-
<div className="h-[28px] w-[28px] md:h-[28px] md:w-[28px]">{icon}</div>
26-
<p className="text-2xl font-bold md:text-3xl">{name}</p>
24+
<div className="flex flex-row items-center justify-start gap-3 bg-background-1 px-4 py-3">
25+
<div className="h-[20px] w-[20px] md:h-[24px] md:w-[24px]">{icon}</div>
26+
<p className="text-xl font-bold md:text-2xl">{name}</p>
2727
</div>
28-
<div className="flex flex-col gap-6 bg-background-1/40 px-6 py-5 md:px-8">
28+
<div className="flex flex-col gap-4 bg-background-1/40 p-4">
2929
<div className="flex items-center justify-between">
3030
<div className="flex flex-col items-center justify-center gap-1 text-human-1">
3131
<p className="text-sm xl:text-base">Rating</p>
32-
<b className="text-3xl xl:text-4xl">{data.rating}</b>
32+
<b className="text-xl xl:text-2xl">{data.rating}</b>
3333
</div>
3434
<div className="flex flex-col items-center justify-center gap-1">
3535
<p className="text-sm xl:text-base">Highest</p>
36-
<b className="text-3xl xl:text-4xl">{data.highest}</b>
36+
<b className="text-xl xl:text-2xl">{data.highest}</b>
3737
</div>
3838
<div className="flex flex-col items-center justify-center gap-1">
3939
<p className="text-sm xl:text-base">Games</p>
40-
<b className="text-3xl xl:text-4xl">{data.games}</b>
40+
<b className="text-xl xl:text-2xl">{data.games}</b>
4141
</div>
42-
<div className="flex flex-col items-center justify-center gap-1">
42+
{/* <div className="flex flex-col items-center justify-center gap-1">
4343
<p className="text-sm xl:text-base">Hours</p>
44-
<b className="text-3xl xl:text-4xl">{data.hours}</b>
45-
</div>
44+
<b className="text-xl xl:text-2xl">{data.hours}</b>
45+
</div> */}
4646
</div>
4747
<div className="flex flex-col items-center gap-2">
4848
<div className="flex w-full items-center justify-between">
4949
<div className="flex items-center gap-1">
50-
<div className="h-4 w-4 border border-black bg-green-500/70" />
51-
<p className="text-xs xl:text-sm">
50+
<div className="h-3 w-3 border border-black bg-green-500/70" />
51+
<p className="text-xs">
5252
Wins: {wins}{' '}
5353
<span className="text-secondary">
5454
({Math.round((wins * 100) / data.games) || 0}%)
@@ -57,8 +57,8 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
5757
</div>
5858
{draws > 0 ? (
5959
<div className="flex items-center gap-1">
60-
<div className="h-4 w-4 border border-black bg-yellow-500/70" />
61-
<p className="text-xs xl:text-sm">
60+
<div className="h-3 w-3 border border-black bg-yellow-500/70" />
61+
<p className="text-xs">
6262
Draws: {draws}{' '}
6363
<span className="text-secondary">
6464
({Math.round((draws * 100) / data.games) || 0}%)
@@ -69,26 +69,26 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
6969
<></>
7070
)}
7171
<div className="flex items-center gap-1">
72-
<div className="h-4 w-4 border border-black bg-red-500/70" />
73-
<p className="text-xs xl:text-sm">
72+
<div className="h-3 w-3 border border-black bg-red-500/70" />
73+
<p className="text-xs">
7474
Losses: {losses}{' '}
7575
<span className="text-secondary">
7676
({Math.round((losses * 100) / data.games) || 0}%)
7777
</span>
7878
</p>
7979
</div>
8080
</div>
81-
<div className="flex h-10 w-full border-2 border-black">
81+
<div className="flex h-6 w-full border border-black">
8282
{wins > 0 && (
8383
<div
84-
className="h-full border-r-2 border-black bg-green-500/70"
84+
className="h-full border-r border-black bg-green-500/70"
8585
style={{ width: `${(wins / data.games) * 100}%` }}
8686
/>
8787
)}
8888

8989
{draws > 0 && (
9090
<div
91-
className="h-full border-r-2 border-black bg-yellow-500/70"
91+
className="h-full border-r border-black bg-yellow-500/70"
9292
style={{ width: `${(draws / data.games) * 100}%` }}
9393
/>
9494
)}

Diff for: ‎src/components/Profile/UserProfile.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ interface Props {
1818
export const UserProfile = ({ wide, stats }: Props) => {
1919
return (
2020
<div
21-
className={`grid h-full w-full grid-cols-1 gap-6 ${wide ? 'md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4' : 'lg:grid-cols-2'}`}
21+
className={`grid h-full w-full grid-cols-1 gap-3 md:gap-6 ${wide ? 'md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4' : 'lg:grid-cols-2 2xl:grid-cols-3'}`}
2222
>
2323
<ProfileColumn
2424
icon={<RegularPlayIcon />}

Diff for: ‎src/pages/profile/[name].tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ interface Props {
8282
const Profile: React.FC<Props> = (props: Props) => {
8383
const { isMobile } = useContext(WindowSizeContext)
8484

85-
const desktopLayout = () => (
85+
const desktopLayout = (
8686
<div className="flex h-full w-full flex-col items-start justify-center gap-6 px-[4%] md:py-[2%]">
8787
<div className="flex flex-row items-center gap-4">
8888
<div className="*:w-16 *:fill-primary">{UserIcon}</div>
@@ -102,10 +102,10 @@ const Profile: React.FC<Props> = (props: Props) => {
102102
</div>
103103
)
104104

105-
const mobileLayout = () => (
105+
const mobileLayout = (
106106
<div className="mt-6 flex flex-col gap-3 px-[4%]">
107-
<div className="flex flex-row items-center gap-3">
108-
<div className="*:w-12 *:fill-primary">{UserIcon}</div>
107+
<div className="flex flex-row items-center gap-2 md:gap-3">
108+
<div className="*:w-8 *:fill-primary">{UserIcon}</div>
109109
<h1 className="text-3xl font-semibold">{props.name}</h1>
110110
</div>
111111
<div className="flex w-full flex-col gap-6">
@@ -114,7 +114,7 @@ const Profile: React.FC<Props> = (props: Props) => {
114114
</div>
115115
)
116116

117-
return <>{isMobile ? mobileLayout() : desktopLayout()}</>
117+
return <>{isMobile ? mobileLayout : desktopLayout}</>
118118
}
119119

120120
export default ProfilePage

Diff for: ‎src/pages/profile/index.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const Profile: React.FC<Props> = (props: Props) => {
8181
const { user } = useContext(AuthContext)
8282
const { isMobile } = useContext(WindowSizeContext)
8383

84-
const desktopLayout = () => (
84+
const desktopLayout = (
8585
<div className="flex h-full w-full flex-col items-start justify-center gap-6 px-[4%] md:py-[2%]">
8686
<div className="flex flex-row items-center gap-4">
8787
<div className="*:w-16 *:fill-primary">{UserIcon}</div>
@@ -94,20 +94,20 @@ const Profile: React.FC<Props> = (props: Props) => {
9494
</div>
9595
)
9696

97-
const mobileLayout = () => (
97+
const mobileLayout = (
9898
<div className="mt-6 flex flex-col gap-3 px-[4%]">
99-
<div className="flex flex-row items-center gap-3">
100-
<div className="*:w-12 *:fill-primary">{UserIcon}</div>
99+
<div className="flex flex-row items-center gap-2 md:gap-3">
100+
<div className="*:w-8 *:fill-primary">{UserIcon}</div>
101101
<h1 className="text-3xl font-semibold">{user?.displayName}</h1>
102102
</div>
103-
<div className="flex w-full flex-col gap-6">
103+
<div className="flex w-full flex-col gap-4">
104104
<GameList />
105105
<UserProfile stats={props.stats} />
106106
</div>
107107
</div>
108108
)
109109

110-
return <>{isMobile ? mobileLayout() : desktopLayout()}</>
110+
return <>{isMobile ? mobileLayout : desktopLayout}</>
111111
}
112112

113113
export default ProfilePage

0 commit comments

Comments
 (0)