Merge pull request #155 from lidofinance/feature/ui-782-fix-wcv2-warn…

…ing-overflowing-header-on-easy-track WCv2 warning header overflow
lidofinance · Jun 28, 2023 · da99491 · da99491
2 parents b47f360 + bef8248
commit da99491
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 43 deletions.
diff --git a/modules/shared/ui/Layout/Header/Header.tsx b/modules/shared/ui/Layout/Header/Header.tsx
@@ -109,40 +109,42 @@ export function Header() {
         </BurgerWrap>
 
         {isBurgerOpened && (
-          <MobileMenu>
-            <MobileMenuScroll>
-              <MobileNavItems>
-                <NavItem
-                  link={urls.home}
-                  icon={<ActiveMotionsSVG />}
-                  children="Active motions"
-                  onClick={handleCloseMobileMenu}
-                />
-                <NavItem
-                  link={urls.archive}
-                  icon={<ArchiveSVG />}
-                  children="Archive"
-                  onClick={handleCloseMobileMenu}
-                />
-                <NavItem
-                  link={urls.startMotion}
-                  icon={<StartSVG />}
-                  children="Start motion"
-                  onClick={handleCloseMobileMenu}
-                />
-                {/* <NavItem link={urls.about} icon={<InfoSVG />} children="About" /> */}
-              </MobileNavItems>
-              <MobileNetworkWrap>
-                <Network>
-                  <NetworkBulb color={getChainColor(chainId)} />
-                  <Text size={14} weight={500}>
-                    {getChainName(chainId)}
-                  </Text>
-                </Network>
-                <HeaderWallet />
-              </MobileNetworkWrap>
-            </MobileMenuScroll>
-          </MobileMenu>
+          <>
+            <MobileNavItems>
+              <NavItem
+                link={urls.home}
+                icon={<ActiveMotionsSVG />}
+                children="Active motions"
+                onClick={handleCloseMobileMenu}
+              />
+              <NavItem
+                link={urls.archive}
+                icon={<ArchiveSVG />}
+                children="Archive"
+                onClick={handleCloseMobileMenu}
+              />
+              <NavItem
+                link={urls.startMotion}
+                icon={<StartSVG />}
+                children="Start motion"
+                onClick={handleCloseMobileMenu}
+              />
+            </MobileNavItems>
+
+            <MobileMenu>
+              <MobileMenuScroll>
+                <MobileNetworkWrap>
+                  <Network>
+                    <NetworkBulb color={getChainColor(chainId)} />
+                    <Text size={14} weight={500}>
+                      {getChainName(chainId)}
+                    </Text>
+                  </Network>
+                  <HeaderWallet />
+                </MobileNetworkWrap>
+              </MobileMenuScroll>
+            </MobileMenu>
+          </>
         )}
       </Wrap>
       <MobileSpacer />

diff --git a/modules/shared/ui/Layout/Header/HeaderStyle.ts b/modules/shared/ui/Layout/Header/HeaderStyle.ts
@@ -2,18 +2,17 @@ import styled, { css, keyframes } from 'styled-components'
 import { BREAKPOINT_MOBILE } from 'modules/globalStyles'
 
 export const Wrap = styled.div`
+  position: relative;
   margin-bottom: 30px;
   padding: 20px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 99;
+  margin-bottom: ${({ theme }) => theme.spaceMap.xxl}px;
 
-  @media (max-width: ${BREAKPOINT_MOBILE}) {
-    position: fixed;
-    left: 20px;
-    top: 0;
-    right: 20px;
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-bottom: ${({ theme }) => theme.spaceMap.lg}px;
   }
 `
 
@@ -183,6 +182,9 @@ export const MobileMenuScroll = styled.div`
 `
 
 export const MobileNavItems = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 100;
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;

diff --git a/modules/shared/utils/csp.ts b/modules/shared/utils/csp.ts
@@ -15,7 +15,13 @@ export const contentSecurityPolicy = {
   directives: {
     styleSrc: ["'self'", 'https://fonts.googleapis.com', "'unsafe-inline'"],
     fontSrc: ["'self'", 'https://fonts.gstatic.com', ...trustedHosts],
-    imgSrc: ["'self'", 'data:', 'https://*.walletconnect.org', ...trustedHosts],
+    imgSrc: [
+      "'self'",
+      'data:',
+      'https://*.walletconnect.org',
+      'https://*.walletconnect.com',
+      ...trustedHosts,
+    ],
     scriptSrc: ["'self'", "'unsafe-eval'", "'unsafe-inline'", ...trustedHosts],
     connectSrc: [
       "'self'",

diff --git a/package.json b/package.json
@@ -6,16 +6,16 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "lint:dockerfile": "dockerfilelint Dockerfile",
+    "lint": "eslint --ext ts,tsx,js,jsx .",
     "lint:fix": "yarn lint --fix",
+    "lint:dockerfile": "dockerfilelint Dockerfile",
     "typechain": "typechain --target=ethers-v5 --out-dir ./generated './abi/**/*.json'",
     "postinstall": "husky install && yarn typechain || true",
     "test": "jest"
   },
   "type": "module",
   "lint-staged": {
-    "./**/*.{ts,tsx}": [
+    "./**/*.{ts,tsx,js,jsx}": [
       "eslint --ignore-path .gitignore --max-warnings=0"
     ],
     "./**/*.{ts,tsx,css,md,json}": [