From 349a503b28ca0e6c28de7e90e65d3719b2ae1a7f Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 10 Jun 2020 08:41:51 +0200
Subject: [PATCH] Button styling in tables (incl. spacing) (#2914)

---
 .../page-accounts/src/Accounts/Account.tsx    |  1 -
 .../page-accounts/src/Contacts/Address.tsx    |  1 -
 packages/react-components/src/Table/Body.tsx  | 38 +++++++++----------
 packages/react-components/src/Table/index.tsx |  6 ++-
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index 428710ece4..d38267f094 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -331,7 +331,6 @@ function Account ({ account: { address, meta }, className = '', filter, isFavori
           icon='paper plane'
           label={t<string>('send')}
           onClick={toggleTransfer}
-          tooltip={t<string>('Send funds from this account')}
         />
         <Popup
           className='theme--default'
diff --git a/packages/page-accounts/src/Contacts/Address.tsx b/packages/page-accounts/src/Contacts/Address.tsx
index 7680e771c5..78ee7acd59 100644
--- a/packages/page-accounts/src/Contacts/Address.tsx
+++ b/packages/page-accounts/src/Contacts/Address.tsx
@@ -200,7 +200,6 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
           key='deposit'
           label={t<string>('deposit')}
           onClick={_toggleTransfer}
-          tooltip={t<string>('Send funds to this address')}
         />
         <Popup
           className='theme--default'
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index d466b5ac41..71245a6936 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -68,10 +68,6 @@ export default React.memo(styled(Body)`
       }
     }
 
-    &:hover label {
-      opacity: 1;
-    }
-
     &.address {
       min-width: 11rem;
     }
@@ -81,7 +77,7 @@ export default React.memo(styled(Body)`
     }
 
     &.button {
-      padding: 0.5rem 1rem;
+      padding: 0.5rem 0.75rem;
       text-align: right;
       white-space: nowrap;
 
@@ -143,7 +139,7 @@ export default React.memo(styled(Body)`
 
   tr {
     &:nth-child(even) {
-      background: #f8f8f8;
+      background: #f7f8f9;
     }
 
     // &.isHighlight {
@@ -184,24 +180,26 @@ export default React.memo(styled(Body)`
       }
     }
 
-    &:not(:hover) {
-      .ui.button:not(.isIcon):not(.disabled) {
-        color: #555 !important;
+    .ui.button:not(.isIcon):not(.disabled):not(:hover) {
+      color: #555 !important;
 
-        &:not(.basic) {
-          background: #eee !important;
-        }
-
-        &.basic {
-          background: transparent !important;
-          box-shadow: none !important;
-        }
+      &:not(.basic) {
+        background: transparent !important;
       }
 
-      .ui.toggle.checkbox input:checked~.box:before,
-      .ui.toggle.checkbox input:checked~label:before {
-        background-color: #eee !important;
+      &.basic {
+        background: transparent !important;
+        box-shadow: none !important;
       }
     }
+
+    .ui.button+.ui.button {
+      margin-left: 0rem;
+    }
+
+    .ui.toggle.checkbox input:checked~.box:before,
+    .ui.toggle.checkbox input:checked~label:before {
+      background-color: #eee !important;
+    }
   }
 `);
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index e652a4e79f..89fa01f23c 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -77,7 +77,11 @@ export default React.memo(styled(Table)`
       width: 100%;
 
       label {
-        opacity: 0.42;
+        opacity: 0.6;
+      }
+
+      &:hover label {
+        opacity: 1;
       }
 
       td, &:not(.filter) th {