Add base button component

Add Login/Streaming button

src/components/Welcome.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="welcome">
     <img alt="Vue logo" src="@/assets/logo.png">
-    <h1>Welcome TheDesk</h1>
+    <h1>Welcome to TheDesk</h1>
+    <BaseButton class="primary fill" disabled>Login</BaseButton>
+    <BaseButton class="primary">Streaming Public Timeline</BaseButton>
   </div>
 </template>
 

src/components/globals/BaseButton.vue

@@ -0,0 +1,56 @@
+<template>
+  <button :type="type || 'button'" v-bind="$attrs">
+    <slot/>
+  </button>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({
+  inheritAttrs: false,
+})
+export default class BaseButton extends Vue {
+  @Prop() private type?: string
+}
+</script>
+
+<style scoped lang="postcss">
+button {
+  --btn-color: var(--color);
+  --btn-bg-color: var(--bg-color);
+
+  &.fill {
+    border-style: none;
+  }
+
+  color: var(--btn-color);
+  border-color: var(--btn-color);
+  background-color: var(--btn-bg-color);
+
+  &.primary {
+    --btn-color: #3388cc;
+
+    &.fill {
+      --btn-color: whitesmoke;
+      --btn-bg-color: #3388cc;
+    }
+  }
+
+  &:disabled {
+    --btn-color: darkgray !important;
+    border-style: solid !important;
+    --btn-bg-color: var(--bg-color) !important;
+  }
+
+  font-size: 1em;
+  margin: 0 0.5em;
+  padding: 0.8em 2em;
+
+  transition-duration: 0.5s;
+
+  &:hover:not(:disabled) {
+    filter: brightness(90%);
+  }
+}
+</style>