Merge pull request #166 from gruz0/ui/add-dark-theme

Add dark theme support
gruz0 · Nov 19, 2024 · 89ed25e · 89ed25e
2 parents 1ba96e9 + b5d0ca8
commit 89ed25e
Show file tree

Hide file tree

Showing 43 changed files with 137 additions and 138 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "ioredis": "^5.4.1",
     "next": "14.2.13",
     "next-plausible": "^3.12.4",
+    "next-themes": "^0.4.3",
     "openai": "^4.65.0",
     "react": "^18",
     "react-dom": "^18"

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -6,7 +6,7 @@ import Photo from './photo.jpeg'
 export default async function AboutPage() {
   return (
     <div className="p-4 md:p-6 lg:p-8">
-      <h1 className="mb-6 mt-2 text-center text-3xl font-bold text-blue-600 md:mb-8 md:mt-4 md:text-4xl">
+      <h1 className="mb-6 mt-2 text-center text-3xl font-bold text-blue-600 md:mb-8 md:mt-4 md:text-4xl dark:text-gray-100">
         About CheckMVP
       </h1>
 
@@ -42,7 +42,7 @@ export default async function AboutPage() {
       </div>
 
       <div className="mt-8 text-justify text-lg md:mt-10 lg:mt-14">
-        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl">
+        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl dark:text-gray-100">
           Just Talk to Your Customers!
         </h2>
 
@@ -64,7 +64,7 @@ export default async function AboutPage() {
       </div>
 
       <div className="mt-8 text-justify text-lg md:mt-10 lg:mt-14">
-        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl">
+        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl dark:text-gray-100">
           What We Bring to The Table?
         </h2>
 

diff --git a/src/app/concepts/[id]/NotWellDefinedProblem.tsx b/src/app/concepts/[id]/NotWellDefinedProblem.tsx
@@ -46,7 +46,7 @@ const NotWellDefinedProblem = ({ problem, evaluation }: Props) => (
         {evaluation.suggestions.map((item, index) => (
           <div
             key={index}
-            className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg"
+            className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
           >
             {item}
           </div>

diff --git a/src/app/concepts/[id]/ProblemRequiresChanges.tsx b/src/app/concepts/[id]/ProblemRequiresChanges.tsx
@@ -117,7 +117,7 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
           {evaluation.suggestions.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
             >
               <p className="first-letter:float-left first-letter:pr-3 first-letter:text-5xl first-letter:font-bold">
                 {item}
@@ -133,7 +133,7 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
             {evaluation.recommendations.map((item, index) => (
               <div
                 key={index}
-                className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:p-6"
+                className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:p-6 dark:bg-gray-900"
               >
                 <p className="grow md:text-lg">{item}</p>
 

diff --git a/src/app/concepts/[id]/ReportPage.tsx b/src/app/concepts/[id]/ReportPage.tsx
@@ -16,7 +16,7 @@ interface Props {
   concept: Concept
 }
 
-const reloadInterval = 5000
+const reloadInterval = 500000
 
 const ReportPage = ({ concept }: Props) => {
   const router = useRouter()

diff --git a/src/app/concepts/[id]/WellDefinedProblem.tsx b/src/app/concepts/[id]/WellDefinedProblem.tsx
@@ -87,7 +87,7 @@ const WellDefinedProblem = ({ conceptId, evaluation }: Props) => {
           {evaluation.painPoints.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900"
             >
               <p className="first-letter:float-left first-letter:pr-3 first-letter:text-5xl first-letter:font-bold">
                 {item}
@@ -102,7 +102,7 @@ const WellDefinedProblem = ({ conceptId, evaluation }: Props) => {
           {evaluation.targetAudience.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 md:p-6 md:pb-0"
+              className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 md:p-6 md:pb-0 dark:bg-gray-900"
             >
               <p className="mb-4 text-lg font-bold md:text-xl">
                 {item.segment}

diff --git a/src/app/ideas/[id]/IdeaAnalysisReport.tsx b/src/app/ideas/[id]/IdeaAnalysisReport.tsx
@@ -230,13 +230,13 @@ export const IdeaAnalysisReport = ({ data }: Props) => {
   return (
     <div className="p-4 md:p-6 lg:p-8">
       <div className="flex flex-col md:flex-row">
-        <aside className="sticky top-4 hidden self-start rounded-lg bg-gray-100 p-2 shadow-lg md:block md:w-1/4">
+        <aside className="sticky top-4 hidden self-start rounded-lg bg-gray-100 p-2 shadow-lg md:block md:w-1/4 dark:bg-gray-900">
           <NavBar />
         </aside>
 
         <div className="flex-1 md:pl-8">
           <div className="mb-2 flex items-center justify-between">
-            <h1 className="text-2xl font-bold text-gray-700 md:text-3xl lg:text-4xl">
+            <h1 className="text-2xl font-bold text-gray-700 md:text-3xl lg:text-4xl dark:text-gray-200">
               Your Idea Report
             </h1>
 
@@ -260,7 +260,7 @@ export const IdeaAnalysisReport = ({ data }: Props) => {
 
           {showFeedbackForm && (
             <div className="fixed inset-0 flex items-center justify-center bg-gray-800/50">
-              <div className="max-w-2xl rounded bg-white p-4 shadow-md md:p-8">
+              <div className="max-w-2xl rounded bg-white p-4 shadow-md md:p-8 dark:bg-gray-900">
                 <FeedbackForm
                   onSubmit={handleFeedbackSubmit}
                   onClose={() => setShowFeedbackForm(false)}
@@ -337,7 +337,7 @@ export const IdeaAnalysisReport = ({ data }: Props) => {
           <HorizontalLine />
 
           <div className="my-4 flex items-center justify-between">
-            <p className="text-xl font-bold text-gray-700 md:text-2xl">
+            <p className="text-xl font-bold text-gray-700 md:text-2xl dark:text-gray-300">
               Your PDF Report:
             </p>
 

diff --git a/src/app/ideas/[id]/components/NavBar.tsx b/src/app/ideas/[id]/components/NavBar.tsx
@@ -1,119 +1,86 @@
 import Link from 'next/link'
 import React from 'react'
 
+const className =
+  'block rounded px-4 py-2 text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-200'
+
 export const NavBar = () => (
   <nav className="space-y-1">
-    <Link
-      href="#context"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#context" className={className}>
       Context
     </Link>
-    <Link
-      href="#market_analysis"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#market_analysis" className={className}>
       Market Analysis
     </Link>
-    <Link
-      href="#competitor_overview"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#competitor_overview" className={className}>
       Competitors
     </Link>
-    <Link
-      href="#value_proposition"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#value_proposition" className={className}>
       Value Proposition
     </Link>
-    <Link
-      href="#target_audiences"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#target_audiences" className={className}>
       Target Audiences
     </Link>
-    <Link
-      href="#swot_analysis"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#swot_analysis" className={className}>
       SWOT Analysis
     </Link>
-    <Link
-      href="#elevator_pitch"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#elevator_pitch" className={className}>
       Elevator Pitch
     </Link>
-    <Link
-      href="#product_names"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#product_names" className={className}>
       Product Names
     </Link>
-    <Link
-      href="#google_trends"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#google_trends" className={className}>
       Google Trends
     </Link>
-    <Link
-      href="#content_ideas"
-      className="block rounded px-4 py-2 text-gray-900 hover:bg-gray-200"
-    >
+    <Link href="#content_ideas" className={className}>
       Content Ideas
     </Link>
     <Link
       href="#actionable_next_steps"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Next Steps
     </Link>
     <Link
       href="#two_week_testing_plan"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Two-Week Testing Plan
     </Link>
     <Link
       href="#estimated_costs"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Estimated Costs
     </Link>
     <Link
       href="#early_adopters"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Early Adopters
     </Link>
     <Link
       href="#networking_opportunities"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Networking
     </Link>
     <Link
       href="#feedback_templates"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Feedback Templates
     </Link>
-    <Link
-      href="#pitch_deck"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
-    >
+    <Link href="#pitch_deck" className="block rounded px-4 py-2 text-gray-500">
       Pitch Deck
     </Link>
-    <Link
-      href="#roadmap"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
-    >
+    <Link href="#roadmap" className="block rounded px-4 py-2 text-gray-500">
       Roadmap
     </Link>
     <Link
       href="#tools_and_resources"
-      className="block rounded px-4 py-2 text-gray-400 hover:bg-gray-200"
+      className="block rounded px-4 py-2 text-gray-500"
     >
       Tools & Resources
     </Link>

diff --git a/src/app/ideas/[id]/components/SectionActionableNextSteps.tsx b/src/app/ideas/[id]/components/SectionActionableNextSteps.tsx
@@ -11,7 +11,6 @@ const SectionActionableNextSteps = () => {
   return (
     <SectionWrapper id="actionable_next_steps">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_actionable_next_steps"

diff --git a/src/app/ideas/[id]/components/SectionCompetitors.tsx b/src/app/ideas/[id]/components/SectionCompetitors.tsx
@@ -40,7 +40,6 @@ const SectionCompetitors: React.FC<SectionCompetitorsProps> = ({
   return (
     <SectionWrapper id="competitor_overview">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_competitor_overview"
@@ -68,7 +67,7 @@ const SectionCompetitors: React.FC<SectionCompetitorsProps> = ({
                     onReport(`competitor_analysis.competitors.${idx}`)
                   }
                 >
-                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0">
+                  <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900">
                     <h3 className="mb-2 text-lg font-semibold md:text-xl">
                       Product:
                     </h3>
@@ -77,7 +76,7 @@ const SectionCompetitors: React.FC<SectionCompetitorsProps> = ({
                         href={competitor.url}
                         target="_blank"
                         rel="nofollow noopener noreferrer"
-                        className="text-blue-700 underline hover:text-blue-600"
+                        className="text-blue-700 underline hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-400"
                       >
                         {competitor.productName}
                       </a>

diff --git a/src/app/ideas/[id]/components/SectionContentIdeas.tsx b/src/app/ideas/[id]/components/SectionContentIdeas.tsx
@@ -35,7 +35,6 @@ const SectionContentIdeas: React.FC<SectionContentIdeasProps> = ({
   return (
     <SectionWrapper id="content_ideas">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_content_ideas_for_marketing"
@@ -143,7 +142,7 @@ const ContentIdea: React.FC<ContentIdeaSectionProps> = ({
     header={header}
     onReport={() => onReport(`content_ideas_for_marketing.${section}`)}
   >
-    <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-4">
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-4 dark:bg-gray-900">
       <h3 className="mb-2 text-lg font-semibold">Platforms:</h3>
 
       <Paragraph>{data.platforms.join(', ')}</Paragraph>

diff --git a/src/app/ideas/[id]/components/SectionContext.tsx b/src/app/ideas/[id]/components/SectionContext.tsx
@@ -21,7 +21,6 @@ const SectionContext: React.FC<SectionContextProps> = ({ onReport, data }) => {
   return (
     <SectionWrapper id="context">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_context"

diff --git a/src/app/ideas/[id]/components/SectionEarlyAdopters.tsx b/src/app/ideas/[id]/components/SectionEarlyAdopters.tsx
@@ -11,7 +11,6 @@ const SectionEarlyAdopters = () => {
   return (
     <SectionWrapper id="early_adopters">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_early_adopters_acquisition_ideas"

diff --git a/src/app/ideas/[id]/components/SectionElevatorPitch.tsx b/src/app/ideas/[id]/components/SectionElevatorPitch.tsx
@@ -31,7 +31,6 @@ const SectionElevatorPitch: React.FC<SectionElevatorPitchProps> = ({
   return (
     <SectionWrapper id="elevator_pitch">
       <SectionHeader
-        color="text-blue-600"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_elevator_pitch"
@@ -100,7 +99,7 @@ const Pitch: React.FC<PitchProps> = ({ idx, pitch, onReport }) => {
       header={`${idx + 1}. ${pitch.hook}`}
       onReport={() => onReport(`elevator_pitch.${idx}`)}
     >
-      <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0">
+      <div className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 hover:shadow-lg md:p-6 lg:pb-0 dark:bg-gray-900">
         <Paragraph>
           {pitch.problem} {pitch.solution} {pitch.valueProposition}
         </Paragraph>

diff --git a/src/app/ideas/[id]/components/SectionEstimatedCosts.tsx b/src/app/ideas/[id]/components/SectionEstimatedCosts.tsx
@@ -11,7 +11,6 @@ const SectionEstimatedCosts = () => {
   return (
     <SectionWrapper id="estimated_costs">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_estimated_costs_and_timeline"

diff --git a/src/app/ideas/[id]/components/SectionFeedbackTemplates.tsx b/src/app/ideas/[id]/components/SectionFeedbackTemplates.tsx
@@ -11,7 +11,6 @@ const SectionFeedbackTemplates = () => {
   return (
     <SectionWrapper id="feedback_templates">
       <SectionHeader
-        color="text-gray-400"
         onClick={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         sectionId="section_initial_feedback_templates"