Skip to content

Commit

Permalink
style: modify profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinjosethomas
kevinjosethomas committed Nov 20, 2024
1 parent 45fa9d2 commit 934fb2b
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 18 deletions.
20 changes: 10 additions & 10 deletions src/components/ProfileColumn/ProfileColumn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
const losses = data.losses ?? data.games - data.wins - (data?.draws || 0)

return (
<div className="flex w-full flex-col">
<div className="flex flex-row items-center justify-start gap-4 bg-background-2 px-6 py-5 md:px-8">
<div className="h-[28px] w-[28px] md:h-[38px] md:w-[38px]">{icon}</div>
<div className="flex w-full flex-col overflow-hidden rounded border border-white border-opacity-10">
<div className="flex flex-row items-center justify-start gap-4 bg-background-1 px-6 py-4 md:px-6">
<div className="h-[28px] w-[28px] md:h-[28px] md:w-[28px]">{icon}</div>
<p className="text-2xl font-bold md:text-3xl">{name}</p>
</div>
<div className="flex flex-col gap-6 bg-background-1 px-6 py-5 md:px-8">
<div className="flex flex-col gap-6 bg-background-1/40 px-6 py-5 md:px-8">
<div className="flex items-center justify-between">
<div className="flex flex-col items-center justify-center gap-1 text-human-1">
<p className="text-sm xl:text-base">Rating</p>
Expand All @@ -45,7 +45,7 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
<div className="flex flex-col items-center gap-2">
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-1">
<div className="h-4 w-4 border border-black bg-green-500" />
<div className="h-4 w-4 border border-black bg-green-500/70" />
<p className="text-xs xl:text-sm">
Wins: {wins}{' '}
<span className="text-secondary">
Expand All @@ -55,7 +55,7 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
</div>
{draws > 0 ? (
<div className="flex items-center gap-1">
<div className="h-4 w-4 border border-black bg-yellow-500" />
<div className="h-4 w-4 border border-black bg-yellow-500/70" />
<p className="text-xs xl:text-sm">
Draws: {draws}{' '}
<span className="text-secondary">
Expand All @@ -67,7 +67,7 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
<></>
)}
<div className="flex items-center gap-1">
<div className="h-4 w-4 border border-black bg-red-500" />
<div className="h-4 w-4 border border-black bg-red-500/70" />
<p className="text-xs xl:text-sm">
Losses: {losses}{' '}
<span className="text-secondary">
Expand All @@ -79,20 +79,20 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
<div className="flex h-10 w-full border-2 border-black">
{wins > 0 && (
<div
className="h-full border-r-2 border-black bg-green-500"
className="h-full border-r-2 border-black bg-green-500/70"
style={{ width: `${(wins / data.games) * 100}%` }}
/>
)}

{draws > 0 && (
<div
className="h-full border-r-2 border-black bg-yellow-500"
className="h-full border-r-2 border-black bg-yellow-500/70"
style={{ width: `${(draws / data.games) * 100}%` }}
/>
)}
{losses > 0 && (
<div
className="h-full bg-red-500"
className="h-full bg-red-500/70"
style={{ width: `${(losses / data.games) * 100}%` }}
/>
)}
Expand Down
6 changes: 3 additions & 3 deletions src/components/UserProfile/GameList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { motion } from 'framer-motion'
import { AuthContext } from 'src/contexts'
import React, { useState, useEffect, useContext } from 'react'

import { AnalysisWebGame } from 'src/types'
import { getLichessGames, getAnalysisGameList } from 'src/api'
import { AnalysisLichessGame, AnalysisWebGame } from 'src/types'

export default function GameList() {
const { user } = useContext(AuthContext)
Expand Down Expand Up @@ -97,7 +97,7 @@ export default function GameList() {
setSelected={setSelected}
/>
</div>
<div className="red-scrollbar flex max-h-[60vh] flex-col overflow-y-scroll">
<div className="red-scrollbar flex max-h-64 flex-col overflow-y-scroll md:max-h-[60vh]">
{(selected === 'play'
? playGames
: selected === 'hand'
Expand All @@ -108,7 +108,7 @@ export default function GameList() {
).map((game, index) => (
<a
key={index}
href={`/analysis/${game.id}/lichess`}
href={`/analysis/${game.id}/${selected}`}
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`}
>
<div className="flex h-full w-10 items-center justify-center bg-background-1 py-1 group-hover:bg-white/5">
Expand Down
10 changes: 5 additions & 5 deletions src/components/UserProfile/UserProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const UserProfile: React.FC = () => {
<div className="grid h-full w-full grid-cols-2 gap-6">
<ProfileColumn
icon={<RegularPlayIcon />}
name="REGULAR"
name="Regular"
data={{
rating: stats.regularRating,
highest: stats.regularMax,
Expand All @@ -97,7 +97,7 @@ const UserProfile: React.FC = () => {
/>
<ProfileColumn
icon={<HandIcon />}
name="HAND"
name="Hand"
data={{
rating: stats.handRating,
highest: stats.handMax,
Expand All @@ -109,7 +109,7 @@ const UserProfile: React.FC = () => {
/>
<ProfileColumn
icon={<BrainIcon />}
name="BRAIN"
name="Brain"
data={{
rating: stats.brainRating,
highest: stats.brainMax,
Expand All @@ -121,7 +121,7 @@ const UserProfile: React.FC = () => {
/>
<ProfileColumn
icon={<TrainIcon />}
name="TRAIN"
name="Train"
data={{
rating: stats.trainRating,
highest: stats.trainMax,
Expand All @@ -132,7 +132,7 @@ const UserProfile: React.FC = () => {
/>
<ProfileColumn
icon={<TuringIcon />}
name="BOT/NOT"
name="Bot / Not"
data={{
rating: stats.botNotRating,
highest: stats.botNotMax,
Expand Down

0 comments on commit 934fb2b

Please sign in to comment.