From d8fcdca929a37cadec604a3d2b460a21545bc391 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 25 Nov 2020 17:43:56 +0200
Subject: [PATCH] show error on build filters if min > max

---
 components/builds/BuildFilters.tsx | 21 +++++++++++++++++++--
 pages/builds/[[...slug]].tsx       | 18 ++++++++++++++++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/components/builds/BuildFilters.tsx b/components/builds/BuildFilters.tsx
index b61fd826c..67e997c67 100644
--- a/components/builds/BuildFilters.tsx
+++ b/components/builds/BuildFilters.tsx
@@ -45,14 +45,31 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
           <Fragment key={filter.ability}>
             <Box mb="-1.2rem" />
             <Box mb="-1.2rem" />
-            <Box mb="-1.2rem" fontSize="sm" color={gray} pr={2}>
+            <Box
+              mb="-1.2rem"
+              fontSize="sm"
+              color={
+                filter.abilityPoints!.min > filter.abilityPoints!.max
+                  ? "red.500"
+                  : gray
+              }
+              pr={2}
+            >
               {isMainAbility(filter.ability) ? (
                 <Trans>Included</Trans>
               ) : (
                 <Trans>Min AP</Trans>
               )}
             </Box>
-            <Box mb="-1.2rem" fontSize="sm" color={gray}>
+            <Box
+              mb="-1.2rem"
+              fontSize="sm"
+              color={
+                filter.abilityPoints!.min > filter.abilityPoints!.max
+                  ? "red.500"
+                  : gray
+              }
+            >
               {isMainAbility(filter.ability) ? (
                 <Trans>Excluded</Trans>
               ) : (
diff --git a/pages/builds/[[...slug]].tsx b/pages/builds/[[...slug]].tsx
index 06f6b90b0..5c159ec0c 100644
--- a/pages/builds/[[...slug]].tsx
+++ b/pages/builds/[[...slug]].tsx
@@ -47,8 +47,22 @@ const BuildsPage = () => {
           boxShadow="md"
           color="black"
         >
-          <Flex justifyContent="space-between">
-            <Box visibility={data.length === 0 ? "hidden" : undefined}>
+          <Flex
+            justifyContent="space-between"
+            fontSize="xs"
+            textColor="black"
+            textTransform="uppercase"
+            letterSpacing="wider"
+            lineHeight="1rem"
+            fontWeight="medium"
+          >
+            <Box
+              visibility={
+                data.length === 0 && hiddenBuildCount === 0
+                  ? "hidden"
+                  : undefined
+              }
+            >
               {data.length} <Trans>builds</Trans>{" "}
               {hiddenBuildCount > 0 && (
                 <>