diff --git a/src/assets/styles/styled.ts b/src/assets/styles/styled.ts index 6b97295e9..6c9292cc8 100644 --- a/src/assets/styles/styled.ts +++ b/src/assets/styles/styled.ts @@ -20,4 +20,5 @@ export const Txt = styled.span< ${({ theme, fs }) => theme.mediaWidth.upToMedium` font-size: ${fs ? fs * 0.8 : 12}px; `} + min-height: 22px; ` diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx index 27ac093f8..58833bdfd 100644 --- a/src/custom/pages/Profile/index.tsx +++ b/src/custom/pages/Profile/index.tsx @@ -48,7 +48,7 @@ export default function Profile() { {referralLink.prefix} {referralLink.address} - + diff --git a/src/custom/pages/Profile/styled.tsx b/src/custom/pages/Profile/styled.tsx index d3eb4ce41..840d364e2 100644 --- a/src/custom/pages/Profile/styled.tsx +++ b/src/custom/pages/Profile/styled.tsx @@ -35,13 +35,14 @@ export const ChildWrapper = styled.div` flex-grow: 1; justify-content: center; border-radius: 21px; - padding: 15px; + padding: 20px; ${({ theme }) => theme.neumorphism.boxShadow}; background-color: ${({ theme }) => theme.bg7}; ${({ theme }) => theme.mediaWidth.upToSmall` grid-column-start: 1; grid-column-end: 2; width: 100%; + padding: 14px; `} > .item { width: 100%; @@ -94,7 +95,7 @@ export const StyledTitle = styled(Title)` export const ItemTitle = styled.h3` display: flex; align-items: center; - margin: 0 0 34px 0; + margin: 0 0 16px 0; font-size: 18px; line-height: 1.21; color: ${({ theme }) => theme.text1}; @@ -129,6 +130,7 @@ export const FlexCol = styled.div` justify-content: center; strong { font-size: 21px; + margin-top: 6px; ${({ theme }) => theme.mediaWidth.upToSmall` font-size: 14px; `} @@ -136,5 +138,6 @@ export const FlexCol = styled.div` span:not([role='img']) { font-size: 14px; color: ${({ theme }) => theme.text6}; + line-height: 32px; } ` diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx index 6e0f1016f..af1579013 100644 --- a/src/custom/theme/baseTheme.tsx +++ b/src/custom/theme/baseTheme.tsx @@ -115,6 +115,7 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) { }, logo: { src: `data:image/svg+xml;base64,${cowSwapLogo(darkMode)}`, + srcIcon: `data:image/svg+xml;base64,${cowSwapLogo(darkMode, true)}`, alt: 'CowSwap Logo', width: '208px', height: '50px',