Layout fixes (#120)

cere-io · Sep 19, 2023 · 23351f1 · 23351f1
1 parent 3d917a7
commit 23351f1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 30 deletions.
diff --git a/packages/ui/src/components/Steps/Steps.tsx b/packages/ui/src/components/Steps/Steps.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { useMediaQuery } from '../../hooks';
+import { useGameInfo, useMediaQuery } from '../../hooks';
 import { Stack, Typography } from '../../components';
 import { ArrowRightIcon } from '../../icons';
 
@@ -42,23 +42,24 @@ interface StepsProps {
   text: string;
 }
 
-const mockData: StepsProps[] = [
-  {
-    number: '01',
-    text: 'Play Metaverse Dash Run',
-  },
-  {
-    number: '02',
-    text: 'Create a Cere wallet',
-  },
-  {
-    number: '03',
-    text: 'Claim your $CERE tokens',
-  },
-];
-
 export const Steps = (): JSX.Element => {
   const isMobile = useMediaQuery('(max-width: 600px)');
+  const { name } = useGameInfo();
+
+  const mockData: StepsProps[] = [
+    {
+      number: '01',
+      text: name || 'Play Metaverse Dash Run',
+    },
+    {
+      number: '02',
+      text: 'Create a Cere wallet',
+    },
+    {
+      number: '03',
+      text: 'Claim your $CERE tokens',
+    },
+  ];
 
   return (
     <Container direction="row" margin={[0, 0, 4, 0]} align="start">

diff --git a/packages/ui/src/widgets/Leaderboard/TopWidget.tsx b/packages/ui/src/widgets/Leaderboard/TopWidget.tsx
@@ -5,8 +5,6 @@ import { ModalWrapper, RadialGradientBackGround, Content, Typography, Button } f
 import { useConfigContext, useGameInfo, useWalletContext } from '../../hooks';
 import { RepeatIcon, TwitterIcon } from '../../icons';
 
-const DISCORD_URL = '';
-
 type TopWidgetProps = {
   amountOfDaysLeft?: number;
   onPlayAgain: () => void;
@@ -219,10 +217,6 @@ export const TopWidget = ({
     window.open(gamePortalUrl, '_blank')?.focus();
   }, [gamePortalUrl]);
 
-  const handleOpenDiscord = useCallback(() => {
-    window.open(DISCORD_URL, '_blank')?.focus();
-  }, []);
-
   const handleShareClick = useCallback(async () => {
     await onTweet?.(score as number);
     const tweetBody = `text=Do you think you can beat my ${gameInfo.name} high-score?%0a%0a${address}%0a%0aMy score: ${score}%0a%0aPlay it straight from your browser here: ${window.location.href}%0a%0a&hashtags=metaversadash,web3,gamer`;
@@ -303,8 +297,8 @@ export const TopWidget = ({
                 Share
               </TweetButton>
             </Row>
-            <GamePortalButton tournament={hasActiveTournament} onClick={handleOpenDiscord}>
-              Learn more on Discord →
+            <GamePortalButton tournament={hasActiveTournament} onClick={handleOpenGamePortal}>
+              Go to Cere game portal →
             </GamePortalButton>
           </>
         )}

diff --git a/packages/ui/src/widgets/Preloader/Preloader.tsx b/packages/ui/src/widgets/Preloader/Preloader.tsx
@@ -41,10 +41,6 @@ const Title = styled(Typography)({
   marginBottom: '24px !important',
 });
 
-const StyledTypography = styled(Typography)({
-  whiteSpace: 'pre-line',
-});
-
 const StartButton = styled(Button)(
   {
     marginTop: 'auto',
@@ -82,8 +78,6 @@ export const Preloader = ({ ready = false, onStartClick, navigateLeaderBoardWidg
   return (
     <Widget spacing={isLandscape ? 2 : 4} align="center">
       <ImageBlock loading={loading}>
-        {/*{preloader.url && <ProgressiveImg src={`${cdnUrl}/assets/default-preloader.png`} alt="Preloader image" />}*/}
-        {/*  TODO remove after review */}
         <ProgressiveImg src={preloader.url || `${cdnUrl}/assets/default-preloader.png`} alt="Preloader image" />
       </ImageBlock>
       {!loading && (