Reset button for builds analyzer (#386)

* reset button

* margin with em

* Separate buttons for build reset

components/analyzer/EditableBuilds.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Flex, IconButton } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
 import ViewSlots, { ViewSlotsAbilities } from "components/builds/ViewSlots";
 import AbilitiesSelector from "components/u/AbilitiesSelector";
-import { FiCopy, FiEdit, FiSquare } from "react-icons/fi";
+import { FiCopy, FiEdit, FiSquare, FiRotateCw } from "react-icons/fi";
 import { AbilityOrUnknown } from "utils/types";
 import HeadOnlyToggle from "./HeadOnlyToggle";
 import LdeSlider from "./LdeSlider";
@@ -29,6 +29,8 @@ interface EditableBuildsProps {
   otherLde: number;
   setLde: React.Dispatch<React.SetStateAction<number>>;
   setOtherLde: React.Dispatch<React.SetStateAction<number>>;
+  resetBuild: () => void;
+  resetOtherBuild: () => void;
 }
 
 const EditableBuilds: React.FC<EditableBuildsProps> = ({
@@ -47,6 +49,8 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
   otherLde,
   setLde,
   setOtherLde,
+  resetBuild,
+  resetOtherBuild,
 }) => {
   const buildToEdit = otherFocused ? otherBuild : build;
   const handleChange = (value: Object) =>
@@ -92,17 +96,26 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
       </Button>
       <Flex justifyContent="space-evenly" flexWrap="wrap" mb="1em">
         <Flex flexDirection="column">
-          {showOther && (
+          <Flex justifyContent="center">
+            {showOther && (
+              <IconButton
+                aria-label="Edit orange build"
+                disabled={!otherFocused}
+                colorScheme="orange"
+                onClick={() => changeFocus()}
+                icon={<FiEdit />}
+                isRound
+              />
+            )}
             <IconButton
-              aria-label="Edit orange build"
-              disabled={!otherFocused}
-              colorScheme="orange"
-              onClick={() => changeFocus()}
-              icon={<FiEdit />}
+              aria-label={showOther ? "Reset orange build" : "Reset build"}
+              colorScheme="gray"
+              onClick={() => resetBuild()}
+              icon={<FiRotateCw />}
+              ml="1em"
               isRound
-              mx="auto"
             />
-          )}
+          </Flex>
           <ViewSlots
             abilities={build}
             onAbilityClick={!otherFocused ? handleClickBuildAbility : undefined}
@@ -142,15 +155,24 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
         </Flex>
         {showOther && (
           <Flex flexDirection="column">
-            <IconButton
-              aria-label="Edit blue build"
-              disabled={otherFocused}
-              colorScheme="blue"
-              onClick={() => changeFocus()}
-              icon={<FiEdit />}
-              isRound
-              mx="auto"
-            />
+            <Flex justifyContent="center">
+              <IconButton
+                aria-label="Edit blue build"
+                disabled={otherFocused}
+                colorScheme="blue"
+                onClick={() => changeFocus()}
+                icon={<FiEdit />}
+                isRound
+              />
+              <IconButton
+                aria-label={"Reset blue build"}
+                colorScheme="gray"
+                onClick={() => resetOtherBuild()}
+                icon={<FiRotateCw />}
+                ml="1em"
+                isRound
+              />
+            </Flex>
             <ViewSlots
               abilities={otherBuild}
               onAbilityClick={

pages/analyzer.tsx

@@ -109,6 +109,8 @@ const BuildAnalyzerPage = () => {
                 setLde={setLde}
                 otherLde={otherLde}
                 setOtherLde={setOtherLde}
+                resetBuild={resetBuild}
+                resetOtherBuild={resetOtherBuild}
               />
             )}
           </Box>
@@ -206,6 +208,14 @@ const BuildAnalyzerPage = () => {
       shoesAbilities: shoesAbilities as AbilityOrUnknown[],
     });
   }
+
+  function resetBuild() {
+    setBuild({ ...defaultBuild });
+  }
+
+  function resetOtherBuild() {
+    setOtherBuild({ ...defaultBuild });
+  }
 };
 
 BuildAnalyzerPage.header = (