From c00ce531c8557a099950afd5413aeb79c273c140 Mon Sep 17 00:00:00 2001
From: biocom <michel@gnosis.pm>
Date: Tue, 17 Aug 2021 15:34:39 +0200
Subject: [PATCH 1/4] Click to copy move.

---
 src/components/AccountDetails/Copy.tsx        |  2 +-
 .../components/AccountDetails/index.tsx       | 58 +++++++------------
 .../components/AccountDetails/styled.ts       |  9 ++-
 3 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/src/components/AccountDetails/Copy.tsx b/src/components/AccountDetails/Copy.tsx
index 00cbd2fc5..c99833221 100644
--- a/src/components/AccountDetails/Copy.tsx
+++ b/src/components/AccountDetails/Copy.tsx
@@ -19,7 +19,7 @@ export const CopyIcon = styled(LinkStyledButton)`
     color: ${({ theme }) => theme.text2};
   }
 `
-const TransactionStatusText = styled.span`
+export const TransactionStatusText = styled.span`
   margin-left: 0.25rem;
   font-size: 0.825rem;
   ${({ theme }) => theme.flexRowNoWrap};
diff --git a/src/custom/components/AccountDetails/index.tsx b/src/custom/components/AccountDetails/index.tsx
index 248c70c4f..e43982a1a 100644
--- a/src/custom/components/AccountDetails/index.tsx
+++ b/src/custom/components/AccountDetails/index.tsx
@@ -182,7 +182,12 @@ export default function AccountDetails({
                 <NetworkCard title={NETWORK_LABELS[chainId]}>{NETWORK_LABELS[chainId]}</NetworkCard>
               )}
               {getStatusIcon(connector, walletInfo)}
-              <WalletNameAddress>{ENSName ? ENSName : account && shortenAddress(account)}</WalletNameAddress>
+
+              {(ENSName || account) && (
+                <Copy toCopy={ENSName ? ENSName : account ? account : ''}>
+                  <WalletNameAddress>{ENSName ? ENSName : account && shortenAddress(account)}</WalletNameAddress>
+                </Copy>
+              )}
             </div>
 
             <WalletActions>
