Dark mode added Now user can switch between dark and light mode

ayush-raj13 · Oct 17, 2023 · e9b51e1 · e9b51e1
1 parent 21dc0ff
commit e9b51e1
Show file tree

Hide file tree

Showing 12 changed files with 112 additions and 79 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -5,6 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <style type="text/css">
     #landscape{
              position: fixed;
@@ -50,9 +51,9 @@
 
         </script>
 </head>
-<body onload="doOnOrientationChange();">
+<body className="dark" onload="doOnOrientationChange();">
   <div id="landscape"><div>"Rotate Device to Landscape"</div></div>
-  <div id="root"></div>
+  <div id="root" className="dark"></div>
   <div class="modal-container"></div>
 </body>
 </html>
diff --git a/client/src/App.js b/client/src/App.js
@@ -5,27 +5,29 @@ import HomePage from './pages/homePage';
 import TextSummarizerPage from './pages/textSummarizerPage';
 import FlipkartScraperPage from './pages/flipkartScraperPage';
 import VideoDownloaderPage from './pages/videoDownloaderPage';
+import './index.css'
 
 function App() {
   return (
-    <div className="container mx-auto mt-4">
-      {/* Sidebar */}
-      <Sidebar />
-
-      {/* Content */}
-      <div className="mx-2"> {/* Adjust the margin-left to match your Sidebar width */}
-        <Route path="/">
-          <HomePage />
-        </Route>
-        <Route path="/text-summarizer">
-          <TextSummarizerPage />
-        </Route>
-        <Route path="/flipkart-scraper">
-          <FlipkartScraperPage />
-        </Route>
-        <Route path="/video-downloader">
-          <VideoDownloaderPage />
-        </Route>
+    <div className='dark:bg-gray-800 pt-4'>
+      <div className="container mx-auto mt-4">
+        {/* Sidebar */}
+        <Sidebar />
+        {/* Content */}
+        <div className="mx-2"> {/* Adjust the margin-left to match your Sidebar width */}
+          <Route path="/">
+            <HomePage />
+          </Route>
+          <Route path="/text-summarizer">
+            <TextSummarizerPage />
+          </Route>
+          <Route path="/flipkart-scraper">
+            <FlipkartScraperPage />
+          </Route>
+          <Route path="/video-downloader">
+            <VideoDownloaderPage />
+          </Route>
+        </div>
       </div>
     </div>
   );

diff --git a/client/src/components/Dropdown.js b/client/src/components/Dropdown.js
@@ -48,13 +48,13 @@ function Dropdown({ options, value, onChange }) {
   return (
     <div ref={divEl} className="w-48 relative">
       <Panel
-        className="flex justify-between items-center cursor-pointer"
+        className="flex justify-between items-center cursor-pointer text-gray-800 dark:bg-gray-800 dark:text-gray-200"
         onClick={handleClick}
       >
         {value?.label || 'Select...'}
         <GoChevronDown className="text-lg" />
       </Panel>
-      {isOpen && <Panel className="absolute top-full z-10">{renderedOptions}</Panel>}
+      {isOpen && <Panel className="absolute top-full z-10 text-gray-800 dark:bg-gray-800 dark:text-gray-200">{renderedOptions}</Panel>}
     </div>
   );
 }

diff --git a/client/src/components/RadioButtonGroup.js b/client/src/components/RadioButtonGroup.js
@@ -4,13 +4,13 @@ import Panel from './Panel';
 function RadioButtonGroup(props) {
   return (
     <div className='flex space-x-4'>
-      <Panel className='w-32'>
+      <Panel className='w-32 text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
         <label>
           <input type="radio" value="URL" checked={props.selectedOption === 'URL'} onChange={props.handleChange} />
           &emsp; URL
         </label>
       </Panel>
-      <Panel className='w-32'>
+      <Panel className='w-32 text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
         <label>
           <input type="radio" value="text" checked={props.selectedOption === 'text'} onChange={props.handleChange} />
           &emsp; Text

diff --git a/client/src/components/Sidebar.js b/client/src/components/Sidebar.js
@@ -1,11 +1,31 @@
 import Link from './Link';
+import { useState, useEffect } from 'react';
+
 
 function Navbar() {
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+      //setTheme("dark");
+    }
+    else {
+      document.documentElement.classList.remove("dark");
+      //setTheme("light");
+    }
+  }, [theme])
+  console.log(theme);
+
+  const handleThemeSwitch = () => {
+    setTheme(theme === "dark" ? "light" : "dark")
+  };
+
   const links = [
     { label: 'Home', path: '/' },
     { label: 'Summarizer', path: '/text-summarizer' },
-    { label: 'Flipkart Scraper', path: '/flipkart-scraper'},
-    { label: 'Video Downloader', path: '/video-downloader'},
+    { label: 'Flipkart Scraper', path: '/flipkart-scraper' },
+    { label: 'Video Downloader', path: '/video-downloader' },
   ];
 
   const renderedLinks = links.map((link) => {
@@ -22,13 +42,18 @@ function Navbar() {
   });
 
   return (
-    <nav className="bg-white shadow-lg p-4">
+    <nav className="bg-white shadow-lg p-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
       <div className="container mx-auto flex justify-between items-center">
         <div className="text-[30px] font-semibold ">
-        <span class="magic"><span class="magic-text">WebScrapideo</span></span>
+          <span class="magic"><span class="magic-text">WebScrapideo</span></span>
         </div>
         <div className="flex space-x-4">
           {renderedLinks}
+          <div>
+            <button style={{}} className='p-2   rounded-full text-gray-800 dark-bg-green-500 dark:text-gray-200' onClick={handleThemeSwitch}>
+              <i class="fa-solid fa-circle-half-stroke text-4xl dark:text-gray-200"></i>
+            </button>
+          </div>
         </div>
       </div>
     </nav>

diff --git a/client/src/index.css b/client/src/index.css
@@ -78,3 +78,7 @@
     -webkit-text-fill-color: transparent;
     white-space: nowrap;
   }
+
+  .main {
+    @apply dark:bg-black/75
+  }
diff --git a/client/src/index.js b/client/src/index.js
@@ -7,6 +7,6 @@ import { NavigationProvider } from './context/navigation';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
     <NavigationProvider>
-        <App />
+        <App className=" text-gray-800 dark:bg-gray-800 dark:text-gray-200" />
     </NavigationProvider>
 );
diff --git a/client/src/pages/flipkartScraperPage.js b/client/src/pages/flipkartScraperPage.js
@@ -315,29 +315,29 @@ function FlipkartScraperPage() {
   buttonText = isError ? <>Error</> : buttonText;
 
   return (
-    <div className="flex flex-col space-y-8 justify-center items-center min-h-screen">
+    <div className="flex flex-col space-y-8 justify-center items-center min-h-screen dark:bg-gray-800">
       <Hero title="Flipkart Scraper" desc="An advanced Flipkart web scraper that combines automated data extraction capabilities with user-defined data selection, allowing users to effortlessly retrieve specific information of their choice from the Flipkart website with precision and efficiency."/>
 
-      <Panel className='flex flex-col space-y-8'>
-      <div className='flex flex-col space-y-4'>
+      <Panel className='flex flex-col space-y-8  text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
+      <div className='flex flex-col space-y-4  text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
         <label>Enter URL</label>
-        <input value={url} onChange={handleUrlChange} type="text" className="py-1 my-3 bg-gray-50 border border-gray-300"/>
+        <input value={url} onChange={handleUrlChange} type="text" className="py-1 my-3 bg-gray-50 border border-gray-300  dark:bg-gray-600"/>
         <div className="flex justify-center">
-          <Button success rounded outline onClick={handleUrlSubmit} disabled={loading}>
+          <Button className="text-gray-800 dark:bg-gray-800 dark:text-gray-200" success rounded outline onClick={handleUrlSubmit} disabled={loading}>
           {buttonText}
           </Button>
         </div>
       </div>
-      <div className='flex flex-col space-y-4'>
+      <div className='flex flex-col space-y-4 dark:text-gray-200'>
         <label>Search for products, brands and more</label>
-        <input value={query} onChange={handleQueryChange} type="text" className="py-1 my-3 bg-gray-50 border border-gray-300"/>
-        <div className="flex justify-center">
-          <Button success rounded outline onClick={handleQuerySubmit} disabled={loading}>
+        <input value={query} onChange={handleQueryChange} type="text" className="py-1 my-3 bg-gray-50 border border-gray-300 dark:bg-gray-600"/>
+        <div className="flex justify-center  dark:bg-gray-800">
+          <Button className="text-gray-800 dark:bg-gray-800 dark:text-gray-200" success rounded outline onClick={handleQuerySubmit} disabled={loading}>
           {buttonText}
           </Button>
         </div>
-      </div>
-      <Panel className='flex flex-col space-y-4'>
+      </div>      
+      <Panel className='flex text-gray-800 flex-col space-y-4 dark:bg-gray-800 dark:text-gray-200'>
         <label>Example URLs</label>
         <ul style={{listStyleType:"disc"}} className="flex flex-col space-y-2">
           <li className="flex flex-row space-x-4 items-start justify-start"><div>1. </div><Button success className="text-white active:bg-green-700" onClick={() =>  navigator.clipboard.writeText('https://www.flipkart.com/mobiles/pr?sid=tyy%2C4io&p%5B%5D=facets.price_range.from%3D10000&ctx=eyJjYXJkQ29udGV4dCI6eyJhdHRyaWJ1dGVzIjp7InRpdGxlIjp7Im11bHRpVmFsdWVkQXR0cmlidXRlIjp7ImtleSI6InRpdGxlIiwiaW5mZXJlbmNlVHlwZSI6IlRJVExFIiwidmFsdWVzIjpbIlNob3AgTm93Il0sInZhbHVlVHlwZSI6Ik1VTFRJX1ZBTFVFRCJ9fX19fQ%3D%3D&otracker=clp_metro_expandable_3_7.metroExpandable.METRO_EXPANDABLE_Shop%2BNow_mobile-phones-store_O1WYX08RHODP_wp4&fm=neo%2Fmerchandising&iid=M_45097844-8fd6-4d1b-b414-faca5617af95_7.O1WYX08RHODP&ppt=hp&ppn=homepage&ssid=di5cfb5mls0000001688463812500&p%5B%5D=facets.price_range.to%3D20000&p%5B%5D=facets.brand%255B%255D%3DPOCO&page=')}>Copy</Button></li>
@@ -346,7 +346,7 @@ function FlipkartScraperPage() {
         </ul>
         <div className="font-bold">Important: Append "&page=" at the end of URL</div>
       </Panel>
-      <div className='flex flex-col space-y-4'>
+      <div className=' flex flex-col space-y-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
         <label>Data selection</label>
         <Checkbox label="Product's Name" checked={isProductNameChecked} onChange={handleProductNameSelection} />
         <Checkbox label="Current Price" checked={isCurrentPriceChecked} onChange={handleCurrentPriceSelection} />
@@ -362,7 +362,7 @@ function FlipkartScraperPage() {
         <Checkbox label="Image URL" checked={isImageUrlChecked} onChange={handleImageUrlSelection} />
         <Checkbox label="Product URL" checked={isProductUrlChecked} onChange={handleProductUrlSelection} />
       </div>
-      <div className='flex flex-col space-y-4'>
+      <div className='text-gray-800 flex flex-col space-y-4 dark:bg-gray-800 dark:text-gray-200'>
         <label>Download Data</label>
         <div className="flex justify-start">
         <CsvDownloadButton 
@@ -384,7 +384,7 @@ function FlipkartScraperPage() {
         > Download in CSV</CsvDownloadButton>
         </div>
       </div>
-      <div className='flex flex-col space-y-4'>
+      <div className='text-gray-800 flex flex-col space-y-4 dark:bg-gray-800 dark:text-gray-200'>
         <label>Preview Data</label>
         <SortableTable data={data} config={config} />
       </div>

diff --git a/client/src/pages/homePage.js b/client/src/pages/homePage.js
@@ -10,20 +10,20 @@ const HomePage = () => {
   };
 
   return (
-    <div className="bg-gray-100 min-h-screen">
+    <div className="bg-gray-100 min-h-screen dark:bg-gray-800">
       <Hero title="Data extraction from HTML made easy" desc="" />
 
       <section className="py-20">
         <div className="container mx-auto px-4">
-          <div className="flex flex-wrap items-center justify-center -mx-4">
+          <div className="flex flex-wrap items-center justify-center -mx-4 dark:bg-gray-800">
             <motion.div
               className="w-full md:w-1/2 lg:w-1/3 px-4 mb-8"
               initial={{ opacity: 0, y: 50 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, ease: 'easeOut' }}
               whileHover={{ scale: 1.05, boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' }}
             >
-              <div className="bg-white rounded-lg shadow-lg p-6">
+              <div className="bg-white rounded-lg shadow-lg p-6 dark:bg-gray-700">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-12 w-12 text-indigo-500 mx-auto mb-4"
@@ -36,14 +36,14 @@ const HomePage = () => {
                     clipRule="evenodd"
                   />
                 </svg>
-                <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
+                <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-100">
                   Text Summarizer
                 </h2>
 
-                <p className="text-gray-600">
+                <p className="text-gray-600 dark:text-gray-300">
                   Summarize text and HTML pages with ease using our Text Summarizer feature. It leverages the power of the Sumy library, which supports various summarization methods including:
                 </p>
-                <ul className="list-disc pl-6 mt-4 text-gray-600">
+                <ul className="list-disc pl-6 mt-4 text-gray-600 dark:text-gray-300">
                   <li>LSA (Latent Semantic Analysis)</li>
                   <li>TextRank</li>
                   <li>LexRank</li>
@@ -52,7 +52,7 @@ const HomePage = () => {
                   <li>KL-Sum</li>
                   <li>Reduction</li>
                 </ul>
-                <p className="text-gray-600 mt-4">
+                <p className="text-gray-600 mt-4 dark:text-gray-300">
                   Each method offers unique approaches to extract important information and create concise summaries. With WebScrapideo, you can access these summarization methods in one place, making text summarization a breeze.
                 </p>
               </div>
@@ -65,7 +65,7 @@ const HomePage = () => {
               transition={{ duration: 0.6, ease: 'easeOut' }}
               whileHover={{ scale: 1.05, boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' }}
             >
-              <div className="bg-white rounded-lg shadow-lg p-6">
+              <div className="bg-white rounded-lg shadow-lg p-6 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-12 w-12 text-indigo-500 mx-auto mb-4"
@@ -78,21 +78,21 @@ const HomePage = () => {
                     clipRule="evenodd"
                   />
                 </svg>
-                <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
+                <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">
                   Flipkart Web Scraping
                 </h2>
-                <p className="text-gray-600">
+                <p className="text-gray-600 dark:text-gray-300">
                   Extract data from Flipkart effortlessly with our Flipkart Web Scraping feature. Powered by the BeautifulSoup library, it allows you to select the specific data you want to scrape and preview the result before downloading it in CSV format. Use cases for the scraped data from Flipkart include:
                 </p>
-                <ul className="list-disc pl-6 mt-4 text-gray-600">
+                <ul className="list-disc pl-6 mt-4 text-gray-600 text-gray-800 dark:text-gray-300">
                   <li>Market research and analysis</li>
                   <li>Competitor price tracking</li>
                   <li>Product comparison and reviews analysis</li>
                   <li>Inventory management</li>
                   <li>Data-driven decision making</li>
                   <li>Brand Monitoring</li>
                 </ul>
-                <p className="text-gray-600 mt-4">
+                <p className="text-gray-600 mt-4 dark:text-gray-300">
                   With WebScrapideo, you can easily scrape and leverage data from Flipkart for various business and analytical purposes, empowering you to make informed decisions.
                 </p>
               </div>
@@ -105,7 +105,7 @@ const HomePage = () => {
               transition={{ duration: 0.6, ease: 'easeOut' }}
               whileHover={{ scale: 1.05, boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' }}
             >
-              <div className="bg-white rounded-lg shadow-lg p-6">
+              <div className="bg-white rounded-lg shadow-lg p-6 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-12 w-12 text-indigo-500 mx-auto mb-4"
@@ -118,14 +118,14 @@ const HomePage = () => {
                     clipRule="evenodd"
                   />
                 </svg>
-                <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
+                <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">
                   Online Video Downloader
                 </h2>
-                <p className="text-gray-600">
+                <p className="text-gray-600 dark:text-gray-200">
                   Download online videos hassle-free with our Online Video Downloader feature. Utilizing the yt-dlp library, you can retrieve download links for videos from various websites, including:
                 </p>
                 {!showAllWebsites ? (
-                  <ul className="list-disc pl-6 mt-4 text-gray-600">
+                  <ul className="list-disc pl-6 mt-4 text-gray-600 dark:text-gray-300">
                     <li>YouTube</li>
                     <li>Vimeo</li>
                     <li>Twitter</li>
@@ -136,7 +136,7 @@ const HomePage = () => {
                   </ul>
                 ) : (
                   <>
-                    <ul className="list-disc pl-6 mt-4 text-gray-600">
+                    <ul className="list-disc pl-6 mt-4 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                       <li>FiveTV</li>
                       <li>PopcornTV</li>
                       <li>PornCom</li>
@@ -148,7 +148,7 @@ const HomePage = () => {
                       <li>YourUpload</li>
                       <li>Zoom</li>
                     </ul>
-                    <p className="text-gray-600 mt-4">
+                    <p className="text-gray-600 mt-4  dark:bg-gray-700 dark:text-gray-300">
                       Note: This is not an exhaustive list. WebScrapideo supports many more websites for video downloading.
                     </p>
                   </>
@@ -159,7 +159,7 @@ const HomePage = () => {
                 >
                   {showAllWebsites ? 'Read Less' : 'Read More'}
                 </button>
-                <p className="text-gray-600 mt-4">
+                <p className="text-gray-600 mt-4 dark:bg-gray-700 dark:text-gray-300">
                   WebScrapideo provides a unique service by offering an extensive range of supported websites for video downloading, setting it apart from other platforms in the market. Enjoy the freedom to download videos hassle-free.
                 </p>
               </div>