Merge pull request #64 from lidofinance/feature/si-1913-add-feedback-link

feat: feedback link

Author: Jeday

consts/external-links.ts

@@ -1,2 +1,4 @@
 // while the repo is not public, this will force to use build time config
 export const IPFS_MANIFEST_URL = '';
+
+export const FEEDBACK_SURVEY_URL = 'https://tally.so/r/3X9vYe';

shared/components/layout/navigation/navigation.tsx

@@ -1,6 +1,6 @@
 import { FC, memo, useMemo, ReactNode } from 'react';
 import { Address } from 'viem';
-import { Stake, Withdraw, Wrap, Text } from '@lidofinance/lido-ui';
+import { Stake, Withdraw, Wrap, Text, External } from '@lidofinance/lido-ui';
 
 import { ReactComponent as GearIcon } from 'assets/icons/gear.svg';
 import { ReactComponent as MosaicIcon } from 'assets/icons/mosaic.svg';
@@ -19,8 +19,10 @@ import {
   AllVaults,
   ArrowBackStyled,
   NavList,
+  FeedbackLink,
 } from './styles';
 import { useRouter } from 'next/router';
+import { FEEDBACK_SURVEY_URL } from 'consts/external-links';
 
 type PageRoute = {
   name: string;
@@ -185,6 +187,9 @@ export const Navigation: FC = memo(() => {
           </NavList>
         </>
       )}
+      <FeedbackLink target="_blank" href={FEEDBACK_SURVEY_URL}>
+        Leave feedback <External />
+      </FeedbackLink>
     </Nav>
   );
 });

shared/components/layout/navigation/styles.ts

@@ -101,3 +101,11 @@ export const ArrowBackStyled = styled(ArrowBack)`
   height: 14px;
   margin-right: ${({ theme }) => theme.spaceMap.sm}px;
 `;
+
+export const FeedbackLink = styled.a`
+  display: flex;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.spaceMap.xxl}px;
+  padding-top: ${({ theme }) => theme.spaceMap.xxl}px;
+  border-top: 1px solid var(--lido-color-border);
+`;