map layout and button styles

NwinNwin · Aug 21, 2023 · 82fd26e · 82fd26e
1 parent 9bb1f13
commit 82fd26e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/components/CreateModal/CreateModal.jsx b/src/components/CreateModal/CreateModal.jsx
@@ -71,8 +71,9 @@ export default function CreateModal({
         <Button
           h={{ base: "10vh", md: "7vh" }}
           w={{ base: "40vw", md: "8vw" }}
+          boxShadow="xl"
           _hover={{ bg: "#b4dbd9" }}
-          backgroundColor="#61b895"
+          backgroundColor="#33b249"
           color="white"
           fontSize="xl"
           fontWeight="bold"

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -344,18 +344,24 @@ export default function Home() {
           </InputGroup>
         </Flex>
       </Flex>
-      <Flex position="relative" marginTop="2%" px="2%">
+      <Flex
+        position="relative"
+        marginTop={{ base: "1vh", md: "2%" }}
+        px={{ base: 0, md: "2%" }}
+      >
         {/* <CreateModal /> */}
         <Flex
-          width={{ base: "95vw", md: "75vw" }}
-          padding={{ base: 0, md: 5 }}
+          width={{ base: "100vw", md: "75vw" }}
+          padding={{ base: 3, md: 5 }}
           position="absolute"
           zIndex={1000}
           flexDirection="row"
           justifyContent="space-between"
         >
           <Button
-            colorScheme="teal"
+            backgroundColor="#a881af"
+            boxShadow="2xl"
+            color="white"
             onClick={onOpen}
             fontSize={{ base: "xl", md: "2xl" }}
             size="lg"
@@ -376,6 +382,7 @@ export default function Home() {
             colorScheme="blue"
             onClick={onResultsBarOpen}
             fontSize="2xl"
+            boxShadow="2xl"
             size="lg"
             gap={2}
           >

diff --git a/src/components/Map/Map.css b/src/components/Map/Map.css
@@ -11,8 +11,9 @@
 
 @media only screen and (max-width: 600px) {
   .map-container {
-    height: 79vh;
-    width: 95vw;
+    border-radius: 0;
+    height: 83vh;
+    width: 100vw;
     z-index: 0;
   }
 }