From 2bc652bcbf63c99ddd94b3b5404312d3f9937dcd Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 17 Nov 2020 11:25:58 +0200
Subject: [PATCH] build page visual tweaks

---
 components/builds/BuildFilters.tsx   |  2 +-
 components/common/WeaponSelector.tsx |  1 +
 pages/builds/[[...slug]].tsx         | 11 ++++++-----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/builds/BuildFilters.tsx b/components/builds/BuildFilters.tsx
index aecf516cd..1a2be8510 100644
--- a/components/builds/BuildFilters.tsx
+++ b/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) ? (
diff --git a/components/common/WeaponSelector.tsx b/components/common/WeaponSelector.tsx
index f990389a2..40eaf05a7 100644
--- a/components/common/WeaponSelector.tsx
+++ b/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) => {
diff --git a/pages/builds/[[...slug]].tsx b/pages/builds/[[...slug]].tsx
index 8f09fb1fa..b7437f220 100644
--- a/pages/builds/[[...slug]].tsx
+++ b/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) ? (