apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-04-28 09:56:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add dark mode support, app styling, and editable field improvements

Browse source 
- Add global dark theme styles and partial app-wide dark mode support
- Support dark mode for @mentions, scenarios, and simulations
- Add save and discard buttons to editable fields
- Improve hover effect for @mentions dropdown in dark mode
This commit is contained in:
akhisud3195 2025-02-20 22:58:01 +05:30
parent be3eb610a0
commit 82e4b66395
36 changed files with 893 additions and 1074 deletions
Download patch file Download diff file Expand all files Collapse all files

26
apps/rowboat/app/lib/components/structured-panel.tsx
View file

@ -18,9 +18,9 @@ export function ActionButton({
const onClickProp = onClick ? { onClick } : {};
return <button
disabled={disabled}
className={clsx("rounded-md text-xs flex items-center gap-1 disabled:text-gray-300 hover:text-gray-600", {
"text-blue-600": primary,
"text-gray-400": !primary,
className={clsx("rounded-md text-xs flex items-center gap-1 disabled:text-gray-300 dark:disabled:text-gray-600 hover:text-gray-600 dark:hover:text-gray-300", {
"text-blue-600 dark:text-blue-400": primary,
"text-gray-400 dark:text-gray-500": !primary,
})}
{...onClickProp}
>
@ -43,14 +43,14 @@ export function StructuredPanel({
tooltip?: string | null;
}) {
return <div className={clsx("h-full flex flex-col overflow-auto rounded-md p-1", {
"bg-gray-100": !fancy,
"bg-blue-100": fancy,
"bg-gray-100 dark:bg-gray-800": !fancy,
"bg-blue-100 dark:bg-blue-900": fancy,
})}>
<div className="shrink-0 flex justify-between items-center gap-2 px-2 py-1 rounded-t-sm">
<div className="flex items-center gap-1">
<div className={clsx("text-xs font-semibold uppercase", {
"text-gray-400": !fancy,
"text-blue-500": fancy,
"text-gray-400 dark:text-gray-500": !fancy,
"text-blue-500 dark:text-blue-400": fancy,
})}>
{title}
</div>
@ -61,21 +61,21 @@ export function StructuredPanel({
className="cursor-help"
>
<InfoIcon size={12} className={clsx({
"text-gray-400": !fancy,
"text-blue-500": fancy,
"text-gray-400 dark:text-gray-500": !fancy,
"text-blue-500 dark:text-blue-400": fancy,
})} />
</Tooltip>
)}
</div>
{!actions && <div className="w-4 h-4" />}
{actions && <div className={clsx("rounded-md hover:text-gray-800 px-2 text-sm flex items-center gap-2", {
"text-blue-600": fancy,
"text-gray-400": !fancy,
{actions && <div className={clsx("rounded-md hover:text-gray-800 dark:hover:text-gray-200 px-2 text-sm flex items-center gap-2", {
"text-blue-600 dark:text-blue-400": fancy,
"text-gray-400 dark:text-gray-500": !fancy,
})}>
{actions}
</div>}
</div>
<div className="grow bg-white rounded-md overflow-auto flex flex-col justify-start p-2">
<div className="grow bg-white dark:bg-gray-900 rounded-md overflow-auto flex flex-col justify-start p-2">
{children}
</div>
</div>;