feat(ui): convert Button to a styled component

packages/ui/src/atoms/Button.js

 import React from 'react'
-import classnames from 'classnames'
-import classes from './Button.local.scss'
-
-const Button = ({
-  className,
-  children,
-  type = 'button',
-  disabled,
-  primary,
-  onClick,
-}) => (
-  <button
-    className={classnames(className, classes.root, {
-      [classes.disabled]: disabled,
-      [classes.primary]: primary,
-    })}
-    disabled={disabled}
-    onClick={onClick}
-    type={type}
-  >
-    {children}
-  </button>
-)
+import styled from 'styled-components'
+
+const BaseButton = styled.button.attrs({
+  type: 'button',
+})`
+  background: #ddd;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-interface);
+  font-size: inherit;
+  letter-spacing: 0.05em;
+  padding: 10px 20px;
+  position: relative;
+  text-transform: uppercase;
+
+  &:hover,
+  &:focus {
+    background: #777;
+    color: white;
+    outline: 1px solid transparent;
+  }
+
+  &:active {
+    transform: scale(0.8);
+  }
+
+  & ::after {
+    animation: 1s warning;
+    opacity: 1;
+  }
+`
+
+const PrimaryButton = BaseButton.extend`
+  background-color: var(--color-primary);
+  border: 2px solid transparent;
+  border-bottom: 4px solid var(--color-primary);
+  color: white;
+
+  &:hover {
+    background: white;
+    border: 2px solid var(--color-primary);
+    border-bottom: 4px solid var(--color-primary);
+    color: var(--color-primary);
+    outline: 1px solid transparent;
+  }
+
+  &:focus {
+    background: white;
+    border: 2px solid var(--color-primary);
+    border-bottom: 4px solid var(--color-primary);
+    box-shadow: 0 2px 0 0 var(--color-primary);
+    color: var(--color-primary);
+    outline: 1px solid transparent;
+  }
+`
+
+const DisabledButton = BaseButton.extend.attrs({
+  disabled: true,
+})`
+  background: white;
+  border: 2px solid transparent;
+  border-bottom: 2px solid #bbb;
+  color: #bbb;
+
+  &:hover {
+    background: transparent;
+    border: 2px solid transparent;
+    border-bottom: 2px solid #bbb;
+    color: #aaa;
+    cursor: not-allowed;
+  }
+
+  &:hover::after {
+    color: var(--color-danger);
+    content: 'sorry, this action is not possible';
+    display: inline;
+    font-size: 0.9em;
+    font-style: italic;
+    left: 115%;
+    letter-spacing: 0;
+    opacity: 1;
+    position: absolute;
+    text-align: left;
+    text-transform: lowercase;
+    top: 30%;
+  }
+`
+
+const Button = ({ children, disabled, primary, ...props }) => {
+  if (disabled) {
+    return <DisabledButton {...props}>{children}</DisabledButton>
+  }
+  if (primary) {
+    return <PrimaryButton {...props}>{children}</PrimaryButton>
+  }
+  return <BaseButton {...props}>{children}</BaseButton>
+}
 
 export default Button

packages/ui/src/atoms/Button.local.scss

-.root {
-  background: #ddd;
-  border: none;
-  cursor: pointer;
-  font-family: var(--font-interface);
-  font-size: inherit;
-  letter-spacing: 0.05em;
-  padding: 10px 20px;
-  position: relative;
-  text-transform: uppercase;
-}
-
-.root:hover,
-.root:focus {
-  background: #777;
-  color: white;
-  outline: 1px solid transparent;
-}
-
-// this will be added to the button that need a feedback to the user.
-// &::after {
-//   content: "Saved!";
-//   top: 20%;
-//   left: 115%;
-//   position: absolute;
-//   background: var(--color-primary);
-//   color: white;
-//   padding: 0.1em 0.3em;
-//   opacity: 0;
-// }
-.root:active {
-  transform: scale(0.8);
-}
-
-.root ::after {
-  animation: 1s warning;
-  opacity: 1;
-}
-
-.primary {
-  background-color: var(--color-primary);
-  border: 2px solid transparent;
-  border-bottom: 4px solid var(--color-primary);
-  color: white;
-}
-
-.primary:hover {
-  background: white;
-  border: 2px solid var(--color-primary);
-  border-bottom: 4px solid var(--color-primary);
-  color: var(--color-primary);
-  outline: 1px solid transparent;
-}
-
-.primary:focus {
-  background: white;
-  border: 2px solid var(--color-primary);
-  border-bottom: 4px solid var(--color-primary);
-  box-shadow: 0 2px 0 0 var(--color-primary);
-  color: var(--color-primary);
-  outline: 1px solid transparent;
-}
-
-.disabled {
-  background: white;
-  border: 2px solid transparent;
-  border-bottom: 2px solid #bbb;
-  color: #bbb;
-}
-
-.disabled:hover {
-  background: transparent;
-  border: 2px solid transparent;
-  border-bottom: 2px solid #bbb;
-  color: #aaa;
-  cursor: not-allowed;
-}
-
-.disabled:hover::after {
-  color: var(--color-danger);
-  content: 'sorry, this action is not possible';
-  display: inline;
-  font-size: 0.9em;
-  font-style: italic;
-  left: 115%;
-  letter-spacing: 0;
-  opacity: 1;
-  position: absolute;
-  text-align: left;
-  text-transform: lowercase;
-  top: 30%;
-  // width: 30ch;
-}
-
-.addFile {
-  background: none;
-  border: none;
-  font-style: normal;
-  letter-spacing: 0;
-  padding: 0;
-  text-transform: none;
-}