Merge pull request #32 from icssc/feat/map-button-refactor

feat: map button refactor
icssc · Feb 27, 2024 · 860ce6c · 860ce6c
2 parents 5bfe132 + db22a90
commit 860ce6c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/src/components/Home/DateRangeFilter.jsx b/src/components/Home/DateRangeFilter.jsx
@@ -21,13 +21,9 @@ export default function DateRangeFilter() {
         as={Button}
         rightIcon={<ChevronDownIcon />}
         backgroundColor="white"
-        variant="outline"
-        boxShadow="7px 7px 14px #666666,
-                -7px -7px 14px #ffffff;"
-        color="#74a2fa"
-        fontSize={{ base: "xl", md: "2xl" }}
         size="lg"
-        // gap={2}
+        fontSize={{ base: "xl", md: "2xl" }}
+        borderWidth={2}
         borderRadius={"lg"}
       >
         {DateRangeFilter}

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -10,6 +10,7 @@ import {
   InputGroup,
   InputLeftAddon,
   Button,
+  ButtonGroup,
   Flex,
   HStack,
   Text,
@@ -475,21 +476,28 @@ export default function Home() {
             </Flex>
           ) : (
             <Flex gap="4">
-              <Button
-                backgroundColor="white"
+              <ButtonGroup
                 variant="outline"
-                boxShadow="7px 7px 14px #666666,
-                -7px -7px 14px #ffffff;"
+                colorScheme="twitter"
                 color="#74a2fa"
-                onClick={onOpen}
-                fontSize={{ base: "xl", md: "2xl" }}
-                size="lg"
-                gap={2}
-                borderRadius={"lg"}
+                spacing={6}
+                boxShadow="5px 2px 9px rgba(0, 0, 0, 0.2);"
               >
-                <SettingsIcon />
-                Filter
-              </Button>
+                <Button
+                  backgroundColor="white"
+                  onClick={onOpen}
+                  size="lg"
+                  gap={2}
+                  fontSize={{ base: "xl", md: "2xl" }}
+                  borderRadius={"lg"}
+                  borderWidth={2}
+                  leftIcon={<SettingsIcon />}
+                >
+                  Filter
+                </Button>
+                <DateRangeFilter />
+              </ButtonGroup>
+
               <Filter
                 setFindFilter={setFindFilter}
                 findFilter={findFilter}
@@ -498,8 +506,6 @@ export default function Home() {
                 onClose={onClose}
               />
 
-              <DateRangeFilter />
-
               <Button
                 display={{ md: "none" }}
                 background={"#74a2fa"}