Merge pull request #288 from GTBitsOfGood/feature/mapUI

Feature/map UI

package.json

@@ -26,6 +26,7 @@
         "@babel/preset-env": "^7.21.4",
         "@babel/preset-react": "^7.18.6",
         "@bitwarden/cli": "^2024.8.2",
+        "@fontsource/inter": "^5.1.0",
         "@khanacademy/react-multi-select": "^0.3.3",
         "@react-firebase/database": "^0.3.11",
         "@reactour/mask": "^1.0.5",
@@ -77,6 +78,7 @@
         "react-router-dom": "^4.2.2",
         "react-scripts": "^5.0.1",
         "react-select": "^3.1.0",
+        "react-switch": "^7.0.0",
         "react-tooltip": "^5.21.5",
         "react-youtube": "^7.11.3",
         "reactjs-popup": "^1.5.0",

src/assets/styles/main.css

@@ -128,14 +128,14 @@ h2 {
 .map-list {
     position: relative;
     width: 100vw;
-    height: calc(100vh - 70px);
+    height: calc(200vh - 70px);
     z-index: 2;
     overflow-y: scroll;
     background: white;
     padding-top: 10px;
 }
 
-.map-cell {
+/* .map-cell {
     border-top: solid #e0e0e0;
     background-color: white;
     padding-top: 18px;
@@ -147,10 +147,44 @@ h2 {
     height: calc(60vh - 12px);
 }
 
+
 .map-cell:hover {
-    border-left: solid #0069d9 10px;
+    
+} */
+
+.map-overlay {
+    height: calc(60vh - 12px);
 }
 
+.map-cell {
+    position: relative;
+    padding-top: 10px;
+    border-top: solid #e0e0e0;
+    background-color: white;
+    padding: 18px;
+    transition: border-left 0.2s;
+    overflow: hidden;
+    z-index: 1;
+    min-height: 100px; 
+}
+
+.map-cell::before {
+    content: ''; 
+    position: absolute; 
+    top: 10px; 
+    left: 8px; 
+    right: 8px; 
+    bottom: 8px; 
+    background-color: #f4f4f4; 
+    border-radius: 8px; 
+    opacity: 0; 
+    transition: opacity 0.3s; 
+    z-index: -1; 
+}
+
+.map-cell:hover::before {
+    opacity: 1; 
+}
 .scroll-indicator {
     margin-bottom: 12px;
     border-radius: 10px;
@@ -497,7 +531,6 @@ h2 {
     height: 100px;
     width: 100px;
     object-fit: contain;
-    border-radius: 5px;
     transition: filter 100ms;
 }
 

src/components/map/ProviderCell.tsx

@@ -50,7 +50,7 @@ export default ({
             style={{
                 borderLeftColor: primaryColor,
                 borderTopWidth: index === 0 ? 0 : 1,
-                paddingTop: index === 0 ? 0 : 18,
+                paddingTop: 18,
                 width: "100%",
             }}
             onMouseEnter={onMouseEnter}
@@ -96,10 +96,10 @@ export default ({
                         )}
                 </h5>
                 <div style={{ color: "gray" }}>
-                    <FaMapMarkerAlt size="20px" /> {item.address[0]}
+                    {item.address[0]}
                     <div className="row-spaced">
                         <div>
-                            <FaPhone /> {item.phoneNum.join(", ")}
+                            {item.phoneNum.join(", ")}
                         </div>
                         {myDistance && (
                             <small>

src/components/map/Search.tsx

@@ -14,8 +14,8 @@ const Search = ({ filterProviders, primaryColor }) => {
     const [width, setWidth] = useState(getWidth());
     const isDesktop = width > 768;
 
-    let { searchZipcode, searchProviderName, hideLabel, showLabel } =
-        localizationStrings;
+    let { searchZipcode, searchProviderName, hideLabel, showLabel } = localizationStrings;
+
 
     return (
         <div style={{ width: "80%" }}>