@@ -204,43 +209,20 @@ export default function AccountDetails({
           </AccountControl>
         </AccountGroupingRow>
         <AccountGroupingRow>
-          {ENSName ? (
-            <>
-              <AccountControl>
-                <WalletLowerActions>
-                  {account && (
-                    <Copy toCopy={account}>
-                      <span style={{ marginLeft: '4px' }}>Copy Address</span>
-                    </Copy>
-                  )}
-                  {chainId && account && (
-                    <AddressLink hasENS={!!ENSName} isENS={true} href={getEtherscanLink(chainId, ENSName, 'address')}>
-                      <LinkIcon size={16} />
-                      <span style={{ marginLeft: '4px' }}>{explorerLabel}</span>
-                    </AddressLink>
-                  )}
-                </WalletLowerActions>
-              </AccountControl>
-            </>
-          ) : (
-            <>
-              <AccountControl>
-                <WalletLowerActions>
-                  {account && (
-                    <Copy toCopy={account}>
-                      <span style={{ marginLeft: '4px' }}>Copy Address</span>
-                    </Copy>
-                  )}
-                  {chainId && account && (
-                    <AddressLink hasENS={!!ENSName} isENS={false} href={getEtherscanLink(chainId, account, 'address')}>
-                      <LinkIcon size={16} />
-                      <span style={{ marginLeft: '4px' }}>{explorerLabel}</span>
-                    </AddressLink>
-                  )}
-                </WalletLowerActions>
-              </AccountControl>
-            </>
-          )}
+          <AccountControl>
+            <WalletLowerActions>
+              {chainId && account && (
+                <AddressLink
+                  hasENS={!!ENSName}
+                  isENS={ENSName ? true : false}
+                  href={getEtherscanLink(chainId, ENSName ? ENSName : account, 'address')}
+                >
+                  <LinkIcon size={16} />
+                  <span style={{ marginLeft: '4px' }}>{explorerLabel}</span>
+                </AddressLink>
+              )}
+            </WalletLowerActions>
+          </AccountControl>
         </AccountGroupingRow>
       </InfoCard>
 
diff --git a/src/custom/components/AccountDetails/styled.ts b/src/custom/components/AccountDetails/styled.ts
index 1ef7d607e..417c9ee89 100644
--- a/src/custom/components/AccountDetails/styled.ts
+++ b/src/custom/components/AccountDetails/styled.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { CopyIcon } from 'components/AccountDetails/Copy'
+import { CopyIcon, TransactionStatusText } from 'components/AccountDetails/Copy'
 import { LinkStyledButton } from 'theme'
 import { NetworkCard as NetworkCardUni } from 'components/Header/HeaderMod'
 import {
@@ -51,6 +51,7 @@ export const Wrapper = styled.div`
     color: ${({ theme }) => theme.text1};
     opacity: 0.7;
     transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    margin: 0;
 
     &:not(${WalletName}):hover {
       opacity: 1;
@@ -58,6 +59,12 @@ export const Wrapper = styled.div`
     }
   }
 
+  ${TransactionStatusText} {
+    order: 2;
+    margin: 0 0 0 8px;
+    align-self: center;
+  }
+
   ${WalletName} {
     text-align: right;
 

From 73f0d4e7021faf69546701908bde886f00bae9a1 Mon Sep 17 00:00:00 2001
From: biocom <michel@gnosis.pm>
Date: Tue, 17 Aug 2021 15:47:21 +0200
Subject: [PATCH 2/4] Icon wrapper remove.

---
 src/custom/components/AccountDetails/index.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/custom/components/AccountDetails/index.tsx b/src/custom/components/AccountDetails/index.tsx
index e43982a1a..b8a454d09 100644
--- a/src/custom/components/AccountDetails/index.tsx
+++ b/src/custom/components/AccountDetails/index.tsx
@@ -92,11 +92,7 @@ export function getStatusIcon(connector?: AbstractConnector, walletInfo?: Connec
       </IconWrapper>
     )
   } else if (connector === injected) {
-    return (
-      <IconWrapper size={16}>
-        <Identicon />
-      </IconWrapper>
-    )
+    return <Identicon />
   } else if (connector === walletconnect) {
     return (
       <IconWrapper size={16}>

From 1eb041700a1c7c2918034fde753bf984b7ff2adf Mon Sep 17 00:00:00 2001
From: biocom <michel@gnosis.pm>
Date: Wed, 18 Aug 2021 13:14:44 +0200
Subject: [PATCH 3/4] Mobile header fixes.

---
 .../components/AccountDetails/styled.ts       |  1 +
 src/custom/components/Header/index.tsx        | 24 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/custom/components/AccountDetails/styled.ts b/src/custom/components/AccountDetails/styled.ts
index 417c9ee89..a02e183a9 100644
--- a/src/custom/components/AccountDetails/styled.ts
+++ b/src/custom/components/AccountDetails/styled.ts
@@ -63,6 +63,7 @@ export const Wrapper = styled.div`
     order: 2;
     margin: 0 0 0 8px;
     align-self: center;
+    font-size: 21px;
   }
 
   ${WalletName} {
diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
index 3f31a2bcd..334b6b3d0 100644
--- a/src/custom/components/Header/index.tsx
+++ b/src/custom/components/Header/index.tsx
@@ -8,10 +8,10 @@ import HeaderMod, {
   Title,
   HeaderLinks,
   HeaderRow,
-  HeaderControls,
+  HeaderControls as HeaderControlsUni,
+  BalanceText as BalanceTextUni,
   HeaderElement,
   HideSmall,
-  BalanceText,
   AccountElement,
   HeaderElementWrap,
   StyledNavLink as StyledNavLinkUni,
@@ -59,6 +59,18 @@ const StyledNavLink = styled(StyledNavLinkUni)`
   }
 `
 
+const BalanceText = styled(BalanceTextUni)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+`
+
+const HeaderControls = styled(HeaderControlsUni)`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    max-width: 100%;
+  `};
+`
+
 export const HeaderModWrapper = styled(HeaderMod)`
   ${Title} {
     margin: 0;
@@ -74,6 +86,14 @@ export const HeaderModWrapper = styled(HeaderMod)`
 const NetworkCard = styled(NetworkCardUni)`
   background-color: ${({ theme }) => theme.networkCard.background};
   color: ${({ theme }) => theme.networkCard.text};
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    margin: 0 0 0 8px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
 `
 
 const TwitterLink = styled(StyledMenuButton)`

From d22769fd13cb477ff6c948794bb90622ea1be8dc Mon Sep 17 00:00:00 2001
From: biocom <michel@gnosis.pm>
Date: Thu, 19 Aug 2021 12:15:21 +0200
Subject: [PATCH 4/4] Re-factor Copy component.

---
 src/components/AccountDetails/Copy.tsx        | 49 ---------------
 src/components/AccountDetails/index.tsx       |  2 +-
 .../components/AccountDetails/Transaction.tsx |  5 ++
 .../components/AccountDetails/index.tsx       |  2 +-
 .../components/AccountDetails/styled.ts       |  5 +-
 src/custom/components/Copy/CopyMod.tsx        | 59 +++++++++++++++++++
 src/custom/components/Copy/index.tsx          | 56 +++---------------
 src/custom/pages/Rewards/index.tsx            |  2 +-
 8 files changed, 78 insertions(+), 102 deletions(-)
 delete mode 100644 src/components/AccountDetails/Copy.tsx
 create mode 100644 src/custom/components/Copy/CopyMod.tsx

diff --git a/src/components/AccountDetails/Copy.tsx b/src/components/AccountDetails/Copy.tsx
deleted file mode 100644
index c99833221..000000000
--- a/src/components/AccountDetails/Copy.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-import styled from 'styled-components/macro'
-import useCopyClipboard from '../../hooks/useCopyClipboard'
-
-import { LinkStyledButton } from 'theme'
-import { CheckCircle, Copy } from 'react-feather'
-import { Trans } from '@lingui/macro'
-
-export const CopyIcon = styled(LinkStyledButton)`
-  color: ${({ theme }) => theme.text3};
-  flex-shrink: 0;
-  display: flex;
-  text-decoration: none;
-  font-size: 0.825rem;
-  :hover,
-  :active,
-  :focus {
-    text-decoration: none;
-    color: ${({ theme }) => theme.text2};
-  }
-`
-export const TransactionStatusText = styled.span`
-  margin-left: 0.25rem;
-  font-size: 0.825rem;
-  ${({ theme }) => theme.flexRowNoWrap};
-  align-items: center;
-`
-
-export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode }) {
-  const [isCopied, setCopied] = useCopyClipboard()
-
-  return (
-    <CopyIcon onClick={() => setCopied(props.toCopy)}>
-      {isCopied ? (
-        <TransactionStatusText>
-          <CheckCircle size={'16'} />
-          <TransactionStatusText>
-            <Trans>Copied</Trans>
-          </TransactionStatusText>
-        </TransactionStatusText>
-      ) : (
-        <TransactionStatusText>
-          <Copy size={'16'} />
-        </TransactionStatusText>
-      )}
-      {isCopied ? '' : props.children}
-    </CopyIcon>
-  )
-}
diff --git a/src/components/AccountDetails/index.tsx b/src/components/AccountDetails/index.tsx
index 27d8a9160..36eb45a53 100644
--- a/src/components/AccountDetails/index.tsx
+++ b/src/components/AccountDetails/index.tsx
@@ -5,7 +5,7 @@ import { clearAllTransactions } from '../../state/transactions/actions'
 import { shortenAddress } from 'utils'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 import { AutoRow } from '../Row'
