From 6a38bdcf77b41f8a1318f2406439cd3236dc37c2 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 19 Dec 2023 11:57:49 -0800
Subject: [PATCH] fix: better error message for connection issue

---
 src/routes/(app)/+layout.svelte | 57 +++++++++++++++++----------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 4f477423..fe523d93 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -236,36 +236,39 @@
 				<div
 					class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-900/60 flex justify-center"
 				>
-					<div class="m-auto pb-44">
-						<div class="text-center dark:text-white text-2xl font-medium z-50">
-							Ollama Update Required
-						</div>
+					<div class="m-auto pb-44 flex flex-col justify-center">
+						<div class="max-w-md">
+							<div class="text-center dark:text-white text-2xl font-medium z-50">
+								Connection Issue or Update Needed
+							</div>
 
-						<div class=" mt-4 text-center max-w-md text-sm dark:text-gray-200">
-							Oops! It seems like your Ollama needs a little attention. <br
-								class=" hidden sm:flex"
-							/>
-							We encountered a connection issue or noticed that you're running an outdated version. Please
-							update to
-							<span class=" dark:text-white font-medium">{requiredOllamaVersion} or above</span>.
-						</div>
+							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
+								Oops! It seems like your Ollama needs a little attention. <br
+									class=" hidden sm:flex"
+								/>We've detected either a connection hiccup or observed that you're using an older
+								version. Ensure you're on the latest Ollama version
+								<br class=" hidden sm:flex" />(version
+								<span class=" dark:text-white font-medium">{requiredOllamaVersion} or higher</span>)
+								or check your connection.
+							</div>
 
-						<div class=" mt-6 mx-auto relative group w-fit">
-							<button
-								class="relative z-20 flex px-5 py-2 rounded-full bg-gray-100 hover:bg-gray-200 transition font-medium text-sm"
-								on:click={async () => {
-									await setOllamaVersion(await getOllamaVersion());
-								}}
-							>
-								Check Again
-							</button>
+							<div class=" mt-6 mx-auto relative group w-fit">
+								<button
+									class="relative z-20 flex px-5 py-2 rounded-full bg-gray-100 hover:bg-gray-200 transition font-medium text-sm"
+									on:click={async () => {
+										await setOllamaVersion(await getOllamaVersion());
+									}}
+								>
+									Check Again
+								</button>
 
-							<button
-								class="text-xs text-center w-full mt-2 text-gray-400 underline"
-								on:click={async () => {
-									await setOllamaVersion(requiredOllamaVersion);
-								}}>Close</button
-							>
+								<button
+									class="text-xs text-center w-full mt-2 text-gray-400 underline"
+									on:click={async () => {
+										await setOllamaVersion(requiredOllamaVersion);
+									}}>Close</button
+								>
+							</div>
 						</div>
 					</div>
 				</div>