idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(HexEditor): enhance styling for improved readability and visual clarity

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-12 15:09:38 -04:00
parent 0c2fa2479c
commit d8c8b0b4e1
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/components/HexEditor.tsx
View File

@ -315,7 +315,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
</div> </div>
)} */} )} */}
<div className="px-3 font-mono text-xs leading-5 whitespace-nowrap"> <div className="px-3 font-mono font-bold text-xs leading-5 whitespace-nowrap">
{Array.from({ length: lastRenderRow - firstRenderRow }, (_, i) => { {Array.from({ length: lastRenderRow - firstRenderRow }, (_, i) => {
const row = firstRenderRow + i; const row = firstRenderRow + i;
const base = row * bytesPerRow; const base = row * bytesPerRow;
@ -323,7 +323,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
<div key={row} className="flex items-center"> <div key={row} className="flex items-center">
{/* Address */} {/* Address */}
<span className="text-neutral-400 w-15 flex-shrink-0 select-none"> <span className="text-amber-200 w-15 flex-shrink-0 select-none">
{base.toString(16).padStart(8, '0').toUpperCase()} {base.toString(16).padStart(8, '0').toUpperCase()}
</span> </span>
@ -340,8 +340,8 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
const isAllMatch = allMatchSet.has(idx) && !isCurMatch; const isAllMatch = allMatchSet.has(idx) && !isCurMatch;
const color = isCurMatch ? 'bg-orange-500 text-white' const color = isCurMatch ? 'bg-orange-500 text-white'
: isAllMatch ? 'bg-yellow-800 text-yellow-200' : isAllMatch ? 'bg-yellow-800 text-yellow-200'
: byte === 0 ? 'text-neutral-700' : byte === 0 ? 'text-neutral-500'
: 'text-green-400'; : 'text-green-300';
const ring = isCursor && pane === 'hex' ? ' ring-1 ring-inset ring-blue-400' : ''; const ring = isCursor && pane === 'hex' ? ' ring-1 ring-inset ring-blue-400' : '';
const gap = col === 8 ? ' ml-2' : ''; const gap = col === 8 ? ' ml-2' : '';
return ( return (
@ -357,7 +357,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
</div> </div>
{/* Separator */} {/* Separator */}
<span className="text-neutral-700 mr-2 select-none">│</span> <span className="text-neutral-500 mr-2 select-none">│</span>
{/* ASCII pane */} {/* ASCII pane */}
<div className="flex"> <div className="flex">
@ -372,8 +372,8 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
const isAllMatch = allMatchSet.has(idx) && !isCurMatch; const isAllMatch = allMatchSet.has(idx) && !isCurMatch;
const color = isCurMatch ? 'bg-orange-500 text-white' const color = isCurMatch ? 'bg-orange-500 text-white'
: isAllMatch ? 'bg-yellow-800 text-yellow-200' : isAllMatch ? 'bg-yellow-800 text-yellow-200'
: printable ? 'text-blue-300' : printable ? 'text-cyan-300'
: 'text-neutral-700'; : 'text-neutral-500';
const ring = isCursor && pane === 'ascii' ? ' ring-1 ring-inset ring-blue-400' : ''; const ring = isCursor && pane === 'ascii' ? ' ring-1 ring-inset ring-blue-400' : '';
return ( return (
<span <span