[Uni Merge] Style fixes pt. 1

src/components/Header/NetworkSelector.tsx

@@ -17,20 +17,21 @@ import { replaceURLParam } from 'utils/routes'
 
 import { useAppDispatch } from '../../state/hooks'
 import { switchToNetwork } from '../../utils/switchToNetwork'
+import { transparentize } from 'polished'
 
 export const ActiveRowLinkList = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0 8px;
   & > a {
     align-items: center;
-    color: ${({ theme }) => theme.text2};
+    color: ${({ theme }) => theme.text1};
     display: flex;
     flex-direction: row;
     font-size: 14px;
     font-weight: 500;
     justify-content: space-between;
-    padding: 8px 0 4px;
+    padding: 8px 0 4px 6px;
     text-decoration: none;
   }
   & > a:first-child {
@@ -40,14 +41,14 @@ export const ActiveRowLinkList = styled.div`
   }
 `
 export const ActiveRowWrapper = styled.div`
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => transparentize(0.4, theme.bg4)};
   border-radius: 8px;
   cursor: pointer;
-  padding: 8px;
   width: 100%;
+  padding: 8px;
 `
 export const FlyoutHeader = styled.div`
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.text1};
   font-weight: 400;
 `
 const FlyoutMenu = styled.div`

src/components/Web3Status/index.tsx

@@ -36,7 +36,7 @@ export const Web3StatusGeneric = styled(ButtonSecondary)`
   width: 100%;
   align-items: center;
   padding: 0.5rem;
-  border-radius: 14px;
+  border-radius: 12px;
   cursor: pointer;
   user-select: none;
   height: 36px;

src/components/swap/styleds.tsx

@@ -30,7 +30,6 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
   left: calc(50% - 16px);
   /* transform: rotate(90deg); */
   background-color: ${({ theme }) => theme.bg1};
-  border: 4px solid ${({ theme }) => theme.bg0};
   z-index: 2;
   ${({ clickable }) =>
     clickable

src/custom/components/Header/HeaderMod.tsx

@@ -161,8 +161,8 @@ export const AccountElement = styled.div<{ active: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
   border-radius: 12px;
+  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
   white-space: nowrap;
   width: 100%;
   cursor: pointer;

src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx

@@ -81,7 +81,7 @@ const FlyoutMenuContents = styled.div`
   flex-direction: column;
   font-size: 16px;
   overflow: auto;
-  padding: 0.3rem;
+  padding: 10px 12px;
   //position: absolute;
   //top: 54px;
   min-width: 175px;

src/custom/components/Identicon/IdenticonMod.tsx

@@ -29,7 +29,7 @@ export default function Identicon({ account: customAccount, size = 16 }: Identic
   const { avatar } = useENSAvatar(account ?? undefined, false)
   const [fetchable, setFetchable] = useState(true)
 
-  const icon = useMemo(() => account && jazzicon(16, parseInt(account.slice(2, 10), 16)), [account])
+  const icon = useMemo(() => account && jazzicon(size, parseInt(account.slice(2, 10), 16)), [size, account])
   const iconRef = useRef<HTMLDivElement>(null)
   useLayoutEffect(() => {
     const current = iconRef.current
@@ -46,7 +46,6 @@ export default function Identicon({ account: customAccount, size = 16 }: Identic
     return
   }, [icon, iconRef])
 
-  console.log(`identicon`, chainAccount, customAccount, account, avatar, fetchable)
   return (
     <StyledIdenticon>
       {avatar && fetchable ? (

src/custom/components/SearchModal/ManageLists/index.tsx

@@ -23,6 +23,7 @@ const Wrapper = styled.div`
 
   ${ListContainer} {
     ${({ theme }) => theme.neumorphism.boxShadow}
+    padding: 1rem;
   }
 `
 

src/custom/components/SwapWarnings/index.tsx

@@ -145,6 +145,7 @@ export const HighFeeWarning = (props: WarningProps) => {
         <MouseoverTooltipContent
           bgColor={theme.bg1}
           color={theme.text1}
+          wrap
           content={<HighFeeWarningMessage feePercentage={feePercentage} />}
         >
           <ErrorStyledInfo />
@@ -175,7 +176,7 @@ export const NoImpactWarning = (props: WarningProps) => {
         <div>
           Price impact <strong>unknown</strong> - trade carefully
         </div>{' '}
-        <MouseoverTooltipContent bgColor={theme.bg1} color={theme.text1} content={NoImpactWarningMessage}>
+        <MouseoverTooltipContent bgColor={theme.bg1} color={theme.text1} content={NoImpactWarningMessage} wrap>
           <ErrorStyledInfo />
         </MouseoverTooltipContent>
         {acceptWarningCb && (

src/custom/components/Web3Status/index.tsx

@@ -6,7 +6,6 @@ import { AbstractConnector } from '@web3-react/abstract-connector'
 import { getStatusIcon } from 'components/AccountDetails'
 import useRecentActivity, { TransactionAndOrder } from 'hooks/useRecentActivity'
 import { useWalletInfo } from 'hooks/useWalletInfo'
-import { ButtonSecondary } from 'components/Button'
 import { OrderStatus } from '@src/custom/state/orders/actions'
 import { STORAGE_KEY_LAST_PROVIDER } from 'constants/index'
 
@@ -16,7 +15,7 @@ export const Wrapper = styled.div`
   display: flex;
   justify-content: center;
 
-  ${ButtonSecondary} {
+  button {
     height: 38px;
     max-width: 180px;
     ${({ theme }) => theme.mediaWidth.upToVerySmall`

src/custom/components/swap/TradeSummary/RowFee.tsx

@@ -85,7 +85,7 @@ export function RowFee({
           Fees {includeGasMessage}
         </ThemedText.Black>
         {showHelpers && (
-          <MouseoverTooltipContent content={tooltip} bgColor={theme.bg1} color={theme.text1}>
+          <MouseoverTooltipContent content={tooltip} bgColor={theme.bg1} color={theme.text1} wrap>
             <StyledInfo />
           </MouseoverTooltipContent>
         )}

src/custom/components/swap/TradeSummary/RowReceivedAfterSlippage.tsx

@@ -62,6 +62,7 @@ export function RowReceivedAfterSlippage({
             content={getMinimumReceivedTooltip(allowedSlippage, isExactIn)}
             bgColor={theme.bg1}
             color={theme.text1}
+            wrap
           >
             <StyledInfo />
           </MouseoverTooltipContent>

src/custom/components/swap/TradeSummary/RowSlippage.tsx

@@ -45,6 +45,7 @@ export function RowSlippage({
         <MouseoverTooltipContent
           bgColor={theme.bg3}
           color={theme.text1}
+          wrap
           content={
             <Trans>
               <p>Your slippage is MEV protected: all orders are submitted with tight spread (0.1%) on-chain.</p>

src/custom/components/swap/styleds.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components/macro'
+import { ArrowWrapper as ArrowWrapperUni } from '@src/components/swap/styleds'
+
+export * from '@src/components/swap/styleds'
+
+export const ArrowWrapper = styled(ArrowWrapperUni)`
+  left: 16px;
+`

src/custom/pages/Profile/index.tsx

@@ -181,7 +181,7 @@ export default function Profile() {
                 <i>Total vCOW balance</i>
                 <b>
                   <span title={`${vCowBalanceMax} vCOW`}>{vCowBalance} vCOW</span>{' '}
-                  <MouseoverTooltipContent content={tooltipText.balanceBreakdown}>
+                  <MouseoverTooltipContent content={tooltipText.balanceBreakdown} wrap>
                     <HelpCircle size={14} />
                   </MouseoverTooltipContent>
                 </b>
@@ -191,7 +191,7 @@ export default function Profile() {
               <BalanceDisplay titleSize={18} altColor={true}>
                 <i>
                   Vested{' '}
-                  <MouseoverTooltipContent content={tooltipText.vested}>
+                  <MouseoverTooltipContent content={tooltipText.vested} wrap>
                     <HelpCircle size={14} />
                   </MouseoverTooltipContent>
                 </i>
@@ -270,15 +270,15 @@ export default function Profile() {
                     &nbsp;&nbsp;
                     <Txt secondary>
                       Last updated
-                      <MouseoverTooltipContent content="Data is updated on the background periodically.">
+                      <MouseoverTooltipContent content="Data is updated on the background periodically." wrap>
                         <HelpCircle size={14} />
                       </MouseoverTooltipContent>
                       :&nbsp;
                     </Txt>
                     {!lastUpdated ? (
                       '-'
                     ) : (
-                      <MouseoverTooltipContent content={<TimeFormatted date={profileData?.lastUpdated} />}>
+                      <MouseoverTooltipContent content={<TimeFormatted date={profileData?.lastUpdated} />} wrap>
                         <strong>{lastUpdated}</strong>
                       </MouseoverTooltipContent>
                     )}
@@ -317,7 +317,7 @@ export default function Profile() {
             <ChildWrapper>
               <ItemTitle>
                 Trades&nbsp;
-                <MouseoverTooltipContent content="Statistics regarding your own trades.">
+                <MouseoverTooltipContent content="Statistics regarding your own trades." wrap>
                   <HelpCircle size={14} />
                 </MouseoverTooltipContent>
               </ItemTitle>
@@ -333,7 +333,10 @@ export default function Profile() {
                     <span>
                       Total trades
                       {isTradesTooltipVisible && (
-                        <MouseoverTooltipContent content="You may see more trades here than what you see in the activity list. To understand why, check out the FAQ.">
+                        <MouseoverTooltipContent
+                          content="You may see more trades here than what you see in the activity list. To understand why, check out the FAQ."
+                          wrap
+                        >
                           <HelpCircle size={14} />
                         </MouseoverTooltipContent>
                       )}
@@ -356,7 +359,10 @@ export default function Profile() {
             <ChildWrapper>
               <ItemTitle>
                 Referrals&nbsp;
-                <MouseoverTooltipContent content="Statistics regarding trades by people who used your referral link.">
+                <MouseoverTooltipContent
+                  content="Statistics regarding trades by people who used your referral link."
+                  wrap
+                >
                   <HelpCircle size={14} />
                 </MouseoverTooltipContent>
               </ItemTitle>

src/custom/pages/Swap/SwapMod.tsx

@@ -636,12 +636,12 @@ export default function Swap({
               >
                 <AutoRow
                   justify={isExpertMode || recipientToggleVisible ? 'space-between' : 'center'}
-                  // style={{ padding: '0 1rem' }}
+                  style={{ padding: '0 1rem' }}
                 >
                   <ArrowWrapperLoader onSwitchTokens={onSwitchTokens} setApprovalSubmitted={setApprovalSubmitted} />
                   {recipient === null && !showWrap && (isExpertMode || recipientToggleVisible) ? (
                     <LinkStyledButton id="add-recipient-button" onClick={() => onChangeRecipient('')}>
-                      <Trans>+ Add a send (optional)</Trans>
+                      <Trans>+ Add a recipient (optional)</Trans>
                     </LinkStyledButton>
                   ) : null}
                 </AutoRow>

src/custom/pages/Swap/index.tsx

@@ -218,6 +218,7 @@ export const FeesDiscount: React.FC<FeesDiscountProps> = ({ onClick, theme, ...b
             content={SUBSIDY_INFO_MESSAGE + '. Click on the discount button on the right for more info.'}
             bgColor={theme.bg1}
             color={theme.text1}
+            wrap
           >
             <StyledInfo />
           </MouseoverTooltipContent>