add dark theme

ArhanAnsari · Aug 19, 2024 · 738ea0e · 738ea0e
1 parent 451f2d3
commit 738ea0e
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 27 deletions.
diff --git a/app/dashboard/files/[id]/page.tsx b/app/dashboard/files/[id]/page.tsx
@@ -31,7 +31,7 @@ async function ChatToFilePage({
       </div>
 
       {/* Left */}
-      <div className="col-span-5 lg:col-span-3 bg-gray-100 border-r-2 lg:border-indigo-600 lg:-order-1 overflow-auto">
+      <div className="col-span-5 lg:col-span-3 bg-gray-100 border-r-2 lg:border-indigo-600 lg:-order-1 overflow-auto dark:bg-gray-900 dark:lg:border-indigo-100">
         {/* PDFView */}
         <PdfView url={url} />
       </div>

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -4,12 +4,14 @@ export const dynamic = "force-dynamic";
 
 function Dashboard() {
   return (
-    <div className="h-full max-w-7xl mx-auto">
-      <h1 className="text-3xl p-5 bg-gray-100 font-extralight text-indigo-600">
-        My Documents
-      </h1>
+    <div className="bg-gray-100 dark:bg-gray-900">
+      <div className="h-full max-w-7xl mx-auto ">
+        <h1 className="text-3xl p-5 font-extralight text-indigo-600 dark:text-indigo-100">
+          My Documents
+        </h1>
 
-      <Documents />
+        <Documents />
+      </div>
     </div>
   );
 }

diff --git a/app/dashboard/upgrade/page.tsx b/app/dashboard/upgrade/page.tsx
@@ -50,15 +50,15 @@ function PricingPage() {
     <div>
       <div className="py-24 sm:py-32">
         <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-base font-semibold leading-7 text-indigo-600">
+          <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-100">
             Pricing
           </h2>
-          <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+          <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl dark:text-gray-400">
             Supercharge your Document Companion
           </p>
         </div>
 
-        <p className="mx-auto mt-6 max-w-2xl px-10 text-center text-lg leading-8 text-gray-600">
+        <p className="mx-auto mt-6 max-w-2xl px-10 text-center text-lg leading-8 text-gray-600 dark:text-gray-100">
           Choose an affordable plan thats packed with the best features for
           interacting with your PDFs, enhancing productivity, and streamlining
           your workflow.
@@ -67,50 +67,50 @@ function PricingPage() {
         <div className="max-w-md mx-auto mt-10 grid grid-cols-1 md:grid-cols-2 md:max-w-2xl gap-8 lg:max-w-4xl">
           {/* FREE */}
           <div className="ring-1 ring-gray-200 p-8 h-fit pb-12 rounded-3xl">
-            <h3 className="text-lg font-semibold leading-8 text-gray-900">
+            <h3 className="text-lg font-semibold leading-8 text-gray-900 dark:text-gray-400">
               Starter Plan
             </h3>
-            <p className="mt-4 text-sm leading-6 text-gray-600">
+            <p className="mt-4 text-sm leading-6 text-gray-600 dark:text-gray-100">
               Explore Core Features at No Cost
             </p>
             <p className="mt-6 flex items-baseline gap-x-1">
-              <span className="text-4xl font-bold tracking-tight text-gray-900">
+              <span className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-400">
                 Free
               </span>
             </p>
 
             <ul
               role="list"
-              className="mt-8 space-y-3 text-sm leading-6 text-gray-600"
+              className="mt-8 space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-100"
             >
               <li className="flex gap-x-3">
-                <CheckIcon className="h-6 w-5 flex-none text-indigo-600" />2
-                Documents
+                <CheckIcon className="h-6 w-5 flex-none text-indigo-600 dark:text-indigo-400" />
+                2 Documents
               </li>
               <li className="flex gap-x-3">
-                <CheckIcon className="h-6 w-5 flex-none text-indigo-600" />
+                <CheckIcon className="h-6 w-5 flex-none text-indigo-600 dark:text-indigo-400" />
                 Up to 3 messages per document
               </li>
               <li className="flex gap-x-3">
-                <CheckIcon className="h-6 w-5 flex-none text-indigo-600" />
+                <CheckIcon className="h-6 w-5 flex-none text-indigo-600 dark:text-indigo-400" />
                 Try out the AI Chat Functionality
               </li>
             </ul>
           </div>
 
           {/* PRO */}
           <div className="ring-2 ring-indigo-600 rounded-3xl p-8">
-            <h3 className="text-lg font-semibold leading-8 text-indigo-600">
+            <h3 className="text-lg font-semibold leading-8 text-indigo-600 dark:text-indigo-400">
               Pro Plan
             </h3>
-            <p className="mt-4 text-sm leading-6 text-gray-600">
+            <p className="mt-4 text-sm leading-6 text-gray-600 dark:text-gray-100">
               Maximize Productivity with PRO Features
             </p>
             <p className="mt-6 flex items-baseline gap-x-1">
-              <span className="text-4xl font-bold tracking-tight text-gray-900">
+              <span className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-400">
                 ₹499
               </span>
-              <span className="text-sm font-semibold leading-6 text-gray-600">
+              <span className="text-sm font-semibold leading-6 text-gray-600 dark:text-gray-100">
                 / month
               </span>
             </p>
@@ -129,7 +129,7 @@ function PricingPage() {
 
             <ul
               role="list"
-              className="mt-8 space-y-3 text-sm leading-6 text-gray-600"
+              className="mt-8 space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-100"
             >
               <li className="flex gap-x-3">
                 <CheckIcon className="h-6 w-5 flex-none text-indigo-600" />

diff --git a/components/Document.tsx b/components/Document.tsx
@@ -24,7 +24,7 @@ function Document({
   const { hasActiveMembership } = useSubscription();
 
   return (
-    <div className="flex flex-col w-64 h-80 rounded-xl bg-white drop-shadow-md justify-between p-4 transition-all transform hover:scale-105 hover:bg-indigo-600 hover:text-white cursor-pointer group">
+    <div className="flex flex-col w-64 h-80 rounded-xl bg-white drop-shadow-md justify-between p-4 transition-all transform hover:scale-105 hover:bg-indigo-600 hover:text-white cursor-pointer group dark:bg-gray-800">
       <div
         className="flex-1"
         onClick={() => {

diff --git a/components/Documents.tsx b/components/Documents.tsx
@@ -19,7 +19,7 @@ async function Documents() {
     .get();
 
   return (
-    <div className="flex flex-wrap p-5 bg-gray-100 justify-center lg:justify-start rounded-sm gap-5 max-w-7xl mx-auto">
+    <div className="flex flex-wrap p-5 bg-gray-100 justify-center lg:justify-start rounded-sm gap-5 max-w-7xl mx-auto dark:bg-gray-900">
       {/* Map through the documents */}
       {documentsSnapshot.docs.map((doc) => {
         const { name, downloadUrl, size } = doc.data();

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -7,7 +7,7 @@ import ModeToggle from "./ModeToggle";
 
 function Header() {
   return (
-    <div className="flex justify-between bg-white shadow-sm p-5 border-b">
+    <div className="flex justify-between bg-white shadow-sm p-5 border-b dark:bg-gray-800">
       <Link href="/dashboard" className="text-2xl">
         Chat to <span className="text-indigo-600">PDF</span>
       </Link>

diff --git a/components/PdfView.tsx b/components/PdfView.tsx
@@ -42,7 +42,7 @@ function PdfView({ url }: { url: string }) {
 
   return (
     <div className="flex flex-col justify-center items-center">
-      <div className="sticky top-0 z-50 bg-gray-100 p-2 rounded-b-lg">
+      <div className="sticky top-0 z-50 bg-gray-100 p-2 rounded-b-lg dark:bg-gray-900">
         <div className="max-w-6xl px-2 grid grid-cols-6 gap-2">
           <Button
             variant="outline"

diff --git a/components/PlaceholderDocument.tsx b/components/PlaceholderDocument.tsx
@@ -21,7 +21,7 @@ function PlaceholderDocument() {
   return (
     <Button
       onClick={handleClick}
-      className="flex flex-col items-center w-64 h-80 rounded-xl bg-gray-200 drop-shadow-md text-gray-400"
+      className="flex flex-col items-center w-64 h-80 rounded-xl bg-gray-200 drop-shadow-md text-gray-400 dark:bg-gray-900"
     >
       {isOverFileLimit ? (
         <FrownIcon className="h-16 w-16" />