Remove dark mode, fix navigation on mobile, update e2e tests (#9)

* Close manu when navigating

* Close manu when navigating

* Set plausible ignore to not send events

* Add feedback in the header

* Remove dark mode references

src/app/invoice-form.tsx

@@ -48,7 +48,7 @@ export function InvoiceForm() {
   const onSubmit: SubmitHandler<InvoiceFormValues> = async (data) => {
     setIsGenerating(true);
     // Plausible event tracking
-    if (typeof window.plausible !== 'undefined' && process.env.NODE_ENV === 'production' && process.env.CI !== 'true') {
+    if (typeof window.plausible !== 'undefined') {
       window.plausible('Invoice_Generated', {
         callback: () => {
           console.log('Plausible event sent: Invoice_Generated');

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Metadata, Viewport } from 'next';
 import Script from 'next/script';
 
 import { Header } from '@/components/header';
+import { isProd } from '@/utils/isProd';
 
 export const viewport: Viewport = {
   themeColor: '#f4f4f5',
@@ -62,7 +63,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           {children}
         </main>
       </body>
-      {process.env.NODE_ENV === 'production' && process.env.VERCEL_ENV === 'production' && (
+      {isProd && (
         <>
           <Script
             defer

src/app/page.tsx

@@ -258,8 +258,8 @@ export default function Homepage() {
       </div>
 
       <footer className="bg-white">
-        <div className="mx-auto max-w-7xl px-6 py-12 text-center lg:px-8">
-          <p className="mt-8 text-center text-sm/6 text-gray-600 md:order-1 md:mt-0">
+        <div className="mx-auto max-w-7xl px-6 pb-12 text-center lg:px-8">
+          <p className="text-center text-sm/6 text-gray-600 md:order-1">
             &copy; {new Date().getFullYear()} Created with ❤️ by{' '}
             <Link href="https://joaopedro.dev">João Pedro Schmitz</Link>
           </p>

src/components/cta-buttons.tsx

@@ -8,11 +8,7 @@ export function CTAButtons() {
       <Link
         href="/app"
         onClick={() => {
-          if (
-            typeof window.plausible !== 'undefined' &&
-            process.env.NODE_ENV === 'production' &&
-            process.env.CI !== 'true'
-          ) {
+          if (typeof window.plausible !== 'undefined') {
             window.plausible('Create_Invoice_Click', {
               callback: () => {
                 console.log('Plausible event sent: Sample_Invoice_Test');
@@ -27,11 +23,7 @@ export function CTAButtons() {
       <Link
         href="/invoice-example.pdf"
         onClick={() => {
-          if (
-            typeof window.plausible !== 'undefined' &&
-            process.env.NODE_ENV === 'production' &&
-            process.env.CI !== 'true'
-          ) {
+          if (typeof window.plausible !== 'undefined') {
             window.plausible('Sample_Invoice_Test', {
               callback: () => {
                 console.log('Plausible event sent: Sample_Invoice_Test');

src/components/header.tsx

@@ -3,19 +3,26 @@
 import { Dialog, DialogPanel } from '@headlessui/react';
 import { Bars3Icon } from '@heroicons/react/24/outline';
 import { XMarkIcon } from '@heroicons/react/24/solid';
-import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
 import { Link } from '@/lib/ui/link';
 
 const navigation = [
   { name: 'Home', href: '/' },
   { name: 'About', href: '/#about' },
+  { name: 'Feedback', href: 'https://tally.so/r/wQJqag' },
   { name: 'Privacy', href: '/privacy' },
 ];
 
 export function Header() {
+  const params = useParams();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
+  useEffect(() => {
+    setMobileMenuOpen(false);
+  }, [params]);
+
   return (
     <header className="absolute inset-x-0 top-0 z-50">
       <nav aria-label="Global" className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
@@ -34,7 +41,12 @@ export function Header() {
         </div>
         <div className="hidden lg:flex lg:gap-x-12">
           {navigation.map((item) => (
-            <a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-gray-900">
+            <a
+              key={item.name}
+              href={item.href}
+              target={item.href.startsWith('http') ? '_blank' : undefined}
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
               {item.name}
             </a>
           ))}
@@ -63,6 +75,7 @@ export function Header() {
                   <Link
                     key={item.name}
                     href={item.href}
+                    target={item.href.startsWith('http') ? '_blank' : undefined}
                     className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                   >
                     {item.name}

src/lib/ui/button.tsx

@@ -20,72 +20,50 @@ const styles = {
   solid: [
     // Optical border, implemented as the button background to avoid corner artifacts
     'border-transparent bg-[--btn-border]',
-    // Dark mode: border is rendered on `after` so background is set to button background
-    'dark:bg-[--btn-bg]',
     // Button background, implemented as foreground layer to stack on top of pseudo-border layer
     'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]',
     // Drop shadow, applied to the inset `before` layer so it blends with the border
     'before:shadow',
-    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-    'dark:before:hidden',
-    // Dark mode: Subtle white outline is applied using a border
-    'dark:border-white/5',
     // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
     'after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]',
     // Inner highlight shadow
     'after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]',
     // White overlay on hover
     'after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]',
-    // Dark mode: `after` layer expands to cover entire button
-    'dark:after:-inset-px dark:after:rounded-lg',
     // Disabled
     'before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',
   ],
   outline: [
     // Base
     'border-zinc-950/10 text-zinc-950 data-[active]:bg-zinc-950/[2.5%] data-[hover]:bg-zinc-950/[2.5%]',
-    // Dark mode
-    'dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5',
     // Icon
-    '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+    '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)]',
   ],
   plain: [
     // Base
     'border-transparent text-zinc-950 data-[active]:bg-zinc-950/5 data-[hover]:bg-zinc-950/5',
-    // Dark mode
-    'dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10',
     // Icon
-    // '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+    // '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)]',
   ],
   colors: {
     'dark/zinc': [
       'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-      'dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]',
       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
     ],
     light: [
       'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]',
-      'dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]',
-      '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+      '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)]',
     ],
     'dark/white': [
       'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-      'dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]',
-      '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
-    ],
-    dark: [
-      'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-      'dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]',
       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
     ],
     white: [
       'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]',
-      'dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]',
       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.500)] data-[hover]:[--btn-icon:theme(colors.zinc.500)]',
     ],
     zinc: [
       'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.zinc.600)] [--btn-border:theme(colors.zinc.700/90%)]',
-      'dark:[--btn-hover-overlay:theme(colors.white/5%)]',
       '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
     ],
     indigo: [

src/lib/ui/divider.tsx

@@ -9,12 +9,7 @@ export function Divider({
     <hr
       role="presentation"
       {...props}
-      className={clsx(
-        className,
-        'w-full border-t',
-        soft && 'border-zinc-950/5 dark:border-white/5',
-        !soft && 'border-zinc-950/10 dark:border-white/10'
-      )}
+      className={clsx(className, 'w-full border-t', soft && 'border-zinc-950/5', !soft && 'border-zinc-950/10')}
     />
   );
 }

src/lib/ui/fieldset.tsx

@@ -23,10 +23,7 @@ export function Legend({
     <Headless.Legend
       data-slot="legend"
       {...props}
-      className={clsx(
-        className,
-        'text-base/6 font-semibold text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white'
-      )}
+      className={clsx(className, 'text-base/6 font-semibold text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6')}
     />
   );
 }
@@ -57,10 +54,7 @@ export function Label({ className, ...props }: { className?: string } & Omit<Hea
     <Headless.Label
       data-slot="label"
       {...props}
-      className={clsx(
-        className,
-        'select-none text-base/6 text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white'
-      )}
+      className={clsx(className, 'select-none text-base/6 text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6')}
     />
   );
 }
@@ -73,10 +67,7 @@ export function Description({
     <Headless.Description
       data-slot="description"
       {...props}
-      className={clsx(
-        className,
-        'text-base/6 text-zinc-500 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-zinc-400'
-      )}
+      className={clsx(className, 'text-base/6 text-zinc-500 data-[disabled]:opacity-50 sm:text-sm/6')}
     />
   );
 }
@@ -89,7 +80,7 @@ export function ErrorMessage({
     <Headless.Description
       data-slot="error"
       {...props}
-      className={clsx(className, 'text-base/6 text-red-600 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-red-500')}
+      className={clsx(className, 'text-base/6 text-red-600 data-[disabled]:opacity-50 sm:text-sm/6')}
     />
   );
 }

src/lib/ui/input.tsx

@@ -11,7 +11,7 @@ export function InputGroup({ children }: React.ComponentPropsWithoutRef<'span'>)
         '[&_input]:has-[[data-slot=icon]:first-child]:pl-10 [&_input]:has-[[data-slot=icon]:last-child]:pr-10 sm:[&_input]:has-[[data-slot=icon]:first-child]:pl-8 sm:[&_input]:has-[[data-slot=icon]:last-child]:pr-8',
         '[&>[data-slot=icon]]:pointer-events-none [&>[data-slot=icon]]:absolute [&>[data-slot=icon]]:top-3 [&>[data-slot=icon]]:z-10 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:top-2.5 sm:[&>[data-slot=icon]]:size-4',
         '[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5',
-        '[&>[data-slot=icon]]:text-zinc-500 dark:[&>[data-slot=icon]]:text-zinc-400'
+        '[&>[data-slot=icon]]:text-zinc-500'
       )}
     >
       {children}
@@ -41,8 +41,6 @@ export const Input = forwardRef(function Input(
         'relative block w-full',
         // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
         'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
-        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-        'dark:before:hidden',
         // Focus ring
         'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
         // Disabled state
@@ -75,19 +73,15 @@ export const Input = forwardRef(function Input(
           // Basic layout
           'relative block w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
           // Typography
-          'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
+          'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6',
           // Border
-          'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
-          // Background color
-          'bg-transparent dark:bg-white/5',
+          'border border-zinc-950/10 data-[hover]:border-zinc-950/20',
           // Hide default focus styles
           'focus:outline-none',
           // Invalid state
-          'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-500 data-[invalid]:data-[hover]:dark:border-red-500',
+          'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500',
           // Disabled state
-          'data-[disabled]:border-zinc-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
-          // System icons
-          'dark:[color-scheme:dark]',
+          'data-[disabled]:border-zinc-950/20',
         ])}
       />
     </span>