fix button active state

ui/src/components/button/index.js

@@ -13,38 +13,99 @@ const {
 } = fns;
 
 const {
-  default: styled,
+  default: styled
 } = Styled;
 
-const styles = {
-  primaryBorder: colors.brandPrimary,
-  secondaryColor: colors.brandSecondary,
-  ...colors
-};
-
 const background = match({
-  secondary: styles.background,
+  secondary: colors.brandSecondary,
-  disabled: styles.inactiveBackground,
+  disabled: colors.brandInactive
-}, styles.brandPrimary);
+}, colors.brandPrimary);
+
+const backgroundHover = match({
+  secondary: colors.brandSecondaryDark,
+  disabled: colors.brandInactive
+}, colors.brandPrimaryDark);
+
+const backgroundActive = match({
+  secondary: colors.brandSecondaryDarkest,
+  disabled: colors.brandInactive
+}, colors.brandPrimaryDarkest);
 
 const border = match({
-  secondary: styles.border,
+  secondary: colors.borderSecondary,
-  disabled: styles.inactiveBorder
+  disabled: colors.borderInactive
-}, styles.primaryBorder);
+}, colors.borderPrimary);
+
+const borderHover = match({
+  secondary: colors.borderSecondaryDark,
+  disabled: colors.borderInactive
+}, colors.borderPrimaryDark);
+
+const borderActive = match({
+  secondary: colors.borderSecondaryDarkest,
+  disabled: colors.borderInactive
+}, colors.borderPrimaryDarkest);
 
 const color = match({
-  secondary: styles.secondaryColor,
+  secondary: colors.brandSecondaryColor,
-  disabled: styles.inactiveColor
+  disabled: colors.brandInactiveColor
-}, styles.background);
+}, colors.brandPrimaryColor);
 
+const borderRadius = match({
+  rect: 0
+}, remcalc(boxes.borderRadius));
+
+// based on bootstrap 4
 module.exports = styled.button`
-  border-radius: ${remcalc(boxes.borderRadius)};
+  display: flex;
-  box-shadow: ${boxes.bottomShaddow};
+  justify-content: center;
-  font-size: ${remcalc(16)};
+  align-items: center;
-  min-width: ${remcalc(120)};
+
-  padding: ${remcalc('18 24')};
+  margin-bottom: 0;
+  padding: ${remcalc('14 16')};
+
+  font-size: ${remcalc(16)};
+  font-weight: 400;
+  text-align: center;
+
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
 
-  background: ${background};
-  border: solid 1px ${border};
   color: ${color};
+  background-image: none;
+  background-color: ${background};
+  border-radius: ${borderRadius};
+  border: solid 1px ${border};
+
+  box-shadow: ${boxes.bottomShaddow};
+
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+    background-color: ${background};
+    border: solid 1px ${border};
+  }
+
+  &:hover {
+    background-color: ${backgroundHover};
+    border: solid 1px ${borderHover};
+  }
+
+  &:active,
+  &:active:hover,
+  &:active:focus {
+    background-image: none;
+    outline: 0;
+
+    background-color: ${backgroundActive};
+    border: solid 1px ${borderActive};
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    box-shadow: none;
+    pointer-events: none;
+  }
 `;