improve mobile styling

NwinNwin · Aug 14, 2023 · e0b0c9f · e0b0c9f
1 parent 25c44ec
commit e0b0c9f
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 20 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>ZotnFound</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/CreateModal/CreateModal.jsx b/src/components/CreateModal/CreateModal.jsx
@@ -69,7 +69,7 @@ export default function CreateModal({
     <>
       {isCreate ? (
         <Button
-          h={{ base: "8vh", md: "7vh" }}
+          h={{ base: "10vh", md: "7vh" }}
           w={{ base: "40vw", md: "8vw" }}
           _hover={{ bg: "#b4dbd9" }}
           backgroundColor="#61b895"

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -504,7 +504,7 @@ export default function Home() {
         <Box
           display={{ base: "block", md: "none" }}
           position="fixed"
-          bottom="5%"
+          bottom="2.5%"
           width="100vw"
         >
           <CreateModal

diff --git a/src/components/InfoModal/InfoModal.jsx b/src/components/InfoModal/InfoModal.jsx
@@ -37,9 +37,7 @@ export default function InfoModal({ setData, isOpen, onClose, props }) {
     onClose();
     setLoading(false);
     axios
-      .delete(
-        `${process.env.REACT_APP_AWS_BACKEND_URL}/items/${props.id}`
-      )
+      .delete(`${process.env.REACT_APP_AWS_BACKEND_URL}/items/${props.id}`)
       .then(() => console.log("Success"))
       .catch((err) => console.log(err));
     setData((prevItems) => {
@@ -54,7 +52,7 @@ export default function InfoModal({ setData, isOpen, onClose, props }) {
   const formattedDate = formatDate(new Date(props.date));
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal isOpen={isOpen} onClose={onClose} size={{ base: "full", md: "md" }}>
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton size="lg" />

diff --git a/src/components/Map/Map.css b/src/components/Map/Map.css
@@ -11,9 +11,8 @@
 
 @media only screen and (max-width: 600px) {
   .map-container {
-    height: 70vh;
+    height: 79vh;
     width: 95vw;
-    border-radius: 30px;
     z-index: 0;
   }
 }
diff --git a/src/components/Map/Map.jsx b/src/components/Map/Map.jsx
@@ -188,6 +188,7 @@ export default function Map({
         center={centerPosition}
         zoom={17}
         zoomControl={false}
+        attributionControl={false}
       >
         <TileLayer
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

diff --git a/src/components/Map/MapIcons.js b/src/components/Map/MapIcons.js
@@ -19,57 +19,57 @@ import fly_img from "../../assets/images/fly_img.png";
 
 const headphoneLost = L.icon({
   iconUrl: headphone_red,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const headphoneFound = L.icon({
   iconUrl: headphone_green,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const phoneLost = L.icon({
   iconUrl: phone_red,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const phoneFound = L.icon({
   iconUrl: phone_green,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const keyLost = L.icon({
   iconUrl: key_red,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const keyFound = L.icon({
   iconUrl: key_green,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const walletLost = L.icon({
   iconUrl: wallet_red,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const walletFound = L.icon({
   iconUrl: wallet_green,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const othersLost = L.icon({
   iconUrl: others_red,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 const othersFound = L.icon({
   iconUrl: others_green,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 export const othersDrag = L.icon({
   iconUrl: others_black,
-  iconSize: [50, 50],
+  iconSize: [40, 40],
 });
 
 export const flyImg = L.icon({