Update button styling (#3264)

* Update button styling

* Basic button

* Slight button background

* Disabled no background

* Las tweaks

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

@@ -110,7 +110,7 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
           <Button.Group>
             <Button
               icon='paper-plane'
-              label={t<string>('send')}
+              label={t<string>('Send')}
               onClick={toggleIsTransferOpen}
             />
             {flags.isOwned && (

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

@@ -10,6 +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
 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(),
@@ -18,7 +19,7 @@ function Button ({ children, className = '', icon, isBasic, isBusy, isCircular,
 
   return (
     <button
-      className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${isNegative ? ' isNegative' : ''}${isPositive ? ' isPositive' : ''}${isPrimary ? (isBasic ? ' ui--highlight--border' : ' ui--highlight--button') : ''}${isDisabled ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''} ${className}`}
+      className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${isNegative ? ' isNegative' : ''}${isPositive ? ' isPositive' : ''}${isPrimary ? ' isPrimary' : ''}${(isBusy || isDisabled) ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''}${!onClick ? ' isReadOnly' : ''} ${className}`}
       onClick={_onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
@@ -38,14 +39,18 @@ function Button ({ children, className = '', icon, isBasic, isBusy, isCircular,
 }
 
 export default React.memo(styled(Button)`
+  background: #e9e8e7; // similar to rgba(0, 0, 0, 0.05);
   border: none;
+  color: #4e4e4e;
   cursor: pointer;
-  font-size: 0.92857142857rem; // 13/14px
+  // font-size: 0.92857142857rem; // 13/14px
+  margin: 0 1px;
   position: relative;
   text-align: center;
+  // text-shadow: 0 0 2px #f5f4f3;
 
   &:not(.hasLabel) {
-    padding: 0.75em;
+    padding: 0.7em;
 
     > .ui--Icon {
       height: 1rem;
@@ -62,31 +67,27 @@ export default React.memo(styled(Button)`
   }
 
   &.hasLabel {
-    padding: 0.75em 1.5em;
+    padding: 0.7em 1.3em;
 
     > .ui--Icon {
       margin-right: 0.75rem;
     }
   }
 
-  &.isBasic {
-    background: white !important;
-    box-shadow: 0 0 0 1px #ddd;
-    color: inherit !important;
-  }
-
-  &.isBusy {
-    cursor: wait;
-  }
-
   &.isCircular {
     border-radius: 10rem;
   }
 
-  &.isDisabled {
+  &.isDisabled, &.isReadOnly {
+    background: none;
+    box-shadow: none;
     cursor: not-allowed;
   }
 
+  &.isBusy {
+    cursor: wait;
+  }
+
   &.isFull {
     display: block;
     width: 100%;
@@ -101,7 +102,7 @@ export default React.memo(styled(Button)`
   }
 
   .ui--Button-overlay {
-    background: rgba(255, 255, 255, 0.75);
+    background: rgba(245, 244, 243, 0.75);
     bottom: 0;
     left: 0;
     position: absolute;
@@ -116,7 +117,6 @@ export default React.memo(styled(Button)`
     }
   }
 
-  &.isBusy,
   &.isDisabled {
     .ui--Button-overlay {
       visibility: visible;

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

@@ -30,18 +30,4 @@ export default React.memo(styled(ButtonGroup)`
   &+.ui--Table {
     margin-top: 1.5rem;
   }
-
-  .ui--Button {
-    margin-left: 1px !important;
-
-    &:not(:first-of-type) {
-      border-bottom-left-radius: 0rem !important;
-      border-top-left-radius: 0rem !important;
-    }
-
-    &:not(:last-of-type) {
-      border-bottom-right-radius: 0 !important;
-      border-top-right-radius: 0 !important;
-    }
-  }
 `);

packages/react-components/src/Table/Body.tsx

@@ -169,7 +169,7 @@ export default React.memo(styled(Body)`
     .ui--Button:not(.isIcon):not(:hover) {
       background: transparent !important;
       box-shadow: none !important;
-      color: #555 !important;
+      // color: #555 !important;
     }
 
     .ui.toggle.checkbox input:checked~.box:before,

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

@@ -27,6 +27,10 @@ export default createGlobalStyle<Props>`
     color: ${getHighlight} !important;
   }
 
+  .ui--highlight--before:before {
+    background: ${getHighlight} !important;
+  }
+
   .ui--highlight--bg {
     background: ${getHighlight} !important;
   }
@@ -35,15 +39,6 @@ export default createGlobalStyle<Props>`
     border-color: ${getHighlight} !important;
   }
 
-  .ui--highlight--button {
-    background: ${getHighlight} !important;
-    // box-shadow: 0 0 0 1px ${getHighlight} !important;
-
-    &:hover {
-      // box-shadow: inherit !important;
-    }
-  }
-
   .ui--highlight--color {
     color: ${getHighlight} !important;
   }
@@ -53,7 +48,7 @@ export default createGlobalStyle<Props>`
   }
 
   .ui--highlight--gradient {
-    background: ${(props: Props): string => `linear-gradient(90deg, ${props.uiHighlight || defaultHighlight}, transparent)`};
+    background: ${(props: Props) => `linear-gradient(90deg, ${props.uiHighlight || defaultHighlight}, transparent)`};
   }
 
   .ui--highlight--icon {
@@ -66,6 +61,26 @@ export default createGlobalStyle<Props>`
     stroke: ${getHighlight} !important;
   }
 
+  .ui--Button {
+    &:not(.isDisabled):not(.isIcon) {
+      .ui--Icon {
+        color: ${getHighlight};
+      }
+    }
+
+    &:hover:not(.isDisabled):not(.isReadOnly) {
+      background: ${getHighlight};
+      color: #f5f5f4;
+      text-shadow: none;
+
+      &:not(.isIcon) {
+        .ui--Icon {
+          color: inherit;
+        }
+      }
+    }
+  }
+
   .theme--default {
     .ui--Tabs-Tab.tabLinkActive {
       border-bottom-color: ${getHighlight};

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

@@ -32,22 +32,11 @@ export default css`
     }
 
     .ui--Button {
-      background-color: ${colorBtnDefault};
-      color: ${colorBtnText};
-
-      &.active,
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: ${colorBtnDefault};
-        color: ${colorBtnText};
-      }
-
-      &:hover {
+      &:hover:not(.isDisabled) {
         filter: brightness(110%);
       }
 
-      &.isIcon {
+      &.isIcon:not(.isDisabled) {
         .ui--Icon {
           color: ${colorLink};
         }