build boxprops

frontend-react/src/components/builds/BuildCard.tsx

@@ -10,6 +10,7 @@ import {
   PopoverContent,
   PopoverBody,
   Button,
+  BoxProps,
 } from "@chakra-ui/core"
 import WeaponImage from "../common/WeaponImage"
 import { top500 } from "../../assets/imageImports"
@@ -25,10 +26,11 @@ interface BuildCardProps {
   showUser?: boolean
 }
 
-const BuildCard: React.FC<BuildCardProps> = ({
+const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
   build,
   defaultToAPView,
   showUser = false,
+  ...props
 }) => {
   const [apView, setApView] = useState(defaultToAPView)
   const { borderStyle, themeColor, darkerBgColor, grayWithShade } = useContext(
@@ -50,6 +52,7 @@ const BuildCard: React.FC<BuildCardProps> = ({
       pt="2"
       pb="6"
       px="6"
+      {...props}
     >
       {showUser && build.discord_user && (
         <Box

frontend-react/src/components/builds/BuildsPage.tsx

@@ -99,15 +99,15 @@ const BuildsPage: React.FC<RouteComponentProps> = () => {
               {buildsFilterByAbilities
                 .filter((build, index) => index < buildsToShow)
                 .map(build => (
-                  <Box key={build.id} p="0.2em">
-                    <BuildCard
-                      build={build}
-                      defaultToAPView={
-                        prefersAPView === null ? false : prefersAPView
-                      }
-                      showUser
-                    />
-                  </Box>
+                  <BuildCard
+                    key={build.id}
+                    build={build}
+                    defaultToAPView={
+                      prefersAPView === null ? false : prefersAPView
+                    }
+                    showUser
+                    m="0.5em"
+                  />
                 ))}
             </Flex>
           </InfiniteScroll>

frontend-react/src/components/user/BuildTab.tsx

@@ -15,12 +15,11 @@ const BuildTab: React.FC<BuildTabProps> = ({ builds, canModifyBuilds }) => {
     <>
       <Flex flexWrap="wrap" justifyContent="center">
         {builds.map(build => (
-          <Box key={build.id} p="0.2em">
-            <BuildCard
-              build={build}
-              defaultToAPView={APView !== null ? APView : false}
-            />
-          </Box>
+          <BuildCard
+            build={build}
+            defaultToAPView={APView !== null ? APView : false}
+            m="0.5em"
+          />
         ))}
       </Flex>
     </>