fix: a better join for login

src/components/SignInAtproto.vue

@@ -15,18 +15,28 @@ const onSignIn = () => {
 </script>
 
 <template>
-  <div v-if="isLoggedIn" class="sign-in-atproto">
+  <div v-if="isLoggedIn" class="sign-in-atproto is-signed-in">
     <span>{{ handle }}</span>
-    <button class="btn btn-sm" @click="signOut">Sign out</button>
+    <button class="btn" @click="signOut">Sign out</button>
   </div>
-  <div v-else class="sign-in-atproto">
+  <div v-else class="sign-in-atproto join">
     <input
       v-model="inputHandle"
-      class="input input-sm"
+      class="input input-sm join-item"
       type="text"
       placeholder="alice.bsky.social"
       @keyup.enter="onSignIn"
     />
-    <button class="btn btn-sm" @click="onSignIn">Sign in with Bluesky</button>
+    <button class="btn input-sm join-item" @click="onSignIn">
+      Sign in with Bluesky
+    </button>
   </div>
 </template>
+
+<style scoped>
+.is-signed-in {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+</style>

src/components/WelcomeWorld.vue

@@ -25,14 +25,6 @@ const { userInput, repoInput, submit } = useForm()
     <div class="get-started">
       <sign-in-github />
       <sign-in-atproto />
-      <router-link
-        :to="{
-          name: 'FluxNoteView',
-          params: { user: 'remanso-space', repo: 'getting-started' },
-        }"
-        class="btn"
-        >Get started</router-link
-      >
       <router-link v-if="isLogged" :to="{ name: 'RepoList' }" class="btn"
         >Manage your repos</router-link
       >
@@ -80,6 +72,14 @@ const { userInput, repoInput, submit } = useForm()
       <a href="https://apoena.dev" target="_blank" rel="noopener noreferrer"
         >apoena</a
       >
+      <router-link
+        :to="{
+          name: 'FluxNoteView',
+          params: { user: 'remanso-space', repo: 'getting-started' },
+        }"
+        class="btn"
+        >Get started</router-link
+      >
     </footer>
   </div>
 </template>
@@ -126,6 +126,7 @@ h1 {
 footer {
   display: flex;
   gap: 1rem;
+  align-items: center;
 
   img {
     vertical-align: middle;