Change to display overlay for public tl on welcome

src/components/AddColumn/PublicTimeline.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <input type="text" placeholder="e.g:mstdn.jp">
+    <BaseButton
+      @click.native="status = 'public_timeline'"
+      class="primary fill"
+      style="font-size:.8em;"
+    >Add Column</BaseButton>
+  </div>
+</template>
+
+<script lang="ts">
+import { ipcRenderer } from 'electron'
+import { Component, Vue } from 'vue-property-decorator'
+
+type Status = 'welcome' | 'login' | 'public_timeline'
+
+@Component
+export default class AddColumn extends Vue {
+  public status: Status = 'welcome'
+}
+</script>=
+
+<style scoped lang="postcss">
+input {
+  color: var(--color);
+  background-color: transparent;
+  font-size: var(--font-size);
+  border: none;
+  border-bottom: 1px solid #9e9e9e;
+  border-radius: 0;
+  line-height: 3em;
+  width: 80%;
+  outline: none;
+  margin: 1em;
+
+  transition-duration: 0.5s;
+
+  &:focus {
+    border-color: #26d69a;
+  }
+}
+</style>

src/components/Welcome.vue

@@ -2,16 +2,38 @@
   <div id="welcome">
     <img alt="Vue logo" src="@/assets/logo.png">
     <h1>Welcome to TheDesk</h1>
-    <BaseButton class="primary fill" disabled>Login</BaseButton>
+    <BaseButton @click.native="status = 'login'" class="primary fill" disabled>{{ loginButton }}</BaseButton>
-    <BaseButton class="primary">Streaming Public Timeline</BaseButton>
+    <BaseButton @click.native="status = 'public_timeline'" class="primary">{{ publicTLButton }}</BaseButton>
+
+    <BaseOverlay
+      v-show="status !== 'welcome'"
+      @close="status = 'welcome'"
+      :title="status === 'login' ? loginButton : publicTLButton"
+    >
+      <Login v-if="status === 'login'"/>
+      <PublicTimeline v-else-if="status === 'public_timeline'"/>
+    </BaseOverlay>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Component, Vue } from 'vue-property-decorator'
 
-@Component
+//import Login from './Accounts/Login.vue'
+import PublicTimeline from './AddColumn/PublicTimeline.vue'
+
+type Status = 'welcome' | 'login' | 'public_timeline'
+
+@Component({
+  components: {
+    //Login,
+    PublicTimeline,
+  }
+})
 export default class Welcome extends Vue {
+  public status: Status = 'welcome'
+  public loginButton: string = 'Login'
+  public publicTLButton: string = 'Streaming Public Timeline'
 }
 </script>=
 

src/components/globals/BaseButton.vue

@@ -47,10 +47,8 @@ button {
   margin: 0 0.5em;
   padding: 0.8em 2em;
 
-  transition-duration: 0.5s;
-
   &:hover:not(:disabled) {
-    filter: brightness(90%);
+    filter: brightness(120%);
   }
 }
 </style>