chore: list design tweaks

Author: ranst91

typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx

@@ -23,14 +23,14 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis
         </h2>
         {llmSelector && <div className="mt-2">{llmSelector}</div>}
       </div>
-      <ul className="px-2 space-y-0.5">
+      <ul className="px-2 space-y-1">
         {demos.map((demo) => (
           <li key={demo.id}>
             <button
               className={cn(
-                "w-full text-left py-2 px-3 rounded-md hover:bg-accent/50 transition-colors",
+                "w-full text-left py-2 px-3 rounded-sm hover:bg-white/50 transition-colors",
                 "flex flex-col gap-0.5",
-                selectedDemo === demo.id && "bg-accent",
+                selectedDemo === demo.id && "bg-white/70",
               )}
               onClick={() => onSelect(demo.id)}
             >
@@ -43,11 +43,10 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis
                   {demo.tags.map((tag) => (
                     <Badge
                       key={tag}
-                      variant={selectedDemo === demo.id ? "default" : "secondary"}
                       className={cn(
-                        "text-xs px-1.5 py-0.5 rounded-full",
+                        "text-xs px-1.5 py-0.5 rounded-full bg-white/65 text-primary",
                         selectedDemo === demo.id &&
-                          "bg-primary text-primary-foreground border-transparent",
+                        "bg-primary text-primary-foreground border-transparent",
                       )}
                     >
                       {tag}

typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx

@@ -106,7 +106,7 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
       ${isMobile ? 'w-80 shadow-xl bg-white z-99' : 'bg-white/50 w-74 min-w-[296px] flex-shrink-0 rounded-lg overflow-hidden'}
     `}>
       {/* Sidebar Header */}
-      <div className="p-4 border-b">
+      <div className="p-4">
         <div className="flex items-center justify-between ml-1">
           <div className="flex items-start flex-col">
             <h1 className={`text-lg font-light ${isDarkTheme ? "text-white" : "text-gray-900"}`}>