From 76157c057e9aeabc3906fa70a1aaafdebba68907 Mon Sep 17 00:00:00 2001
From: cartcrom <39385577+cartcrom@users.noreply.github.com>
Date: Tue, 14 Nov 2023 17:02:16 -0500
Subject: [PATCH] fix: portfolioLogo alignment (#7585)

* fix: portfolioLogo alignment

* fix: snapshot
---
 .../MiniPortfolio/PortfolioLogo.tsx           | 12 ++++++-----
 .../__snapshots__/PortfolioLogo.test.tsx.snap | 20 +++++++++++++++++--
 src/components/Tokens/TokenTable/TokenRow.tsx |  2 +-
 .../__snapshots__/TokenRow.test.tsx.snap      | 10 +++++++++-
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx b/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
index 4746de6406..e0345c2a68 100644
--- a/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
+++ b/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>
   )
 }
 
diff --git a/src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap b/src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap
index 1673da678f..7421009a90 100644
--- a/src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap
+++ b/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;
diff --git a/src/components/Tokens/TokenTable/TokenRow.tsx b/src/components/Tokens/TokenTable/TokenRow.tsx
index 5dd79a3a86..098f999869 100644
--- a/src/components/Tokens/TokenTable/TokenRow.tsx
+++ b/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)`
diff --git a/src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap b/src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap
index 9f6bf95244..5d2d2e34f9 100644
--- a/src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap
+++ b/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%;
 }