diff --git a/index.html b/index.html index 3fc4cac..5f7a0f0 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - TypoGenie + TypoGenie - Markdown to Word Converter @@ -18,6 +18,8 @@ + Skip to main content +
diff --git a/src/App.tsx b/src/App.tsx index afb9c16..7dfc71f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -71,7 +71,7 @@ const KeyboardShortcutsHelp: React.FC<{ onClose: () => void }> = ({ onClose }) = ))} -

+

Press Escape or click outside to close

@@ -233,7 +233,7 @@ const App: React.FC = () => { onClick={refresh} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} - className="hidden sm:flex items-center gap-2 px-3 py-1.5 text-xs text-zinc-500 hover:text-zinc-300 bg-zinc-900 hover:bg-zinc-800 rounded-lg transition-colors border border-zinc-800" + className="hidden sm:flex items-center gap-2 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-300 bg-zinc-900 hover:bg-zinc-800 rounded-lg transition-colors border border-zinc-800" title="Reload templates from disk" > @@ -246,7 +246,7 @@ const App: React.FC = () => { onClick={() => setShowShortcuts(true)} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} - className="hidden sm:flex items-center gap-2 px-3 py-1.5 text-xs text-zinc-500 hover:text-zinc-300 bg-zinc-900 hover:bg-zinc-800 rounded-lg transition-colors border border-zinc-800" + className="hidden sm:flex items-center gap-2 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-300 bg-zinc-900 hover:bg-zinc-800 rounded-lg transition-colors border border-zinc-800" title="Show keyboard shortcuts" > @@ -260,7 +260,7 @@ const App: React.FC = () => { initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} - className="flex items-center gap-4 text-sm text-zinc-500" + className="flex items-center gap-4 text-sm text-zinc-400" > Configure / @@ -433,7 +433,7 @@ const App: React.FC = () => { initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.5, duration: 0.5 }} - className="flex-none py-4 text-center text-zinc-600 text-sm border-t border-zinc-900 bg-zinc-950" + className="flex-none py-4 text-center text-zinc-400 text-sm border-t border-zinc-900 bg-zinc-950" >

TypoGenie - Professional Typesetting Engine

diff --git a/src/components/ExportOptionsModal.tsx b/src/components/ExportOptionsModal.tsx index 9509eae..c7a1050 100644 --- a/src/components/ExportOptionsModal.tsx +++ b/src/components/ExportOptionsModal.tsx @@ -73,7 +73,7 @@ export default function ExportOptionsModal({ isOpen, onClose, onExport }: Export Document outline/navigation disabled -
+
Best for: Portfolios, brochures, print-ready designs
@@ -116,7 +116,7 @@ export default function ExportOptionsModal({ isOpen, onClose, onExport }: Export Minor padding/border alignment issues -
+
Best for: Academic papers, reports, accessible documents
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index 16f047e..652c4bf 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -149,7 +149,7 @@ export const FileUpload: React.FC = ({ onFileLoaded }) => { transition={{ duration: 0.3 }} > = ({ onFileLoaded }) => { or drag and drop = ({ onFileLoaded }) => { Markdown or Plain Text files = ({ fonts }) => { }; return ( -
+
Fonts:
{fonts.map((font, index) => ( @@ -391,7 +391,7 @@ export const Preview: React.FC = ({
- Format: {paperSize} + Format: {paperSize} = ({ onClick={() => onSelectPaperSize(size)} className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${selectedPaperSize === size ? 'bg-zinc-700 text-white shadow-sm' - : 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800' + : 'text-zinc-400 hover:text-zinc-300 hover:bg-zinc-800' }`} > {size} @@ -358,13 +358,13 @@ export const StyleSelector: React.FC = ({ {/* Search Input */}
- + setSearchQuery(e.target.value)} - className="w-full bg-zinc-900 border border-zinc-700 rounded-xl py-2 pl-9 pr-4 text-sm text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all" + className="w-full bg-zinc-900 border border-zinc-700 rounded-xl py-2 pl-9 pr-4 text-sm text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all" />
@@ -373,7 +373,7 @@ export const StyleSelector: React.FC = ({ {/* Scrollable List */}
{filteredStyles.length === 0 ? ( -
+

No templates found

) : filteredStyles.map((style) => ( @@ -394,7 +394,7 @@ export const StyleSelector: React.FC = ({ onClick={(e) => toggleFavorite(e, style.id)} className={`p-1.5 rounded-full transition-all ${favorites.includes(style.id) ? 'text-rose-400 bg-rose-500/10 hover:bg-rose-500/20' - : 'text-zinc-600 hover:text-zinc-400 hover:bg-zinc-700/50' + : 'text-zinc-400 hover:text-zinc-300 hover:bg-zinc-700/50' }`} > @@ -406,10 +406,10 @@ export const StyleSelector: React.FC = ({ )}
-

{style.description}

+

{style.description}

+ ${selectedStyle === style.id ? 'bg-indigo-500/20 text-indigo-300' : 'bg-zinc-800 text-zinc-400'}`}> {style.category}
@@ -430,7 +430,7 @@ export const StyleSelector: React.FC = ({
- Live Preview + Live Preview
{currentStyleObj && ( {currentStyleObj.name} @@ -446,7 +446,7 @@ export const StyleSelector: React.FC = ({ title="Style Preview" /> ) : ( -
+

Select a style to preview

Choose from the list on the left

diff --git a/src/index.css b/src/index.css index e6f7761..e831d11 100644 --- a/src/index.css +++ b/src/index.css @@ -32,14 +32,14 @@ @layer base { :root { - font-size: 16px; + font-size: 100%; } body { font-family: 'Inter', sans-serif; background-color: #09090b; color: #e4e4e7; - overflow: hidden; + overflow-x: hidden; margin: 0; padding: 0; } @@ -47,7 +47,7 @@ #root { width: 100vw; height: 100vh; - overflow: hidden; + overflow-x: hidden; } } @@ -104,7 +104,37 @@ body ::-webkit-scrollbar-thumb:hover, } .focus-ring-spacing:focus-within { - outline: 2px solid rgba(99, 102, 241, 0.3); + outline: 2px solid rgba(99, 102, 241, 0.8); outline-offset: -2px; border-radius: 8px; } + +/* Reduced motion */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* Forced colors / high contrast mode */ +@media (forced-colors: active) { + .focus-ring-spacing:focus-within { + outline: 2px solid LinkText; + } +} + +/* Screen reader only utility */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +}