Fix button styling

src/core/client/ui/components/BaseButton/BaseButton.css

@@ -8,3 +8,6 @@
   outline-color: -webkit-focus-ring-color;
   outline-style: auto;
 }
+
+.mouseHover {
+}

src/core/client/ui/components/Button/Button.css

@@ -1,35 +1,39 @@
 .root {
   composes: button from "talk-ui/shared/typography.css";
 
-  &:enabled,
-  &:disabled {
-    padding: 5px 20px;
-    border-radius: var(--round-corners);
-    background-color: transparent;
-    /* TODO: hover styles for the default button */
-  }
+  padding: 5px 20px;
+  border-radius: var(--round-corners);
+  background-color: transparent;
 }
 
-.root:disabled {
+.root.disabled {
   opacity: 0.4;
   cursor: default;
 }
 
-.fullWidth:enabled,
-.fullWidth:disabled {
+.fullWidth {
   display: block;
   width: 100%;
   box-sizing: border-box;
 }
 
-.primary:enabled,
-.primary:disabled {
+.regular:not(.disabled) {
+  &.mouseHover {
+    color: var(--palette-secondary-light);
+  }
+  &:active {
+    color: var(--palette-secondary-lighter);
+  }
+}
+
+.primary,
+.primary:not(.disabled) {
   background-color: var(--palette-primary-main);
   color: #fff;
 }
 
-.primary:enabled {
-  &:hover {
+.primary:not(.disabled) {
+  &.mouseHover {
     background-color: var(--palette-primary-light);
   }
 
@@ -38,15 +42,15 @@
   }
 }
 
-.primary:enabled.invert,
-.primary:disabled.invert {
+.primary.invert,
+.primary.invert:not(.disabled) {
   background-color: transparent;
   border: 1px solid var(--palette-primary-main);
   color: var(--palette-primary-main);
 }
 
-.primary:enabled.invert {
-  &:hover {
+.primary.invert:not(.disabled) {
+  &.mouseHover {
     border-color: var(--palette-primary-light);
     color: var(--palette-primary-light);
   }
@@ -57,14 +61,14 @@
   }
 }
 
-.secondary:enabled,
-.secondary:disabled {
+.secondary,
+.secondary:not(.disabled) {
   background-color: var(--palette-secondary-main);
   color: #fff;
 }
 
-.secondary:enabled {
-  &:hover {
+.secondary:not(.disabled) {
+  &.mouseHover {
     background-color: var(--palette-secondary-light);
   }
   &:active {
@@ -72,15 +76,15 @@
   }
 }
 
-.secondary:enabled.invert,
-.secondary:disabled.invert {
+.secondary.invert,
+.secondary:not(.disabled).invert {
   background-color: transparent;
   border: 1px solid var(--palette-secondary-main);
   color: var(--palette-secondary-main);
 }
 
-.secondary:enabled.invert {
-  &:hover {
+.secondary:not(.disabled).invert {
+  &.mouseHover {
     border-color: var(--palette-secondary-light);
     color: var(--palette-secondary-light);
   }
@@ -90,10 +94,3 @@
     color: var(--palette-secondary-lighter);
   }
 }
-
-/**
- * This seems to be the best way to target modern touch device browsers.
- */
-@media (-moz-touch-enabled: 1), (pointer: coarse) {
-  /* TODO: Remove hover styles */
-}

src/core/client/ui/components/Button/Button.tsx

@@ -39,6 +39,7 @@ class Button extends React.Component<InnerProps> {
       invert,
       primary,
       secondary,
+      disabled,
       ...rest
     } = this.props;
 
@@ -47,12 +48,15 @@ class Button extends React.Component<InnerProps> {
       [classes.fullWidth]: fullWidth,
       [classes.primary]: primary,
       [classes.secondary]: secondary,
+      [classes.regular]: !primary && !secondary,
+      [classes.disabled]: disabled,
     });
 
     return (
       <BaseButton
         className={rootClassName}
         classes={pick(classes, "keyboardFocus", "mouseHover")}
+        disabled={disabled}
         {...rest}
       />
     );