Merge pull request #319 from midday-ai/feature/light-mode

Feature/light mode

apps/website/package.json

@@ -18,7 +18,6 @@
     "@openstatus/react": "^0.0.3",
     "@team-plain/typescript-sdk": "5.5.0",
     "@uidotdev/usehooks": "^2.4.1",
-    "d3": "^7.9.0",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.11.17",
     "geist": "^1.3.1",

apps/website/src/app/components/page.tsx

@@ -93,7 +93,7 @@ export default function Page() {
                 <div className="flex items-center justify-between mb-4">
                   <h2 className="text-lg font-semibold">{name}</h2>
                   {!ready && (
-                    <span className="text-[#F5F5F3] border border-border rounded-full text-[10px] font-mono px-1.5 py-1 bg-[#1D1D1D]">
+                    <span className="text-[#F5F5F3] dark:border dark:border-border rounded-full text-[10px] font-mono px-1.5 py-1 bg-[#1D1D1D]">
                       Coming soon
                     </span>
                   )}

apps/website/src/app/inbox/page.tsx

@@ -1,11 +1,14 @@
 import { CopyInput } from "@/components/copy-input";
+import { DynamicImage } from "@/components/dynamic-image";
 import { Button } from "@midday/ui/button";
 import { Icons } from "@midday/ui/icons";
 import type { Metadata } from "next";
-import Image from "next/image";
-import Bulk from "public/product-bulk.png";
-import Inbox from "public/product-inbox.jpg";
-import Match from "public/product-match.png";
+import BulkLight from "public/product-bulk-light.png";
+import BulkDark from "public/product-bulk.png";
+import InboxLight from "public/product-inbox-light.jpg";
+import InboxDark from "public/product-inbox.jpg";
+import MatchLight from "public/product-match-light.png";
+import MatchDark from "public/product-match.png";
 
 export const metadata: Metadata = {
   title: "Inbox",
@@ -42,7 +45,7 @@ export default function Page() {
         </div>
       </div>
 
-      <Image src={Inbox} quality={90} alt="Inbox" />
+      <DynamicImage darkSrc={InboxDark} lightSrc={InboxLight} alt="Inbox" />
 
       <div className="flex items-center flex-col text-center relative mt-28">
         <div>
@@ -64,9 +67,9 @@ export default function Page() {
           className="max-w-[240px] mt-8"
         />
 
-        <Image
-          src={Match}
-          quality={90}
+        <DynamicImage
+          darkSrc={MatchDark}
+          lightSrc={MatchLight}
           alt="Matching"
           className="mt-10 max-w-[834px] w-full"
         />
@@ -83,9 +86,9 @@ export default function Page() {
           </p>
         </div>
 
-        <Image
-          src={Bulk}
-          quality={90}
+        <DynamicImage
+          darkSrc={BulkDark}
+          lightSrc={BulkLight}
           alt="Receipt"
           className="mt-10 max-w-[1374px] w-full"
         />

apps/website/src/app/invoice/page.tsx

@@ -1,11 +1,13 @@
-import { CtaLink } from "@/components/cta-link";
+import { DynamicImage } from "@/components/dynamic-image";
 import { Button } from "@midday/ui/button";
 import { Icons } from "@midday/ui/icons";
 import type { Metadata } from "next";
-import Image from "next/image";
-import Invoice from "public/product-invoice.jpg";
-import Pdf from "public/product-pdf.png";
-import Status from "public/product-status.png";
+import InvoiceLight from "public/product-invoice-light.jpg";
+import InvoiceDark from "public/product-invoice.jpg";
+import PdfLight from "public/product-pdf-light.png";
+import PdfDark from "public/product-pdf.png";
+import StatusLight from "public/product-status-light.png";
+import StatusDark from "public/product-status.png";
 
 export const metadata: Metadata = {
   title: "Invoice",
@@ -43,7 +45,11 @@ export default function Page() {
         </div>
       </div>
 
-      <Image src={Invoice} quality={90} alt="Invoice" />
+      <DynamicImage
+        darkSrc={InvoiceDark}
+        lightSrc={InvoiceLight}
+        alt="Invoice"
+      />
 
       <div className="flex items-center flex-col text-center relative mt-28">
         <div className="max-w-[600px]">
@@ -59,9 +65,9 @@ export default function Page() {
           </p>
         </div>
 
-        <Image
-          src={Pdf}
-          quality={90}
+        <DynamicImage
+          darkSrc={PdfDark}
+          lightSrc={PdfLight}
           alt="Pdf"
           className="mt-10 max-w-[536px] w-full"
         />
@@ -78,9 +84,9 @@ export default function Page() {
           </p>
         </div>
 
-        <Image
-          src={Status}
-          quality={90}
+        <DynamicImage
+          darkSrc={StatusDark}
+          lightSrc={StatusLight}
           alt="Pdf"
           className="mt-10 max-w-[736px] w-full"
         />

apps/website/src/app/layout.tsx

@@ -5,6 +5,7 @@ import { Header } from "@/components/header";
 import "@/styles/globals.css";
 import { cn } from "@midday/ui/cn";
 import "@midday/ui/globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
 import { Provider as Analytics } from "@midday/events/client";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
@@ -75,7 +76,10 @@ export const metadata: Metadata = {
 };
 
 export const viewport = {
-  themeColor: [{ media: "(prefers-color-scheme: dark)" }],
+  themeColor: [
+    { media: "(prefers-color-scheme: light)" },
+    { media: "(prefers-color-scheme: dark)" },
+  ],
 };
 
 export default function Layout({ children }: { children: ReactElement }) {
@@ -84,17 +88,24 @@ export default function Layout({ children }: { children: ReactElement }) {
       <body
         className={cn(
           `${GeistSans.variable} ${GeistMono.variable}`,
-          "bg-[#0C0C0C] overflow-x-hidden dark antialiased",
+          "bg-[#fbfbfb] dark:bg-[#0C0C0C] overflow-x-hidden antialiased",
         )}
       >
-        <Header />
-        <main className="container mx-auto px-4 overflow-hidden md:overflow-visible">
-          {children}
-        </main>
-        <FooterCTA />
-        <Footer />
-        <Analytics />
-        <DevMessage />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Header />
+          <main className="container mx-auto px-4 overflow-hidden md:overflow-visible">
+            {children}
+          </main>
+          <FooterCTA />
+          <Footer />
+          <Analytics />
+          <DevMessage />
+        </ThemeProvider>
       </body>
     </html>
   );

apps/website/src/app/oss-friends/page.tsx

@@ -44,7 +44,7 @@ export default async function Page() {
           return (
             <div
               key={friend.name}
-              className="border border-border bg-[#121212] p-4"
+              className="border border-border dark:bg-[#121212] p-4"
             >
               <div className="flex justify-between items-center mb-2">
                 <a href={friend.href} target="_blank" rel="noreferrer">

apps/website/src/app/overview/page.tsx

@@ -1,10 +1,12 @@
 import { Assistant } from "@/components/assistant";
+import { DynamicImage } from "@/components/dynamic-image";
 import { Button } from "@midday/ui/button";
 import { Icons } from "@midday/ui/icons";
 import type { Metadata } from "next";
-import Image from "next/image";
-import Overview from "public/product-overview.jpg";
-import Spending from "public/product-spending.png";
+import OverviewLight from "public/product-overview-light.jpg";
+import OverviewDark from "public/product-overview.jpg";
+import SpendingLight from "public/product-spending-light.png";
+import SpendingDark from "public/product-spending.png";
 
 export const metadata: Metadata = {
   title: "Financial Overview",
@@ -41,7 +43,12 @@ export default function Page() {
         </div>
       </div>
 
-      <Image src={Overview} quality={90} alt="Overview" />
+      <DynamicImage
+        darkSrc={OverviewDark}
+        lightSrc={OverviewLight}
+        alt="Overview"
+        className="mt-28"
+      />
 
       <div className="flex items-center flex-col text-center relative mt-28">
         <div className="max-w-[600px]">
@@ -58,9 +65,9 @@ export default function Page() {
           </p>
         </div>
 
-        <Image
-          src={Spending}
-          quality={90}
+        <DynamicImage
+          darkSrc={SpendingDark}
+          lightSrc={SpendingLight}
           alt="Spending"
           className="mt-10 max-w-[834px] w-full"
         />

apps/website/src/app/story/page.tsx

@@ -1,6 +1,8 @@
+import { DynamicImage } from "@/components/dynamic-image";
 import type { Metadata } from "next";
 import Image from "next/image";
-import signature from "public/email/signature-dark.png";
+import signatureDark from "public/email/signature-dark.png";
+import signatureLight from "public/email/signature.png";
 import founders from "public/founders.png";
 
 export const metadata: Metadata = {
@@ -49,10 +51,12 @@ export default function Page() {
 
       <div className="mt-6 mb-8">
         <p className="text-sm text-[#878787] mb-2">Best regards, founders</p>
-        <Image
-          src={signature}
+
+        <DynamicImage
+          darkSrc={signatureDark}
+          lightSrc={signatureLight}
           alt="Signature"
-          className="block w-[143px] h-[20px]"
+          className="w-[143px] h-[20px]"
         />
       </div>
     </div>

apps/website/src/app/tracker/page.tsx

@@ -1,10 +1,13 @@
+import { DynamicImage } from "@/components/dynamic-image";
 import { Button } from "@midday/ui/button";
 import { Icons } from "@midday/ui/icons";
 import type { Metadata } from "next";
-import Image from "next/image";
-import Projects from "public/product-projects.png";
-import Slot from "public/product-slot.png";
-import Tracker from "public/product-tracker.jpg";
+import ProjectsLight from "public/product-projects-light.png";
+import ProjectsDark from "public/product-projects.png";
+import SlotLight from "public/product-slot-light.png";
+import SlotDark from "public/product-slot.png";
+import TrackerLight from "public/product-tracker-light.jpg";
+import TrackerDark from "public/product-tracker.jpg";
 
 export const metadata: Metadata = {
   title: "Time Tracker",
@@ -41,7 +44,11 @@ export default function Page() {
         </div>
       </div>
 
-      <Image src={Tracker} quality={90} alt="Tracker" />
+      <DynamicImage
+        darkSrc={TrackerDark}
+        lightSrc={TrackerLight}
+        alt="Tracker"
+      />
 
       <div className="flex items-center flex-col text-center relative mt-28">
         <div className="max-w-[600px]">
@@ -55,9 +62,9 @@ export default function Page() {
           </p>
         </div>
 
-        <Image
-          src={Projects}
-          quality={90}
+        <DynamicImage
+          darkSrc={ProjectsDark}
+          lightSrc={ProjectsLight}
           alt="Slot"
           className="mt-10 max-w-[450px] w-full"
         />
@@ -72,9 +79,9 @@ export default function Page() {
           </p>
         </div>
 
-        <Image
-          src={Slot}
-          quality={90}
+        <DynamicImage
+          darkSrc={SlotDark}
+          lightSrc={SlotLight}
           alt="Slot"
           className="mt-10 max-w-[550px] w-full"
         />

apps/website/src/app/updates/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import { baseUrl } from "@/app/sitemap";
 import { CustomMDX } from "@/components/mdx";
+import { PostAuthor } from "@/components/post-author";
 import { PostStatus } from "@/components/post-status";
 import { getBlogPosts } from "@/lib/blog";
 import type { Metadata } from "next";
@@ -52,16 +53,12 @@ export async function generateMetadata(props): Promise<Metadata | undefined> {
   };
 }
 
-export default async function Page(
-  props: {
-    params: Promise<{ slug: string }>;
-  }
-) {
+export default async function Page(props: {
+  params: Promise<{ slug: string }>;
+}) {
   const params = await props.params;
 
-  const {
-    slug
-  } = params;
+  const { slug } = params;
 
   const post = getBlogPosts().find((post) => post.slug === slug);
 
@@ -105,6 +102,10 @@ export default async function Page(
           )}
           <CustomMDX source={post.content} />
         </div>
+
+        <div className="mt-10">
+          <PostAuthor author="pontus" />
+        </div>
       </article>
     </div>
   );

apps/website/src/app/vault/page.tsx

@@ -1,10 +1,12 @@
 import { Assistant } from "@/components/assistant";
+import { DynamicImage } from "@/components/dynamic-image";
 import { Button } from "@midday/ui/button";
 import { Icons } from "@midday/ui/icons";
 import type { Metadata } from "next";
-import Image from "next/image";
-import Files from "public/product-files.png";
-import Vault from "public/product-vault.jpg";
+import FilesLight from "public/product-files-light.png";
+import FilesDark from "public/product-files.png";
+import VaultLight from "public/product-vault-light.jpg";
+import VaultDark from "public/product-vault.jpg";
 
 export const metadata: Metadata = {
   title: "Vault",
@@ -40,7 +42,7 @@ export default function Page() {
         </div>
       </div>
 
-      <Image src={Vault} quality={90} alt="Vault" />
+      <DynamicImage darkSrc={VaultDark} lightSrc={VaultLight} alt="Vault" />
 
       <div className="flex items-center flex-col text-center relative mt-28">
         <div className="max-w-[600px]">
@@ -55,9 +57,9 @@ export default function Page() {
           </p>
         </div>
 
-        <Image
-          src={Files}
-          quality={90}
+        <DynamicImage
+          darkSrc={FilesDark}
+          lightSrc={FilesLight}
           alt="Files"
           className="mt-10 max-w-[834px] w-full"
         />