style: homogenize header/footer and replace slate with gray

- Footer: GitHub icon + text · coffee emoji + text (consistent with other apps)
- Header: consistent layout with favicon, title, tagline, privacy badge
- Replace all slate-* colors with gray-* for consistency
- Add bg-gray-50/dark:bg-gray-900 to app root

Author: alejandroSuch

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDarkMode } from './hooks/useDarkMode';
 import Header from './components/Header';
@@ -8,6 +8,7 @@ import DiffView from './components/DiffView';
 import Footer from './components/Footer';
 import { formatJson, validateJson, jsonToYaml } from './utils/json';
 import { useBeforeUnload } from './hooks/useBeforeUnload';
+import { useFileDrop } from './hooks/useFileDrop';
 
 type Mode = 'editor' | 'diff';
 
@@ -22,6 +23,27 @@ export default function App() {
 
   useBeforeUnload(input.length > 0);
 
+  // Prevent browser default file open on window drop
+  useEffect(() => {
+    function preventDrop(e: DragEvent) {
+      e.preventDefault();
+    }
+    window.addEventListener('dragover', preventDrop);
+    window.addEventListener('drop', preventDrop);
+    return () => {
+      window.removeEventListener('dragover', preventDrop);
+      window.removeEventListener('drop', preventDrop);
+    };
+  }, []);
+
+  // Global drop fallback — populate main editor input
+  const handleGlobalFileDrop = useCallback((content: string) => {
+    setInput(content);
+    if (mode === 'diff') setMode('editor');
+  }, [mode]);
+
+  const { isDragging: isGlobalDragging, dropError: globalDropError, onDragOver: globalDragOver, onDragLeave: globalDragLeave, onDrop: globalDrop } = useFileDrop(handleGlobalFileDrop);
+
   function handleFormat() {
     const { output: o, error: e } = formatJson(input);
     setOutput(o);
@@ -47,7 +69,12 @@ export default function App() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col">
+    <div
+      className="min-h-screen flex flex-col relative bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors"
+      onDragOver={globalDragOver}
+      onDragLeave={globalDragLeave}
+      onDrop={globalDrop}
+    >
       <Header dark={dark} toggleDark={toggleDark} />
       <Toolbar
         mode={mode}
@@ -71,6 +98,21 @@ export default function App() {
         )}
       </main>
       <Footer />
+      {isGlobalDragging && (
+        <div
+          className="fixed inset-0 flex items-center justify-center bg-indigo-500/5 dark:bg-indigo-400/5 pointer-events-none z-50"
+          aria-label={t('dropFileHere')}
+        >
+          <span className="text-indigo-600 dark:text-indigo-400 font-semibold text-lg bg-white/80 dark:bg-gray-900/80 px-6 py-3 rounded-xl shadow-lg">
+            {t('dropFileHere')}
+          </span>
+        </div>
+      )}
+      {globalDropError && (
+        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 text-red-600 dark:text-red-400 text-sm bg-red-50 dark:bg-red-900/20 px-4 py-2 rounded-lg shadow">
+          {globalDropError}
+        </div>
+      )}
     </div>
   );
 }

src/components/DiffView.tsx

@@ -1,9 +1,76 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { diffJson, diffJsonLines } from '../utils/json';
+import { useFileDrop } from '../hooks/useFileDrop';
 
 type DiffMode = 'keys' | 'lines';
 
