From 180447bc12b9f1f5d3edc3b6ce324c328b8d5e72 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Tue, 26 Sep 2023 16:26:47 -0400
Subject: [PATCH] Use fold for footer items

---
 .../components/analysis/define/index.tsx      | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/scripts/components/analysis/define/index.tsx b/app/scripts/components/analysis/define/index.tsx
index 3dd3bb8d7..3e1e57fb9 100644
--- a/app/scripts/components/analysis/define/index.tsx
+++ b/app/scripts/components/analysis/define/index.tsx
@@ -160,10 +160,10 @@ const FoldWithBullet = styled(Fold)<{number: string}>`
     // bullet
     &::after {
       position: absolute;
-      top: 0;
-      left: -20px;
-      width: 40px;
-      height: 40px;
+      top: ${variableGlsp(-0.25)};
+      left: ${variableGlsp(-1)};
+      width: ${variableGlsp(2)};
+      height: ${variableGlsp(2)};
       background-color: #1565EF;
       color: ${themeVal('color.surface')};
       border-radius: ${themeVal('shape.ellipsoid')};
@@ -177,6 +177,7 @@ const FoldWithBullet = styled(Fold)<{number: string}>`
   }
 `}
 `;
+
 export const FoldWOBottomPadding = styled(FoldWithBullet)`
   ${media.largeUp`
     padding-bottom: 0;
@@ -187,6 +188,10 @@ export const FoldWOBottomPadding = styled(FoldWithBullet)`
   `}
 `;
 
+const FoldWOPadding = styled(Fold)`
+  padding: 0;
+`;
+
 export const FoldTitleWOAccent = styled(FoldTitle)`
   ${media.largeUp`
     &::before {
@@ -511,14 +516,18 @@ export default function Analysis() {
         </FoldWithBullet>
       </PageMainContent>
       <FloatingFooter ref={footerRef} isSticky={isFooterSticky}>
-        <PageFooterActions
-          isNewAnalysis={isNewAnalysis}
-          start={start}
-          end={end}
-          datasetsLayers={datasetsLayers}
-          aoi={aoiDrawState.featureCollection}
-          disabled={notReady}
-        />
+        <FoldWOPadding>
+          <FoldBody>
+            <PageFooterActions
+              isNewAnalysis={isNewAnalysis}
+              start={start}
+              end={end}
+              datasetsLayers={datasetsLayers}
+              aoi={aoiDrawState.featureCollection}
+              disabled={notReady}
+            />
+          </FoldBody>
+        </FoldWOPadding>
       </FloatingFooter>
     </>
   );