style updates

src/assets/svelte_logo.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 98.1 118" style="enable-background:new 0 0 98.1 118;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF3E00;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
+	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
+	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"/>
+<path class="st1" d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
+	c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
+	c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
+	c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
+	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
+	c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
+	c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
+	c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"/>
+</svg>

src/assets/tauri_logo.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="289px" viewBox="0 0 256 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>tauri</title>
+    <g>
+        <path d="M178.496537,104.930808 C178.496537,120.084789 166.211808,132.369518 151.057827,132.369518 C135.903846,132.369518 123.619117,120.084789 123.619117,104.930808 C123.619117,89.7768271 135.903846,77.4920982 151.057827,77.4920982 C166.211808,77.4920982 178.496537,89.7768271 178.496537,104.930808 L178.496537,104.930808 Z" fill="#FFC131"></path>
+        <circle fill="#24C8DB" transform="translate(104.910905, 183.505296) rotate(180.000000) translate(-104.910905, -183.505296) " cx="104.910905" cy="183.505296" r="27.43871"></circle>
+        <path d="M207.930789,192.859402 C196.903242,199.988468 184.633759,204.980878 171.761581,207.576528 C175.492052,196.940829 176.729513,185.590328 175.378501,174.400633 C205.331921,163.929437 225.19973,135.436855 224.670689,103.710314 C224.141649,71.9837732 203.334922,44.1694396 173.049037,34.7027353 C142.763153,25.2360309 109.81978,36.2492602 91.3162718,62.0266434 C77.3552077,63.5974626 63.76947,67.5634855 51.1559781,73.7504559 C64.8599422,29.5355208 105.956668,-0.445123293 152.244425,0.00500014704 C198.532183,0.455123587 239.038101,31.2293093 251.879622,75.7023849 C264.721143,120.17546 246.854085,167.804739 207.930789,192.859402 L207.930789,192.859402 Z M52.4031922,92.8328315 L78.0958024,95.9508667 C78.6785818,90.9892674 79.7651054,86.0999113 81.3385591,81.3584618 C71.1758781,83.7210695 61.4231351,87.5885365 52.4031922,92.8328315 L52.4031922,92.8328315 Z" fill="#FFC131"></path>
+        <path d="M47.9132215,95.5767025 C59.0070613,88.3748885 71.3642836,83.3388972 84.3318729,80.7348548 C80.4092975,91.3689001 79.0006191,102.766389 80.2160664,114.035471 C50.3687066,124.653897 30.6674546,153.183397 31.3099018,184.856778 C31.9523489,216.53016 52.7942769,244.237302 83.0476678,253.636674 C113.301059,263.036046 146.174554,252.017653 164.65246,226.284739 C178.605962,224.753189 192.191364,220.829455 204.812754,214.685648 C191.075002,258.852536 149.999038,288.783905 103.747182,288.330443 C57.4953265,287.87698 17.0141083,257.146007 4.14495666,212.71826 C-8.72419499,168.290513 9.06449061,120.680804 47.9132215,95.5767025 L47.9132215,95.5767025 Z M203.440819,195.603273 L202.941933,195.852715 L203.440819,195.603273 Z" fill="#24C8DB"></path>
+    </g>
+</svg>

src/lib/components/nav/HeaderNav.svelte

@@ -1,8 +1,26 @@
+<script lang="ts">
+  import { active } from 'tinro';
+</script>
+
 <nav class="h-full">
   <ul class="flex space-x-4 h-full items-center [&>li>a]:p-2">
-    <li><a href="/">Home</a></li>
+    <li>
-    <li><a href="/call-tauri">CallTauri</a></li>
+      <a use:active exact data-active-class="border-b-2" href="/">Home</a>
-    <li><a href="/hash-string">HashString</a></li>
+    </li>
-    <li><a href="/versions">Versions</a></li>
+    <li>
+      <a use:active exact data-active-class="border-b-2" href="/call-tauri"
+        >CallTauri</a
+      >
+    </li>
+    <li>
+      <a use:active exact data-active-class="border-b-2" href="/hash-string"
+        >HashString</a
+      >
+    </li>
+    <li>
+      <a use:active exact data-active-class="border-b-2" href="/versions"
+        >Versions</a
+      >
+    </li>
   </ul>
 </nav>

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>
 
+<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="relative">
+  <div class="h-20 flex items-center">
     {#key message}
       <p
-      class="absolute outline-secondary border-b-2 border-accent text-2xl
+        class="border-b-2 border-accent text-2xl
-     whitespace-nowrap
+    whitespace-nowrap"
-      -translate-x-1/2 -translate-y-1/2"
         in:fade={{ duration: 300 }}
       >
         {message}
       </p>
     {/key}
   </div>
+</div>

src/lib/router/routes/HashString.svelte

@@ -8,6 +8,7 @@
   })();
 </script>
 
+<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>
@@ -18,4 +19,5 @@
       />
     </label>
   </div>
-<p class="text-center text-sm">{hashOutput}</p>
+  <p class="text-center text-lg">{hashOutput}</p>
+</div>

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">
+<script lang="ts">
-  <h1 class="text-4xl mt-16">Welcome</h1>
+  import svelte_logo from '$assets/svelte_logo.svg';
-  <h2 class="text-xl">
+  import tauri_logo from '$assets/tauri_logo.svg';
-    This is a <span class="bg-secondary text-secondary-content rounded-md p-1"
+</script>
-      >Svelte
+
+<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>
-    -
+    &#160-&#160
-    <span class="bg-primary text-primary-content rounded-md p-1"> Tauri</span> Template
+    <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
+  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)}
-      <div>
+          <li>
             {key} - {val}
-      </div>
+          </li>
         {/each}
       {/await}
+    </ul>
+  </div>
 </div>