heroes-of-chess-components 0.6.44 → 0.6.45

package/dist/lib/HocComponents/HRaceTable/HRaceTable.tsx

@@ -1,13 +1,12 @@
 import styled from "styled-components";
 import { HocIconCrown, HocIconPodioRace } from "../../assets/race";
 import useCharacters from "../../hooks/character/useCharacters";
-import useIsMobile from "../../hooks/mobile/useMobile";
 import HCoinLabel from "../HCoinLabel/HCoinLabel";
 import HTitle from "../HTitle/HTitle";
 import HBox from "../HBox/HBox";
 
 const CharacterImage = styled("img")<{ margin?: string }>`
-  width: 50px;
+  width: 75px;
   border-radius: 50%;
   margin: ${({ margin }) => margin || "0"};
 `;
@@ -36,7 +35,6 @@ interface HRaceTableProps {
 }
 
 const HRaceTable: React.FC<HRaceTableProps> = ({ data, points }) => {
-  const { isMobile } = useIsMobile(1100);
   const { setCharacterPicture } = useCharacters();
 
   const knowCoinsAndDiamonds = ({
@@ -113,15 +111,46 @@ const HRaceTable: React.FC<HRaceTableProps> = ({ data, points }) => {
   return (
     <HBox
       width="100%"
-      direction={isMobile ? "column" : "row"}
+      direction={"column"}
       justify="center"
       align="center"
       gap="15px"
     >
+      {/* PODIO */}
+      <div style={{ alignSelf: "center", marginTop: "50px", width: "40%" }}>
+        <HBox
+          width="100%"
+          direction="column"
+          align="center"
+        >
+          <HBox
+          width="100%"
+          justify="center"
+          align="flex-end"
+          direction="row"
+          overflowX="visible"
+          overflowY="visible"
+        >
+          <CharacterImage
+            src={setCharacterPicture(getPlayerProfileInfo(data?.[1]) || {}).picture}
+            margin="0 30px -30px 0"
+          />
+          <CharacterImage
+            src={setCharacterPicture(getPlayerProfileInfo(data?.[0]) || {}).picture}
+            margin="0 0 10px 0"
+          />
+          <CharacterImage
+            src={setCharacterPicture(getPlayerProfileInfo(data?.[2]) || {}).picture}
+            margin="0 0 -60px 30px"
+          />
+          </HBox>
+          <img src={HocIconPodioRace} alt="racePodio" width={400} />
+        </HBox>
+      </div>
       <div style={{ maxWidth: "1200px", width: "100%" }}>
         <HBox
           borderRadius="23px"
-          width="90%"
+          width="95%"
           direction="column"
           background={"purpleLight"}
           overflowY="auto"
@@ -214,37 +243,6 @@ const HRaceTable: React.FC<HRaceTableProps> = ({ data, points }) => {
         ))}
         </HBox>
       </div>
-      {/* PODIO */}
-      <div style={{ alignSelf: isMobile ? "center" : "flex-start", marginTop: "50px", width: "40%" }}>
-        <HBox
-          width="100%"
-          direction="column"
-          align="center"
-        >
-          <HBox
-          width="100%"
-          justify="center"
-          align="flex-end"
-          direction="row"
-          overflowX="visible"
-          overflowY="visible"
-        >
-          <CharacterImage
-            src={setCharacterPicture(getPlayerProfileInfo(data?.[1]) || {}).picture}
-            margin="0 30px -30px 0"
-          />
-          <CharacterImage
-            src={setCharacterPicture(getPlayerProfileInfo(data?.[0]) || {}).picture}
-            margin="0 0 10px 0"
-          />
-          <CharacterImage
-            src={setCharacterPicture(getPlayerProfileInfo(data?.[2]) || {}).picture}
-            margin="0 0 -60px 30px"
-          />
-          </HBox>
-          <img src={HocIconPodioRace} alt="racePodio" width={345} />
-        </HBox>
-      </div>
     </HBox>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroes-of-chess-components",
-  "version": "0.6.44",
+  "version": "0.6.45",
   "description": "Reusable React Components for Heroes of Chess Apps",
   "type": "module",
   "main": "dist/index.js",