fix(Strategies): improve responsiveness and add form link (#1503)

src/config/links.ts

@@ -26,8 +26,11 @@ const BANXA_LINK = 'http://checkout.banxa.com/';
 const GEOBLOCK_API_ENDPOINT = '/check_access';
 const GEOBLOCK_REDIRECTION_LINK = 'https://www.interlay.io/geoblock';
 
+const FORMS_STRATEGIES_LINK = 'https://forms.gle/Ue7NQ81j2u5oNDey6';
+
 export {
   BANXA_LINK,
+  FORMS_STRATEGIES_LINK,
   GEOBLOCK_API_ENDPOINT,
   GEOBLOCK_REDIRECTION_LINK,
   INTERLAY_COMPANY_LINK,

src/pages/Strategies/Strategies.tsx

@@ -2,8 +2,9 @@ import { withErrorBoundary } from 'react-error-boundary';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import { Card, P } from '@/component-library';
+import { Card, P, TextLink } from '@/component-library';
 import { MainContainer } from '@/components';
+import { FORMS_STRATEGIES_LINK } from '@/config/links';
 import ErrorFallback from '@/legacy-components/ErrorFallback';
 import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner';
 import { PAGES, URL_PARAMETERS } from '@/utils/constants/links';
@@ -47,9 +48,9 @@ const Strategies = (): JSX.Element => {
           })}
           <Card alignItems='center' justifyContent='center'>
             <P size='xs'>More Strategies coming soon</P>
-            {/* <TextLink size='xs' underlined to={'#'}>
+            <TextLink external size='xs' underlined to={FORMS_STRATEGIES_LINK}>
               Request strategies
-            </TextLink> */}
+            </TextLink>
           </Card>
         </StyledList>
       ) : (

src/pages/Strategies/Strategy/Strategy.styles.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Flex } from '@/component-library';
+import { Flex, theme } from '@/component-library';
 
 import { StrategyForm } from '../components/StrategyForm';
 
@@ -9,7 +9,15 @@ const StyledStrategyForm = styled(StrategyForm)`
 `;
 
 const StyledFlex = styled(Flex)`
+  flex-direction: column;
+
+  @media ${theme.breakpoints.up('md')} {
+    flex-direction: row;
+  }
+`;
+
+const StyledInfoCards = styled(Flex)`
   height: min-content;
 `;
 
-export { StyledFlex, StyledStrategyForm };
+export { StyledFlex, StyledInfoCards, StyledStrategyForm };

src/pages/Strategies/Strategy/Strategy.tsx

@@ -11,7 +11,7 @@ import { getContent } from '../helpers/content';
 import { useGetStrategies } from '../hooks/use-get-strategies';
 import { useGetStrategyPosition } from '../hooks/use-get-strategy-position';
 import { StrategyRisk, StrategyType } from '../types';
-import { StyledFlex, StyledStrategyForm } from './Strategy.styles';
+import { StyledFlex, StyledInfoCards, StyledStrategyForm } from './Strategy.styles';
 
 const Strategy = (): JSX.Element | null => {
   const { t } = useTranslation();
@@ -50,10 +50,9 @@ const Strategy = (): JSX.Element | null => {
         </Flex>
       </Flex>
       <StrategyInsights stratetgy={strategy} position={position} />
-      {/* TODO: layout will change when adding leverage strat */}
-      <Flex gap='spacing6'>
+      <StyledFlex gap='spacing6'>
         <StyledStrategyForm flex='1' strategy={strategy} position={position} />
-        <StyledFlex flex='1' direction='column' gap='spacing6'>
+        <StyledInfoCards flex='1' direction='column' gap='spacing6'>
           <Card role='article' gap='spacing4'>
             <H2 size='s' weight='bold'>
               {t('strategies.how_does_it_work')}
@@ -76,8 +75,8 @@ const Strategy = (): JSX.Element | null => {
               {t('learn_more')} &gt;
             </TextLink>
           </Card>
-        </StyledFlex>
-      </Flex>
+        </StyledInfoCards>
+      </StyledFlex>
     </MainContainer>
   );
 };

src/pages/Strategies/components/StrategyInsights/StrategyInsights.styles.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Dl, theme } from '@/component-library';
+
+const StyledDl = styled(Dl)`
+  flex-direction: column;
+
+  @media ${theme.breakpoints.up('sm')} {
+    flex-direction: row;
+  }
+`;
+
+export { StyledDl };

src/pages/Strategies/components/StrategyInsights/StrategyInsights.tsx

@@ -1,11 +1,12 @@
 import { convertMonetaryAmountToValueInUSD, formatPercentage } from '@/common/utils/utils';
-import { Card, Dd, Dl, DlGroup, Dt } from '@/component-library';
+import { Card, Dd, DlGroup, Dt } from '@/component-library';
 import { formatUSD } from '@/component-library/utils/format';
 import { useGetPrices } from '@/hooks/api/use-get-prices';
 import { getTokenPrice } from '@/utils/helpers/prices';
 
 import { StrategyData } from '../../hooks/use-get-strategies';
 import { StrategyPositionData } from '../../hooks/use-get-strategy-position';
+import { StyledDl } from './StrategyInsights.styles';
 
 type Props = {
   stratetgy: StrategyData;
@@ -25,7 +26,7 @@ const StrategyInsights = ({ stratetgy, position }: Props): JSX.Element => {
   const earnedUSDLabel = formatUSD(earnedUSD, { compact: true });
 
   return (
-    <Dl wrap direction='row'>
+    <StyledDl wrap direction='row'>
       <Card flex='1'>
         <DlGroup direction='column' alignItems='flex-start' gap='spacing2'>
           <Dt weight='bold' color='primary'>
@@ -56,7 +57,7 @@ const StrategyInsights = ({ stratetgy, position }: Props): JSX.Element => {
           </Dd>
         </DlGroup>
       </Card>
-    </Dl>
+    </StyledDl>
   );
 };