-import Copy from './Copy'
+import Copy from 'components/Copy'
 import Transaction from 'components/AccountDetails/Transaction'
 
 import { SUPPORTED_WALLETS } from 'constants/index'
diff --git a/src/custom/components/AccountDetails/Transaction.tsx b/src/custom/components/AccountDetails/Transaction.tsx
index 613fe0243..0bd084305 100644
--- a/src/custom/components/AccountDetails/Transaction.tsx
+++ b/src/custom/components/AccountDetails/Transaction.tsx
@@ -206,9 +206,14 @@ const TransactionStatusText = styled.div`
     margin: 0 auto 0 0;
   `};
 
+  &.copied,
   &:hover {
     text-decoration: none;
   }
+
+  &.copied {
+    background: red;
+  }
 `
 
 const StatusLabelWrapper = styled.div`
diff --git a/src/custom/components/AccountDetails/index.tsx b/src/custom/components/AccountDetails/index.tsx
index b8a454d09..98f8d5861 100644
--- a/src/custom/components/AccountDetails/index.tsx
+++ b/src/custom/components/AccountDetails/index.tsx
@@ -6,7 +6,7 @@ import { AppDispatch } from 'state'
 import { clearAllTransactions } from 'state/transactions/actions'
 import { getExplorerLabel, shortenAddress } from 'utils'
 
