Improve responsiveness of header elements. (#2376)

* Improve responsiveness of header elements. * Fix breakpoints. * Reset max-width
gnosis · Feb 4, 2022 · ee0101a · ee0101a
1 parent 653d9b6
commit ee0101a
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 44 deletions.
diff --git a/src/custom/components/CowClaimButton/index.tsx b/src/custom/components/CowClaimButton/index.tsx
@@ -26,41 +26,53 @@ export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>`
     font-weight: inherit;
     white-space: nowrap;
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    left: -1px;
-    top: -1px;
-    background: ${({ theme }) =>
-      `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`};
-    background-size: 800%;
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
-    z-index: -1;
-    animation: glow 50s linear infinite;
-    transition: background-position 0.3s ease-in-out;
-    border-radius: 12px;
-  }
+    ${({ theme }) => theme.mediaWidth.upToMedium`
+      overflow: hidden;
+      max-width: 100px;
+      text-overflow: ellipsis;
+    `};
 
-  &::after {
-    filter: blur(8px);
-  }
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      overflow: visible;
+      max-width: initial;
+    `};
 
-  &:hover::before,
-  &:hover::after {
-    animation: glow 12s linear infinite;
-  }
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      background: ${({ theme }) =>
+        `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`};
+      background-size: 800%;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      z-index: -1;
+      animation: glow 50s linear infinite;
+      transition: background-position 0.3s ease-in-out;
+      border-radius: 12px;
+    }
 
-  // Stop glowing effect on claim page
-  ${({ isClaimPage }) =>
-    isClaimPage &&
-    css`
-      &::before,
-      &::after {
-        content: none;
-      }
-    `};
+    &::after {
+      filter: blur(8px);
+    }
+
+    &:hover::before,
+    &:hover::after {
+      animation: glow 12s linear infinite;
+    }
+
+    // Stop glowing effect on claim page
+    ${({ isClaimPage }) =>
+      isClaimPage &&
+      css`
+        &::before,
+        &::after {
+          content: none;
+        }
+      `};
+  }
 
   @keyframes glow {
     0% {

diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
@@ -4,8 +4,8 @@ import { SupportedChainId as ChainId } from 'constants/chains'
 import { useHistory, useLocation } from 'react-router-dom'
 
 import HeaderMod, {
-  Title,
-  HeaderLinks,
+  Title as TitleMod,
+  HeaderLinks as HeaderLinksMod,
   HeaderRow,
   HeaderControls as HeaderControlsUni,
   BalanceText as BalanceTextUni,
@@ -80,6 +80,12 @@ const StyledNavLink = styled(StyledNavLinkUni)`
 `
 
 const BalanceText = styled(BalanceTextUni)`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    overflow: hidden;
+    max-width: 100px;
+    text-overflow: ellipsis;
+  `};
+
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: none;
   `};
@@ -133,16 +139,20 @@ export const Wrapper = styled.div`
   }
 `
 
-export const HeaderModWrapper = styled(HeaderMod)`
-  ${Title} {
-    margin: 0;
-    text-decoration: none;
-    color: ${({ theme }) => theme.text1};
-  }
+export const HeaderModWrapper = styled(HeaderMod)``
 
-  ${HeaderLinks} {
-    margin: 5px 0 0 0;
-  }
+const Title = styled(TitleMod)`
+  margin: 0;
+  text-decoration: none;
+  color: ${({ theme }) => theme.text1};
+`
+
+export const HeaderLinks = styled(HeaderLinksMod)`
+  margin: 5px 0 0 0;
+
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    display: none;
+  `};
 `
 
 export const TwitterLink = styled(StyledMenuButton)`

diff --git a/src/custom/components/Menu/index.tsx b/src/custom/components/Menu/index.tsx
@@ -31,7 +31,7 @@ export * from './MenuMod'
 const ResponsiveInternalMenuItem = styled(InternalMenuItem)`
   display: none;
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.mediaWidth.upToLarge`
       display: flex;
   `};
 `