fix: portfolioLogo alignment (#7585)

* fix: portfolioLogo alignment

* fix: snapshot

src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx

@@ -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>
   )
 }
 

src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap

@@ -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;

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -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)`

src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap

@@ -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%;
 }