ui library

frontend/src/App.svelte

@@ -2,6 +2,14 @@
   import "./app.css";
   import logo from "./assets/images/logo-universal.png";
   import { Greet } from "../wailsjs/go/main/App.js";
+  import {
+    Navbar,
+    NavBrand,
+    DarkMode,
+    Label,
+    Input,
+    Button,
+  } from "flowbite-svelte";
 
   let resultText: string = "Please enter your name below 👇";
   let name: string;
@@ -11,74 +19,24 @@
   }
 </script>
 
-<main>
-  <img alt="Wails logo" id="logo" src={logo} />
-  <div class="result" id="result">{resultText}</div>
-  <div class="input-box" id="input">
-    <input
-      autocomplete="off"
-      bind:value={name}
-      class="input"
-      id="name"
-      type="text"
-    />
-    <button class="btn" on:click={greet}>Greet</button>
-  </div>
+<main class="flex-col items-center bg-white dark:bg-gray-900">
+  <Navbar>
+    <NavBrand>
+      <span>Wails</span>
+    </NavBrand>
+    <DarkMode />
+  </Navbar>
+
+  <form class="max-w-96 grid-cols-1 gap-6" on:submit={console.log}>
+    <div>
+      <Label for="first_name" class="mb-2">First name</Label>
+      <Input type="text" id="first_name" placeholder="John" required />
+    </div>
+    <div>
+      <Label for="first_name" class="mb-2">First name</Label>
+      <Input type="text" id="first_name" placeholder="John" required />
+    </div>
+
+    <Button type="submit">Submit</Button>
+  </form>
 </main>
-
-<style>
-  #logo {
-    display: block;
-    width: 50%;
-    height: 50%;
-    margin: auto;
-    padding: 10% 0 0;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-origin: content-box;
-  }
-
-  .result {
-    height: 20px;
-    line-height: 20px;
-    margin: 1.5rem auto;
-  }
-
-  .input-box .btn {
-    width: 60px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 3px;
-    border: none;
-    margin: 0 0 0 20px;
-    padding: 0 8px;
-    cursor: pointer;
-  }
-
-  .input-box .btn:hover {
-    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-    color: #333333;
-  }
-
-  .input-box .input {
-    border: none;
-    border-radius: 3px;
-    outline: none;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
-    background-color: rgba(240, 240, 240, 1);
-    -webkit-font-smoothing: antialiased;
-  }
-
-  .input-box .input:hover {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
-  }
-
-  .input-box .input:focus {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
-  }
-</style>

frontend/src/style.css

@@ -1,26 +0,0 @@
-html {
-    background-color: rgba(27, 38, 54, 1);
-    text-align: center;
-    color: white;
-}
-
-body {
-    margin: 0;
-    color: white;
-    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-}
-
-@font-face {
-    font-family: "Nunito";
-    font-style: normal;
-    font-weight: 400;
-    src: local(""),
-    url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
-}
-
-#app {
-    height: 100vh;
-    text-align: center;
-}