Merge pull request #594 from oasisprotocol/ml/mobile-onboarding-steps…

…-are-glitchy Fix glitchy mobile onboarding steps
oasisprotocol · Jun 27, 2023 · 17071ad · 17071ad
2 parents 8c5cdc1 + 46a0a72
commit 17071ad
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/.changelog/594.bugfix.md b/.changelog/594.bugfix.md
@@ -0,0 +1 @@
+Fix glitchy mobile onboarding steps
diff --git a/src/app/pages/HomePage/Graph/Graph/index.tsx b/src/app/pages/HomePage/Graph/Graph/index.tsx
@@ -133,7 +133,8 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
   }
 
   const onSelectLayer = (Layer: Layer) => {
-    if (isMobile && !disabledMap[Layer] && selectedLayer === Layer) {
+    if (isMobile && !disabledMap[Layer] && parseFloat(scale.toFixed(2)) > 1) {
+      setSelectedLayer(Layer)
       setActiveMobileGraphTooltip(Layer)
 
       return

diff --git a/src/app/pages/HomePage/Graph/HelpScreen/index.tsx b/src/app/pages/HomePage/Graph/HelpScreen/index.tsx
@@ -24,12 +24,15 @@ const HelpScreenContainer = styled(Box)(() => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
+  justifyItems: 'flex-end',
   minHeight: '185px',
   width: '90%',
+  height: '100%',
 }))
 
 const SwiperBox = styled(Box)(() => ({
   width: '100%',
+  height: '40%',
 }))
 
 export const GetStartedBtn = styled(Button)({})
@@ -98,9 +101,12 @@ const HelpScreen: FC<HelpScreenProps> = ({ setParaTimeStep }) => {
   return (
     <HelpScreenContainer>
       <SwiperBox>
-        <swiper-container ref={swiperElRef} slides-per-view="1">
+        <swiper-container style={{ height: '100%' }} ref={swiperElRef} slides-per-view="1">
           {allSteps.map((step, index) => (
-            <swiper-slide key={step.label}>
+            <swiper-slide
+              style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+              key={step.label}
+            >
               {Math.abs(activeStep - index) < totalSteps ? (
                 <Box
                   component="img"