lighter color for header

Author: StackOverflowIsBetterThanAnyAI

src/components/ui/sectionheader.tsx

@@ -1,10 +1,18 @@
 type SectionHeaderProps = {
     children: string
+    light?: boolean
 }
 
-export const SectionHeader = ({ children }: SectionHeaderProps) => {
+export const SectionHeader = ({
+    children,
+    light = false,
+}: SectionHeaderProps) => {
     return (
-        <h2 className="self-start text-very-large font-semibold underline">
+        <h2
+            className={`self-start text-very-large font-semibold underline ${
+                light ? 'text-zinc-50' : ''
+            }`}
+        >
             {children}
         </h2>
     )

src/components/users/Users.tsx

@@ -62,7 +62,7 @@ const Users = () => {
         >
             <div className="w-full flex flex-col items-center">
                 <div className="w-full flex flex-col gap-0 sm:gap-4">
-                    <SectionHeader>Most Active Users</SectionHeader>
+                    <SectionHeader light>Most Active Users</SectionHeader>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
                         <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
                             {users.length > 0