Small tweaks for icons and language (#386)

srcbookdev · Oct 18, 2024 · 11f273a · 11f273a
1 parent d8c2c24
commit 11f273a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/web/src/components/apps/diff-modal.tsx b/packages/web/src/components/apps/diff-modal.tsx
@@ -56,7 +56,7 @@ function DiffModalHeader({
  return (
  <div className="h-12 px-4 flex items-center justify-between border-b border-border">
  <div>
- <DialogTitle className="font-semibold">{`${numFiles} files changed`}</DialogTitle>
+ <DialogTitle className="font-semibold">{`${numFiles} ${numFiles === 1 ? 'file' : 'files'} changed`}</DialogTitle>
  </div>
  <div className="flex items-center space-x-3">
  <Button variant="secondary" className="flex items-center space-x-1.5" onClick={onUndoAll}>

diff --git a/packages/web/src/components/apps/sidebar.tsx b/packages/web/src/components/apps/sidebar.tsx
@@ -8,6 +8,7 @@ import {
  KeyboardIcon,
  MoonIcon,
  SettingsIcon,
+ SunIcon,
 } from 'lucide-react';
 import { Button } from '@srcbook/components/src/components/ui/button';
 import {
@@ -37,7 +38,7 @@ function getTitleForPanel(panel: PanelType | null): string | null {
 }
 
 export default function Sidebar() {
- const { toggleTheme } = useTheme();
+ const { theme, toggleTheme } = useTheme();
  const { openedFile } = useFiles();
 
  const [showShortcuts, setShowShortcuts] = useState(false);
@@ -80,14 +81,22 @@ export default function Sidebar() {
  </NavItemWithTooltip>
  </div>
  <div className="flex flex-col items-center w-full gap-2">
- {process.env.NODE_ENV !== 'production' && (
- <NavItemWithTooltip tooltipContent="DEV ONLY - Switch theme" onClick={toggleTheme}>
+ <NavItemWithTooltip
+ tooltipContent={theme === 'light' ? 'Dark mode' : 'Light mode'}
+ onClick={toggleTheme}
+ >
+ {theme === 'light' ? (
  <MoonIcon
  size={18}
  className="text-tertiary-foreground hover:text-secondary-foreground transition-colors"
  />
- </NavItemWithTooltip>
- )}
+ ) : (
+ <SunIcon
+ size={18}
+ className="text-tertiary-foreground hover:text-secondary-foreground transition-colors"
+ />
+ )}
+ </NavItemWithTooltip>
  <NavItemWithTooltip
  tooltipContent="Keyboard shortcuts"
  onClick={() => setShowShortcuts(true)}