fix(trading): competitions font tweaks (#5828)

apps/trading/client-pages/competitions/competitions-home.tsx

@@ -180,11 +180,13 @@ export const CompetitionsHome = () => {
         {/** Docs: https://docs.vega.xyz/mainnet/tutorials/proposals/asset-transfer-proposal */}
       </p>
 
+      <div className="mb-12 flex">
         {gamesLoading ? (
           <Loader size="small" />
         ) : (
           <GamesContainer data={gamesData} currentEpoch={currentEpoch} />
         )}
+      </div>
 
       {/** The teams ranking */}
       <div className="mb-1 flex flex-row items-baseline gap-3 justify-between">
@@ -203,11 +205,13 @@ export const CompetitionsHome = () => {
         )}
       </p>
 
+      <div className="flex">
         {teamsLoading ? (
           <Loader size="small" />
         ) : (
           <CompetitionsLeaderboard data={take(teamsData, 10)} />
         )}
+      </div>
     </ErrorBoundary>
   );
 };

apps/trading/components/competitions/competitions-leaderboard.tsx

@@ -1,5 +1,4 @@
 import { Link } from 'react-router-dom';
-import { Splash } from '@vegaprotocol/ui-toolkit';
 import { formatNumber } from '@vegaprotocol/utils';
 import { type useTeams } from '../../lib/hooks/use-teams';
 import { useT } from '../../lib/use-t';
@@ -18,7 +17,11 @@ export const CompetitionsLeaderboard = ({
   const num = (n?: number | string) => (!n ? '-' : formatNumber(n, 0));
 
   if (!data || data.length === 0) {
-    return <Splash>{t('Could not find any teams')}</Splash>;
+    return (
+      <p className="text-sm">
+        {t('Currently no active teams on the network.')}
+      </p>
+    );
   }
 
   return (

apps/trading/components/competitions/games-container.tsx

@@ -13,14 +13,14 @@ export const GamesContainer = ({
 
   if (!data || data.length === 0) {
     return (
-      <p className="mb-6 text-muted">
+      <p className="text-sm">
-        {t('There are currently no games available.')}
+        {t('Currently no active games on the network.')}
       </p>
     );
   }
 
   return (
-    <div className="mb-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {data.map((game, i) => {
         // TODO: Remove `kind` prop from ActiveRewardCard
         const { transfer } = game;

libs/i18n/src/locales/en/trading.json

@@ -468,5 +468,7 @@
   "Want to compete but think the best team size is one? This is the option for you.": "Want to compete but think the best team size is one? This is the option for you.",
   "Browse existing public teams to find your perfect match.": "Browse existing public teams to find your perfect match.",
   "See all the live games on the cards below. Every on-chain game is community funded and designed. <0>Find out how to create one</0>.": "See all the live games on the cards below. Every on-chain game is community funded and designed. <0>Find out how to create one</0>.",
-  "Teams can earn rewards if they meet the goals set in the on-chain trading competitions. Track your earned rewards here, and see which teams are top of the leaderboard this month.": "Teams can earn rewards if they meet the goals set in the on-chain trading competitions. Track your earned rewards here, and see which teams are top of the leaderboard this month."
+  "Teams can earn rewards if they meet the goals set in the on-chain trading competitions. Track your earned rewards here, and see which teams are top of the leaderboard this month.": "Teams can earn rewards if they meet the goals set in the on-chain trading competitions. Track your earned rewards here, and see which teams are top of the leaderboard this month.",
+  "Currently no active games on the network.": "Currently no active games on the network.",
+  "Currently no active teams on the network.": "Currently no active teams on the network."
 }