Add geist blue (#195)

dashboard/15-final/app/page.tsx

@@ -6,7 +6,7 @@ import { ArrowRightIcon } from '@heroicons/react/24/outline';
 export default function Page() {
   return (
     <main className="flex min-h-screen flex-col p-6">
-      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-600 p-4 md:h-52">
+      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
         <div className="w-32 text-white md:w-48">
           <AcmeLogo />
         </div>
@@ -24,7 +24,7 @@ export default function Page() {
           </p>
           <Link
             href="/login"
-            className="flex items-center gap-5 self-start rounded-lg bg-blue-600 px-6 py-3 text-sm text-white md:text-base"
+            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm text-white transition-colors hover:bg-blue-400 md:text-base"
           >
             <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
           </Link>

dashboard/15-final/app/ui/button.tsx

@@ -9,7 +9,7 @@ export function Button({ children, className, ...rest }: ButtonProps) {
     <button
       {...rest}
       className={clsx(
-        'flex h-12 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-gray-50 transition-colors hover:bg-blue-500',
+        'flex h-12 items-center rounded-lg bg-blue-500 px-4 text-sm font-medium text-gray-50 transition-colors hover:bg-blue-400',
         className,
       )}
     >

dashboard/15-final/app/ui/dashboard/nav-links.tsx

@@ -29,7 +29,7 @@ export default function NavLinks() {
             key={link.name}
             href={link.href}
             className={clsx(
-              ' flex grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2',
+              'flex grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2',
               {
                 'bg-sky-100 text-blue-600': pathname === link.href,
               },

dashboard/15-final/app/ui/dashboard/sidenav.tsx

@@ -7,7 +7,7 @@ export default function SideNav() {
   return (
     <div className="flex h-full flex-col border-r px-2 py-4">
       <Link
-        className="mb-2 flex h-20 items-end justify-center rounded-md bg-blue-600 p-4 md:h-40 md:justify-start"
+        className="mb-2 flex h-20 items-end justify-center rounded-md bg-blue-500 p-4 md:h-40 md:justify-start"
         href="/"
       >
         <div className="w-32 text-white md:w-40">

dashboard/15-final/app/ui/invoices/buttons.tsx

@@ -6,7 +6,7 @@ export function CreateInvoice() {
   return (
     <Link
       href="/dashboard/invoices/create"
-      className="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+      className="block rounded-md bg-blue-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
     >
       Create Invoice
     </Link>

dashboard/15-final/app/ui/invoices/pagination.tsx

@@ -47,7 +47,7 @@ export default function Pagination({
             className={clsx(
               'flex h-9 w-9 items-center justify-center text-sm ring-1 ring-inset ring-gray-300',
               {
-                'z-10 bg-blue-600 text-white ring-blue-600':
+                'z-10 bg-blue-500 text-white ring-blue-500':
                   currentPage === page,
               },
             )}

dashboard/15-final/app/ui/login-form.tsx

@@ -39,7 +39,7 @@ export default function LoginForm() {
   return (
     <div className="flex items-center justify-center md:h-screen">
       <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
-        <div className="flex h-36 w-full items-end rounded-lg bg-blue-600 p-3">
+        <div className="flex h-36 w-full items-end rounded-lg bg-blue-500 p-3">
           <Logo />
         </div>
         <form onSubmit={handleSubmit} className="space-y-3">

dashboard/15-final/tailwind.config.ts

@@ -13,6 +13,8 @@ const config: Config = {
       },
       colors: {
         blue: {
+          400: '#2589FE',
+          500: '#0070F3',
           600: '#2F6FEB',
         },
       },