+function DiffTextarea({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+  borderColor,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+  ariaLabel: string;
+  borderColor: 'indigo' | 'amber';
+}) {
+  const { t } = useTranslation();
+  const { isDragging, dropError, onDragOver, onDragLeave, onDrop } = useFileDrop(onChange);
+
+  const dragBorder = borderColor === 'indigo'
+    ? 'border-indigo-500 dark:border-indigo-400 border-2'
+    : 'border-amber-500 dark:border-amber-400 border-2';
+
+  const overlayBg = borderColor === 'indigo'
+    ? 'bg-indigo-500/10 dark:bg-indigo-400/10'
+    : 'bg-amber-500/10 dark:bg-amber-400/10';
+
+  const overlayText = borderColor === 'indigo'
+    ? 'text-indigo-600 dark:text-indigo-400'
+    : 'text-amber-600 dark:text-amber-400';
+
+  return (
+    <div className="flex-1 flex flex-col gap-1">
+      <div
+        className="relative flex-1"
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+      >
+        <textarea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          className={`flex-1 min-h-[200px] w-full h-full p-3 rounded-lg border bg-white dark:bg-gray-800 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-amber-500 ${
+            isDragging ? dragBorder : 'border-gray-300 dark:border-gray-600'
+          }`}
+          spellCheck={false}
+        />
+        {isDragging && (
+          <div
+            className={`absolute inset-0 flex items-center justify-center rounded-lg ${overlayBg} pointer-events-none`}
+            aria-label={t('dropFileHere')}
+          >
+            <span className={`${overlayText} font-medium text-sm`}>
+              {t('dropFileHere')}
+            </span>
+          </div>
+        )}
+      </div>
+      {dropError && (
+        <div className="text-red-600 dark:text-red-400 text-xs bg-red-50 dark:bg-red-900/20 p-1.5 rounded">
+          {dropError}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function DiffView() {
   const { t } = useTranslation();
   const [left, setLeft] = useState('');
@@ -42,21 +109,19 @@ export default function DiffView() {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col lg:flex-row gap-4">
-        <textarea
+        <DiffTextarea
           value={left}
-          onChange={(e) => setLeft(e.target.value)}
+          onChange={setLeft}
           placeholder={t('diffLeftPlaceholder')}
-          aria-label={t('diffLeftPlaceholder')}
-          className="flex-1 min-h-[200px] p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-800 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-amber-500"
-          spellCheck={false}
+          ariaLabel={t('diffLeftPlaceholder')}
+          borderColor="indigo"
         />
-        <textarea
+        <DiffTextarea
           value={right}
-          onChange={(e) => setRight(e.target.value)}
+          onChange={setRight}
           placeholder={t('diffRightPlaceholder')}
-          aria-label={t('diffRightPlaceholder')}
-          className="flex-1 min-h-[200px] p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-800 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-amber-500"
-          spellCheck={false}
+          ariaLabel={t('diffRightPlaceholder')}
+          borderColor="amber"
         />
       </div>
 
@@ -75,7 +140,7 @@ export default function DiffView() {
             className={`px-3 py-1.5 transition-colors ${
               mode === 'keys'
                 ? 'bg-amber-500 text-white'
-                : 'bg-white dark:bg-slate-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700'
+                : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
             }`}
           >
             {t('diffByKeys')}
@@ -86,7 +151,7 @@ export default function DiffView() {
             className={`px-3 py-1.5 transition-colors ${
               mode === 'lines'
                 ? 'bg-amber-500 text-white'
-                : 'bg-white dark:bg-slate-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700'
+                : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
             }`}
           >
             {t('diffByLines')}
@@ -96,7 +161,7 @@ export default function DiffView() {
 
       {hasResults && (
         <div className="rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden">
-          <div className="bg-gray-100 dark:bg-slate-700 px-3 py-2 text-sm font-medium flex items-center justify-between">
+          <div className="bg-gray-100 dark:bg-gray-700 px-3 py-2 text-sm font-medium flex items-center justify-between">
             <span>{t('diffResult')}</span>
             {mode === 'lines' && lineResult && !lineResult.error && (
               <span className="text-xs font-normal">

src/components/Editor.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useFileDrop } from '../hooks/useFileDrop';
 
 interface Props {
   input: string;
@@ -11,21 +12,43 @@ interface Props {
 
 export default function Editor({ input, output, error, copied, onInputChange, onCopy }: Props) {
   const { t } = useTranslation();
+  const { isDragging, dropError, onDragOver, onDragLeave, onDrop } = useFileDrop(onInputChange);
 
   return (
     <div className="flex flex-col lg:flex-row gap-4 h-full">
       <div className="flex-1 flex flex-col gap-2">
-        <textarea
-          value={input}
-          onChange={(e) => onInputChange(e.target.value)}
-          placeholder={t('inputPlaceholder')}
-          aria-label={t('inputPlaceholder')}
-          className="flex-1 min-h-[300px] w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-800 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-amber-500"
-          spellCheck={false}
-        />
-        {error && (
+        <div
+          className="relative flex-1"
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+        >
+          <textarea
+            value={input}
+            onChange={(e) => onInputChange(e.target.value)}
+            placeholder={t('inputPlaceholder')}
+            aria-label={t('inputPlaceholder')}
+            className={`flex-1 min-h-[300px] w-full h-full p-3 rounded-lg border bg-white dark:bg-gray-800 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-amber-500 ${
+              isDragging
+                ? 'border-indigo-500 dark:border-indigo-400 border-2'
+                : 'border-gray-300 dark:border-gray-600'
+            }`}
+            spellCheck={false}
+          />
+          {isDragging && (
+            <div
+              className="absolute inset-0 flex items-center justify-center rounded-lg bg-indigo-500/10 dark:bg-indigo-400/10 pointer-events-none"
+              aria-label={t('dropFileHere')}
+            >
+              <span className="text-indigo-600 dark:text-indigo-400 font-medium text-sm">
+                {t('dropFileHere')}
+              </span>
+            </div>
+          )}
+        </div>
+        {(error || dropError) && (
           <div className="text-red-600 dark:text-red-400 text-sm bg-red-50 dark:bg-red-900/20 p-2 rounded">
-            {error}
+            {error || dropError}
           </div>
         )}
       </div>
@@ -36,7 +59,7 @@ export default function Editor({ input, output, error, copied, onInputChange, on
             readOnly
             placeholder={t('outputPlaceholder')}
             aria-label={t('outputPlaceholder')}
-            className="min-h-[300px] w-full h-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-slate-800/50 text-sm resize-none focus:outline-none"
+            className="min-h-[300px] w-full h-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 text-sm resize-none focus:outline-none"
             spellCheck={false}
           />
           {output && (

src/components/Footer.tsx

@@ -1,27 +1,31 @@
 import { useTranslation } from 'react-i18next';
 
+const GITHUB_ICON = '<svg viewBox="0 0 16 16" class="inline w-4 h-4 fill-current align-text-bottom"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>';
+
 export default function Footer() {
   const { t } = useTranslation();
 
   return (
-    <footer className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-800 px-4 py-3">
-      <div className="max-w-7xl mx-auto flex flex-wrap items-center justify-center gap-4 text-sm text-gray-500 dark:text-gray-400">
+    <footer className="border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+      <div className="mx-auto flex max-w-5xl items-center justify-center gap-2 px-4 py-4 text-xs text-gray-500 dark:text-gray-400">
         <a
           href="https://github.com/alejandroSuch/JSONPretty"
           target="_blank"
           rel="noopener noreferrer"
-          className="hover:text-amber-500 transition-colors"
+          className="inline-flex items-center gap-1 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
         >
-          {t('viewOnGithub')}
+          <span dangerouslySetInnerHTML={{ __html: GITHUB_ICON }} />
+          <span>{t('viewOnGithub')}</span>
         </a>
-        <span>·</span>
+        <span>&middot;</span>
         <a
           href="https://buymeacoffee.com/alejandrosuch"
           target="_blank"
           rel="noopener noreferrer"
-          className="hover:text-amber-500 transition-colors"
+          className="inline-flex items-center gap-1 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors"
         >
-          {t('buyMeACoffee')}
+          <span>☕</span>
+          <span>{t('buyMeACoffee')}</span>
         </a>
       </div>
     </footer>

src/components/Header.tsx

@@ -18,31 +18,39 @@ interface Props {
 export default function Header({ dark, toggleDark }: Props) {
   const { t, i18n } = useTranslation();
 
+  const theme = dark ? 'dark' : 'light';
+  const icon = theme === 'dark' ? '🌙' : '☀️';
+
   return (
-    <header className="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-800 px-4 py-3">
-      <div className="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2">
+    <header className="border-b border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+      <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
         <div className="flex items-center gap-3">
-          <h1 className="text-xl font-bold text-amber-500">{t('appName')}</h1>
-          <span className="hidden sm:inline text-sm text-gray-500 dark:text-gray-400">{t('tagline')}</span>
-          <span className="hidden sm:inline text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">{t('privacyBadge')}</span>
+          <img src={`${import.meta.env.BASE_URL}favicon.svg`} alt="JSONPretty" className="h-9 w-9" />
+          <div>
+            <h1 className="text-lg font-semibold text-amber-500 dark:text-amber-400">{t('appName')}</h1>
+            <p className="hidden text-xs text-gray-500 dark:text-gray-400 sm:block">{t('tagline')}</p>
+          </div>
+          <span className="hidden rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/40 dark:text-green-400 sm:inline-flex">
+            {t('privacyBadge')}
+          </span>
         </div>
         <div className="flex items-center gap-2">
           <select
             value={i18n.language.substring(0, 2)}
             onChange={(e) => i18n.changeLanguage(e.target.value)}
-            className="text-sm bg-gray-100 dark:bg-slate-700 border-none rounded px-2 py-1 cursor-pointer"
             aria-label={t('language')}
+            className="rounded-md border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300"
           >
             {LANGUAGES.map((l) => (
               <option key={l.code} value={l.code}>{l.label}</option>
             ))}
           </select>
           <button
             onClick={toggleDark}
-            className="p-2 rounded hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
+            className="rounded-md border border-gray-300 px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
             aria-label={t('toggleTheme')}
           >
-            {dark ? '☀️' : '🌙'}
+            {icon}
           </button>
         </div>
       </div>

src/components/Toolbar.tsx

@@ -13,11 +13,11 @@ export default function Toolbar({ mode, onFormat, onValidate, onToYaml, onToggle
 
   const btn = 'px-3 py-1.5 text-sm font-medium rounded transition-colors';
   const primary = `${btn} bg-amber-500 hover:bg-amber-600 text-white`;
-  const secondary = `${btn} bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-800 dark:text-gray-200`;
+  const secondary = `${btn} bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200`;
   const active = `${btn} bg-amber-600 text-white ring-2 ring-amber-400`;
 
   return (
-    <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-slate-800/50 px-4 py-2">
+    <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 px-4 py-2">
       <div className="max-w-7xl mx-auto flex flex-wrap gap-2">
         <button onClick={onFormat} className={primary} disabled={mode === 'diff'} aria-label={t('format')}>{t('format')}</button>
         <button onClick={onValidate} className={secondary} disabled={mode === 'diff'} aria-label={t('validate')}>{t('validate')}</button>