Skip to content

Develop #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cuthanhcam merged 4 commits into from
Jul 12, 2026
Merged

Develop #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b177a26
fix: make Tailwind dark variant use .dark class and remove !important…
cuthanhcam Jul 12, 2026
f44b6f4
fix: update help dropdown styling and NavLink matching
cuthanhcam Jul 12, 2026
43a1d13
fix: improve sidebar collapsed tool icon contrast
cuthanhcam Jul 12, 2026
fcf2ca5
fix: optimize for Json tool
cuthanhcam Jul 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/app/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

:root {
color-scheme: light;
Expand Down Expand Up @@ -708,7 +709,7 @@ body {
.dark .hover\:bg-slate-100:hover,
.dark .hover\:bg-sky-50:hover,
.dark .hover\:bg-white:hover {
background-color: var(--forge-dark-panel-3) !important;
background-color: var(--forge-dark-panel-3);
}

.dark .hover\:text-slate-950:hover,
Expand Down
2 changes: 1 addition & 1 deletion src/features/json-yaml/JsonYamlPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,7 +519,7 @@ function CodeEditor({
<span className="sr-only">{label}</span>
<textarea
className={cn(
"scrollbar-forge relative h-full min-h-0 w-full resize-none border-0 bg-transparent py-0 pl-[5rem] pr-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/80 selection:text-slate-950",
"scrollbar-forge relative h-full min-h-0 w-full resize-none border-0 bg-transparent py-0 pl-[5rem] pr-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/70 selection:text-transparent",
lineWrap ? "overflow-auto" : "overflow-auto whitespace-pre",
)}
onChange={handleChange}
Expand Down
2 changes: 1 addition & 1 deletion src/features/json/JsonToolsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -528,7 +528,7 @@ function JsonCodeEditor({
<span className="sr-only">{label}</span>
<textarea
className={cn(
"scrollbar-forge relative h-full min-h-0 w-full resize-none border-0 bg-transparent py-0 pl-[5rem] pr-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/80 selection:text-slate-950",
"scrollbar-forge relative h-full min-h-0 w-full resize-none border-0 bg-transparent py-0 pl-[5rem] pr-4 font-mono text-[13px] leading-6 text-transparent caret-slate-950 outline-none placeholder:text-slate-400 selection:bg-sky-200/70 selection:text-transparent",
lineWrap ? "overflow-auto" : "overflow-auto whitespace-pre",
)}
onChange={handleChange}
Expand Down
22 changes: 11 additions & 11 deletions src/widgets/sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export function Sidebar({
ref={helpRef}
>
{helpOpen ? (
<div
<div
className={cn(
"absolute bottom-14 z-30 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl shadow-slate-950/10 dark:border-pink-400/20 dark:bg-[#100b18] dark:shadow-black/40",
effectiveCollapsed ? "left-2 w-64" : "left-2.5 w-64",
Expand Down Expand Up @@ -268,15 +268,15 @@ export function Sidebar({
effectiveCollapsed ? "flex-col" : "items-center justify-between",
)}
>
<NavLink
<NavLink
aria-label="Settings"
className={({ isActive }) =>
cn("flex h-9 w-9 items-center justify-center transition", {
"text-slate-400 hover:text-slate-950 focus-visible:outline-none":
"rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
effectiveCollapsed && !isActive,
"text-slate-700 hover:text-slate-950 focus-visible:outline-none":
"rounded-md text-slate-700 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
effectiveCollapsed && isActive,
"rounded-md bg-sky-50 text-sky-700 ring-1 ring-sky-100 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25":
"rounded-md bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-200 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25":
!effectiveCollapsed && isActive,
"rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
!effectiveCollapsed && !isActive,
Expand All @@ -292,11 +292,11 @@ export function Sidebar({
className={cn(
"flex h-9 w-9 shrink-0 items-center justify-center transition",
{
"text-slate-400 hover:text-slate-950 focus-visible:outline-none":
"rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
effectiveCollapsed && !helpOpen,
"text-slate-700 hover:text-slate-950 focus-visible:outline-none":
"rounded-md text-slate-700 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
effectiveCollapsed && helpOpen,
"rounded-md bg-sky-50 text-sky-700 ring-1 ring-sky-100 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25":
"rounded-md bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-200 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25":
!effectiveCollapsed && helpOpen,
"rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200":
!effectiveCollapsed && !helpOpen,
Expand All @@ -312,7 +312,7 @@ export function Sidebar({
className={cn(
"hidden h-9 w-9 shrink-0 items-center justify-center transition lg:flex",
effectiveCollapsed
? "text-slate-400 hover:text-slate-950 focus-visible:outline-none"
? "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200"
: "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200",
)}
onClick={toggleSidebar}
Expand Down Expand Up @@ -343,11 +343,11 @@ function HelpMenuItem({
to,
}: HelpMenuItemProps): JSX.Element {
const className =
"flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[13px] font-semibold text-slate-700 transition hover:bg-sky-50 hover:text-sky-700 dark:text-pink-50 dark:hover:bg-pink-400/12 dark:hover:text-pink-200 dark:[&.active]:bg-pink-400/14 dark:[&.active]:text-pink-200 dark:[&.active]:ring-1 dark:[&.active]:ring-inset dark:[&.active]:ring-pink-300/20";
"flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[13px] font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 [&.active]:bg-sky-50 [&.active]:text-sky-700 [&.active]:ring-1 [&.active]:ring-inset [&.active]:ring-sky-200 dark:text-pink-50 dark:hover:bg-pink-400/12 dark:hover:text-pink-200 dark:[&.active]:bg-pink-400/14 dark:[&.active]:text-pink-200 dark:[&.active]:ring-1 dark:[&.active]:ring-inset dark:[&.active]:ring-pink-300/20";

if (to) {
return (
<NavLink className={className} onClick={onSelect} to={to}>
<NavLink className={className} end onClick={onSelect} to={to}>
<Icon aria-hidden="true" className="h-4 w-4 shrink-0" />
<span>{label}</span>
</NavLink>
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/sidebar/SidebarToolItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function SidebarToolItem({
<NavLink
className={({ isActive }) =>
cn("group flex items-center text-[13px] font-medium transition", {
"h-8 justify-center text-slate-400 hover:text-slate-950 focus-visible:outline-none":
"h-8 justify-center text-slate-500 hover:text-slate-950 focus-visible:outline-none":
collapsed && !isActive,
"h-8 justify-center text-slate-700 hover:text-slate-950 focus-visible:outline-none":
collapsed && isActive,
Expand Down
Loading