feat: adjusting ui

src/renderer/src/hooks/use-date.ts

@@ -72,7 +72,7 @@ export function useDate() {
       const locale = getDateLocale();
       return format(
         date,
-        locale == enUS ? "MM/dd/yyyy - HH:mm" : "dd/MM/yyyy - HH:mm"
+        locale == enUS ? "MM/dd/yyyy - HH:mm" : "dd/MM/yyyy HH:mm"
       );
     },
 

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -10,7 +10,6 @@ import {
   LockIcon,
   PersonIcon,
   TrophyIcon,
-  UnlockIcon,
 } from "@primer/octicons-react";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { gameDetailsContext } from "@renderer/context";
@@ -192,49 +191,55 @@ function AchievementList({ user, otherUser }: AchievementListProps) {
             </div>
           </div>
 
-          <div
+          {otherUserAchievement.unlocked ? (
-            title={
-              otherUserAchievement.unlockTime
-                ? formatDateTime(otherUserAchievement.unlockTime)
-                : undefined
-            }
-          >
-            {otherUserAchievement.unlockTime ? (
             <div
               style={{
                 whiteSpace: "nowrap",
                 display: "flex",
-                  flexDirection: "column",
+                flexDirection: "row",
+                gap: `${SPACING_UNIT}px`,
+                justifyContent: "center",
               }}
             >
               <CheckCircleIcon />
-                <small>{formatDateTime(otherUserAchievement.unlockTime)}</small>
+              <small>{formatDateTime(otherUserAchievement.unlockTime!)}</small>
             </div>
           ) : (
-              <div>
-                <LockIcon />
-              </div>
-            )}
-          </div>
-
             <div
-            title={
+              style={{
-              userDetails?.subscription && achievements[index].unlockTime
+                display: "flex",
-                ? formatDateTime(achievements[index].unlockTime)
+                padding: `${SPACING_UNIT}px`,
-                : undefined
+                justifyContent: "center",
-            }
+              }}
             >
-            {userDetails?.subscription && achievements[index].unlockTime ? (
-              <div style={{ whiteSpace: "nowrap" }}>
-                <UnlockIcon />
-                <p>{formatDateTime(achievements[index].unlockTime)}</p>
-              </div>
-            ) : (
-              <div>
               <LockIcon />
             </div>
           )}
+
+          {userDetails?.subscription && achievements[index].unlocked ? (
+            <div
+              style={{
+                whiteSpace: "nowrap",
+                display: "flex",
+                flexDirection: "row",
+                gap: `${SPACING_UNIT}px`,
+                justifyContent: "center",
+              }}
+            >
+              <CheckCircleIcon />
+              <small>{formatDateTime(achievements[index].unlockTime!)}</small>
             </div>
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                padding: `${SPACING_UNIT}px`,
+                justifyContent: "center",
+              }}
+            >
+              <LockIcon />
+            </div>
+          )}
         </li>
       ))}
     </ul>
@@ -371,17 +376,20 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
         </div>
 
         {otherUser && (
-          <div className={styles.panel({ stuck: isHeaderStuck })}>
+          <div className={styles.tableHeader({ stuck: isHeaderStuck })}>
             <div
               style={{
                 display: "grid",
                 gridTemplateColumns: "3fr 1fr 1fr",
-                padding: `${SPACING_UNIT}px`,
+                gap: `${SPACING_UNIT * 2}px`,
+                padding: `${SPACING_UNIT}px ${SPACING_UNIT * 3}px`,
               }}
             >
               <div></div>
-              <div>{getProfileImage(otherUser)}</div>
+              <div style={{ display: "flex", justifyContent: "center" }}>
-              <div>
+                {getProfileImage(otherUser)}
+              </div>
+              <div style={{ display: "flex", justifyContent: "center" }}>
                 {getProfileImage({
                   ...userDetails,
                   userId: userDetails.id,

src/renderer/src/pages/achievements/achievements.css.ts

@@ -4,6 +4,7 @@ import { recipe } from "@vanilla-extract/recipes";
 
 export const HERO_HEIGHT = 150;
 export const LOGO_HEIGHT = 100;
+export const LOGO_MAX_WIDTH = 200;
 
 export const wrapper = style({
   display: "flex",
@@ -59,7 +60,9 @@ export const heroContent = style({
 });
 
 export const gameLogo = style({
+  width: LOGO_MAX_WIDTH,
   height: LOGO_HEIGHT,
+  objectFit: "contain",
 });
 
 export const container = style({
@@ -71,7 +74,7 @@ export const container = style({
   zIndex: "1",
 });
 
-export const panel = recipe({
+export const tableHeader = recipe({
   base: {
     width: "100%",
     backgroundColor: vars.color.darkBackground,