fix: width of widget and network balances on token details (#4392)

* fix width

* nits

* width var

* nit

* px fix

Co-authored-by: Vignesh Mohankumar <me@vig.xyz>
This commit is contained in:
Kaylee George 2022-08-17 16:02:24 -07:00 committed by GitHub
parent 9921736102
commit 1944fe4029
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 5 deletions

@ -9,15 +9,14 @@ import styled, { useTheme } from 'styled-components/macro'
import NetworkBalance from './NetworkBalance'
const BalancesCard = styled.div`
width: 284px;
width: 100%;
height: fit-content;
color: ${({ theme }) => theme.textPrimary};
font-size: 12px;
line-height: 20px;
line-height: 16px;
padding: 20px;
background-color: ${({ theme }) => theme.backgroundSurface};
border-radius: 12px;
border: 1px solid ${({ theme }) => theme.backgroundOutline};
border-radius: 16px;
`
const ErrorState = styled.div`
display: flex;

@ -26,6 +26,7 @@ import styled from 'styled-components/macro'
import { DARK_THEME, LIGHT_THEME } from 'theme/token-details-widget-theme'
import { ROUTER_URL, RPC_URL_MAP } from 'utils/token-details-widget-config'
const WIDGET_WIDTH = 320
const Footer = styled.div`
display: none;
@media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
@ -53,6 +54,7 @@ const RightPanel = styled.div`
display: flex;
flex-direction: column;
gap: 20px;
width: ${WIDGET_WIDTH}px;
@media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
display: none;
@ -149,7 +151,7 @@ export default function TokenDetails() {
routerUrl={ROUTER_URL}
theme={widgetTheme}
// tokenList={[]}
width={290}
width={WIDGET_WIDTH}
/>
{tokenWarning && <TokenSafetyMessage tokenAddress={tokenAddress} warning={tokenWarning} />}
{!loading && (