From 033002daeae572073ca35f918661ea62d860e097 Mon Sep 17 00:00:00 2001
From: Prabhat Pal <prabhat.pal@tantrumstreet.com>
Date: Sun, 7 Feb 2021 18:31:36 -0800
Subject: [PATCH] style fixes

---
 src/components/AddPlaceMap.tsx  | 11 ++++++++---
 src/components/HomeMap.tsx      |  3 ++-
 src/components/Navbar.tsx       |  3 ++-
 src/components/ViewPlaceMap.tsx |  5 +++--
 src/components/ui/DropMenu.tsx  |  2 +-
 styles/tailwind.scss            |  2 +-
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/AddPlaceMap.tsx b/src/components/AddPlaceMap.tsx
index b6490bb..5ccdf03 100644
--- a/src/components/AddPlaceMap.tsx
+++ b/src/components/AddPlaceMap.tsx
@@ -2,9 +2,13 @@ import { FC, useEffect, useRef, useState } from "react";
 import ReactMapGL, { Marker, ViewState } from "react-map-gl";
 import { IoLocationSharp } from "react-icons/io5";
 import Map from "./ui/Map";
-import { LOCAL_STORAGE_VIEWPORT, ViewportFullHeight, ViewportHalfHeight } from "src/consts";
+import {
+  LOCAL_STORAGE_VIEWPORT,
+  ViewportFullHeight,
+  ViewportHalfHeight,
+} from "src/consts";
 import { useLocalStorage } from "src/hooks";
-import { minWidthXl } from 'src/utils';
+import { minWidthXl } from "src/utils";
 
 interface IProps {
   searchedViewport: ViewState;
@@ -18,6 +22,7 @@ const AddPlaceMap: FC<IProps> = ({ searchedViewport }) => {
     zoom: 13,
   });
   const [viewport, setViewport] = useState<ViewState>(localViewport);
+  const isMinWidthXl = minWidthXl();
 
   useEffect(() => {
     setViewport({ ...searchedViewport, zoom: 13 });
@@ -28,7 +33,7 @@ const AddPlaceMap: FC<IProps> = ({ searchedViewport }) => {
       <Map
         viewport={viewport}
         width="100%"
-        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
+        height={isMinWidthXl ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={18}
         ref={mapRef}
diff --git a/src/components/HomeMap.tsx b/src/components/HomeMap.tsx
index 4acc0ca..388610d 100644
--- a/src/components/HomeMap.tsx
+++ b/src/components/HomeMap.tsx
@@ -42,6 +42,7 @@ const HomeMap: FC<IProps> = ({
       zoom: 11,
     }
   );
+  const isMinWidthXl = minWidthXl();
 
   useEffect(() => {
     if (searchedViewport) {
@@ -63,7 +64,7 @@ const HomeMap: FC<IProps> = ({
       <Map
         viewport={viewport}
         width="100%"
-        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
+        height={isMinWidthXl ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={15}
         ref={(instance) => {
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0689a7a..8459be4 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -56,6 +56,7 @@ const MenuItem: FC<IMenuItem> = ({
 const Navbar = () => {
   const { user, logout, authenticated } = useAuth();
   const router = useRouter();
+  const isMinWidthMd = minWidthMd();
 
   const closeAuthModal = () => {
     router.push(urls.home);
@@ -76,7 +77,7 @@ const Navbar = () => {
         <div className="flex justify-between items-center">
           {authenticated && router.pathname === urls.home && (
             <Button asLink href={urls.addPlace}>
-              {minWidthMd() ? "Add a new place" : <IoMdAdd />}
+              {isMinWidthMd ? "Add a new place" : <IoMdAdd />}
             </Button>
           )}
 
diff --git a/src/components/ViewPlaceMap.tsx b/src/components/ViewPlaceMap.tsx
index d37cb1d..b1418c3 100644
--- a/src/components/ViewPlaceMap.tsx
+++ b/src/components/ViewPlaceMap.tsx
@@ -4,7 +4,7 @@ import { IoLocationSharp } from "react-icons/io5";
 import Link from "next/link";
 import Map from "./ui/Map";
 import { urls, ViewportFullHeight, ViewportHalfHeight } from "src/consts";
-import { minWidthXl } from 'src/utils';
+import { minWidthXl } from "src/utils";
 
 interface IPlace {
   id: string;
@@ -31,6 +31,7 @@ const ViewPlaceMap: FC<IProps> = ({
     longitude: place.longitude,
     zoom: 13,
   });
+  const isMinWidthXl = minWidthXl();
 
   useEffect(() => {
     setViewport({ ...searchedViewport, zoom: 13 });
@@ -41,7 +42,7 @@ const ViewPlaceMap: FC<IProps> = ({
       <Map
         viewport={viewport}
         width="100%"
-        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
+        height={isMinWidthXl ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={18}
         ref={mapRef}
diff --git a/src/components/ui/DropMenu.tsx b/src/components/ui/DropMenu.tsx
index 9dad014..95f1b99 100644
--- a/src/components/ui/DropMenu.tsx
+++ b/src/components/ui/DropMenu.tsx
@@ -102,7 +102,7 @@ const DropMenu: DropMenuFC<IDropMenuProps> = ({
             animate={{ height: "auto", opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.15 }}
-            className="absolute overflow-hidden right-0 z-10 border rounded-md shadow-sm focus:outline-none bg-gray-800 border-gray-600"
+            className="absolute overflow-hidden right-0 z-20 border rounded-md shadow-sm focus:outline-none bg-gray-800 border-gray-600"
           >
             <RenderItems closeOnItemSelect={closeOnItemSelect}>
               {children}
diff --git a/styles/tailwind.scss b/styles/tailwind.scss
index d4dc2c8..be568f1 100644
--- a/styles/tailwind.scss
+++ b/styles/tailwind.scss
@@ -11,5 +11,5 @@ body {
 .mapboxgl-ctrl-bottom-right,
 .mapboxgl-ctrl-top-left,
 .mapboxgl-ctrl-top-right {
-  z-index: 0;
+  z-index: 0 !important;
 }