fix: HelpButton in pools page header and live-finished control for sm…

…all screens (pancakeswap#1393)
ssowellsvt · May 31, 2021 · df5684c · df5684c
1 parent 908bd10
commit df5684c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/views/Pools/components/HelpButton.tsx b/src/views/Pools/components/HelpButton.tsx
@@ -5,20 +5,22 @@ import { useTranslation } from 'contexts/Localization'
 
 const ButtonText = styled(Text)`
   display: none;
-  ${({ theme }) => theme.mediaQueries.lg} {
+  ${({ theme }) => theme.mediaQueries.xs} {
     display: block;
   }
 `
 
 const StyledLink = styled(Link)`
   margin-right: 16px;
-  flex: 1;
   display: flex;
   justify-content: flex-end;
 
   &:hover {
     text-decoration: none;
   }
+  ${({ theme }) => theme.mediaQueries.sm} {
+    flex: 1;
+  }
 `
 
 const HelpButton = () => {

diff --git a/src/views/Pools/components/PoolTabButtons.tsx b/src/views/Pools/components/PoolTabButtons.tsx
@@ -42,8 +42,10 @@ const PoolTabButtons = ({ stakedOnly, setStakedOnly, hasStakeInFinishedPools, vi
   if (isXs || isSm) {
     return (
       <Flex flexDirection="column" alignItems="flex-start" mb="24px">
-        {viewModeToggle}
-        {liveOrFinishedSwitch}
+        <Flex width="100%" justifyContent="space-between">
+          {viewModeToggle}
+          {liveOrFinishedSwitch}
+        </Flex>
         {stakedOnlySwitch}
       </Flex>
     )

diff --git a/src/views/Pools/index.tsx b/src/views/Pools/index.tsx
@@ -207,7 +207,7 @@ const Pools: React.FC = () => {
   return (
     <>
       <PageHeader>
-        <Flex justifyContent="space-between" flexDirection={['column', null, 'row']}>
+        <Flex justifyContent="space-between" flexDirection={['column', null, null, 'row']}>
           <Flex flex="1" flexDirection="column" mr={['8px', 0]}>
             <Heading as="h1" scale="xxl" color="secondary" mb="24px">
               {t('Syrup Pools')}