Improve WEB UI

Author: matteius

nextjs-frontend/src/app/globals.css

@@ -105,20 +105,33 @@
 }
 
 .graph-edge.highlighted {
-  @apply stroke-primary stroke-2;
+  stroke: hsl(var(--primary));
+  stroke-width: 2;
 }
 
 /* Diff viewer styles */
 .diff-line-added {
-  @apply bg-green-100 dark:bg-green-900/30;
+  background-color: rgb(220 252 231);
+}
+
+.dark .diff-line-added {
+  background-color: rgb(20 83 45 / 0.3);
 }
 
 .diff-line-removed {
-  @apply bg-red-100 dark:bg-red-900/30;
+  background-color: rgb(254 226 226);
+}
+
+.dark .diff-line-removed {
+  background-color: rgb(127 29 29 / 0.3);
 }
 
 .diff-line-modified {
-  @apply bg-yellow-100 dark:bg-yellow-900/30;
+  background-color: rgb(254 243 199);
+}
+
+.dark .diff-line-modified {
+  background-color: rgb(120 53 15 / 0.3);
 }
 
 /* File tree styles */

nextjs-frontend/src/components/analysis/FunctionAnalysisDashboard.tsx

@@ -243,7 +243,7 @@ export function FunctionAnalysisDashboard({ data, onFunctionSelect }: FunctionAn
           <div className="grid grid-cols-3 gap-4">
             <div className="text-center">
               <div className="text-3xl font-bold text-green-600">{metrics.highConfidenceMatches}</div>
-              <div className="text-sm text-muted-foreground">High Confidence (>80%)</div>
+              <div className="text-sm text-muted-foreground">High Confidence (&gt;80%)</div>
             </div>
             <div className="text-center">
               <div className="text-3xl font-bold text-yellow-600">
@@ -253,7 +253,7 @@ export function FunctionAnalysisDashboard({ data, onFunctionSelect }: FunctionAn
             </div>
             <div className="text-center">
               <div className="text-3xl font-bold text-red-600">{metrics.lowConfidenceMatches}</div>
-              <div className="text-sm text-muted-foreground">Low Confidence (<50%)</div>
+              <div className="text-sm text-muted-foreground">Low Confidence (&lt;50%)</div>
             </div>
           </div>
         </CardContent>