From d647bf15015395cd97c6bc4b7b3cf72cdbd1d573 Mon Sep 17 00:00:00 2001
From: dinidusachintha <dinidusachintha7@gmail.com>
Date: Mon, 14 Oct 2024 13:06:00 +0530
Subject: [PATCH] update (#118)

* add speechgenarator

* css updated

* add validations
---
 backend/package.json                          |   1 +
 backend/routes/Blog.js                        |  38 ++++-
 frontend/src/Components/Home/BlogHeader.jsx   |   2 +-
 frontend/src/Pages/blog manage/AddBlog.jsx    | 131 ++++++++++++------
 frontend/src/Pages/blog manage/BlogList.jsx   |  14 +-
 .../src/Pages/blog manage/CommentList.jsx     |  10 +-
 .../src/Pages/blog manage/InduvidualBlog.jsx  | 121 +++++++++++++---
 frontend/src/Pages/blog manage/UpdateBlog.jsx |   4 +-
 frontend/src/Pages/blog manage/UserBlog.jsx   |  20 +--
 .../Pages/common/speech/SpeechGenerator.jsx   |  16 +--
 frontend/src/Pages/dashboard/Admin.jsx        |   8 +-
 .../ishanka dahsbaord/UpdateBlogDashbaord.jsx |   6 +-
 12 files changed, 266 insertions(+), 105 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 2c89a0d5..8a8c3a2c 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -31,6 +31,7 @@
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.3",
     "mongoose": "^8.4.3",
+    "morgan": "^1.10.0",
     "multer": "^1.4.5-lts.1",
     "nodemailer": "^6.9.14",
     "pdfkit": "^0.15.0",
diff --git a/backend/routes/Blog.js b/backend/routes/Blog.js
index af9f8a72..c0be2905 100644
--- a/backend/routes/Blog.js
+++ b/backend/routes/Blog.js
@@ -3,12 +3,28 @@ import Blog from '../models/Blog.js' // Blog model
 
 const router = Router()
 
-// Function to validate required fields
+// Function to validate required fields with enhanced rules
 const validateBlogFields = (title, content, author) => {
     const errors = {}
-    if (!title) errors.title = 'Title is required.'
-    if (!content) errors.content = 'Content is required.'
-    if (!author) errors.author = 'Author is required.'
+
+    if (!title) {
+        errors.title = 'Title is required.'
+    } else if (title.length < 5) {
+        errors.title = 'Title must be at least 5 characters long.'
+    }
+
+    if (!content) {
+        errors.content = 'Content is required.'
+    } else if (content.length < 10) {
+        errors.content = 'Content must be at least 10 characters long.'
+    }
+
+    if (!author) {
+        errors.author = 'Author is required.'
+    } else if (author.trim().length === 0) {
+        errors.author = 'Author name cannot be empty.'
+    }
+
     return errors
 }
 
@@ -20,7 +36,11 @@ router.post('/add', async (req, res) => {
         // Validate required fields
         const errors = validateBlogFields(title, content, author)
         if (Object.keys(errors).length) {
-            return res.status(400).json({ errors })
+            // Return a structured response showing all validation errors
+            return res.status(400).json({
+                message: 'Validation failed. Please fix the errors below.',
+                errors,
+            })
         }
 
         const newBlog = new Blog({
@@ -75,7 +95,13 @@ router.put('/update/:id', async (req, res) => {
         // Validate required fields
         const errors = validateBlogFields(title, content, author)
         if (Object.keys(errors).length) {
-            return res.status(400).json({ errors })
+
+            // Return a structured response showing all validation errors
+            return res.status(400).json({
+                message: 'Validation failed. Please fix the errors below.',
+                errors,
+            })
+
         }
 
         // Find the blog post by ID and update it
diff --git a/frontend/src/Components/Home/BlogHeader.jsx b/frontend/src/Components/Home/BlogHeader.jsx
index b5fba388..6d2caafc 100644
--- a/frontend/src/Components/Home/BlogHeader.jsx
+++ b/frontend/src/Components/Home/BlogHeader.jsx
@@ -18,7 +18,7 @@ const BlogHeader = ({ loading }) => {
                         {/* Update the link to the shop */}
                         <button
                             type="button"
-                            className="flex items-center bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
+                            className="flex items-center px-4 py-2 text-white rounded bg-lime-500 hover:bg-lime-600"
                             disabled={loading}
                         >
                             <FaCartShopping className="mr-2" />{' '}
diff --git a/frontend/src/Pages/blog manage/AddBlog.jsx b/frontend/src/Pages/blog manage/AddBlog.jsx
index fcaf2c94..f67b026d 100644
--- a/frontend/src/Pages/blog manage/AddBlog.jsx	
+++ b/frontend/src/Pages/blog manage/AddBlog.jsx	
@@ -5,15 +5,17 @@ function AddNews() {
     const [title, setTitle] = useState('')
     const [content, setContent] = useState('')
     const [author, setAuthor] = useState('')
-    const [selectedFile, setSelectedFile] = useState(null) // State for selected file
-    const [imagePreview, setImagePreview] = useState(null) // State for image preview
-    const [uploadMessage, setUploadMessage] = useState('') // Message for file upload status
+    const [selectedFile, setSelectedFile] = useState(null)
+    const [imagePreview, setImagePreview] = useState(null)
+    const [uploadMessage, setUploadMessage] = useState('')
     const [successMessage, setSuccessMessage] = useState('')
-    const [loading, setLoading] = useState(false) // State to track loading
+    const [loading, setLoading] = useState(false)
     const [errors, setErrors] = useState({})
 
+    const MAX_FILE_SIZE = 10 * 1024 * 1024 // 5MB limit
+    const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png']
+
     useEffect(() => {
-        // Cleanup function to revoke object URL to avoid memory leaks
         return () => {
             if (imagePreview) {
                 URL.revokeObjectURL(imagePreview)
@@ -21,18 +23,50 @@ function AddNews() {
         }
     }, [imagePreview])
 
-    // Function to handle image upload
+    // Validate title length
+    const validateTitle = () => {
+        if (!title) return 'Title is required'
+        if (title.length > 100) return 'Title cannot exceed 100 characters'
+        return ''
+    }
+
+    // Validate content length
+    const validateContent = () => {
+        if (!content) return 'Content is required'
+        if (content.length < 20) return 'Content must be at least 20 characters'
+        return ''
+    }
+
+    // Validate author name (no numbers allowed)
+    const validateAuthor = () => {
+        if (!author) return 'Author is required'
+        const regex = /^[a-zA-Z\s]*$/
+        if (!regex.test(author))
+            return 'Author name should not contain numbers or special characters'
+        return ''
+    }
+
     const handleUpload = async () => {
         if (!selectedFile) {
             setUploadMessage('No file selected')
             return null
         }
 
+        if (selectedFile.size > MAX_FILE_SIZE) {
+            setUploadMessage('File size exceeds the 5MB limit.')
+            return null
+        }
+
+        if (!ALLOWED_FILE_TYPES.includes(selectedFile.type)) {
+            setUploadMessage('Only JPG or PNG files are allowed.')
+            return null
+        }
+
         const formData = new FormData()
         formData.append('image', selectedFile)
-        formData.append('folder', 'avatars') // Adjust folder if needed
+        formData.append('folder', 'avatars')
 
-        setLoading(true) // Start loading
+        setLoading(true)
 
         try {
             const response = await axios.post('/api/images', formData, {
@@ -41,67 +75,62 @@ function AddNews() {
                 },
             })
 
-            setUploadMessage('Image uploaded successfully!')
-            console.log(response.data)
-            return response.data.url // Return the uploaded image URL
+            return response.data.url
         } catch (error) {
             setUploadMessage('Upload failed: ' + error.message)
-            console.error('Upload error:', error) // Log the error for debugging
-            return null // Return null to signify failure
+            return null
         } finally {
-            setLoading(false) // Stop loading
+            setLoading(false)
         }
     }
 
-    // Function to handle adding news
     const addNews = async (e) => {
         e.preventDefault()
 
-        // Clear previous errors
-        setErrors({})
 
-        // Basic validation
-        if (!title || !content || !author) {
+
+        const titleError = validateTitle()
+        const contentError = validateContent()
+        const authorError = validateAuthor()
+
+        if (titleError || contentError || authorError) {
             setErrors({
-                title: !title ? 'Title is required' : '',
-                content: !content ? 'Content is required' : '',
-                author: !author ? 'Author is required' : '',
+                title: titleError,
+                content: contentError,
+                author: authorError,
             })
             return
         }
 
-        // Upload the image first and get the URL
         try {
             const uploadedUrl = await handleUpload()
 
-            if (!uploadedUrl) return // Exit if image upload failed
+            if (!uploadedUrl) return
 
             const news = {
                 title,
                 content,
                 author,
-                newsImage: uploadedUrl, // Use the uploaded image URL
+                newsImage: uploadedUrl,
             }
 
             await axios.post('/api/blog/add', news)
-            setSuccessMessage('✅ News added successfully!')
+            setSuccessMessage('✅ Blog added successfully!')
             resetForm()
         } catch (err) {
-            console.error('Error adding news:', err)
-            alert('Failed to add news: ' + err.message)
+            console.error('Error adding Blog:', err)
+            alert('Failed to add Blog: ' + err.message)
         }
     }
 
-    // Function to handle image file selection and preview
     const handleImageChange = (e) => {
         const file = e.target.files[0]
         if (file) {
             setSelectedFile(file)
-            setImagePreview(URL.createObjectURL(file)) // Create preview URL for the selected image
+            setImagePreview(URL.createObjectURL(file))
         }
     }
 
-    // Function to reset form fields
     const resetForm = () => {
         setTitle('')
         setContent('')
@@ -114,20 +143,29 @@ function AddNews() {
     return (
         <>
             {successMessage && (
-                <div className="p-4 mb-4 text-center text-white bg-blue-600 rounded-md">
+                <div className="p-4 mb-4 text-center text-white rounded-md bg-lime-600">
                     {successMessage}
                 </div>
             )}
-            <section className="max-w-4xl p-6 mx-auto mt-20 bg-blue-700 rounded-md shadow-md dark:bg-gray-800">
-                <h1 className="text-xl font-bold text-white capitalize dark:text-white">
-                    Add News
+
+            {uploadMessage && (
+                <div className="p-4 mb-4 text-center text-white bg-red-600 rounded-md">
+                    {uploadMessage}
+                </div>
+            )}
+
+            <section className="max-w-4xl p-6 mx-auto mt-20 rounded-md shadow-md bg-lime-700 dark:bg-gray-200">
+                <h1 className="text-xl font-bold text-black capitalize dark:text-black">
+                    Add Blog
                 </h1>
 
                 <form onSubmit={addNews}>
                     <div className="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
                         <div>
                             <label
-                                className="text-white dark:text-green-200"
+
+                                className="text-black dark:text-black"
+
                                 htmlFor="title"
                             >
                                 Title
@@ -146,7 +184,9 @@ function AddNews() {
 
                         <div>
                             <label
-                                className="text-white dark:text-gray-200"
+
+                                className="text-black dark:text-black"
+
                                 htmlFor="author"
                             >
                                 Author
@@ -165,7 +205,9 @@ function AddNews() {
 
                         <div className="col-span-2">
                             <label
-                                className="text-white dark:text-gray-200"
+
+                                className="text-black dark:text-black"
+
                                 htmlFor="content"
                             >
                                 Content
@@ -184,7 +226,9 @@ function AddNews() {
 
                         <div>
                             <label
-                                className="block mb-2 font-medium text-white text-l dark:text-white"
+
+                                className="block mb-2 font-medium text-black text-l dark:text-black"
+
                                 htmlFor="newsImage"
                             >
                                 Upload Image
@@ -198,10 +242,11 @@ function AddNews() {
                             />
                         </div>
 
-                        {/* Image Preview Section */}
                         {imagePreview && (
                             <div className="col-span-2 mt-4">
-                                <h2 className="text-white dark:text-gray-200">
+
+                                <h2 className="text-black dark:text-black">
+
                                     Image Preview:
                                 </h2>
                                 <img
@@ -216,8 +261,8 @@ function AddNews() {
                     <div className="flex justify-end mt-6">
                         <button
                             type="submit"
-                            className="px-6 py-2 leading-5 text-white bg-blue-500 rounded-md hover:bg-blue-900"
-                            disabled={loading} // Disable button while loading
+                            className="px-6 py-2 leading-5 text-white rounded-md bg-lime-500 hover:bg-lime-600"
+                            disabled={loading}
                         >
                             {loading ? 'Uploading...' : 'Submit'}
                         </button>
diff --git a/frontend/src/Pages/blog manage/BlogList.jsx b/frontend/src/Pages/blog manage/BlogList.jsx
index 5adeafed..dd41fd56 100644
--- a/frontend/src/Pages/blog manage/BlogList.jsx	
+++ b/frontend/src/Pages/blog manage/BlogList.jsx	
@@ -51,9 +51,9 @@ function BlogList() {
 
     return (
         <>
-            <section className="p-6 mx-auto mt-20 bg-green-700 rounded-md shadow-md max-w-7xl dark:bg-green-800">
+            <section className="p-6 mx-auto mt-20 bg-white rounded-md shadow-md max-w-7xl dark:bg-gray-100">
                 <div className="flex items-center justify-between mb-4">
-                    <h1 className="text-4xl font-bold text-white capitalize dark:text-white">
+                    <h1 className="text-4xl font-bold text-black capitalize dark:text-black">
                         Blog List
                     </h1>
                 </div>
@@ -62,23 +62,23 @@ function BlogList() {
                     {blogs.map((blog) => (
                         <div
                             key={blog._id}
-                            className="flex items-start p-4 bg-white rounded-md shadow-md dark:bg-green-800"
+                            className="flex items-start p-4 bg-white rounded-md shadow-md dark:bg-white"
                         >
                             <div className="flex-shrink-0 mr-4">
                                 <img
                                     src={`${blog.newsImage}`}
                                     alt={blog.title}
-                                    className="object-cover w-32 h-32 border border-green-300 rounded-md"
+                                    className="object-cover w-32 h-32 border rounded-md border-lime-500"
                                 />
                             </div>
                             <div className="flex-1">
-                                <h2 className="text-2xl font-semibold text-gray-800 dark:text-white">
+                                <h2 className="text-2xl font-semibold text-gray-800 dark:text-black">
                                     {blog.title}
                                 </h2>
-                                <p className="text-gray-600 dark:text-green-300">
+                                <p className="text-gray-600 dark:text-black">
                                     Author: {blog.author}
                                 </p>
-                                <p className="mt-2 text-gray-600 dark:text-green-400 line-clamp-3">
+                                <p className="mt-2 text-gray-600 dark:text-black line-clamp-3">
                                     {blog.content.substring(0, 50)}...
                                 </p>
                             </div>
diff --git a/frontend/src/Pages/blog manage/CommentList.jsx b/frontend/src/Pages/blog manage/CommentList.jsx
index 39abde96..a1eee868 100644
--- a/frontend/src/Pages/blog manage/CommentList.jsx	
+++ b/frontend/src/Pages/blog manage/CommentList.jsx	
@@ -34,9 +34,9 @@ const CommentList = () => {
     }
 
     return (
-        <section className="p-6 mx-auto mt-20 bg-green-700 rounded-md shadow-md max-w-7xl dark:bg-green-800">
+        <section className="p-6 mx-auto mt-20 bg-gray-100 rounded-md shadow-md max-w-7xl dark:bg-gray-200">
             <div className="flex items-center justify-between mb-4">
-                <h1 className="text-4xl font-bold text-white capitalize dark:text-white">
+                <h1 className="text-4xl font-bold text-black capitalize dark:text-black">
                     Comments List
                 </h1>
             </div>
@@ -45,13 +45,13 @@ const CommentList = () => {
                 {comments.map((comment) => (
                     <div
                         key={comment._id}
-                        className="flex items-start p-4 bg-white rounded-md shadow-md dark:bg-green-800"
+                        className="flex items-start p-4 bg-white rounded-md shadow-md dark:bg-white"
                     >
                         <div className="flex-1">
-                            <h2 className="text-xl font-semibold text-gray-800 dark:text-white">
+                            <h2 className="text-xl font-semibold text-gray-800 dark:text-black">
                                 Comment by: {comment.name}
                             </h2>
-                            <p className="text-gray-600 dark:text-green-300">
+                            <p className="text-gray-600 dark:text-black">
                                 {comment.comment}
                             </p>
                         </div>
diff --git a/frontend/src/Pages/blog manage/InduvidualBlog.jsx b/frontend/src/Pages/blog manage/InduvidualBlog.jsx
index 7e47b89f..82eafdbb 100644
--- a/frontend/src/Pages/blog manage/InduvidualBlog.jsx	
+++ b/frontend/src/Pages/blog manage/InduvidualBlog.jsx	
@@ -11,7 +11,8 @@ export default function IndividualBlog() {
     const [blog, setBlog] = useState({})
     const [comments, setComments] = useState([])
     const [newComment, setNewComment] = useState({ name: '', comment: '' })
-
+    // Variables to handle speech synthesis state
+    let speechUtterance = null
     useEffect(() => {
         if (!id) return
 
@@ -60,26 +61,73 @@ export default function IndividualBlog() {
 
         // Ensure the logo is loaded before generating the PDF
         logoImg.onload = () => {
-            doc.addImage(logoImg, 'PNG', 10, 10, 40, 5) // Add logo
+            // Center the logo
+            const pageWidth = doc.internal.pageSize.getWidth()
+            const logoWidth = 40
+            const logoX = (pageWidth - logoWidth) / 2
+            doc.addImage(logoImg, 'PNG', logoX, 10, logoWidth, 10) // Centered logo
+
+            // Add company details below the logo, centered
+            doc.setFontSize(12)
+            doc.text(
+                'FarmCart Lanka (PVT.) LTD',
+                pageWidth / 2,
+                35,
+                null,
+                null,
+                'center'
+            )
+            doc.text(
+                'No.78, Malabe, Colombo',
+                pageWidth / 2,
+                40,
+                null,
+                null,
+                'center'
+            )
+            doc.text(
+                'Phone: (+94) 011 34 56 837',
+                pageWidth / 2,
+                45,
+                null,
+                null,
+                'center'
+            )
+            doc.text(
+                'Website: www.farmcart.com',
+                pageWidth / 2,
+                50,
+                null,
+                null,
+                'center'
+            )
+
+            // Add blog title below the company details, centered and bold
             doc.setFontSize(22)
-            doc.text(blog.title, 10, 60) // Blog title
+            doc.setFont('helvetica', 'bold') // Make the title bold
+            doc.text(blog.title, pageWidth / 2, 70, null, null, 'center')
+
+            // Reset the font style to normal for the rest of the content
+            doc.setFont('helvetica', 'normal')
+
+            // Add blog author and date information below the title, left-aligned
             doc.setFontSize(12)
-            doc.text(`By: ${blog.author}`, 10, 70) // Author
+            doc.text(`By: ${blog.author}`, 10, 80)
             doc.text(
                 `Date: ${new Date(blog.createdAt).toLocaleDateString()}`,
                 10,
-                80
-            ) // Date
+                85
+            )
 
-            // Adding blog image if it exists
+            // Add blog content
             if (blog.newsImage) {
-                const imageUrl = `${blog.newsImage}`
+                const imageUrl = blog.newsImage
                 const blogImg = new Image()
                 blogImg.src = imageUrl
 
                 blogImg.onload = () => {
                     doc.addImage(blogImg, 'JPEG', 10, 90, 180, 100) // Blog image
-                    addContentToPDF(doc, blog.content, blog.title) // Add content
+                    addContentToPDF(doc, blog.content, blog.title) // Function to add the blog content
                 }
 
                 blogImg.onerror = () => {
@@ -99,34 +147,58 @@ export default function IndividualBlog() {
     const addContentToPDF = (doc, content, title) => {
         let yPosition = 200 // Starting position for content
         doc.setFontSize(10)
-        doc.text('Content:', 10, yPosition)
+
         yPosition += 10 // Move down after header
 
         // Split content into lines that fit within the page width
         const contentLines = doc.splitTextToSize(content, 180)
 
-        // Loop through content lines and add them to the PDF
+        // Manually justify content by adjusting spaces between words
         contentLines.forEach((line) => {
             if (yPosition > 280) {
                 doc.addPage()
                 yPosition = 10 // Reset Y position for new page
                 doc.text(title, 10, 10) // Title on new page
-                doc.text('Content:', 10, 20) // Content header on new page
+
                 yPosition = 30 // Reset position for content
             }
             doc.text(line, 10, yPosition) // Add line to PDF
             yPosition += 10 // Move down for next line
         })
 
-        doc.save(`${title}.pdf`) // Save the PDF
+        doc.save(`${title}`.pdf) // Save the PDF
     }
-
     // Function to handle document download
     const handleDownloadDocument = () => {
         const downloadUrl = `/BlogDocuments/${blog.document}` // Assuming document field holds the filename
         window.open(downloadUrl, '_blank') // Open the document URL
     }
+    // Function to generate speech from blog content
+    const speakBlogContent = () => {
+        if ('speechSynthesis' in window) {
+            if (speechSynthesis.speaking && !speechSynthesis.paused) {
+                // If already speaking, pause the speech
+                speechSynthesis.pause()
+            } else if (speechSynthesis.paused) {
+                // If speech is paused, resume it
+                speechSynthesis.resume()
+            } else {
+                // If not speaking, start the speech
+                speechUtterance = new SpeechSynthesisUtterance(blog.content)
+                speechUtterance.lang = 'en-US' // You can set the language here
+                speechSynthesis.speak(speechUtterance)
+            }
+        } else {
+            alert('Your browser does not support text-to-speech functionality.')
+        }
+    }
 
+    // Function to stop the speech
+    const stopSpeech = () => {
+        if ('speechSynthesis' in window && speechSynthesis.speaking) {
+            speechSynthesis.cancel()
+        }
+    }
     return (
         <div>
             {/* <Navbar /> */}
@@ -170,13 +242,28 @@ export default function IndividualBlog() {
 
                 <div className="mb-4 text-center">
                     <button
-                        className="px-6 py-3 font-bold text-white transition duration-300 ease-in-out transform bg-green-600 rounded-lg shadow-lg hover:bg-green-700 hover:scale-105"
+                        className="px-6 py-3 font-bold text-white transition duration-300 ease-in-out transform rounded-lg shadow-lg bg-lime-500 hover:bg-lime-600 hover:scale-105"
                         onClick={downloadPDF}
                     >
                         Download Blog as PDF
                     </button>
                 </div>
-
+                <div className="mb-4 text-center">
+                    <button
+                        onClick={speakBlogContent}
+                        className="px-6 py-3 font-bold text-white bg-blue-600 rounded-lg hover:bg-blue-700"
+                    >
+                        {speechSynthesis.speaking && !speechSynthesis.paused
+                            ? 'Pause Reading'
+                            : 'Read Blog Aloud'}
+                    </button>
+                    <button
+                        onClick={stopSpeech}
+                        className="px-6 py-3 ml-2 font-bold text-white bg-red-600 rounded-lg hover:bg-red-700"
+                    >
+                        Stop Reading
+                    </button>
+                </div>
                 {/* Comment Form */}
                 <div className="mb-8">
                     <h2 className="mb-4 text-2xl font-semibold">
@@ -202,7 +289,7 @@ export default function IndividualBlog() {
                         />
                         <button
                             type="submit"
-                            className="px-4 py-2 font-bold text-white bg-green-600 rounded-lg hover:bg-green-700"
+                            className="px-4 py-2 font-bold text-white rounded-lg bg-lime-500 hover:bg-lime-600"
                         >
                             Submit
                         </button>
diff --git a/frontend/src/Pages/blog manage/UpdateBlog.jsx b/frontend/src/Pages/blog manage/UpdateBlog.jsx
index 54a09490..6b4961bf 100644
--- a/frontend/src/Pages/blog manage/UpdateBlog.jsx	
+++ b/frontend/src/Pages/blog manage/UpdateBlog.jsx	
@@ -133,7 +133,9 @@ export default function UpdateBlogForm() {
             <h1 className="mb-6 text-3xl font-bold">Update Blog</h1>
             {error && <div className="text-red-500">{error}</div>}
             {successMessage && (
-                <div className="text-green-500">{successMessage}</div>
+
+                <div className="text-lime-500">{successMessage}</div>
+
             )}
             {errors.title && <div className="text-red-500">{errors.title}</div>}
             {errors.content && (
diff --git a/frontend/src/Pages/blog manage/UserBlog.jsx b/frontend/src/Pages/blog manage/UserBlog.jsx
index 5757521e..07c99718 100644
--- a/frontend/src/Pages/blog manage/UserBlog.jsx	
+++ b/frontend/src/Pages/blog manage/UserBlog.jsx	
@@ -79,7 +79,7 @@ export default function TourismBlog() {
             {/* Latest News Section */}
             <div className="py-1 bg-gradient-to-r from-white">
                 <div className="container px-4 mx-auto">
-                    <h2 className="mb-6 text-3xl font-bold text-center text-sky-700">
+                    <h2 className="mb-6 text-3xl font-bold text-center text-black">
                         Trending Blogs!
                     </h2>
                     <div className="relative w-full h-48 overflow-hidden rounded-lg shadow-lg">
@@ -128,8 +128,8 @@ export default function TourismBlog() {
                 </div>
             </div>
 
-            <div className="min-h-screen pt-20 mt-6 bg-gradient-to-br from-sky-100 to-sky-200 md:mt-10 md:mx-10">
-                <nav className="sticky top-0 z-10 py-6 text-white shadow-md bg-sky-500">
+            <div className="min-h-screen pt-20 mt-6 bg-gradient-to-br from-gray-100 to-white md:mt-10 md:mx-10">
+                <nav className="sticky top-0 z-10 py-6 text-white shadow-md bg-lime-600">
                     <div className="container px-4 mx-auto">
                         <div className="flex items-center justify-between ml-20">
                             <div className="relative w-full max-w-xs">
@@ -147,12 +147,12 @@ export default function TourismBlog() {
                                     }
                                 />
                                 <Search
-                                    className="absolute transform -translate-y-1/2 right-3 top-1/2 text-sky-600"
+                                    className="absolute text-black transform -translate-y-1/2 right-3 top-1/2"
                                     size={20}
                                 />
                             </div>
                             <Link to="/speechgenerator">
-                                <button className="px-4 py-2 ml-4 text-white transition duration-300 bg-green-500 rounded-full hover:bg-green-800">
+                                <button className="px-4 py-2 ml-4 text-white transition duration-300 rounded-full bg-lime-700 hover:bg-lime-900">
                                     Speech Generator
                                 </button>
                             </Link>
@@ -163,7 +163,7 @@ export default function TourismBlog() {
                 {/* Blog Section */}
                 <div className="container px-4 py-8 mx-auto">
                     {loading && (
-                        <p className="text-center text-gray-600">
+                        <p className="text-center text-black">
                             Loading data...
                         </p>
                     )}
@@ -187,10 +187,10 @@ export default function TourismBlog() {
                                         />
                                     )}
                                     <div className="p-6">
-                                        <h2 className="mb-2 text-2xl font-bold text-sky-700">
+                                        <h2 className="mb-2 text-2xl font-bold text-lime-900">
                                             {blog.title}
                                         </h2>
-                                        <div className="flex items-center mb-2 text-gray-600">
+                                        <div className="flex items-center mb-2 text-black">
                                             <span>{blog.author}</span>
                                             <span className="ml-4">
                                                 {new Date(
@@ -198,13 +198,13 @@ export default function TourismBlog() {
                                                 ).toLocaleDateString()}
                                             </span>
                                         </div>
-                                        <p className="mb-4 text-gray-700">
+                                        <p className="mb-4 text-black">
                                             {blog.excerpt ||
                                                 blog.content.substring(0, 100) +
                                                     '...'}
                                         </p>
                                         <Link to={`/blog/${blog._id}`}>
-                                            <span className="inline-block px-4 py-2 text-white transition duration-300 transform rounded-full bg-sky-500 hover:bg-sky-600 hover:translate-y-1">
+                                            <span className="inline-block px-4 py-2 text-white transition duration-300 transform rounded-full bg-lime-500 hover:bg-lime-600 hover:translate-y-1">
                                                 Read More
                                             </span>
                                         </Link>
diff --git a/frontend/src/Pages/common/speech/SpeechGenerator.jsx b/frontend/src/Pages/common/speech/SpeechGenerator.jsx
index 4c3bc351..2cbca470 100644
--- a/frontend/src/Pages/common/speech/SpeechGenerator.jsx
+++ b/frontend/src/Pages/common/speech/SpeechGenerator.jsx
@@ -46,24 +46,24 @@ const SpeechGenerator = () => {
     }
 
     return (
-        <div className="hero h-screen flex items-center justify-center bg-gradient-to-br from-green-500 to-green-800">
-            <div className="bg-white bg-opacity-95 p-10 rounded-2xl shadow-2xl max-w-lg w-full">
-                <h1 className="text-5xl font-bold text-gray-800 text-center mb-8 tracking-wide">
+        <div className="flex items-center justify-center h-screen hero bg-gradient-to-br from-white to-gray-300">
+            <div className="w-full max-w-lg p-10 bg-white shadow-2xl bg-opacity-95 rounded-2xl">
+                <h1 className="mb-8 text-5xl font-bold tracking-wide text-center text-gray-800">
                     Text to Speech{' '}
-                    <span className="text-green-600">Converter</span>
+                    <span className="text-lime-500">Converter</span>
                 </h1>
 
                 <textarea
                     ref={textareaRef}
                     placeholder="Write anything here..."
-                    className="w-full h-40 p-4 border border-gray-300 rounded-lg shadow-inner text-lg mb-6 focus:outline-none focus:ring-4 focus:ring-green-400 transition duration-300"
+                    className="w-full h-40 p-4 mb-6 text-lg transition duration-300 border border-gray-300 rounded-lg shadow-inner focus:outline-none focus:ring-4 focus:ring-green-400"
                 ></textarea>
 
-                <div className="flex justify-between items-center mb-6">
+                <div className="flex items-center justify-between mb-6">
                     <select
                         value={selectedVoiceIndex}
                         onChange={handleVoiceChange}
-                        className="border border-gray-300 rounded-lg p-2 bg-white shadow-md focus:outline-none focus:ring-4 focus:ring-green-400 transition duration-300"
+                        className="p-2 transition duration-300 bg-white border border-gray-300 rounded-lg shadow-md focus:outline-none focus:ring-4 focus:ring-green-400"
                     >
                         {voices.map((voice, index) => (
                             <option key={index} value={index}>
@@ -73,7 +73,7 @@ const SpeechGenerator = () => {
                     </select>
                     <button
                         onClick={handleListen}
-                        className="bg-green-500 text-white py-2 px-6 rounded-lg shadow-lg hover:bg-green-600 transition duration-300 transform hover:scale-105"
+                        className="px-6 py-2 text-white transition duration-300 transform rounded-lg shadow-lg bg-lime-500 hover:bg-lime-600 hover:scale-105"
                     >
                         Listen
                     </button>
diff --git a/frontend/src/Pages/dashboard/Admin.jsx b/frontend/src/Pages/dashboard/Admin.jsx
index ee9f957f..23bf4f1d 100644
--- a/frontend/src/Pages/dashboard/Admin.jsx
+++ b/frontend/src/Pages/dashboard/Admin.jsx
@@ -21,9 +21,9 @@ const Admin = () => {
     }
 
     return (
-        <div className="flex min-h-screen bg-green-100">
-            <aside className="flex flex-col w-64 text-white bg-green-800">
-                <div className="p-4 text-xl font-bold bg-green-900">
+        <div className="flex min-h-screen bg-white">
+            <aside className="flex flex-col w-64 text-black bg-gray-200">
+                <div className="p-4 text-xl font-bold bg-gray-400">
                     Admin Dashboard
                 </div>
                 <nav className="flex-1 px-2 py-4">
@@ -32,7 +32,7 @@ const Admin = () => {
                             <button
                                 key={tab}
                                 onClick={() => handleTabChange(tab)}
-                                className={`block w-full text-left px-4 py-2 rounded ${activeTab === tab ? 'bg-green-700' : ''}`}
+                                className={`block w-full text-left px-4 py-2 rounded ${activeTab === tab ? 'bg-lime-500' : ''}`}
                             >
                                 {tab.charAt(0).toUpperCase() + tab.slice(1)}
                             </button>
diff --git a/frontend/src/Pages/dashboard/ishanka dahsbaord/UpdateBlogDashbaord.jsx b/frontend/src/Pages/dashboard/ishanka dahsbaord/UpdateBlogDashbaord.jsx
index 2ad1dfb6..91faac79 100644
--- a/frontend/src/Pages/dashboard/ishanka dahsbaord/UpdateBlogDashbaord.jsx	
+++ b/frontend/src/Pages/dashboard/ishanka dahsbaord/UpdateBlogDashbaord.jsx	
@@ -5,8 +5,8 @@ import back from '../../../assets/Back.png'
 const AdminUpdateTour = () => {
     return (
         <div className="flex min-h-screen">
-            <aside className="flex flex-col w-64 text-white bg-green-800">
-                <div className="p-4 text-xl font-bold bg-green-900">
+            <aside className="flex flex-col w-64 text-black bg-gray-200">
+                <div className="p-4 text-xl font-bold bg-white">
                     Admin Dashboard
                 </div>
 
@@ -27,7 +27,7 @@ const AdminUpdateTour = () => {
                 </header>
 
                 <Link to="/dashboard">
-                    <button className="flex items-center px-4 py-2 font-bold text-black rounded hover:bg-blue-600">
+                    <button className="flex items-center px-4 py-2 font-bold text-black rounded hover:bg-lime-500">
                         <img
                             src={back}
                             alt="Back Icon"