Update src/App.jsx

src/App.jsx

@@ -42,7 +42,8 @@ const QRGeneratorTab = ({
         qrStyles.forEach((style, index) => {
             const canvas = styleCanvasRefs.current[index];
             // Use a generic sample for style previews, not actual content
-            drawQrCode(canvas, "Sample", style.fg, 'H', 80);
+            // For style previews, the 'light' color should always be black for contrast with the style's fg color
+            drawQrCode(canvas, "Sample", style.fg, 'H', 80, '#000000'); 
         });
     }, [qrStyles, drawQrCode, styleCanvasRefs]);
 
@@ -144,7 +145,7 @@ const QRGeneratorTab = ({
             {/* Right Panel: Style Selection */}
             <div className={`w-full lg:w-1/4 p-6 rounded-2xl shadow-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} ${currentThemeClasses.text} flex flex-col transform transition-all duration-500 ease-in-out`}>
                 <label className={`mb-4 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Choose Style:</label>
-                <div className={`overflow-y-auto flex-grow rounded-xl p-2 ${currentThemeClasses.cardBg} custom-scrollbar`}>
+                <div className={`overflow-y-auto flex-grow rounded-xl p-2 ${currentThemeClasses.cardBg} custom-scrollbar max-h-[600px] lg:max-h-full`}> {/* Added max-h for explicit scrolling */}
                     <div className="grid grid-cols-2 gap-4">
                         {qrStyles.map((style, index) => (
                             <div
@@ -741,7 +742,7 @@ const App = () => {
         "🧘‍♀️💡 Stress Management Techniques",
         "🧘‍♂️✨ Mindfulness Exercises",
         "🧘‍♀️📱 Meditation Apps",
-        "😴💡 Sleep Optimization Tips",
+        "😴💡 Sleep Hygiene Tips",
         "🍎📖 Healthy Eating Guide",
         "💪🗓️ Exercise Routines",
         "🏋️‍♀️📞 Personal Trainer Contact",
@@ -876,7 +877,7 @@ const App = () => {
 
     // Define QR code styles (remains in App as it's static data used by QRGeneratorTab)
     const qrStyles = [
-        { name: "Classic", fg: "#000000" },
+        { name: "Classic", fg: "#FFFFFF" }, // Changed to white for visibility
         { name: "Neon Green", fg: "#39FF14" }, // Vibrant Neon Green
         { name: "Electric Blue", fg: "#00BFFF" }, // Bright Sky Blue
         { name: "Radiant Pink", fg: "#FF007F" }, // Hot Pink
@@ -888,6 +889,126 @@ const App = () => {
         { name: "Lime Zing", fg: "#7FFF00" }, // Chartreuse
         { name: "Deep Teal", fg: "#008080" }, // Teal
         { name: "Violet Ray", fg: "#8A2BE2" }, // Blue-Violet
+        { name: "Emerald", fg: "#00C957" }, // Deep Green
+        { name: "Sapphire", fg: "#082567" }, // Deep Blue
+        { name: "Ruby", fg: "#E0115F" }, // Deep Red
+        { name: "Amethyst", fg: "#9966CC" }, // Medium Purple
+        { name: "Sunshine", fg: "#FFD300" }, // Bright Yellow
+        { name: "Ocean Wave", fg: "#007FFF" }, // Medium Blue
+        { name: "Forest Mist", fg: "#A8C3BC" }, // Light Greenish-Gray
+        { name: "Crimson Tide", fg: "#DC143C" }, // Crimson
+        { name: "Midnight Blue", fg: "#191970" }, // Dark Blue
+        { name: "Rose Gold", fg: "#B76E79" }, // Rose Gold
+        { name: "Spring Green", fg: "#00FF7F" }, // Spring Green
+        { name: "Royal Purple", fg: "#7851A9" }, // Royal Purple
+        { name: "Azure", fg: "#007FFF" }, // Azure Blue
+        { name: "Coral", fg: "#FF7F50" }, // Coral Orange
+        { name: "Mint Green", fg: "#98FF98" }, // Light Mint Green
+        { name: "Lavender", fg: "#E6E6FA" }, // Light Lavender
+        { name: "Chocolate", fg: "#D2691E" }, // Chocolate Brown
+        { name: "Silver", fg: "#C0C0C0" }, // Silver
+        { name: "Bronze", fg: "#CD7F32" }, // Bronze
+        { name: "Copper", fg: "#B87333" }, // Copper
+        { name: "Plum", fg: "#8E4585" }, // Plum Purple
+        { name: "Olive", fg: "#808000" }, // Olive Green
+        { name: "Maroon", fg: "#800000" }, // Maroon Red
+        { name: "Teal Blue", fg: "#367588" }, // Teal Blue
+        { name: "Sky Blue", fg: "#87CEEB" }, // Sky Blue
+        { name: "Slate Gray", fg: "#708090" }, // Slate Gray
+        { name: "Dark Green", fg: "#006400" }, // Dark Green
+        { name: "Dark Red", fg: "#8B0000" }, // Dark Red
+        { name: "Dark Blue", fg: "#00008B" }, // Dark Blue
+        { name: "Dark Cyan", fg: "#008B8B" }, // Dark Cyan
+        { name: "Dark Magenta", fg: "#8B008B" }, // Dark Magenta
+        { name: "Dark Yellow", fg: "#8B8B00" }, // Dark Yellow
+        { name: "Light Gray", fg: "#D3D3D3" }, // Light Gray
+        { name: "Light Blue", fg: "#ADD8E6" }, // Light Blue
+        { name: "Light Green", fg: "#90EE90" }, // Light Green
+        { name: "Light Pink", fg: "#FFB6C1" }, // Light Pink
+        { name: "Light Yellow", fg: "#FFFFE0" }, // Light Yellow
+        { name: "Pale Green", fg: "#98FB98" }, // Pale Green
+        { name: "Pale Blue", fg: "#AFEEEE" }, // Pale Blue
+        { name: "Pale Red", fg: "#F08080" }, // Pale Red
+        { name: "Pale Yellow", fg: "#FFFF99" }, // Pale Yellow
+        { name: "Deep Orange", fg: "#FF6600" }, // Deep Orange
+        { name: "Deep Pink", fg: "#FF1493" }, // Deep Pink
+        { name: "Deep Purple", fg: "#800080" }, // Deep Purple
+        { name: "Deep Sky Blue", fg: "#00BFFF" }, // Deep Sky Blue
+        { name: "Medium Sea Green", fg: "#3CB371" }, // Medium Sea Green
+        { name: "Medium Slate Blue", fg: "#7B68EE" }, // Medium Slate Blue
+        { name: "Medium Spring Green", fg: "#00FA9A" }, // Medium Spring Green
+        { name: "Medium Turquoise", fg: "#48D1CC" }, // Medium Turquoise
+        { name: "Medium Violet Red", fg: "#C71585" }, // Medium Violet Red
+        { name: "Dark Goldenrod", fg: "#B8860B" }, // Dark Goldenrod
+        { name: "Dark Orchid", fg: "#9932CC" }, // Dark Orchid
+        { name: "Dark Salmon", fg: "#E9967A" }, // Dark Salmon
+        { name: "Dark Sea Green", fg: "#8FBC8F" }, // Dark Sea Green
+        { name: "Dark Slate Blue", fg: "#483D8B" }, // Dark Slate Blue
+        { name: "Dark Slate Gray", fg: "#2F4F4F" }, // Dark Slate Gray
+        { name: "Dark Turquoise", fg: "#00CED1" }, // Dark Turquoise
+        { name: "Dark Violet", fg: "#9400D3" }, // Dark Violet
+        { name: "Light Coral", fg: "#F08080" }, // Light Coral
+        { name: "Light Cyan", fg: "#E0FFFF" }, // Light Cyan
+        { name: "Light Goldenrod Yellow", fg: "#FAFAD2" }, // Light Goldenrod Yellow
+        { name: "Light Green", fg: "#90EE90" }, // Light Green
+        { name: "Light Pink", fg: "#FFB6C1" }, // Light Pink
+        { name: "Light Salmon", fg: "#FFA07A" }, // Light Salmon
+        { name: "Light Sea Green", fg: "#20B2AA" }, // Light Sea Green
+        { name: "Light Sky Blue", fg: "#87CEFA" }, // Light Sky Blue
+        { name: "Light Slate Gray", fg: "#778899" }, // Light Slate Gray
+        { name: "Light Steel Blue", fg: "#B0C4DE" }, // Light Steel Blue
+        { name: "Light Yellow", fg: "#FFFFE0" }, // Light Yellow
+        { name: "Hot Pink", fg: "#FF69B4" }, // Hot Pink
+        { name: "Indian Red", fg: "#CD5C5C" }, // Indian Red
+        { name: "Indigo", fg: "#4B0082" }, // Indigo
+        { name: "Khaki", fg: "#F0E68C" }, // Khaki
+        { name: "Lavender Blush", fg: "#FFF0F5" }, // Lavender Blush
+        { name: "Lemon Chiffon", fg: "#FFFACD" }, // Lemon Chiffon
+        { name: "Lime Green", fg: "#32CD32" }, // Lime Green
+        { name: "Linen", fg: "#FAF0E6" }, // Linen
+        { name: "Medium Aqua Marine", fg: "#66CDAA" }, // Medium Aqua Marine
+        { name: "Medium Blue", fg: "#0000CD" }, // Medium Blue
+        { name: "Medium Orchid", fg: "#BA55D3" }, // Medium Orchid
+        { name: "Medium Purple", fg: "#9370DB" }, // Medium Purple
+        { name: "Medium Violet Red", fg: "#C71585" }, // Medium Violet Red
+        { name: "Misty Rose", fg: "#FFE4E1" }, // Misty Rose
+        { name: "Moccasin", fg: "#FFE4B5" }, // Moccasin
+        { name: "Navajo White", fg: "#FFDEAD" }, // Navajo White
+        { name: "Old Lace", fg: "#FDF5E6" }, // Old Lace
+        { name: "Olive Drab", fg: "#6B8E23" }, // Olive Drab
+        { name: "Orange Red", fg: "#FF4500" }, // Orange Red
+        { name: "Orchid", fg: "#DA70D6" }, // Orchid
+        { name: "Pale Goldenrod", fg: "#EEE8AA" }, // Pale Goldenrod
+        { name: "Pale Turquoise", fg: "#AFEEEE" }, // Pale Turquoise
+        { name: "Pale Violet Red", fg: "#DB7093" }, // Pale Violet Red
+        { name: "Papaya Whip", fg: "#FFEFD5" }, // Papaya Whip
+        { name: "Peach Puff", fg: "#FFDAB9" }, // Peach Puff
+        { name: "Peru", fg: "#CD853F" }, // Peru
+        { name: "Pink", fg: "#FFC0CB" }, // Pink
+        { name: "Plum", fg: "#DDA0DD" }, // Plum
+        { name: "Powder Blue", fg: "#B0E0E6" }, // Powder Blue
+        { name: "Rosy Brown", fg: "#BC8F8F" }, // Rosy Brown
+        { name: "Royal Blue", fg: "#4169E1" }, // Royal Blue
+        { name: "Saddle Brown", fg: "#8B4513" }, // Saddle Brown
+        { name: "Salmon", fg: "#FA8072" }, // Salmon
+        { name: "Sandy Brown", fg: "#F4A460" }, // Sandy Brown
+        { name: "Sea Green", fg: "#2E8B57" }, // Sea Green
+        { name: "Sea Shell", fg: "#FFF5EE" }, // Sea Shell
+        { name: "Sienna", fg: "#A0522D" }, // Sienna
+        { name: "Sky Blue", fg: "#87CEEB" }, // Sky Blue
+        { name: "Slate Blue", fg: "#6A5ACD" }, // Slate Blue
+        { name: "Slate Gray", fg: "#708090" }, // Slate Gray
+        { name: "Snow", fg: "#FFFAFA" }, // Snow
+        { name: "Spring Green", fg: "#00FF7F" }, // Spring Green
+        { name: "Steel Blue", fg: "#4682B4" }, // Steel Blue
+        { name: "Tan", fg: "#D2B48C" }, // Tan
+        { name: "Thistle", fg: "#D8BFD8" }, // Thistle
+        { name: "Tomato", fg: "#FF6347" }, // Tomato
+        { name: "Turquoise", fg: "#40E0D0" }, // Turquoise
+        { name: "Violet", fg: "#EE82EE" }, // Violet
+        { name: "Wheat", fg: "#F5DEB3" }, // Wheat
+        { name: "White Smoke", fg: "#F5F5F5" }, // White Smoke
+        { name: "Yellow Green", fg: "#9ACD32" }, // Yellow Green
     ];
 
     // Define themes (remains in App)
@@ -1059,7 +1180,8 @@ const App = () => {
     };
 
     // Callback to generate QR code on a given canvas
-    const drawQrCode = useCallback((canvas, text, color, errorLevel, size = 256) => {
+    // Added a new parameter `lightColorOverride` to explicitly set the light module color
+    const drawQrCode = useCallback((canvas, text, color, errorLevel, size = 256, lightColorOverride = null) => {
         if (!canvas) {
             console.warn("Canvas element is null, cannot draw QR code.");
             return;
@@ -1077,13 +1199,16 @@ const App = () => {
         const context = canvas.getContext('2d');
         context.clearRect(0, 0, canvas.width, canvas.height);
 
+        // Determine the light module color: white if QR color is black, otherwise black
+        const effectiveLightColor = lightColorOverride || (color === '#000000' ? '#FFFFFF' : '#000000');
+
         if (text.trim() !== '') {
             QRCode.toCanvas(canvas, text, {
                 errorCorrectionLevel: errorLevel,
                 width: size,
                 color: {
                     dark: color,
-                    light: '#000000' // Ensure light parts are black for contrast with neon
+                    light: effectiveLightColor // Use the determined light color
                 }
             }, function (error) {
                 if (error) console.error("QR Code drawing error:", error);
@@ -1103,14 +1228,15 @@ const App = () => {
         tempCanvas.width = downloadResolution;
         tempCanvas.height = downloadResolution;
 
-        // Draw the QR code onto the temporary canvas at the selected resolution
-        // Ensure light parts are black for the downloaded image as well
+        // Determine the light module color for download: white if QR color is black, otherwise black
+        const effectiveLightColorForDownload = qrColor === '#000000' ? '#FFFFFF' : '#000000';
+
         QRCode.toCanvas(tempCanvas, content, {
             errorCorrectionLevel: errorLevel,
             width: downloadResolution,
             color: {
                 dark: qrColor,
-                light: '#000000' 
+                light: effectiveLightColorForDownload // Use the determined light color for download
             }
         }, function (error) {
             if (error) console.error("QR Code drawing error for download:", error);