build page visual tweaks

components/builds/BuildFilters.tsx

@@ -66,7 +66,7 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
               isRound
             />
             {/* FIXME: duplicate image bug */}
-            <Box mx={2}>
+            <Box mx={2} mt={1}>
               <AbilityIcon ability={filter.ability} size="TINY" />
             </Box>
             {isMainAbility(filter.ability) ? (

components/common/WeaponSelector.tsx

@@ -28,6 +28,7 @@ const WeaponSelector: React.FC<Props> = ({
         maxWidth={80}
         size={isHeader ? "lg" : undefined}
       >
+        <option hidden disabled selected={!value}></option>
         {weaponsWithHeroCategorizedLocalized.map((wpnCategory) => (
           <optgroup key={wpnCategory.name} label={i18n._(wpnCategory.name)}>
             {wpnCategory.weapons.map((wpn) => {

pages/builds/[[...slug]].tsx

@@ -20,15 +20,15 @@ const BuildsPage = () => {
       />
       {state.weapon && data.length > 0 && (
         <>
-          <Box mt={8} pr={3} mb="-5rem">
+          <Box mt={4} pr={3} mb="-5rem">
             <WeaponImage name={state.weapon} size={128} />
           </Box>
           <Flex
             justifyContent="flex-end"
             p={2}
-            mb={16}
+            mb={8}
             w="100%"
-            bg={`linear-gradient(to right, #43c6ac, #f8ffae);`}
+            bg="linear-gradient(to right, #43c6ac, #f8ffae);"
             rounded="lg"
             fontSize="sm"
             boxShadow="md"
@@ -47,9 +47,9 @@ const BuildsPage = () => {
           </Flex>
         </>
       )}
-      <Box mt={10}>
+      {state.weapon && (
         <BuildFilters filters={state.filters} dispatch={dispatch} />
-      </Box>
+      )}
 
       <Flex
         flexWrap="wrap"
@@ -59,6 +59,7 @@ const BuildsPage = () => {
         right="50%"
         mx="-50vw"
         justifyContent="center"
+        mt={4}
       >
         {data.flatMap((buildArray) =>
           state.expandedUsers.has(buildArray[0].userId) ? (