-import Copy from 'components/AccountDetails/Copy'
+import Copy from 'components/Copy'
 import { Trans } from '@lingui/macro'
 
 import { SUPPORTED_WALLETS } from 'constants/index'
diff --git a/src/custom/components/AccountDetails/styled.ts b/src/custom/components/AccountDetails/styled.ts
index a02e183a9..715423395 100644
--- a/src/custom/components/AccountDetails/styled.ts
+++ b/src/custom/components/AccountDetails/styled.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { CopyIcon, TransactionStatusText } from 'components/AccountDetails/Copy'
+import { CopyIcon, TransactionStatusText } from 'components/Copy'
 import { LinkStyledButton } from 'theme'
 import { NetworkCard as NetworkCardUni } from 'components/Header/HeaderMod'
 import {
@@ -53,9 +53,8 @@ export const Wrapper = styled.div`
     transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
     margin: 0;
 
-    &:not(${WalletName}):hover {
+    &:hover {
       opacity: 1;
-      text-decoration: underline;
     }
   }
 
diff --git a/src/custom/components/Copy/CopyMod.tsx b/src/custom/components/Copy/CopyMod.tsx
new file mode 100644
index 000000000..d1a4134ba
--- /dev/null
+++ b/src/custom/components/Copy/CopyMod.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import styled from 'styled-components/macro'
+import useCopyClipboard from 'hooks/useCopyClipboard'
+
+import { LinkStyledButton } from 'theme'
+import { CheckCircle, Copy } from 'react-feather'
+import { Trans } from '@lingui/macro'
+import { TransactionStatusText } from 'components/Copy' // mod
+
+export const CopyIcon = styled(LinkStyledButton)`
+  color: ${({ theme }) => theme.text3};
+  flex-shrink: 0;
+  display: flex;
+  text-decoration: none;
+  font-size: 0.825rem;
+  :hover,
+  :active,
+  :focus {
+    text-decoration: none;
+    color: ${({ theme }) => theme.text2};
+  }
+`
+
+/* const TransactionStatusText = styled.span`
+  margin-left: 0.25rem;
+  font-size: 0.825rem;
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+` */
+
+export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode; clickableLink?: boolean }) {
+  const { toCopy, children, clickableLink } = props
+  const [isCopied, setCopied] = useCopyClipboard()
+
+  return (
+    <>
+      {clickableLink && <LinkStyledButton onClick={() => setCopied(toCopy)}>{toCopy}</LinkStyledButton>}
+      <CopyIcon onClick={() => setCopied(toCopy)}>
+        {isCopied ? (
+          <TransactionStatusText
+            isCopied={isCopied} // mod
+          >
+            <CheckCircle size={'16'} />
+            <TransactionStatusText
+              isCopied={isCopied} // mod
+            >
+              <Trans>Copied</Trans>
+            </TransactionStatusText>
+          </TransactionStatusText>
+        ) : (
+          <TransactionStatusText>
+            <Copy size={'16'} />
+          </TransactionStatusText>
+        )}
+        {isCopied ? '' : children}
+      </CopyIcon>
+    </>
+  )
+}
diff --git a/src/custom/components/Copy/index.tsx b/src/custom/components/Copy/index.tsx
index e89216ead..9d4c6c4cf 100644
--- a/src/custom/components/Copy/index.tsx
+++ b/src/custom/components/Copy/index.tsx
@@ -1,53 +1,15 @@
-import React from 'react'
 import styled from 'styled-components/macro'
-import useCopyClipboard from 'hooks/useCopyClipboard'
+import { CopyIcon } from './CopyMod'
 
-import { LinkStyledButton } from 'theme'
-import { CheckCircle, Copy } from 'react-feather'
-import { Trans } from '@lingui/macro'
-
-export const CopyIcon = styled(LinkStyledButton)`
-  color: ${({ theme }) => theme.text3};
-  flex-shrink: 0;
-  display: flex;
-  text-decoration: none;
-  font-size: 0.825rem;
-  :hover,
-  :active,
-  :focus {
-    text-decoration: none;
-    color: ${({ theme }) => theme.text2};
-  }
-`
-const TransactionStatusText = styled.span`
-  margin-left: 0.25rem;
-  font-size: 0.825rem;
+export const TransactionStatusText = styled.span<{ isCopied?: boolean }>`
+  color: ${({ theme, isCopied }) => (isCopied ? theme.green1 : theme.text3)};
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
-`
 
-export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode; clickableLink?: boolean }) {
-  const { toCopy, children, clickableLink } = props
-  const [isCopied, setCopied] = useCopyClipboard()
+  ${CopyIcon} {
+    color: ${({ theme, isCopied }) => (isCopied ? theme.green1 : theme.text3)};
+  }
+`
 
-  return (
-    <>
-      {clickableLink && <LinkStyledButton onClick={() => setCopied(toCopy)}>{toCopy}</LinkStyledButton>}
-      <CopyIcon onClick={() => setCopied(toCopy)}>
-        {isCopied ? (
-          <TransactionStatusText>
-            <CheckCircle size={'16'} />
-            <TransactionStatusText>
-              <Trans>Copied</Trans>
-            </TransactionStatusText>
-          </TransactionStatusText>
-        ) : (
-          <TransactionStatusText>
-            <Copy size={'16'} />
-          </TransactionStatusText>
-        )}
-        {isCopied ? '' : children}
-      </CopyIcon>
-    </>
-  )
-}
+export * from './CopyMod'
+export { default } from './CopyMod'
diff --git a/src/custom/pages/Rewards/index.tsx b/src/custom/pages/Rewards/index.tsx
index 8367d3f77..2db8e2f1c 100644
--- a/src/custom/pages/Rewards/index.tsx
+++ b/src/custom/pages/Rewards/index.tsx
@@ -3,7 +3,7 @@ import Page, { Title, Content, GdocsListStyle } from 'components/Page'
 import styled from 'styled-components'
 import { Trans } from '@lingui/macro'
 import CowsImg from 'assets/images/cows.png'
-import CopyHelper from '@src/components/AccountDetails/Copy'
+import CopyHelper from 'components/Copy'
 
 const ButtonGroup = styled.div`
   display: flex;