[Uni Merge] Style fixes pt. 1 (#380)

* fix header button * fix button width * fix token list padding * fix network selector styles * network selector alignment * mod and fix arrow wrapper on expert mode * "recipient" consistency * fix MouseoverTooltip wrapping * identicon size * fix craco sentry config * header balance background revert * update lock * wrap fees discount * mod proper file * fix margin error * fix small screen wallet centergin
cowprotocol · Apr 14, 2022 · c2e3b84 · c2e3b84
1 parent 747a97b
commit c2e3b84
Show file tree

Hide file tree

Showing 17 changed files with 56 additions and 40 deletions.
diff --git a/src/components/Header/NetworkSelector.tsx b/src/components/Header/NetworkSelector.tsx
@@ -24,13 +24,13 @@ export const ActiveRowLinkList = styled.div`
   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 {
@@ -43,11 +43,11 @@ export const ActiveRowWrapper = styled.div`
   background-color: ${({ theme }) => theme.bg1};
   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`

diff --git a/src/components/Web3Status/index.tsx b/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;

diff --git a/src/components/swap/styleds.tsx b/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

diff --git a/src/custom/components/Header/HeaderMod.tsx b/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;

diff --git a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
@@ -26,6 +26,7 @@ import {
   LinkOutCircle,
 } from '@src/components/Header/NetworkSelector'
 import useChangeNetworks from 'hooks/useChangeNetworks'
+import { transparentize } from 'polished'
 
 /* const ActiveRowLinkList = styled.div`
   display: flex;
@@ -68,6 +69,10 @@ const FlyoutMenu = styled.div`
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     top: 38px;
   }
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    right: 20%;
+  `}
 `
 // mod: actually, this is closer to original version but I haven't yet pulled latest from uniswap
 const FlyoutMenuContents = styled.div`
@@ -81,11 +86,15 @@ 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;
   z-index: 99;
+  // mod
+  ${ActiveRowWrapper} {
+    background-color: ${({ theme }) => transparentize(0.4, theme.bg4)};
+  }
   & > *:not(:last-child) {
     margin-bottom: 5px;
   }

diff --git a/src/custom/components/Identicon/IdenticonMod.tsx b/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 ? (

diff --git a/src/custom/components/SearchModal/ManageLists/index.tsx b/src/custom/components/SearchModal/ManageLists/index.tsx
@@ -23,6 +23,7 @@ const Wrapper = styled.div`
 
   ${ListContainer} {
     ${({ theme }) => theme.neumorphism.boxShadow}
+    padding: 1rem;
   }
 `
 

diff --git a/src/custom/components/SwapWarnings/index.tsx b/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 && (

diff --git a/src/custom/components/Web3Status/Web3StatusMod.tsx b/src/custom/components/Web3Status/Web3StatusMod.tsx
@@ -23,7 +23,7 @@ import { RowBetween } from 'components/Row'
 
 // MOD imports
 import { EnhancedTransactionDetails } from 'state/enhancedTransactions/reducer'
-import { Web3StatusGeneric, Web3StatusError, Web3StatusConnect, WrappedStatusIcon } from '@src/components/Web3Status'
+import { Web3StatusGeneric as Web3StatusGenericUni, WrappedStatusIcon } from '@src/components/Web3Status'
 
 /* const IconWrapper = styled.div<{ size?: number }>`
   ${({ theme }) => theme.flexColumnNoWrap};
@@ -33,23 +33,14 @@ import { Web3StatusGeneric, Web3StatusError, Web3StatusConnect, WrappedStatusIco
     height: ${({ size }) => (size ? size + 'px' : '32px')};
     width: ${({ size }) => (size ? size + 'px' : '32px')};
   }
-`
+`*/
 
-const Web3StatusGeneric = styled(ButtonSecondary)`
-  ${({ theme }) => theme.flexRowNoWrap}
-  width: 100%;
-  align-items: center;
-  padding: 0.5rem;
-  border-radius: 14px;
-  cursor: pointer;
-  user-select: none;
-  height: 36px;
-  margin-right: 2px;
-  margin-left: 1px;
-  :focus {
-    outline: none;
-  }
+// mod
+export const Web3StatusGeneric = styled(Web3StatusGenericUni)`
+  margin-left: 0px;
+  margin-right: 0px;
 `
+
 const Web3StatusError = styled(Web3StatusGeneric)`
   background-color: ${({ theme }) => theme.red1};
   border: 1px solid ${({ theme }) => theme.red1};
@@ -87,7 +78,7 @@ const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
         color: ${({ theme }) => darken(0.05, theme.primaryText1)};
       }
     `}
-` */
+`
 
 export const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean; clickDisabled?: boolean }>`
   background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2)};

diff --git a/src/custom/components/Web3Status/index.tsx b/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`

diff --git a/src/custom/components/swap/TradeSummary/RowFee.tsx b/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>
         )}

diff --git a/src/custom/components/swap/TradeSummary/RowReceivedAfterSlippage.tsx b/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>

diff --git a/src/custom/components/swap/TradeSummary/RowSlippage.tsx b/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>

diff --git a/src/custom/components/swap/styleds.ts b/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;
+`
diff --git a/src/custom/pages/Profile/index.tsx b/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>

diff --git a/src/custom/pages/Swap/SwapMod.tsx b/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>

diff --git a/src/custom/pages/Swap/index.tsx b/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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,7 @@ const Wrapper = styled.div` @@
       ${ListContainer} {
         ${({ theme }) => theme.neumorphism.boxShadow}
+        padding: 1rem;
       }
     `
@@ Expand Down @@