feat(web): add button types

web/src/StyleGuide.jsx

@@ -28,6 +28,30 @@ export default function StyleGuide() {
         <Button color="green">Save</Button>
         <Button disabled>Disabled</Button>
       </div>
+      <div class="flex space-x-4 mb-4">
+        <Button type="text">Default</Button>
+        <Button color="red" type="text">
+          Danger
+        </Button>
+        <Button color="green" type="text">
+          Save
+        </Button>
+        <Button disabled type="text">
+          Disabled
+        </Button>
+      </div>
+      <div class="flex space-x-4 mb-4">
+        <Button type="outlined">Default</Button>
+        <Button color="red" type="outlined">
+          Danger
+        </Button>
+        <Button color="green" type="outlined">
+          Save
+        </Button>
+        <Button disabled type="outlined">
+          Disabled
+        </Button>
+      </div>
 
       <Heading size="md">Switch</Heading>
       <div class="flex">

web/src/components/Button.jsx

@@ -5,24 +5,31 @@ const noop = () => {};
 const ButtonColors = {
   blue: {
     contained: 'bg-blue-500 focus:bg-blue-400 active:bg-blue-600 ring-blue-300',
-    outlined: '',
+    outlined:
+      'text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
     text:
       'text-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
   },
   red: {
     contained: 'bg-red-500 focus:bg-red-400 active:bg-red-600 ring-red-300',
-    outlined: '',
-    text: '',
+    outlined:
+      'text-red-500 border-2 border-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
+    text:
+      'text-red-500 hover:bg-red-500 hover:bg-opacity-20 focus:bg-red-500 focus:bg-opacity-40 active:bg-red-500 active:bg-opacity-40',
   },
   green: {
     contained: 'bg-green-500 focus:bg-green-400 active:bg-green-600 ring-green-300',
-    outlined: '',
-    text: '',
+    outlined:
+      'text-green-500 border-2 border-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
+    text:
+      'text-green-500 hover:bg-green-500 hover:bg-opacity-20 focus:bg-green-500 focus:bg-opacity-40 active:bg-green-500 active:bg-opacity-40',
   },
   disabled: {
     contained: 'bg-gray-400',
-    outlined: '',
-    text: '',
+    outlined:
+      'text-gray-500 border-2 border-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
+    text:
+      'text-gray-500 hover:bg-gray-500 hover:bg-opacity-20 focus:bg-gray-500 focus:bg-opacity-40 active:bg-gray-500 active:bg-opacity-40',
   },
   black: {
     contained: '',
@@ -48,7 +55,7 @@ export default function Button({
   type = 'contained',
   ...attrs
 }) {
-  let classes = `${className} ${
+  let classes = `${className} ${ButtonTypes[type]} ${
     ButtonColors[disabled ? 'disabled' : color][type]
   } font-sans inline-flex font-bold uppercase text-xs px-2 py-2 rounded outline-none focus:outline-none ring-opacity-50 transition-shadow transition-colors ${
     disabled ? 'cursor-not-allowed' : 'focus:ring-2 cursor-pointer'