Merge pull request #3 from skalenetwork/optimize-repo-structure

update dashboard ui

Author: dmytrotkk

packages/dashboard/src/assets/logo.svg

@@ -29,7 +29,7 @@ export function FloatingHeader() {
       <nav className="flex items-center gap-1 rounded-full border border-border/50 bg-background/60 backdrop-blur-xl p-2 shadow-lg">
         <Link to="/" className="flex items-center gap-1.5 px-3 py-1">
           <img src={logoSvg} alt="SmartClaws" className="h-4 w-4" />
-          <span className="hidden md:inline text-sm font-medium tracking-tight" style={{ color: "#FFD7DA" }}>SmartClaws</span>
+          <span className="hidden md:inline text-sm font-semibold tracking-tight" style={{ background: "linear-gradient(to right, #FF444D, #00B7A3)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>SmartClaws</span>
         </Link>
         <div className="h-4 w-px bg-border/50" />
         <Link

packages/dashboard/src/components/floating-header.tsx

@@ -111,7 +111,7 @@ export function Sidebar() {
     <aside className="hidden md:flex w-56 flex-col border-r border-border">
       <Link to="/" className="flex items-center gap-2 px-4 h-12 border-b border-border shrink-0">
         <img src={logoSvg} alt="SmartClaws" className="h-4 w-4" />
-        <span className="font-medium text-sm tracking-tight" style={{ color: "#FFD7DA" }}>SmartClaws</span>
+        <span className="font-semibold text-sm tracking-tight" style={{ background: "linear-gradient(to right, #FF444D, #00B7A3)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>SmartClaws</span>
       </Link>
       <nav className="flex-1 px-2 pb-3 overflow-y-auto">
         <div className="pt-2">

packages/dashboard/src/components/layout/sidebar.tsx

@@ -3,8 +3,8 @@ import { MessageBubble } from "@/components/ui/message-bubble";
 function StepNumber({ n }: { n: number }) {
   return (
     <span
-      className="inline-flex items-center justify-center h-5 w-5 shrink-0 rounded-full text-[10px] font-bold text-black align-middle mr-1.5"
-      style={{ background: "linear-gradient(178deg, #ffd4d7, #ff8594)" }}
+      className="inline-flex items-center justify-center h-5 w-5 shrink-0 rounded-full text-[10px] text-white align-middle mr-2.5"
+      style={{ background: "linear-gradient(to bottom, #FF2A3A, #BE061C)" }}
     >
       {n}
     </span>
@@ -16,15 +16,15 @@ export function SetupDialog() {
     <div className="flex flex-col gap-3">
       {/* Step 1: Install skills */}
       <MessageBubble variant="secondary" clickable={false}>
-        <StepNumber n={1} /> Install the skills:
+        <span className="flex items-center"><StepNumber n={1} /> Install the skills:</span>
       </MessageBubble>
       <MessageBubble variant="primary">
         Install smartclaws-producer and smartclaws-reader skills from ClawHub
       </MessageBubble>
 
       {/* Step 2: Set up SmartClaws */}
       <MessageBubble variant="secondary" clickable={false}>
-        <StepNumber n={2} /> Initialize the CLI and generate a wallet:
+        <span className="flex items-center"><StepNumber n={2} /> Initialize the CLI and generate a wallet:</span>
       </MessageBubble>
       <MessageBubble variant="primary">
         Set up SmartClaws and create a new wallet
@@ -38,23 +38,23 @@ export function SetupDialog() {
 
       {/* Step 3: Register device group */}
       <MessageBubble variant="secondary" clickable={false}>
-        <StepNumber n={3} /> Fund the wallet and register:
+        <span className="flex items-center"><StepNumber n={3} /> Fund the wallet and register:</span>
       </MessageBubble>
       <MessageBubble variant="primary">
         Wallet funded. Register a new device group: my-sensors.
       </MessageBubble>
 
       {/* Step 4: Set up sensor */}
       <MessageBubble variant="secondary" clickable={false}>
-        <StepNumber n={4} /> Connect a sensor and start publishing data:
+        <span className="flex items-center"><StepNumber n={4} /> Connect a sensor and start publishing data:</span>
       </MessageBubble>
       <MessageBubble variant="primary">
         Set up a temperature sensor and start publishing data
       </MessageBubble>
 
       {/* Step 5: Query data */}
       <MessageBubble variant="secondary" clickable={false}>
-        <StepNumber n={5} /> Query your on-chain data:
+        <span className="flex items-center"><StepNumber n={5} /> Query your on-chain data:</span>
       </MessageBubble>
       <MessageBubble variant="primary">
         What's the current temperature? Show me the trend for the last hour

packages/dashboard/src/components/setup-dialog.tsx

@@ -16,7 +16,7 @@ export function HomePage() {
       <div className="flex flex-col items-center max-w-2xl mx-auto pt-32 pb-20 px-4">
         <div className="flex items-center gap-3 mb-3">
           <img src={logoSvg} alt="SmartClaws" className="h-10 w-10" />
-          <span className="text-3xl font-medium tracking-tight" style={{ color: "#FFD7DA" }}>SmartClaws</span>
+          <span className="text-3xl font-semibold tracking-tight" style={{ background: "linear-gradient(to right, #FF444D, #00B7A3)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>SmartClaws</span>
         </div>
         <p className="text-foreground text-center mb-6 max-w-md font-normal text-md mt-4">
           Publish sensor data to SKALE and query it with natural language - powered by AI agents.