Use fold for footer items

NASA-IMPACT · Sep 26, 2023 · 180447b · 180447b
1 parent 7f5c11f
commit 180447b
Showing 1 changed file with 21 additions and 12 deletions.
diff --git 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>
     </>
   );