From 5673ee5db1bcc2a06633a6d9d086a380ee43dd60 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 9 Jan 2025 15:32:14 +0100
Subject: [PATCH] Touch up remote project states

---
 frontend/viewer/src/HomeView.svelte             | 16 +++++++++-------
 frontend/viewer/src/lib/auth/LoginButton.svelte |  4 ++--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/viewer/src/HomeView.svelte b/frontend/viewer/src/HomeView.svelte
index 59d37851e..5b9695cf3 100644
--- a/frontend/viewer/src/HomeView.svelte
+++ b/frontend/viewer/src/HomeView.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts">
   import {
     mdiBookArrowDownOutline,
     mdiBookArrowLeftOutline,
@@ -154,7 +154,7 @@
     </Button>
   </div>
 </AppBar>
-<div class="contents md:flex md:flex-col md:w-3/4 lg:w-2/4 md:mx-auto md:py-4 md:min-h-full">
+<div class="mx-auto md:w-3/4 lg:w-2/4 md:py-4">
   <div class="flex-grow hidden md:block"></div>
   <div class="project-list">
     {#await projectsPromise}
@@ -196,18 +196,20 @@
           {@const server = status.server}
           {@const serverProjects = remoteProjects[server.authority]?.filter(p => p.crdt) ?? []}
           <div>
-            <div class="flex flex-row items-center mr-2 mb-2">
-              <p class="sub-title">{server.displayName} Server</p>
+            <div class="flex flex-row mb-2 items-end mr-2 md:mr-0">
+              <p class="sub-title !my-0">{server.displayName} Server</p>
               <div class="flex-grow"></div>
-              <LoginButton {status} on:status={() => refreshProjectsAndServers()}/>
+              {#if status.loggedIn}
+                <LoginButton {status} on:status={() => refreshProjectsAndServers()}/>
+              {/if}
             </div>
             <div>
               {#if !serverProjects.length}
-                <p class="pl-2 text-surface-content/50 text-center">
+                <p class="text-surface-content/50 text-center border border-surface-300 elevation-1 rounded p-4 max-sm:mx-2">
                   {#if status.loggedIn}
                     No projects
                   {:else}
-                    Login to see projects
+                    <LoginButton {status} on:status={() => refreshProjectsAndServers()}/>
                   {/if}
                 </p>
               {/if}
diff --git a/frontend/viewer/src/lib/auth/LoginButton.svelte b/frontend/viewer/src/lib/auth/LoginButton.svelte
index 22ea1feb5..98bdc8e96 100644
--- a/frontend/viewer/src/lib/auth/LoginButton.svelte
+++ b/frontend/viewer/src/lib/auth/LoginButton.svelte
@@ -66,7 +66,7 @@
                 color="primary"
                 on:click={() => login(server)}
                 icon={mdiLogin}>
-            Login
+            Login to see projects
         </Button>
     {:else}
         <Button {loading}
@@ -74,7 +74,7 @@
                 color="primary"
                 href="/api/auth/login/{server.id}"
                 icon={mdiLogin}>
-            Login
+              Login to see projects
         </Button>
     {/if}
 {/if}