feat: add top bar layout, move all styles into css and classes

src/app.css

@@ -2,8 +2,49 @@
 @tailwind components;
 @tailwind utilities;
 
-.window {
-  @apply bg-gray-900 text-slate-200;
+:root {
+  --c0: #274f21;
+  --c1: #448939;
+  --c2: #73bf67;
+
+  --c3: #193815;
+}
+
+body {
+  @apply bg-main text-main;
+}
+
+.common-window {
   @apply p-3 gap-3 w-screen h-screen;
   @apply grid grid-cols-8;
 }
+
+.main-window {
+  @apply col-span-6 flex flex-col gap-3;
+}
+
+.browser-window {
+  @apply grow shadow-inner;
+}
+
+.window-controls {
+  @apply flex justify-start;
+}
+
+.button {
+  @apply p-1 rounded-lg;
+  @apply ease-out duration-150;
+
+  @apply hover:bg-main;
+  @apply hover:px-2 hover:mx-1 hover:scale-125 hover:cursor-pointer;
+
+  @apply active:bg-dark;
+}
+
+.block {
+  @apply p-3 rounded-xl bg-block;
+}
+
+.sidebar {
+  @apply col-span-2;
+}

src/lib/components/Block.svelte

@@ -2,6 +2,6 @@
   export let className = "";
 </script>
 
-<div class="p-3 rounded-xl bg-gray-700{className ? ` ${className}` : ''}">
+<div class="block{className ? ` ${className}` : ''}">
   <slot />
 </div>

src/lib/components/Button.svelte

@@ -2,9 +2,6 @@
   export let onClick = () => {};
 </script>
 
-<button
-  class="hover:cursor-pointer hover:bg-gray-800 active:bg-gray-900 p-1 rounded-lg"
-  on:click={onClick}
->
+<button class="button" on:click={onClick}>
   <slot />
 </button>

src/lib/components/WindowControls.svelte

@@ -7,7 +7,7 @@
   import { appWindow } from "@tauri-apps/api/window";
 </script>
 
-<div class="flex justify-start" data-tauri-drag-region>
+<div class="window-controls" data-tauri-drag-region>
   <Button onClick={() => appWindow.close()}>
     <Close />
   </Button>

src/routes/+page.svelte

@@ -4,9 +4,13 @@
   import "../app.css";
 </script>
 
-<div class="window" data-tauri-drag-region>
-  <Block className="col-span-2">
+<div class="common-window" data-tauri-drag-region>
+  <Block className="sidebar">
     <WindowControls />
   </Block>
-  <Block className="col-span-6">Browser window</Block>
+  <div class="main-window">
+    <Block className="top-bar">Top bar</Block>
+
+    <Block className="browser-window">Browser window</Block>
+  </div>
 </div>

tailwind.config.js

@@ -1,9 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+  content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        main: "var(--c0)",
+        block: "var(--c1)",
+        light: "var(--c2)",
+        dark: "var(--c3)",
+      },
+      textColor: {
+        main: "var(--c2)",
+      },
+    },
   },
   plugins: [],
-}
-
+};