Merge pull request 'Clan-app: adapt overall appearance & layout' (#1882) from hsjobeki/clan-core:hsjobeki-hw into main

pkgs/webview-ui/app/src/App.tsx

@@ -33,12 +33,14 @@ const App: Component = () => {
       setRoute("welcome");
     }
   });
-  return [
-    <Toaster position="top-right" />,
+  return (
+    <div class="h-screen bg-gradient-to-b from-white to-base-100 p-4">
+      <Toaster position="top-right" />
       <Layout>
         <Router route={route} />
-    </Layout>,
-  ];
+      </Layout>
+    </div>
+  );
 };
 
 export default App;

pkgs/webview-ui/app/src/Sidebar.tsx

@@ -1,16 +1,31 @@
 import { Accessor, For, Setter } from "solid-js";
 import { Route, routes } from "./Routes";
+import { activeURI } from "./App";
+import { createQuery } from "@tanstack/solid-query";
+import { callApi } from "./api";
 
 interface SidebarProps {
   route: Accessor<Route>;
   setRoute: Setter<Route>;
 }
 export const Sidebar = (props: SidebarProps) => {
+  const query = createQuery(() => ({
+    queryKey: [activeURI(), "meta"],
+    queryFn: async () => {
+      const curr = activeURI();
+      if (curr) {
+        const result = await callApi("show_clan_meta", { uri: curr });
+        if (result.status === "error") throw new Error("Failed to fetch data");
+        return result.data;
+      }
+    },
+  }));
   const { route, setRoute } = props;
   return (
-    <aside class="min-h-screen w-80 bg-base-100">
-      <div class="sticky top-0 z-20 items-center gap-2 bg-base-100/90 px-4 py-2 shadow-sm backdrop-blur lg:flex">
-        Icon
+    <aside class="w-80 rounded-xl border border-slate-900 bg-slate-800  pb-10">
+      <div class="m-4 flex flex-col text-center capitalize text-white">
+        <span class="text-lg">{query.data?.name}</span>
+        <span class="text-sm">{query.data?.description}</span>
       </div>
       <ul class="menu px-4 py-0">
         <For each={Object.entries(routes)}>
@@ -18,8 +33,8 @@ export const Sidebar = (props: SidebarProps) => {
             <li>
               <button
                 onClick={() => setRoute(key as Route)}
-                class="group"
-                classList={{ "bg-blue-500": route() === key }}
+                class="group text-white"
+                classList={{ "!bg-primary !text-white": route() === key }}
               >
                 <span class="material-icons">{icon}</span>
                 {label}

pkgs/webview-ui/app/src/layout/header.tsx

@@ -22,7 +22,7 @@ export const Header = (props: HeaderProps) => {
   }));
 
   return (
-    <div class="navbar bg-base-100">
+    <div class="navbar">
       <div class="flex-none">
         <span class="tooltip tooltip-bottom" data-tip="Menu">
           <label

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -10,7 +10,7 @@ interface LayoutProps {
 export const Layout: Component<LayoutProps> = (props) => {
   return (
     <>
-      <div class="drawer bg-base-100 lg:drawer-open">
+      <div class="drawer lg:drawer-open ">
         <input
           id="toplevel-drawer"
           type="checkbox"
@@ -23,7 +23,7 @@ export const Layout: Component<LayoutProps> = (props) => {
           {props.children}
         </div>
         <div
-          class="drawer-side z-40"
+          class="drawer-side z-40 h-full"
           classList={{
             "!hidden": route() === "welcome" || clanList().length === 0,
           }}

pkgs/webview-ui/app/src/routes/welcome/index.tsx

@@ -3,7 +3,7 @@ import { registerClan } from "../settings";
 
 export const Welcome = () => {
   return (
-    <div class="hero min-h-screen">
+    <div class="hero min-h-[calc(100vh-10rem)]">
       <div class="hero-content mb-32 text-center">
         <div class="max-w-md">
           <h1 class="text-5xl font-bold">Welcome to Clan</h1>

pkgs/webview-ui/app/tailwind.config.js

@@ -7,5 +7,21 @@ module.exports = {
   theme: {
     extend: {},
   },
+  daisyui: {
+    themes: [
+      {
+        light_clan: {
+          primary: "#29b1eb",
+          secondary: "#4d6a6b",
+          accent: "#37cdbe",
+          neutral: "#3d4451",
+          error: "#ff2c78",
+          success: "#0ae856",
+          warning: "#ffdd2c",
+          "base-100": "#d1dadb",
+        },
+      },
+    ],
+  },
   plugins: [typography, daisyui],
 };