Button adjust (#3266)

* Button adjust

* Basic buttons

* Size adj

packages/apps/src/SideBar/index.tsx

@@ -229,13 +229,6 @@ export default React.memo(styled(SideBar)`
       right: 0;
       text-align: left;
       width: 100%;
-
-      .ui--Button {
-        background: white;
-        color: #3f3f3f;
-        margin: 0;
-        transition: transform 0.15s;
-      }
     }
 
     .apps--SideBar-toggle {

packages/page-accounts/src/Sidebar/Sidebar.tsx

@@ -204,10 +204,6 @@ export default React.memo(styled(Sidebar)`
     justify-content: center;
     margin: -1rem -1rem 1rem -1rem;
     padding: 1rem;
-
-    .ui--Button {
-      transition: 0.5s all;
-    }
   }
 
   .ui--AddressMenu-addr {

packages/react-components/src/Button/Button.tsx

@@ -10,7 +10,7 @@ import styled from 'styled-components';
 import Icon from '../Icon';
 import Spinner from '../Spinner';
 
-// iBasic, isPrimary, isPosition, isNegative - here for old compat, check, remove
+// isPrimary, isPosition, isNegative - here for old compat, check, remove
 function Button ({ children, className = '', icon, isBasic, isBusy, isCircular, isDisabled, isFull, isIcon, isNegative, isPositive, isPrimary, label, onClick, onMouseEnter, onMouseLeave, tabIndex }: ButtonProps): React.ReactElement<ButtonProps> {
   const _onClick = useCallback(
     () => !(isBusy || isDisabled) && onClick && onClick(),
@@ -28,34 +28,26 @@ function Button ({ children, className = '', icon, isBasic, isBusy, isCircular,
       <Icon icon={icon} />
       {label}
       {children}
-      <div className='ui--Button-overlay'>
-        <Spinner
-          className='ui--Button-spinner'
-          variant='cover'
-        />
-      </div>
+      <Spinner
+        className='ui--Button-spinner'
+        variant='cover'
+      />
     </button>
   );
 }
 
 export default React.memo(styled(Button)`
-  background: #e9e8e7; // similar to rgba(0, 0, 0, 0.05);
+  background: transparent; // #e9e8e7; // similar to rgba(0, 0, 0, 0.05);
   border: none;
   color: #4e4e4e;
   cursor: pointer;
   // font-size: 0.92857142857rem; // 13/14px
-  margin: 0 1px;
+  margin: 0;
   position: relative;
   text-align: center;
-  // text-shadow: 0 0 2px #f5f4f3;
 
   &:not(.hasLabel) {
-    padding: 0.7em;
-
-    > .ui--Icon {
-      height: 1rem;
-      width: 1rem;
-    }
+    padding: 0.7em 0.4rem;
   }
 
   &:not(.isCircular) {
@@ -67,13 +59,17 @@ export default React.memo(styled(Button)`
   }
 
   &.hasLabel {
-    padding: 0.7em 1.3em;
+    padding: 0.7rem 1.15rem 0.7rem ${1.15 - 0.425}rem;
 
-    > .ui--Icon {
-      margin-right: 0.75rem;
+    .ui--Icon {
+      margin-right: 0.425rem !important;
     }
   }
 
+  &.isBasic {
+    background: #fff;
+  }
+
   &.isCircular {
     border-radius: 10rem;
   }
@@ -111,6 +107,15 @@ export default React.memo(styled(Button)`
     visibility: hidden;
   }
 
+  .ui--Icon {
+    border-radius: 1rem;
+    box-sizing: content-box;
+    height: 1rem;
+    margin: -0.425rem 0;
+    padding: 0.425rem;
+    width: 1rem;
+  }
+
   &.isBusy {
     .ui--Button-spinner {
       visibility: visible;
@@ -118,8 +123,6 @@ export default React.memo(styled(Button)`
   }
 
   &.isDisabled {
-    .ui--Button-overlay {
-      visibility: visible;
-    }
+    color: #bcbbba;
   }
 `);

packages/react-components/src/Status/index.tsx

@@ -190,8 +190,8 @@ function Status ({ className = '' }: Props): React.ReactElement<Props> | null {
         <div className='dismiss'>
           <Button
             icon='times'
+            isBasic
             isFull
-            isPrimary
             label={t<string>('Dismiss all notifications')}
             onClick={_onDismiss}
           />

packages/react-components/src/styles/index.ts

@@ -62,7 +62,18 @@ export default createGlobalStyle<Props>`
   }
 
   .ui--Button {
-    &:not(.isDisabled):not(.isIcon) {
+    &:not(.isDisabled):not(.isIcon):not(.isBasic) {
+      .ui--Icon {
+        background: ${getHighlight};
+        color: #f5f5f4;
+      }
+    }
+
+    &.isBasic:not(.isDisabled):not(.isIcon) {
+      &:not(.isReadOnly) {
+        box-shadow: 0 0 1px ${getHighlight};
+      }
+
       .ui--Icon {
         color: ${getHighlight};
       }
@@ -81,6 +92,15 @@ export default createGlobalStyle<Props>`
     }
   }
 
+  .ui--Table td .ui--Button {
+    &:not(.isDisabled):not(.isIcon) {
+      .ui--Icon {
+        background: transparent;
+        color: ${getHighlight};
+      }
+    }
+  }
+
   .theme--default {
     .ui--Tabs-Tab.tabLinkActive {
       border-bottom-color: ${getHighlight};