fix: fixed highlighted text not rendering

Author: steadyfall

site/src/components/About.tsx

@@ -1,6 +1,6 @@
 import { ArrowUpRight } from "lucide-react"
 import BlurFade, { BLUR_FADE_DELAY } from "@/components/ui/BlurFade";
-import Highlight from "@/lib/highlighter";
+import Highlight from "@/components/ui/Highlighter";
 import { cn } from "@/lib/utils";
 
 const About = () => {
@@ -14,23 +14,23 @@ const About = () => {
         </BlurFade>
         <BlurFade delay={BLUR_FADE_DELAY * 4}>
           <p className="text-gray-700 dark:text-gray-300">
-              I am a {Highlight("junior")} at the {Highlight("University of Waterloo")}, pursuing a major in {Highlight("Computational Mathematics")}.
-              With a {Highlight(`passion for technology and innovation`)}, I am constantly exploring new
-              areas in {Highlight(`software development`)} and {Highlight(`artificial intelligence`)}.
-              I am eager to work in areas that leverage the combined potential of {Highlight(`machine learning`)} and
+              I am a <Highlight text="junior"/> at the <Highlight text="University of Waterloo"/>, pursuing a major in <Highlight text="Computational Mathematics"/>.
+              With a <Highlight text="passion for technology and innovation"/>, I am constantly exploring new
+              areas in <Highlight text="software development"/> and <Highlight text="artificial intelligence"/>.
+              I am eager to work in areas that leverage the combined potential of <Highlight text="machine learning"/> and
               software development, regardless of traditional boundaries. <br></br>
               Outside of academics and professional career, I enjoy contributing to open-source projects, working on side projects, participating in hackathons and playing
               table tennis, football, cricket and badminton. I also like to travel & explore new places, cuisines & restaurants.<br></br>
-              You can find me {Highlight(`re-watching`, "pink")} any one of these TV series:
-                {Highlight(`Suits`, "pink")},
-                {Highlight(`The Office`, "pink")},
-                {Highlight(`Brooklyn 9-9`, "pink")},
-                {Highlight(`How I Met Your Mother`, "pink")},
-                {Highlight(`The Big Bang Theory`, "pink")},
-                {Highlight(`South Park`, "pink")},
-                {Highlight(`Impractical Jokers`, "pink")}.
+              You can find me <Highlight text="re-watching" color="pink"/> any one of these TV series:
+                <Highlight text="Suits" color="pink"/>,
+                <Highlight text="The Office" color="pink"/>,
+                <Highlight text="Brooklyn 9-9" color="pink"/>,
+                <Highlight text="How I Met Your Mother" color="pink"/>,
+                <Highlight text="The Big Bang Theory" color="pink"/>,
+                <Highlight text="South Park" color="pink"/>,
+                <Highlight text="Impractical Jokers" color="pink"/>.
               <br></br>
-              For those of you curious, the favicon is a {Highlight("4-hypercube graph", "cyan")} made via Python, using NetworkX and Matplotlib.
+              For those of you curious, the favicon is a <Highlight text="4-hypercube graph" color="cyan" /> made via Python, using NetworkX and Matplotlib.
               Check the <a
                 href="/icon.ico" target="_blank"
                 className="inline-flex items-center hover:underline hover:underline-offset-2 text-orange-500"

site/src/lib/highlighter.tsx renamed to site/src/components/ui/Highlighter.tsx

@@ -1,5 +1,10 @@
 import { cn } from "@/lib/utils";
 
+interface HighlightProps {
+    text: string
+    color?: 'cyan' | 'pink' | 'violet-web' | 'slate-blue' | 'red' | 'yellow' | 'lemon' | 'laser-lemon'
+}
+
 /**
  * Highlights the given text with the highlighter of specified color.
  *
@@ -8,27 +13,27 @@ import { cn } from "@/lib/utils";
  * @returns Returns a `span` element with the highlighted text of specified color.
  *
  */
-export default function Highlight(text: string, color = "yellow") {
+export default function Highlight({ text, color = "yellow" }: HighlightProps) {
     let colorClass: string;
 
     if (color === "cyan") {
-        colorClass = "bg-cyan-300 dark:bg-cyan-500/30";
+        colorClass = "bg-cyan-200 dark:bg-cyan-500/30";
     }
     else if (color === "pink" || color === "violet-web") {
-        colorClass = "bg-[#ff77e4]";
+        colorClass = "bg-[#ffa7ee] dark:bg-[#f73ed2]/30";
     }
     else if (color === "slate-blue") {
-        colorClass = "bg-[#7777ff]";
+        colorClass = "bg-[#a0a8ff] dark:bg-[#675bf9]/50";
     }
     else if (color === "red") {
-        colorClass = "bg-[#ff7777]";
+        colorClass = "bg-[#ffa0a0] dark:bg-[#f83b3b]/50";
     }
     else {
         // This covers "yellow", "lemon", "laser-lemon", and the default case
-        colorClass = "bg-[#ffff77]";
+        colorClass = "bg-[#ffff77] dark:bg-[#fce913]/30";
     }
 
     return (
-      <span className={cn("bg-opacity-50 px-1 rounded", colorClass)}>{text}</span>
+      <span className={cn("px-1 rounded", colorClass)}>{text}</span>
     )
 }