style updates

src/lib/router/Router.svelte

@@ -7,7 +7,7 @@
   import Versions from '$router/routes/Versions.svelte';
 </script>
 
-<!-- This gives a linting error: Fix -> https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
+<!-- The routes give off an error: Here is a fix -> https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
 <Route path="/"><Index /></Route>
 <Route path="/call-tauri"><CallTauri /></Route>
 <Route path="/hash-string"><HashString /></Route>

src/lib/router/routes/CallTauri.svelte

@@ -9,19 +9,20 @@
   }
 </script>
 
-<button
-  on:click={callTauri}
-  class=" font-extrabold btn btn-outline btn-primary btn-md">Call Tauri</button
->
-<div class="relative">
-  {#key message}
-    <p
-      class="absolute outline-secondary border-b-2 border-accent text-2xl
-     whitespace-nowrap
-      -translate-x-1/2 -translate-y-1/2"
-      in:fade={{ duration: 300 }}
-    >
-      {message}
-    </p>
-  {/key}
+<div class="h-full flex flex-col items-center justify-center">
+  <button
+    on:click={callTauri}
+    class="font-extrabold btn btn-outline btn-primary btn-md">Call Tauri</button
+  >
+  <div class="h-20 flex items-center">
+    {#key message}
+      <p
+        class="border-b-2 border-accent text-2xl
+    whitespace-nowrap"
+        in:fade={{ duration: 300 }}
+      >
+        {message}
+      </p>
+    {/key}
+  </div>
 </div>

src/lib/router/routes/HashString.svelte

@@ -8,14 +8,16 @@
   })();
 </script>
 
-<div class="form-control">
-  <label class="input-group">
-    <span>Hash string</span>
-    <input
-      bind:value={hashInput}
-      type="text"
-      class="input input-bordered input-secondary focus:ring-secondary focus:border-secondary focus:outline-none"
-    />
-  </label>
+<div class="h-full flex flex-col space-y-8 items-center justify-center">
+  <div class="form-control">
+    <label class="input-group">
+      <span>Hash string</span>
+      <input
+        bind:value={hashInput}
+        type="text"
+        class="input input-bordered input-secondary focus:ring-secondary focus:border-secondary focus:outline-none"
+      />
+    </label>
+  </div>
+  <p class="text-center text-lg">{hashOutput}</p>
 </div>
-<p class="text-center text-sm">{hashOutput}</p>

src/lib/router/routes/Index.svelte

@@ -1,10 +1,21 @@
-<div class="flex flex-col space-y-6 items-center font-bold drop-shadow-ft">
-  <h1 class="text-4xl mt-16">Welcome</h1>
-  <h2 class="text-xl">
-    This is a <span class="bg-secondary text-secondary-content rounded-md p-1"
-      >Svelte
+<script lang="ts">
+  import svelte_logo from '$assets/svelte_logo.svg';
+  import tauri_logo from '$assets/tauri_logo.svg';
+</script>
+
+<div
+  class="flex flex-col space-y-6 items-center justify-center font-bold drop-shadow-ft h-full"
+>
+  <h1 class="text-6xl">Welcome</h1>
+  <h2 class="text-3xl flex items-center">
+    This is a &#160
+    <span>
+      <img src={svelte_logo} alt="svelte logo" class="h-12" />
     </span>
-    -
-    <span class="bg-primary text-primary-content rounded-md p-1"> Tauri</span> Template
+    &#160-&#160
+    <span>
+      <img src={tauri_logo} alt="svelte logo" class="h-12" />
+    </span>
+    &#160 Template
   </h2>
 </div>

src/lib/router/routes/Versions.svelte

@@ -20,13 +20,19 @@
   };
 </script>
 
-<h3>Versions</h3>
-<div>
-  {#await getVersions() then versions}
-    {#each Object.entries(versions) as [key, val], i (i)}
-      <div>
-        {key} - {val}
-      </div>
-    {/each}
-  {/await}
+<div
+  class="h-full flex flex-col space-y-8 items-center justify-center text-xl font-bold"
+>
+  <h1 class="text-2xl">Versions</h1>
+  <div>
+    <ul class="flex flex-col space-y-4">
+      {#await getVersions() then versions}
+        {#each Object.entries(versions) as [key, val], i (i)}
+          <li>
+            {key} - {val}
+          </li>
+        {/each}
+      {/await}
+    </ul>
+  </div>
 </div>