ui library

frontend/package.json

@@ -13,6 +13,9 @@
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
     "autoprefixer": "^10.4.20",
+    "flowbite": "^3.1.1",
+    "flowbite-svelte": "^0.47.4",
+    "flowbite-svelte-icons": "^2.0.2",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",

frontend/package.json.md5

@@ -1 +1 @@
-5753144d45c28f3473746fce0c4ff3a3
+7af4c5f1467cf72f836d6b1c3881a5a4

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;
-}

frontend/tailwind.config.ts

@@ -1,11 +1,30 @@
 import type { Config } from "tailwindcss";
+import flowbitePlugin from 'flowbite/plugin'
 
 export default {
-  content: ["./src/**/*.{html,js,svelte,ts}"],
-
+  content: [
+    "./src/**/*.{html,js,svelte,ts}",
+    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+  ],
+  darkMode: 'selector',
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        // flowbite-svelte
+        primary: {
+          50: '#FFF5F2',
+          100: '#FFF1EE',
+          200: '#FFE4DE',
+          300: '#FFD5CC',
+          400: '#FFBCAD',
+          500: '#FE795D',
+          600: '#EF562F',
+          700: '#EB4F27',
+          800: '#CC4522',
+          900: '#A5371B'
+        }
+      }
+    }
   },
-
-  plugins: []
+  plugins: [flowbitePlugin]
 } as Config;

wails.json

@@ -2,9 +2,9 @@
   "$schema": "https://wails.io/schemas/config.v2.json",
   "name": "wails-svelte-tailwind-ts",
   "outputfilename": "wails-svelte-tailwind-ts",
-  "frontend:install": "npm install",
-  "frontend:build": "npm run build",
-  "frontend:dev:watcher": "npm run dev",
+  "frontend:install": "pnpm install",
+  "frontend:build": "pnpm run build",
+  "frontend:dev:watcher": "pnpm run dev",
   "frontend:dev:serverUrl": "auto",
   "author": {
     "name": "u80864958",