style: made profile page prettier and fixed blog page scrollbar

CSSLab · Nov 6, 2024 · 74c7555 · 74c7555
1 parent 19ec812
commit 74c7555
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/src/components/ProfileColumn/ProfileColumn.tsx b/src/components/ProfileColumn/ProfileColumn.tsx
@@ -18,35 +18,35 @@ 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 md:w-[500px]">
+    <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>
         <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 items-center justify-between">
           <div className="flex flex-col items-center justify-center gap-1 text-human-1">
-            <p>Rating</p>
-            <b className="text-4xl">{data.rating}</b>
+            <p className="text-sm xl:text-base">Rating</p>
+            <b className="text-3xl xl:text-4xl">{data.rating}</b>
           </div>
           <div className="flex flex-col items-center justify-center gap-1">
-            <p>Highest</p>
-            <b className="text-4xl">{data.highest}</b>
+            <p className="text-sm xl:text-base">Highest</p>
+            <b className="text-3xl xl:text-4xl">{data.highest}</b>
           </div>
           <div className="flex flex-col items-center justify-center gap-1">
-            <p>Games</p>
-            <b className="text-4xl">{data.games}</b>
+            <p className="text-sm xl:text-base">Games</p>
+            <b className="text-3xl xl:text-4xl">{data.games}</b>
           </div>
           <div className="flex flex-col items-center justify-center gap-1">
-            <p>Hours</p>
-            <b className="text-4xl">{data.hours}</b>
+            <p className="text-sm xl:text-base">Hours</p>
+            <b className="text-3xl xl:text-4xl">{data.hours}</b>
           </div>
         </div>
         <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" />
-              <p className="text-sm">
+              <p className="text-xs xl:text-sm">
                 Wins: {wins}{' '}
                 <span className="text-secondary">
                   ({Math.round((wins * 100) / data.games) || 0}%)
@@ -55,8 +55,8 @@ 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-blue-500" />
-                <p className="text-sm">
+                <div className="h-4 w-4 border border-black bg-yellow-500" />
+                <p className="text-xs xl:text-sm">
                   Draws: {draws}{' '}
                   <span className="text-secondary">
                     ({Math.round((draws * 100) / data.games) || 0}%)
@@ -68,7 +68,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" />
-              <p className="text-sm">
+              <p className="text-xs xl:text-sm">
                 Losses: {losses}{' '}
                 <span className="text-secondary">
                   ({Math.round((losses * 100) / data.games) || 0}%)
@@ -79,13 +79,14 @@ 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 bg-green-500"
+                className="h-full border-r-2 border-black bg-green-500"
                 style={{ width: `${(wins / data.games) * 100}%` }}
               />
             )}
+
             {draws > 0 && (
               <div
-                className="h-full bg-blue-500"
+                className="h-full border-r-2 border-black bg-yellow-500"
                 style={{ width: `${(draws / data.games) * 100}%` }}
               />
             )}

diff --git a/src/components/UserProfile/UserProfile.tsx b/src/components/UserProfile/UserProfile.tsx
@@ -82,7 +82,7 @@ const UserProfile: React.FC = () => {
       </div>
       <div className="flex flex-col gap-6 md:flex-row">
         <GameList />
-        <div className="flex h-full w-full flex-row flex-wrap justify-start gap-6">
+        <div className="grid h-full w-full grid-cols-2 gap-6">
           <ProfileColumn
             icon={<RegularPlayIcon />}
             name="REGULAR"

diff --git a/src/pages/blog/[id].tsx b/src/pages/blog/[id].tsx
@@ -63,7 +63,7 @@ const BlogPost = ({ post }: BlogPostProps) => {
             )}
             {post.journal && <p>{post.journal}</p>}
           </div>
-          <div className="mt-1 flex items-center gap-2 overflow-x-scroll">
+          <div className="no-scrollbar mt-1 flex items-center gap-2 overflow-x-scroll">
             {post.tags.map((tag, index) => (
               <div
                 key={index}