visual and non-visual changes

app/invoice/components/InvoiceDisplay.tsx

@@ -6,7 +6,7 @@ interface InvoiceDisplayProps {
 
 const InvoiceDisplay = ({ invoice }: InvoiceDisplayProps) => {
   return (
-    <div className="-mx-4 px-4 py-8 shadow-sm ring-1 ring-gray-900/5 sm:mx-0 sm:rounded-lg sm:px-8 sm:pb-14 lg:col-span-2 lg:row-span-2 lg:row-end-2 xl:px-16 xl:pb-20 xl:pt-16">
+    <div className="-mx-4 px-4 py-8 shadow-sm ring-1 ring-gray-900/5 sm:mx-0 sm:rounded-lg sm:px-8 sm:pb-14 lg:col-span-2 lg:row-span-2 lg:row-end-2 xl:px-16 xl:pb-20 xl:pt-16 bg-orange-300">
       <h2 className="text-base font-semibold leading-6 text-gray-900">Invoice</h2>
       <dl className="mt-6 grid grid-cols-1 text-sm leading-6 sm:grid-cols-2">
         <div className="sm:pr-4">

app/invoice/components/InvoiceSummary.tsx

@@ -13,7 +13,7 @@ const InvoiceSummary = ({ invoice }: InvoiceSummaryProps) => {
   return (
     <div className="lg:col-start-3 lg:row-end-1">
       <h2 className="sr-only">Summary</h2>
-      <div className="rounded-lg bg-gray-50 shadow-sm ring-1 ring-gray-900/5">
+      <div className="rounded-lg bg-emerald-300 shadow-sm ring-1 ring-gray-900/5">
         <dl className={`flex flex-wrap ${invoice.payment ? '' : 'pb-6'}`}>
           <div className="flex-auto pl-6 pt-6">
             <dt className="text-sm font-semibold leading-6 text-gray-900">Amount</dt>

app/lib/toTitleCase.ts

@@ -0,0 +1,8 @@
+export default function toTitleCase(input: string): string {
+  if (!input) return '';
+  return input
+    .toLowerCase()
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}