Merge pull request #676 from oasisprotocol/ml/reposition-help-screen-btn

Reposition help screen button on mobile
oasisprotocol · Jul 7, 2023 · cff688c · cff688c
2 parents f0d8cae + 82ecb3f
commit cff688c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/.changelog/676.trivial.md b/.changelog/676.trivial.md
@@ -0,0 +1 @@
+Reposition help screen button on mobile
diff --git a/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx b/src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx
@@ -37,7 +37,7 @@ const ParaTimeSelectorGlow = styled(Box, {
   position: 'relative',
   width: '130vw',
   height: '130vw',
-  marginTop: '-10vh',
+  marginTop: '-5vh',
   backgroundImage: `url("${
     network === Network.testnet ? paratimeSelectorGlowTestnet : paratimeSelectorGlow
   }")`,

diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
@@ -77,6 +77,7 @@ const LogotypeBox = styled(Box)(({ theme }) => ({
 const SearchInputContainer = styled(Box, {
   shouldForwardProp: prop => prop !== 'transparent',
 })<{ transparent: boolean }>(({ theme, transparent }) => ({
+  position: 'relative',
   zIndex: zIndexHomePage.searchInput,
   width: '100%',
   [theme.breakpoints.up('md')]: {
@@ -113,9 +114,8 @@ const FooterStyled = styled(Box)(({ theme }) => ({
 }))
 
 const InfoScreenBtn = styled(IconButton)(({ theme }) => ({
-  position: 'fixed',
-  right: theme.spacing(2),
-  bottom: theme.spacing(2),
+  position: 'absolute',
+  top: theme.spacing(6),
   zIndex: zIndexHomePage.paraTimeSelector,
 }))
 
@@ -162,6 +162,11 @@ export const HomePage: FC = () => {
             <SearchInputBox>
               <Search disabled={!isApiReachable} variant={searchVariant} onFocusChange={onFocusChange} />
             </SearchInputBox>
+            {showInfoScreenBtn && (
+              <InfoScreenBtn aria-label={infoAriaLabel} onClick={onToggleInfoScreenClick}>
+                <InfoOutlinedIcon fontSize="medium" sx={{ color: 'white' }} />
+              </InfoScreenBtn>
+            )}
           </SearchInputContainer>
           <ThemeByNetwork network={network}>
             <Box sx={{ zIndex: zIndexHomePage.paraTimeSelector }}>
@@ -182,12 +187,6 @@ export const HomePage: FC = () => {
           </FooterStyled>
         )}
       </HomepageLayout>
-
-      {showInfoScreenBtn && (
-        <InfoScreenBtn aria-label={infoAriaLabel} onClick={onToggleInfoScreenClick}>
-          <InfoOutlinedIcon fontSize="medium" sx={{ color: 'white' }} />
-        </InfoScreenBtn>
-      )}
     </>
   )
 }