improve footer layout [skip ci]

hyperglass/ui/components/layout/resetButton.tsx

@@ -0,0 +1,39 @@
+import dynamic from 'next/dynamic';
+import { Box, Flex, Icon, IconButton, Slide } from '@chakra-ui/react';
+import { useColorValue } from '~/context';
+import { useLGState, useOpposingColor } from '~/hooks';
+
+import type { TResetButton } from './types';
+
+const LeftArrow = dynamic<MeronexIcon>(() => import('@meronex/icons/fa').then(i => i.FaAngleLeft));
+
+export const ResetButton = (props: TResetButton) => {
+  const { developerMode, resetForm, ...rest } = props;
+  const { isSubmitting } = useLGState();
+  const bg = useColorValue('primary.500', 'primary.300');
+  const color = useOpposingColor(bg);
+  return (
+    <Slide direction="left" in={isSubmitting.value} unmountOnExit style={{ width: 'auto' }}>
+      <Box
+        bg={bg}
+        left={0}
+        zIndex={4}
+        bottom={24}
+        boxSize={12}
+        color={color}
+        position="fixed"
+        borderRightRadius="md"
+        mb={developerMode ? 14 : undefined}>
+        <Flex boxSize="100%" justifyContent="center" alignItems="center" {...rest}>
+          <IconButton
+            color="current"
+            variant="ghost"
+            aria-label="Reset"
+            onClick={resetForm}
+            icon={<Icon as={LeftArrow} boxSize={8} />}
+          />
+        </Flex>
+      </Box>
+    </Slide>
+  );
+};