refactor: fetch collabydraw repo start count via github api

Author: coderomm

apps/collabydraw/app/(auth-layout)/auth/signin/page.tsx

@@ -8,8 +8,8 @@ export default function SignInPage() {
     return (
         <Card className="border-0 shadow-none lg:shadow-2xl rounded-3xl m-0 mx-auto px-6 py-8 lg:p-16 relative z-10 max-w-[480px] bg-yellow-light">
             <CardHeader className="p-0">
-                <CardTitle className="text-2xl font-bold text-center">Hi there!</CardTitle>
-                <CardDescription className="text-sm pb-4 text-primary text-center">Enter your email to sign in to your account</CardDescription>
+                <CardTitle className="text-2xl font-bold text-center text-[#0a0a0a]">Hi there!</CardTitle>
+                <CardDescription className="text-sm pb-4 text-primary text-center text-[#171717]">Enter your email to sign in to your account</CardDescription>
             </CardHeader>
             <CardContent className="p-0 !my-0">
                 <Suspense fallback={<ScreenLoading />}>

apps/collabydraw/app/(auth-layout)/auth/signup/page.tsx

@@ -6,8 +6,8 @@ export default function SignUpPage() {
     return (
         <Card className="border-0 shadow-none lg:shadow-2xl rounded-3xl m-0 mx-auto px-6 py-8 lg:p-16 relative z-10 max-w-[480px] bg-yellow-light">
             <CardHeader className="p-0">
-                <CardTitle className="text-2xl font-bold text-center">Create an account</CardTitle>
-                <CardDescription className="text-sm pb-4 text-primary text-center">Enter your email below to create your account</CardDescription>
+                <CardTitle className="text-2xl font-bold text-center text-[#0a0a0a]">Create an account</CardTitle>
+                <CardDescription className="text-sm pb-4 text-primary text-center text-[#171717]">Enter your email below to create your account</CardDescription>
             </CardHeader>
             <CardContent className="p-0 !my-0">
                 <SignUpForm />

apps/collabydraw/app/globals.css

@@ -236,6 +236,8 @@ h6 {
 
     --form-input: #121212;
     --form-input-hover: #141414;
+    --form-input: #fff;
+    --form-input-hover: #f1f3f5;
     --color-border-input: #212121;
     --form-color-text: #ced4da;
     --color-primary: #a8a5ff;

apps/collabydraw/components/AppSidebar.tsx

@@ -49,6 +49,7 @@ interface SidebarProps {
 }
 
 export function AppSidebar({ isOpen, onClose, canvasColor, setCanvasColor, isMobile, roomName, isStandalone, onClearCanvas, onExportCanvas, onImportCanvas }: SidebarProps) {
+    const [stars, setStars] = useState<number | null>(null);
     const [clearDialogOpen, setClearDialogOpen] = useState(false);
     const { theme, setTheme } = useTheme();
     const { data: session } = useSession();
@@ -83,6 +84,19 @@ export function AppSidebar({ isOpen, onClose, canvasColor, setCanvasColor, isMob
         return () => document.body.classList.remove("overflow-hidden")
     }, [isOpen])
 
+    useEffect(() => {
+        const fetchRepoMetaData = async () => {
+            try {
+                const res = await fetch('https://api.github.com/repos/coderomm/CollabyDraw');
+                const data = await res.json();
+                setStars(data.stargazers_count);
+            } catch (error) {
+                console.error('Error fetching GitHub repo data:', error);
+            }
+        }
+        fetchRepoMetaData();
+    }, [])
+
     return (
         <>
             <ClearCanvasDialog
@@ -136,14 +150,14 @@ export function AppSidebar({ isOpen, onClose, canvasColor, setCanvasColor, isMob
                             <Link
                                 className={cn(
                                     buttonVariants({ variant: "ghost" }),
-                                    "flex flex-row items-center justify-start gap-2 h-10 w-auto rounded-md px-3 text-sm font-medium transition-colors text-color-on-surface hover:text-color-on-surface bg-transparent hover:bg-button-hover-bg focus-visible:shadow-brand-color-shadow focus-visible:outline-none focus-visible:ring-0 active:bg-button-hover-bg active:border active:border-brand-active dark:hover:bg-w-button-hover-bg border border-[#705400] bg-[#FFE599]"
+                                    "flex flex-row items-center justify-start gap-2 h-10 w-auto rounded-md px-3 text-sm font-medium transition-colors text-white dark:text-black hover:text-color-on-surface bg-transparent hover:bg-button-hover-bg focus-visible:shadow-brand-color-shadow focus-visible:outline-none focus-visible:ring-0 active:bg-button-hover-bg active:border active:border-brand-active dark:hover:bg-w-button-hover-bg border border-[#705400] bg-[#FFE599]"
                                 )}
                                 href="https://github.com/coderomm/CollabyDraw"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 title="GitHub"
                             >
-                                <Github className="h-4 w-4" />GitHub - <span className="flex items-center justify-start gap-1">7<Star className="h-4 w-4" /></span>
+                                <Github className="h-4 w-4" />GitHub - <span className="flex items-center justify-start gap-1">{stars}<Star className="h-4 w-4" /></span>
                             </Link>
                             <SidebarLinkItem icon={Twitter} label="Twitter / X" url="https://x.com/1omsharma" />
                             <SidebarLinkItem icon={Linkedin} label="Linkedin" url="https://www.linkedin.com/in/1omsharma" />

apps/collabydraw/components/canvas/CanvasBoard.tsx

@@ -115,6 +115,7 @@ export default function CanvasBoard() {
 
     useEffect(() => {
         setCanvasEngineState(prev => ({ ...prev, canvasColor: canvasBgLight[0] }));
+        console.log('Theme = ', theme)
     }, [theme])
 
     useEffect(() => {