fix: portfolioLogo alignment (#7585)

* fix: portfolioLogo alignment

* fix: snapshot
This commit is contained in:
cartcrom 2023-11-14 17:02:16 -05:00 committed by GitHub
parent a1bd6f5eb4
commit 76157c057e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 9 deletions

@ -36,7 +36,9 @@ const DoubleLogoContainer = styled.div`
}
`
const StyledLogoParentContainer = styled.div`
const LogoContainer = styled.div`
display: flex;
align-items: center;
position: relative;
top: 0;
left: 0;
@ -57,9 +59,9 @@ const CircleLogoImage = styled.img<{ size: string }>`
const L2LogoContainer = styled.div`
border-radius: ${getDefaultBorderRadius(16)}px;
height: 16px;
left: 60%;
left: 70%;
position: absolute;
top: 60%;
top: 70%;
outline: 2px solid ${({ theme }) => theme.surface1};
width: 16px;
display: flex;
@ -155,10 +157,10 @@ function SquareL2Logo({ chainId }: { chainId: ChainId }) {
*/
export function PortfolioLogo(props: PortfolioLogoProps) {
return (
<StyledLogoParentContainer style={props.style}>
<LogoContainer style={props.style}>
{getLogo(props)}
<SquareL2Logo chainId={props.chainId} />
</StyledLogoParentContainer>
</LogoContainer>
)
}

@ -32,6 +32,14 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
top: 0;
left: 0;
@ -46,9 +54,9 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
.c3 {
border-radius: 4px;
height: 16px;
left: 60%;
left: 70%;
position: absolute;
top: 60%;
top: 70%;
outline: 2px solid #FFFFFF;
width: 16px;
display: -webkit-box;
@ -150,6 +158,14 @@ exports[`PortfolioLogo renders without L2 icon 1`] = `
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
top: 0;
left: 0;

@ -114,7 +114,7 @@ const ClickableContent = styled.div<{ gap?: number }>`
cursor: pointer;
`
const ClickableName = styled(ClickableContent)`
gap: 12px;
gap: 14px;
max-width: 100%;
`
const StyledHeaderRow = styled(StyledTokenRow)`

@ -3,6 +3,14 @@
exports[`LoadedRow.tsx renders a row 1`] = `
<DocumentFragment>
.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
top: 0;
left: 0;
@ -94,7 +102,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
}
.c6 {
gap: 12px;
gap: 14px;
max-width: 100%;
}