Merge pull request #245 from bugout-dev/fetch-owned-scs

Fetch owned scs

Author: Anton-Mushnin

apps/play/components/LeaderboardGroup.js

@@ -19,7 +19,7 @@ const LeaderboardGroup = ({ group, shadowcorns }) => {
               <GridItem
                 maxW={["45px", "45px", "125px"]}
                 minW={["45px", "45px", "125px"]}
-                pl="5px"
+                pl={["5px", "5px", "20px"]}
               >
                 <LeaderboardRank rank={group.rank} />
               </GridItem>
@@ -31,8 +31,8 @@ const LeaderboardGroup = ({ group, shadowcorns }) => {
               </GridItem>
               <GridItem
                 fontWeight="400"
-                maxW={["50px", "50px", "140px", "420px"]}
-                minW={["50px", "50px", "140px", "420px"]}
+                maxW={["50px", "50px", "140px", "200px"]}
+                minW={["50px", "50px", "140px", "200px"]}
               >
                 {item.score}
               </GridItem>

apps/play/components/LeaderboardGroupHeader.js

@@ -4,14 +4,15 @@ import {
   GridItem,
   Flex,
   Text,
+  Spacer,
 } from "@chakra-ui/react";
 import LeaderboardRank from "./LeaderboardRank";
 
 import GroupImage from "./GroupImage";
 
 const LeaderboardGroupHeader = ({ group, metadata }) => {
   return (
-    <AccordionButton _hover={{ bg: "#454545" }} p="0">
+    <AccordionButton _hover={{ bg: "#454545" }} p="0" borderRadius="10px">
       <Flex
         textAlign="left"
         width="100%"
@@ -40,11 +41,12 @@ const LeaderboardGroupHeader = ({ group, metadata }) => {
               pl={["0px", "0px", "7px"]}
             >{`${group.records.length} Shadowcorns`}</Text>
           </Flex>
+          <Spacer />
         </GridItem>
         <GridItem
           fontWeight="400"
-          maxW={["50px", "50px", "140px", "420px"]}
-          minW={["50px", "50px", "140px", "420px"]}
+          maxW={["50px", "50px", "140px", "200px"]}
+          minW={["50px", "50px", "140px", "200px"]}
         >
           <Flex justifyContent="space-between">
             {group.score}

apps/play/components/ShadocornRow.js

@@ -14,14 +14,14 @@ const ShadowcornRow = ({ shadowcorn, tokenId }) => {
       href={buildOpenseaLink(tokenId)}
       isExternal
     >
-      <Flex>
+      <Flex alignItems="center">
         {shadowcorn && (
           <Image
             alt="sc"
             src={shadowcorn.image}
             w={["16px", "20px", "24px"]}
             h={["16px", "20px", "24px"]}
-            borderRadius="4px"
+            borderRadius="50%"
           />
         )}
         {shadowcorn?.name && (
@@ -30,7 +30,7 @@ const ShadowcornRow = ({ shadowcorn, tokenId }) => {
               pl={["5px", "5px", "7px"]}
               textOverflow="ellipsis"
               whiteSpace="nowrap"
-            >{`${shadowcorn.name} - ${tokenId}`}</Box>
+            >{`${shadowcorn.name} (${tokenId})`}</Box>
           </>
         )}
         {!shadowcorn?.name && (
@@ -39,7 +39,12 @@ const ShadowcornRow = ({ shadowcorn, tokenId }) => {
           </Text>
         )}
 
-        <Icon as={FiExternalLink} marginInlineStart="2px" pb="5px" />
+        <Icon
+          as={FiExternalLink}
+          marginInlineStart="2px"
+          my="auto"
+          pb={["4px", "4px", "2px"]}
+        />
       </Flex>
     </Link>
   );