moved attribution icon to top left (#2031)

changed 56px to 60 px padding stack and ternary edited spacing edited spacing
hackforla · Apr 30, 2024 · a06f580 · a06f580
1 parent adc4196
commit a06f580
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 35 deletions.
diff --git a/client/src/components/FoodSeeker/SearchResults/AttributionInfo.js b/client/src/components/FoodSeeker/SearchResults/AttributionInfo.js
@@ -36,11 +36,37 @@ const AttributionInfo = () => {
       ) : (
         <>
           <div style={{ display: "flex", justifyContent: "flex-end" }}>
-            <div
+            <button
               style={{
                 backgroundColor: "white",
-                borderTopLeftRadius: "12px",
                 borderBottomLeftRadius: "12px",
+                borderTopLeftRadius: "12px",
+                width: "24px",
+                height: "24px",
+                border: "none",
+              }}
+              onClick={handleClick}
+            >
+              <svg
+                style={{
+                  backgroundColor: "white",
+                  borderBottomRightRadius: "12px",
+                  borderTopRightRadius: "12px",
+                }}
+                width="24"
+                height="24"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+                fillRule="evenodd"
+              >
+                <path d="M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0" />
+              </svg>
+            </button>
+            <div
+              style={{
+                backgroundColor: "white",
+                borderTopRightRadius: "12px",
+                borderBottomRightRadius: "12px",
               }}
             >
               <a
@@ -83,6 +109,7 @@ const AttributionInfo = () => {
                   fontSize: "12px",
                   marginLeft: "3px",
                   fontWeight: "700",
+                  paddingRight: "5px"
                 }}
                 href="https://apps.mapbox.com/feedback/?owner=mapbox&amp;id=streets-v11&amp;access_token=pk.eyJ1IjoibHVjYXNob21lciIsImEiOiJjazFqcnRjcm0wNmZ1M2JwZXg2eDFzMXd3In0.yYpkKLrFCxF-qyBfZH1a8w#/-118.2439/34.0355/11"
                 target="_blank"
@@ -92,32 +119,6 @@ const AttributionInfo = () => {
                 Improve this map
               </a>
             </div>
-            <button
-              style={{
-                backgroundColor: "white",
-                borderBottomRightRadius: "12px",
-                borderTopRightRadius: "12px",
-                width: "24px",
-                height: "24px",
-                border: "none",
-              }}
-              onClick={handleClick}
-            >
-              <svg
-                style={{
-                  backgroundColor: "white",
-                  borderBottomRightRadius: "12px",
-                  borderTopRightRadius: "12px",
-                }}
-                width="24"
-                height="24"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-                fillRule="evenodd"
-              >
-                <path d="M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0" />
-              </svg>
-            </button>
           </div>
         </>
       )}

diff --git a/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js b/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js
@@ -1,8 +1,9 @@
-import { Box, Grid } from "@mui/material";
+import { Box, Grid, Stack } from "@mui/material";
 import { useEffect, useState } from "react";
 import Draggable from "react-draggable";
 import { useFilterPanel } from "appReducer";
 import AttributionInfo from "../AttributionInfo";
+import useFeatureFlag from "hooks/useFeatureFlag";
 
 const overlay = {
   position: "absolute",
@@ -16,6 +17,8 @@ const overlay = {
 const MobileLayout = ({ filters, map, list, showList }) => {
   const filterPanelOpen = useFilterPanel();
   const initialY = showList ? 5 : 57;
+  const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
+
   const [position, setPosition] = useState({
     x: 0,
     y: initialY * (window.innerHeight / 100),
@@ -25,17 +28,19 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     let newY;
     if (filterPanelOpen) {
       newY = 100;
+    } else if (hasAdvancedFilterFeatureFlag) {
+      newY = showList ? ((100 / window.innerHeight) * 60) : 57;
     } else {
       newY = showList ? 5 : 57;
     }
     setPosition({ x: 0, y: newY * (window.innerHeight / 100) });
-  }, [showList, filterPanelOpen]);
+  }, [showList, filterPanelOpen, hasAdvancedFilterFeatureFlag]);
 
   const handleStop = (e, ui) => {
     const windowHeight = window.innerHeight / 100;
     let newY;
     if (ui.y < 20 * windowHeight) {
-      newY = 5;
+      newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 5;
     } else if (ui.y > 20 * windowHeight && ui.y < 40 * windowHeight) {
       newY = 25;
     } else if (ui.y > 40 * windowHeight) {
@@ -75,7 +80,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
           >
             <Box sx={overlay}>
               <Grid container spacing={0}>
-                <Grid xs={6} item>
+                <Stack>
                   <div>
                     <a
                       target="_blank"
@@ -134,10 +139,12 @@ const MobileLayout = ({ filters, map, list, showList }) => {
                       </svg>
                     </a>
                   </div>
-                </Grid>
-                <Grid xs={6} item>
+                  <div
+                    style={{ display: "flex", justifyContent: "flex-start", paddingTop: "2.23px" }}
+                  >
                   <AttributionInfo />
-                </Grid>
+                  </div>
+                </Stack>
               </Grid>
               <Box
                 sx={{