diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index b6330974..b9df79fc 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -25,21 +25,27 @@ const Wrapper = styled.div` font-size: ${FONT_SIZE.SMALL}; background: ${colors.LANDING}; color: ${colors.TEXT_SECONDARY}; - padding: 22px 48px; + padding: 10px 30px; display: flex; + height: 59px; + flex-wrap: wrap; + align-items: center; justify-content: space-between; border-top: 1px solid ${colors.BACKGROUND}; + + @media all and (max-width: 850px) { + justify-content: center; + } `; const StyledLink = styled(Link)` - margin: 0 6px; - margin-right: 20px; + margin: 0 10px; white-space: nowrap; `; const Copy = styled.div` white-space: nowrap; - margin-right: 20px; + margin-right: 10px; `; const Left = styled.div` @@ -48,6 +54,7 @@ const Left = styled.div` const Right = styled.div` white-space: nowrap; + margin: 0 10px; `; const Footer = ({ opened, toggle, isLanding }: Props) => ( @@ -60,7 +67,7 @@ const Footer = ({ opened, toggle, isLanding }: Props) => ( {!isLanding && ( - Exchange rates byCoingecko + Exchange rates by Coingecko )} diff --git a/src/components/Select/index.js b/src/components/Select/index.js index 5c6bef36..086caee9 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -10,6 +10,10 @@ const styles = isSearchable => ({ width: '100%', color: colors.TEXT_SECONDARY, }), + valueContainer: base => ({ + ...base, + overflow: 'hidden', + }), control: (base, { isDisabled }) => ({ ...base, minHeight: 'initial', diff --git a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js b/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js index 0e5eda43..f3cf54b4 100644 --- a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js @@ -76,7 +76,7 @@ class Indicator extends PureComponent { const active = wrapper.querySelector('.active'); if (!active) return; const bounds = active.getBoundingClientRect(); - const left = bounds.left - wrapper.getBoundingClientRect().left; + const left = bounds.left - wrapper.getBoundingClientRect().left + wrapper.scrollLeft; const { state } = this; if (state.style.left !== left) { diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index d61d05fd..5f9ae7cc 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -21,9 +21,9 @@ const Wrapper = styled.div` height: 100%; flex: 1; align-items: center; - justify-content: space-between; - padding: 0px 30px 0 40px; - max-width: 600px; + padding: 0px 30px 0 35px; + overflow-y: hidden; + overflow-x: auto; `; const StyledNavLink = styled(NavLink)` @@ -31,9 +31,9 @@ const StyledNavLink = styled(NavLink)` font-size: ${FONT_SIZE.TOP_MENU}; color: ${colors.TEXT_SECONDARY}; margin: 0px 4px; - padding: 20px; + padding: 20px 35px; white-space: nowrap; - + &.active, &:hover { transition: all 0.3s ease-in-out; diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index 78679df7..1a63e5f5 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -53,7 +53,6 @@ const WalletWrapper = styled.div` display: flex; flex-direction: row; border-radius: 4px 4px 0px 0px; - overflow: hidden; margin-top: 32px; @media screen and (max-width: 1170px) { @@ -66,6 +65,7 @@ const MainContent = styled.article` flex: 1; display: flex; flex-direction: column; + overflow: auto; `; const Navigation = styled.nav` diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index d1570034..11e9b0fe 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/src/views/Wallet/views/Account/SignVerify/index.js @@ -25,11 +25,29 @@ const RowButtons = styled(Row)` display: flex; align-items: center; justify-content: flex-end; + + @media all and (max-width: 850px) { + flex-wrap: wrap; + margin: -5px; + } `; const StyledButton = styled(Button)` - margin-left: 10px; width: 110px; + margin-left: 10px; + + &:first-child { + margin-left: 0; + } + + @media all and (max-width: 850px) { + flex: 1; + margin: 5px; + + &:first-child { + margin-left: 5px; + } + } `; const Column = styled.div` @@ -116,11 +134,11 @@ class SignVerify extends Component { /> - + signVerifyActions.sign(account.accountPath, signMessage)} >Sign @@ -164,11 +182,11 @@ class SignVerify extends Component { /> - + {