fix(home): make some minor css adjustments (#2848)

RetroAchievements · Nov 21, 2024 · a8aa87e · a8aa87e
1 parent 7c40398
commit a8aa87e
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 76 deletions.
diff --git a/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.test.tsx b/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@/test';
-import { createHomePageProps } from '@/test/factories';
+import { createHomePageProps, createZiggyProps } from '@/test/factories';
 
 import { CurrentlyOnline } from './CurrentlyOnline';
 
@@ -15,15 +15,19 @@ describe('Component: CurrentlyOnline', () => {
 
   it('renders without crashing', () => {
     // ARRANGE
-    const { container } = render<App.Http.Data.HomePageProps>(<CurrentlyOnline />);
+    const { container } = render<App.Http.Data.HomePageProps>(<CurrentlyOnline />, {
+      pageProps: { ziggy: createZiggyProps() },
+    });
 
     // ASSERT
     expect(container).toBeTruthy();
   });
 
   it('displays an accessible heading', () => {
     // ARRANGE
-    render<App.Http.Data.HomePageProps>(<CurrentlyOnline />);
+    render<App.Http.Data.HomePageProps>(<CurrentlyOnline />, {
+      pageProps: { ziggy: createZiggyProps() },
+    });
 
     // ASSERT
     expect(screen.getByRole('heading', { name: /currently online/i })).toBeVisible();
@@ -32,14 +36,17 @@ describe('Component: CurrentlyOnline', () => {
   it('given only one user is online, shows a singular user count message', () => {
     // ARRANGE
     render<App.Http.Data.HomePageProps>(<CurrentlyOnline />, {
-      pageProps: createHomePageProps({
-        currentlyOnline: {
-          logEntries,
-          allTimeHighDate: null,
-          allTimeHighPlayers: 1000,
-          numCurrentPlayers: 1,
-        },
-      }),
+      pageProps: {
+        ziggy: createZiggyProps(),
+        ...createHomePageProps({
+          currentlyOnline: {
+            logEntries,
+            allTimeHighDate: null,
+            allTimeHighPlayers: 1000,
+            numCurrentPlayers: 1,
+          },
+        }),
+      },
     });
 
     // ASSERT
@@ -49,14 +56,17 @@ describe('Component: CurrentlyOnline', () => {
   it('given many users are online, shows a plural user count message', () => {
     // ARRANGE
     render<App.Http.Data.HomePageProps>(<CurrentlyOnline />, {
-      pageProps: createHomePageProps({
-        currentlyOnline: {
-          logEntries,
-          allTimeHighDate: null,
-          allTimeHighPlayers: 1000,
-          numCurrentPlayers: 100,
-        },
-      }),
+      pageProps: {
+        ziggy: createZiggyProps({ device: 'mobile' }),
+        ...createHomePageProps({
+          currentlyOnline: {
+            logEntries,
+            allTimeHighDate: null,
+            allTimeHighPlayers: 1000,
+            numCurrentPlayers: 100,
+          },
+        }),
+      },
     });
 
     // ASSERT
@@ -68,14 +78,17 @@ describe('Component: CurrentlyOnline', () => {
     const allTimeHighDate = new Date('2024-08-07').toISOString();
 
     render<App.Http.Data.HomePageProps>(<CurrentlyOnline />, {
-      pageProps: createHomePageProps({
-        currentlyOnline: {
-          logEntries,
-          allTimeHighDate,
-          allTimeHighPlayers: 4744,
-          numCurrentPlayers: 100,
-        },
-      }),
+      pageProps: {
+        ziggy: createZiggyProps(),
+        ...createHomePageProps({
+          currentlyOnline: {
+            logEntries,
+            allTimeHighDate,
+            allTimeHighPlayers: 4744,
+            numCurrentPlayers: 100,
+          },
+        }),
+      },
     });
 
     // ASSERT
@@ -89,14 +102,17 @@ describe('Component: CurrentlyOnline', () => {
   it('does not crash if the all-time high date is missing', () => {
     // ARRANGE
     render<App.Http.Data.HomePageProps>(<CurrentlyOnline />, {
-      pageProps: createHomePageProps({
-        currentlyOnline: {
-          logEntries,
-          allTimeHighDate: null, // !!
-          allTimeHighPlayers: 4744,
-          numCurrentPlayers: 100,
-        },
-      }),
+      pageProps: {
+        ziggy: createZiggyProps(),
+        ...createHomePageProps({
+          currentlyOnline: {
+            logEntries,
+            allTimeHighDate: null, // !!
+            allTimeHighPlayers: 4744,
+            numCurrentPlayers: 100,
+          },
+        }),
+      },
     });
 
     // ASSERT

diff --git a/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.tsx b/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.tsx
@@ -19,11 +19,11 @@ import { useCurrentlyOnlineChart } from './useCurrentlyOnlineChart';
 dayjs.extend(utc);
 
 export const CurrentlyOnline: FC = () => {
-  const { currentlyOnline } = usePageProps<App.Http.Data.HomePageProps>();
+  const { currentlyOnline, ziggy } = usePageProps<App.Http.Data.HomePageProps>();
 
   const { t } = useTranslation();
 
-  const { chartData, yAxisTicks, formatXAxisTick, formatYAxisTick } =
+  const { chartData, yAxisTicks, formatTooltipLabel, formatXAxisTick, formatYAxisTick } =
     useCurrentlyOnlineChart(currentlyOnline);
 
   const chartConfig = {
@@ -37,7 +37,7 @@ export const CurrentlyOnline: FC = () => {
     <div className="flex flex-col gap-2.5">
       <HomeHeading>{t('Currently Online')}</HomeHeading>
 
-      <div className="flex w-full items-center justify-between">
+      <div className="flex w-full flex-col justify-between sm:flex-row">
         <div className="flex items-center gap-2">
           <div className="h-2.5 w-2.5 rounded-full bg-green-500" />
           <p>
@@ -70,7 +70,7 @@ export const CurrentlyOnline: FC = () => {
               tickLine={false}
               axisLine={false}
               tickMargin={12}
-              interval={7}
+              interval={ziggy.device === 'mobile' ? 12 : 7}
               tickFormatter={formatXAxisTick}
             />
             <YAxis tickFormatter={formatYAxisTick} tickMargin={8} ticks={yAxisTicks} />
@@ -79,7 +79,7 @@ export const CurrentlyOnline: FC = () => {
               content={
                 <BaseChartTooltipContent
                   className="min-w-[164px]"
-                  labelFormatter={(isoDate: string) => dayjs.utc(isoDate).format('llll')}
+                  labelFormatter={formatTooltipLabel}
                 />
               }
             />

diff --git a/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.test.ts b/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.test.ts
@@ -27,7 +27,7 @@ describe('Hook: useCurrentlyOnlineChart', () => {
     expect(result).toBeTruthy();
   });
 
-  it('can properly format x-axis ticks', () => {
+  it('can properly format tooltip labels', () => {
     // ARRANGE
     const { result } = renderHook(() =>
       useCurrentlyOnlineChart({
@@ -38,10 +38,26 @@ describe('Hook: useCurrentlyOnlineChart', () => {
       }),
     );
 
-    const current = result.current as ReturnType<typeof useCurrentlyOnlineChart>;
+    // ACT
+    const formatted = result.current.formatTooltipLabel(new Date('2023-05-07').toISOString());
+
+    // ASSERT
+    expect(formatted).toEqual('Sun, May 7, 2023 12:00 AM');
+  });
+
+  it('can properly format x-axis ticks', () => {
+    // ARRANGE
+    const { result } = renderHook(() =>
+      useCurrentlyOnlineChart({
+        allTimeHighDate: new Date('2024-08-07').toISOString(),
+        allTimeHighPlayers: 4744,
+        logEntries: [],
+        numCurrentPlayers: 0,
+      }),
+    );
 
     // ACT
-    const formatted = current.formatXAxisTick(dayjs.utc('2024-08-07').toISOString());
+    const formatted = result.current.formatXAxisTick(dayjs.utc('2024-08-07').toISOString());
 
     // ASSERT
     expect(formatted).toEqual('12:00 AM');
@@ -58,10 +74,8 @@ describe('Hook: useCurrentlyOnlineChart', () => {
       }),
     );
 
-    const current = result.current as ReturnType<typeof useCurrentlyOnlineChart>;
-
     // ACT
-    const formatted = current.formatYAxisTick(1000);
+    const formatted = result.current.formatYAxisTick(1000);
 
     // ASSERT
     expect(formatted).toEqual('1,000');
@@ -81,11 +95,9 @@ describe('Hook: useCurrentlyOnlineChart', () => {
       }),
     );
 
-    const current = result.current as ReturnType<typeof useCurrentlyOnlineChart>;
-
     // ASSERT
-    const firstEntryTime = dayjs(current.chartData[0].time);
-    const lastEntryTime = dayjs(current.chartData[current.chartData.length - 1].time);
+    const firstEntryTime = dayjs(result.current.chartData[0].time);
+    const lastEntryTime = dayjs(result.current.chartData[result.current.chartData.length - 1].time);
 
     expect(firstEntryTime.format('HH:mm')).toBe('10:30');
     expect(lastEntryTime.format('HH:mm')).toBe('10:00');
@@ -105,11 +117,9 @@ describe('Hook: useCurrentlyOnlineChart', () => {
       }),
     );
 
-    const current = result.current as ReturnType<typeof useCurrentlyOnlineChart>;
-
     // ASSERT
-    const firstEntryTime = dayjs(current.chartData[0].time);
-    const lastEntryTime = dayjs(current.chartData[current.chartData.length - 1].time);
+    const firstEntryTime = dayjs(result.current.chartData[0].time);
+    const lastEntryTime = dayjs(result.current.chartData[result.current.chartData.length - 1].time);
 
     expect(firstEntryTime.format('HH:mm')).toBe('11:00');
     expect(lastEntryTime.format('HH:mm')).toBe('10:30');

diff --git a/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.ts b/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.ts
@@ -24,8 +24,9 @@ export function useCurrentlyOnlineChart(currentlyOnline: App.Data.CurrentlyOnlin
 
   const formatXAxisTick = (value: string) => formatDate(dayjs(value), 'LT');
   const formatYAxisTick = (value: number) => formatNumber(value);
+  const formatTooltipLabel = (isoDate: string) => dayjs.utc(isoDate).format('llll');
 
-  return { chartData, yAxisTicks, formatXAxisTick, formatYAxisTick };
+  return { chartData, yAxisTicks, formatTooltipLabel, formatXAxisTick, formatYAxisTick };
 }
 
 function buildChartData(logEntries: number[]): Array<{ time: string; playersOnline: number }> {

diff --git a/resources/js/features/home/components/+root/HomeRoot.test.tsx b/resources/js/features/home/components/+root/HomeRoot.test.tsx
@@ -1,6 +1,6 @@
 import { createAuthenticatedUser } from '@/common/models';
 import { render, screen } from '@/test';
-import { createHomePageProps } from '@/test/factories';
+import { createHomePageProps, createZiggyProps } from '@/test/factories';
 
 import { HomeRoot } from './HomeRoot';
 
@@ -10,15 +10,19 @@ console.warn = vi.fn();
 describe('Component: HomeRoot', () => {
   it('renders without crashing', () => {
     // ARRANGE
-    const { container } = render<App.Http.Data.HomePageProps>(<HomeRoot />);
+    const { container } = render<App.Http.Data.HomePageProps>(<HomeRoot />, {
+      pageProps: { ziggy: createZiggyProps() },
+    });
 
     // ASSERT
     expect(container).toBeTruthy();
   });
 
   it('displays several section components', () => {
     // ARRANGE
-    render<App.Http.Data.HomePageProps>(<HomeRoot />, { pageProps: createHomePageProps() });
+    render<App.Http.Data.HomePageProps>(<HomeRoot />, {
+      pageProps: { ...createHomePageProps(), ziggy: createZiggyProps() },
+    });
 
     // ASSERT
     expect(screen.getByRole('heading', { name: /news/i })).toBeVisible();
@@ -31,7 +35,9 @@ describe('Component: HomeRoot', () => {
 
   it('given the user is not logged in, shows a welcome section', () => {
     // ARRANGE
-    render<App.Http.Data.HomePageProps>(<HomeRoot />, { pageProps: { auth: null } });
+    render<App.Http.Data.HomePageProps>(<HomeRoot />, {
+      pageProps: { auth: null, ziggy: createZiggyProps() },
+    });
 
     // ASSERT
     expect(screen.getByRole('heading', { name: /welcome/i })).toBeVisible();
@@ -40,7 +46,7 @@ describe('Component: HomeRoot', () => {
   it('given the user is logged in, does not show a welcome section', () => {
     // ARRANGE
     render<App.Http.Data.HomePageProps>(<HomeRoot />, {
-      pageProps: { auth: { user: createAuthenticatedUser() } },
+      pageProps: { auth: { user: createAuthenticatedUser() }, ziggy: createZiggyProps() },
     });
 
     // ASSERT

diff --git a/resources/js/features/home/components/+root/NewSetsList/NewSetsList.tsx b/resources/js/features/home/components/+root/NewSetsList/NewSetsList.tsx
@@ -14,10 +14,9 @@ import { EmptyState } from '@/common/components/EmptyState';
 import { MultilineGameAvatar } from '@/common/components/MultilineGameAvatar';
 import { UserAvatar } from '@/common/components/UserAvatar';
 import { usePageProps } from '@/common/hooks/usePageProps';
-import type { AvatarSize } from '@/common/models';
 import { ClaimSetType } from '@/common/utils/generatedAppConstants';
 
-import { ClaimMobileBlock } from '../../ClaimMobileBlock/ClaimMobileBlock';
+import { ClaimMobileBlock } from '../../ClaimMobileBlock';
 import { HomeHeading } from '../../HomeHeading';
 import { SeeMoreLink } from '../../SeeMoreLink';
 
@@ -42,7 +41,11 @@ export const NewSetsList: FC = () => {
         <>
           <div className="flex flex-col gap-y-1 sm:hidden">
             {completedClaims.map((claim) => (
-              <ClaimMobileBlock key={`mobile-claim-${claim.id}`} claim={claim} />
+              <ClaimMobileBlock
+                key={`mobile-claim-${claim.id}`}
+                claim={claim}
+                variant="completed"
+              />
             ))}
           </div>
 
@@ -64,7 +67,7 @@ export const NewSetsList: FC = () => {
                   </BaseTableCell>
 
                   <BaseTableCell>
-                    <UserAvatar {...claim.users[0]} size={36 as AvatarSize} />
+                    <UserAvatar {...claim.users[0]} size={32} />
                   </BaseTableCell>
                   <BaseTableCell>
                     {claim.setType === ClaimSetType.NewSet && t('New')}

diff --git a/resources/js/features/home/components/+root/SetsInProgressList/SetsInProgressList.tsx b/resources/js/features/home/components/+root/SetsInProgressList/SetsInProgressList.tsx
@@ -14,10 +14,9 @@ import { EmptyState } from '@/common/components/EmptyState';
 import { MultilineGameAvatar } from '@/common/components/MultilineGameAvatar';
 import { UserAvatar } from '@/common/components/UserAvatar';
 import { usePageProps } from '@/common/hooks/usePageProps';
-import type { AvatarSize } from '@/common/models';
 import { ClaimSetType } from '@/common/utils/generatedAppConstants';
 
-import { ClaimMobileBlock } from '../../ClaimMobileBlock/ClaimMobileBlock';
+import { ClaimMobileBlock } from '../../ClaimMobileBlock';
 import { HomeHeading } from '../../HomeHeading';
 import { SeeMoreLink } from '../../SeeMoreLink';
 
@@ -40,7 +39,7 @@ export const SetsInProgressList: FC = () => {
         <>
           <div className="flex flex-col gap-y-1 sm:hidden">
             {newClaims.map((claim) => (
-              <ClaimMobileBlock key={`mobile-claim-${claim.id}`} claim={claim} />
+              <ClaimMobileBlock key={`mobile-claim-${claim.id}`} claim={claim} variant="new" />
             ))}
           </div>
 
@@ -62,7 +61,7 @@ export const SetsInProgressList: FC = () => {
                   </BaseTableCell>
 
                   <BaseTableCell>
-                    <UserAvatar {...claim.users[0]} size={36 as AvatarSize} />
+                    <UserAvatar {...claim.users[0]} size={32} />
                   </BaseTableCell>
                   <BaseTableCell>
                     {claim.setType === ClaimSetType.NewSet && t('New')}

diff --git a/resources/js/features/home/components/+sidebar/RecentGameAwards/RecentGameAwards.tsx b/resources/js/features/home/components/+sidebar/RecentGameAwards/RecentGameAwards.tsx
@@ -72,7 +72,7 @@ const GameAwardCard: FC<GameAwardCardProps> = ({ game, user }) => {
       <div className="flex flex-col gap-1">
         <div className="-mt-0.5 flex flex-col">
           <span className="text-xs">
-            <GameAvatar {...game} showImage={false} />
+            <GameAvatar {...game} showImage={false} gameTitleClassName="line-clamp-1" />
           </span>
 
           <SystemChip {...system} className="bg-zinc-800" />