Button styling in tables (incl. spacing) (#2914)

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'

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'

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;
+    }
   }
 `);

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 {