QA: Header (#646)

* side menu fixed width * side menu display none id screen is wide * fix account arrangement * change camelot link color
open-dollar · Jul 31, 2024 · 038ada0 · 038ada0
1 parent c84c377
commit 038ada0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx
@@ -55,12 +55,11 @@ const Nav = styled.div`
     align-items: center;
     justify-content: center;
     height: 100%;
-    @media (max-width: 767px) {
+    @media (max-width: 1073px) {
         position: unset;
         transform: initial;
         flex-direction: column;
     }
-    ${({ theme }) => theme.mediaWidth.upToSmall``}
 `
 
 const BtnStyle = css`
@@ -99,18 +98,18 @@ const BtnStyle = css`
         margin-right: 0;
     }
 
-    ${({ theme }) => theme.mediaWidth.upToSmall`
-      flex: 0 0 100%;
-      min-width: 100%;
-      font-weight: normal;
-      padding: 15px 25px;
-      display: flex;
-      align-items:center;
-      text-align: left;
-      margin: 0;
-      color :#1A74EC;
-      font-size: 20px;
-  `}
+    @media (max-width: 1073px) {
+        flex: 0 0 100%;
+        min-width: 100%;
+        font-weight: normal;
+        padding: 15px 25px;
+        display: flex;
+        align-items: center;
+        text-align: left;
+        margin: 0;
+        color: #1a74ec;
+        font-size: 20px;
+    }
 `
 const NavBarLink = styled(NavLink)`
     ${BtnStyle}

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -637,8 +637,11 @@ const InfoPopUpText = styled.div`
 const InfoPopUpSubText = styled.div`
     font-size: 13px;
     line-height: ${(props) => props.theme.font.xSmall};
-    color: ${(props) => props.theme.colors.accent};
     font-weight: 500;
+
+    a {
+        color: ${(props) => props.theme.colors.accent};
+    }
 `
 
 const OdBalanceWrapper = styled.span`

diff --git a/src/components/SideMenu.tsx b/src/components/SideMenu.tsx
@@ -484,6 +484,10 @@ const Container = styled.div`
         opacity: 1;
         transition: all 300ms;
     }
+
+    @media (min-width: 1073px) {
+        display: none;
+    }
 `
 
 const Inner = styled.div`
@@ -503,6 +507,7 @@ const Overlay = styled.div`
 const InnerContainer = styled.div`
     min-height: 100vh;
     width: calc(100% - 50px);
+    max-width: 364px;
     background: ${(props) => props.theme.colors.neutral};
     padding-bottom: 1rem;
     position: relative;
@@ -553,9 +558,6 @@ const Address = styled.div`
 
 const Account = styled.div`
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     cursor: pointer;
-    @media (max-width: 767px) {
-        justify-content: flex-start;
-    }
 `