Merge pull request #6 from DataResponsibly/accessible-frontend

fix text contrast for accessibility

Author: soham-chitnis10

client/src/App.jsx

@@ -380,7 +380,7 @@ function DesktopSettingsDrawer({ onClose, children }) {
         }}
       >
         <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
-          <span className="uppercase tracking-wider text-xs text-fg/80">
+          <span className="uppercase tracking-wider text-xs text-fg">
             Settings
           </span>
           <button

client/src/components/Barplot.jsx

@@ -145,7 +145,7 @@ export default function Barplot({ data, onTickClick, disabled }) {
       {hasData ? (
         <svg ref={svgRef} className="barplot-svg block" />
       ) : (
-        <div className="absolute inset-0 flex items-center justify-center text-center text-fg/50 text-xs px-4">
+        <div className="absolute inset-0 flex items-center justify-center text-center text-fg text-xs px-4">
           Tap any generated token to inspect the top-k candidate probabilities
           here.
         </div>

client/src/components/ChatInput.jsx

@@ -63,7 +63,7 @@ export default function ChatInput({
           )}
         </button>
       </div>
-      <div className="mt-1 text-[11px] text-fg/50 hidden sm:block">
+      <div className="mt-1 text-[11px] text-fg hidden sm:block">
         Enter to send · Shift+Enter for newline
       </div>
     </div>

client/src/components/ChatOutput.jsx

@@ -49,20 +49,20 @@ export default function ChatOutput({
     >
       {hasPrompt && (
         <div className="mb-3 select-text">
-          <div className="text-[10px] uppercase tracking-wider text-fg/50 mb-1">
+          <div className="text-[10px] uppercase tracking-wider text-fg mb-1">
             Prompt
           </div>
-          <div className="border-l-2 border-fg/30 pl-3 whitespace-pre-wrap break-words text-sm text-fg/80">
+          <div className="border-l-2 border-border pl-3 whitespace-pre-wrap break-words text-sm text-fg">
             {prompt}
           </div>
         </div>
       )}
       {(hasPrompt || hasTokens) && (
         <div className="text-sm text-fg">
-          <div className="text-[10px] uppercase tracking-wider text-fg/50 mb-1">
+          <div className="text-[10px] uppercase tracking-wider text-fg mb-1">
             Generation
           </div>
-          <span className="text-fg/60 mr-1">&gt;</span>
+          <span className="text-fg mr-1">&gt;</span>
           {tokens.map((token, i) => {
             const selected = token.idx_counter === selectedIdx;
             const bg = showUncertainty ? uncertaintyBg(token) : "transparent";
@@ -83,7 +83,7 @@ export default function ChatOutput({
         <div className="mt-4 text-danger text-sm">{errorMessage}</div>
       )}
       {!hasPrompt && !hasTokens && !errorMessage && (
-        <div className="text-fg/40 text-sm mt-2">
+        <div className="text-fg text-sm mt-2">
           Prompt the model to begin. Tokens appear here and you can tap any
           token to inspect or edit its probability distribution.
         </div>

client/src/components/SettingsPanel.jsx

@@ -65,13 +65,13 @@ export default function SettingsPanel({ settings, onChange }) {
       <div>
         <div className="flex items-center justify-between mb-1">
           <span>Delay</span>
-          <span className="text-fg/60">{Number(settings.sleepTime).toFixed(1)}s</span>
+          <span className="text-fg">{Number(settings.sleepTime).toFixed(1)}s</span>
         </div>
         <div className="relative">
-          <div className="absolute top-2 left-2 text-xs text-fg/50 pointer-events-none">
+          <div className="absolute top-2 left-2 text-xs text-fg pointer-events-none">
             0s
           </div>
-          <div className="absolute top-2 right-2 text-xs text-fg/50 pointer-events-none">
+          <div className="absolute top-2 right-2 text-xs text-fg pointer-events-none">
             2s
           </div>
           <input