Skip to content

Commit

Permalink
cool theme improvmeent
Browse files Browse the repository at this point in the history
  • Loading branch information
@MadcowD
MadcowD committed Aug 12, 2024
1 parent aae6349 commit 54979a9
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 36 deletions.
6 changes: 3 additions & 3 deletions ell-studio/src/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ const Sidebar = () => {
to={to}
className={({ isActive }) => `
group flex items-center py-3 px-4 rounded-lg transition-all duration-200
${isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'}
${isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'}
`}
>
<Icon className="w-5 h-5" />
{isExpanded && (
<span className="ml-3 text-sm font-medium">{label}</span>
)}
{!isExpanded && (
<div className="fixed left-16 ml-2 px-2 py-1 bg-background text-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
<div className="fixed left-16 ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
{label}
</div>
)}
Expand All @@ -31,7 +31,7 @@ const Sidebar = () => {
<motion.aside
initial={false}
animate={{ width: isExpanded ? 200 : 64 }}
className="bg-background h-screen py-6 flex flex-col"
className="bg-card border-r border-border h-screen py-6 flex flex-col"
>
<div className="flex justify-center items-center mb-8">
<img src="/gif.gif" alt="ell-studio Logo" className="h-4 invert" />
Expand Down
34 changes: 17 additions & 17 deletions ell-studio/src/pages/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,68 +44,68 @@ function Home() {
const memoizedLMPs = useMemo(() => firstLMPs, [firstLMPs]);

if (!memoizedLMPs || !memoizedTraces) {
return <div className={`bg-${darkMode ? 'gray-900' : 'gray-100'} min-h-screen flex items-center justify-center`}>
<p className={`text-${darkMode ? 'white' : 'black'}`}>Loading...</p>
return <div className={`bg-background min-h-screen flex items-center justify-center`}>
<p className={`text-foreground`}>Loading...</p>
</div>;
}

return (
<div className={`bg-${darkMode ? 'gray-900' : 'gray-100'} min-h-screen`}>
<div className={`bg-background min-h-screen`}>
<ResizablePanelGroup direction="horizontal" className="w-full h-screen">
<ResizablePanel defaultSize={70} minSize={30}>
<div className="flex flex-col h-full">
<div className={`flex items-center justify-between border-b p-2 py-4`}>
<span className={`text-xl font-medium text-${darkMode ? 'gray-100' : 'gray-800'} flex items-center`}>
<div className="flex items-center justify-between border-b border-border p-4">
<span className="text-xl font-medium text-foreground flex items-center">
Language Model Programs
</span>
<div className="flex items-center">
<span className={`mr-4 text-sm text-${darkMode ? 'gray-300' : 'gray-600'}`}>
<span className="mr-4 text-sm text-muted-foreground">
Total LMPs: {lmps.length}
</span>
<span className={`text-sm text-${darkMode ? 'gray-300' : 'gray-600'}`}>
<span className="text-sm text-muted-foreground">
Last Updated: {lmps[0] && lmps[0].versions && lmps[0].versions[0] ? getTimeAgo(lmps[0].versions[0].created_at) : 'N/A'}
</span>
</div>
</div>
<div className="w-full h-full">
<MemoizedDependencyGraph lmps={memoizedLMPs} traces={memoizedTraces} key={memoizedLMPs.length + memoizedTraces.length}/>
<MemoizedDependencyGraph lmps={memoizedLMPs} traces={memoizedTraces} key={memoizedLMPs.length + memoizedTraces.length}/>
</div>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={30} minSize={20}>
<ScrollArea className="h-screen">
<div className="space-y-2 p-4">
<div className="space-y-4 p-4">
{lmps.map((lmp) => (
<Card
key={lmp.name}
className="cursor-pointer"
className="cursor-pointer hover:bg-accent/50 transition-colors duration-200"
onClick={(e) => toggleExpand(lmp.name, e)}
>
<CardHeader>
<div className="flex flex-col space-y-2">
<Link
to={`/lmp/${lmp.name}`}
className={`text-xl font-semibold ${darkMode ? 'text-gray-100 hover:text-blue-300' : 'text-gray-800 hover:text-blue-600'} break-words`}
className="text-xl font-semibold text-foreground hover:text-primary break-words"
onClick={(e) => e.stopPropagation()}
>
{lmp.name}
{lmp.name}
</Link>
<div className="flex space-x-2">
<span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-700'}`}>
<span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground">
ID: {truncateId(lmp.lmp_id)}
</span>
<span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-green-600 text-white' : 'bg-green-100 text-green-800'}`}>
<span className="text-xs px-2 py-1 rounded-full bg-primary text-primary-foreground">
Latest
</span>
<VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
</div>
</div>
</CardHeader>
<CardContent>
<div className={`bg-${darkMode ? 'gray-700' : 'gray-100'} rounded p-3 mb-4`}>
<code className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
{lmp.source.length > 100 ? `${lmp.source.substring(0, 100)}...` : lmp.source}
<div className="bg-muted rounded p-3 mb-4">
<code className="text-sm text-muted-foreground">
{lmp.source.length > 100 ? `${lmp.source.substring(0, 100)}...` : lmp.source}
</code>
</div>
</CardContent>
Expand Down
54 changes: 38 additions & 16 deletions ell-studio/src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,49 @@

@layer base {
:root {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--popover: 224 71% 4%;
--popover-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--ring: 216 34% 17%;
--radius: 0.5rem;
}

.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--popover: 224 71% 4%;
--popover-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--ring: 216 34% 17%;
}
}

@layer base {
Expand Down

0 comments on commit 54979a9

Please sign in to comment.