Clean up 💅🏼 (#198)

* Use string literals * Use 666 for evil rabbit * Delete extra logo * Use consistent pixels for images * Update button.tsx * Fix 666 mistake
2026-06-11 09:51:47 +00:00 · 2023-10-06 14:28:42 +01:00
parent c1054b5406
commit 3f2a2ae845
12 changed files with 25 additions and 77 deletions
--- a/dashboard/15-final/app/layout.tsx
+++ b/dashboard/15-final/app/layout.tsx
@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import '@/app/ui/global.css';
-import type { Metadata } from 'next';
 import { inter } from '@/app/ui/fonts';
+import type { Metadata } from 'next';

 export const metadata: Metadata = {
  title: 'Create Next App',
@@ -15,7 +14,7 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en">
-      <body className={clsx(inter.className, 'antialiased')}>{children}</body>
+      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
 }
--- a/dashboard/15-final/app/lib/dummy-data.js
+++ b/dashboard/15-final/app/lib/dummy-data.js
@@ -98,7 +98,7 @@ const invoices = [
  },
  {
    customer_id: customers[6].id,
-    amount: 8945,
+    amount: 666,
    status: 'pending',
    date: '2023-06-27',
  },
@@ -116,7 +116,7 @@ const invoices = [
  },
  {
    customer_id: customers[5].id,
-    amount: 8945,
+    amount: 8546,
    status: 'paid',
    date: '2023-06-07',
  },
--- a/dashboard/15-final/app/page.tsx
+++ b/dashboard/15-final/app/page.tsx
@@ -1,8 +1,8 @@
 import AcmeLogo from '@/app/ui/acme-logo';
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
 import Image from 'next/image';
 import Link from 'next/link';
-import { ArrowRightIcon } from '@heroicons/react/24/outline';
 export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
@@ -24,24 +24,25 @@ export default function Page() {
          </p>
          <Link
            href="/login"
-            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"
+            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
          >
            <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
          </Link>
        </div>
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
+          {/* Add Hero Images Here */}
          <Image
-            src="/hero.png"
+            src="/hero-desktop.png"
            width={1000}
            height={760}
-            alt="Dashboard Hero"
+            alt="Screenshots of the dashboard project showing desktop and mobile versions"
            className="hidden md:block"
          />
          <Image
            src="/hero-mobile.png"
-            width={436}
-            height={604}
-            alt="Dashboard Hero"
+            width={560}
+            height={620}
+            alt="Screenshot of the dashboard project showing mobile version"
            className="block md:hidden"
          />
        </div>
--- a/dashboard/15-final/app/ui/button.tsx
+++ b/dashboard/15-final/app/ui/button.tsx
@@ -9,7 +9,7 @@ export function Button({ children, className, ...rest }: ButtonProps) {
    <button
      {...rest}
      className={clsx(
-        'flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
+        'flex h-10 items-center rounded-lg bg-blue-500 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500',
        className,
      )}
    >
--- a/dashboard/15-final/app/ui/dashboard/card.tsx
+++ b/dashboard/15-final/app/ui/dashboard/card.tsx
@@ -5,7 +5,6 @@ import {
  InboxIcon,
 } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
-import clsx from 'clsx';

 const iconMap = {
  collected: BanknotesIcon,
@@ -32,10 +31,8 @@ export default function Card({
        <h3 className="ml-2 text-sm font-medium">{title}</h3>
      </div>
      <p
-        className={clsx(
-          lusitana.className,
-          'truncate rounded-xl bg-white px-4 py-8 text-center text-2xl',
-        )}
+        className={`${lusitana.className}
+          truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
      >
        {value}
      </p>
--- a/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx
+++ b/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx
@@ -11,7 +11,7 @@ export default async function LatestInvoices({
 }) {
  return (
    <div className="flex w-full flex-col md:col-span-4 lg:col-span-4">
-      <h2 className={clsx(lusitana.className, 'mb-4 text-xl md:text-2xl')}>
+      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Latest Invoices
      </h2>
      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
@@ -45,10 +45,7 @@ export default async function LatestInvoices({
                  </div>
                </div>
                <p
-                  className={clsx(
-                    lusitana.className,
-                    'truncate text-sm font-medium md:text-base',
-                  )}
+                  className={`${lusitana.className} md:text-base, truncate text-sm font-medium`}
                >
                  {invoice.amount}
                </p>
--- a/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx
+++ b/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx
@@ -2,7 +2,6 @@ import { generateYAxis } from '@/app/lib/utils';
 import { fetchRevenue } from '@/app/lib/data';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
-import clsx from 'clsx';
 // This component is representational only.
 // For data visualization UI, check out:
 // https://www.tremor.so/
@@ -21,7 +20,7 @@ export default async function RevenueChart() {

  return (
    <div className="w-full md:col-span-4">
-      <h2 className={clsx(lusitana.className, 'mb-4 text-xl md:text-2xl')}>
+      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Recent Revenue
      </h2>
      <div className="rounded-xl bg-gray-50 p-4">
@@ -54,7 +53,7 @@ export default async function RevenueChart() {
        </div>
        <div className="flex items-center pb-2 pt-6">
          <CalendarIcon className="h-5 w-5 text-gray-500" />
-          <h3 className="ml-2 text-sm text-gray-500 ">Last 6 months</h3>
+          <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
        </div>
      </div>
    </div>
--- a/dashboard/15-final/app/ui/login-form.tsx
+++ b/dashboard/15-final/app/ui/login-form.tsx
@@ -4,11 +4,10 @@ import { signIn } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { lusitana } from '@/app/ui/fonts';
-import clsx from 'clsx';
 import { AtSymbolIcon, KeyIcon } from '@heroicons/react/24/outline';
 import { Button } from './button';
 import { ArrowRightIcon } from '@heroicons/react/20/solid';
-import { Logo } from './logo';
+import AcmeLogo from './acme-logo';

 export default function LoginForm() {
  const [email, setEmail] = useState('');
@@ -39,12 +38,14 @@ 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-500 p-3">
-          <Logo />
+        <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
+          <div className="w-32 text-white md:w-36">
+            <AcmeLogo />
+          </div>
        </div>
        <form onSubmit={handleSubmit} className="space-y-3">
          <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-6 pt-5">
-            <h1 className={clsx(lusitana.className, 'mb-3 text-2xl')}>
+            <h1 className={`${lusitana.className} mb-3 text-2xl`}>
              Please log in to continue.
            </h1>
            <div className="w-full">
--- a/dashboard/15-final/app/ui/logo.tsx
+++ b/dashboard/15-final/app/ui/logo.tsx
@@ -1,46 +0,0 @@
-export function Logo() {
-  return (
-    <svg
-      width="139"
-      height="33"
-      viewBox="0 0 139 33"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_48_26148)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M14.4165 30.496C18.0402 30.3714 21.4154 28.598 23.5809 25.7307C21.9268 25.5847 20.1008 25.3278 18.1638 24.9631C17.07 27.324 15.7618 29.2423 14.4165 30.496ZM10.3814 32.0242C17.8484 34.0222 25.5223 29.5904 27.523 22.1235C29.5242 14.6549 25.092 6.97822 17.6235 4.97703C10.155 2.97585 2.47828 7.408 0.477095 14.8765C-1.52409 22.3451 2.90806 30.0218 10.3766 32.023C10.3782 32.0234 10.3798 32.0238 10.3814 32.0242ZM10.8921 30.0905C10.8928 30.0907 10.8935 30.0909 10.8942 30.0911C10.8949 30.0913 10.8956 30.0915 10.8963 30.0917C11.0746 30.1388 11.4156 30.1494 11.9936 29.8286C12.5856 29.5 13.2985 28.8861 14.0589 27.9346C14.7834 27.028 15.4955 25.8845 16.1448 24.5523C14.9921 24.3006 13.8096 24.0136 12.6089 23.6918C11.4082 23.3701 10.2406 23.0274 9.11652 22.6691C9.01277 24.1474 9.05766 25.4938 9.23179 26.6411C9.41455 27.8454 9.72499 28.7335 10.0734 29.3141C10.4135 29.8809 10.7142 30.0422 10.8921 30.0905ZM7.16259 22.0154C6.92936 24.6068 7.1032 26.9223 7.64145 28.6806C4.56551 26.7609 2.52916 23.5374 2.08743 19.9715C3.59294 20.6721 5.30274 21.3627 7.16259 22.0154ZM9.34233 20.6407C10.5499 21.0331 11.8158 21.4088 13.1265 21.76C14.4373 22.1112 15.7215 22.4188 16.9634 22.6828C17.3446 21.7112 17.6896 20.6683 17.9845 19.5676C18.2794 18.4669 18.5021 17.3913 18.6578 16.3593C17.4503 15.9669 16.1843 15.5912 14.8736 15.24C13.5629 14.8888 12.2787 14.5812 11.0367 14.3172C10.6556 15.2888 10.3105 16.3317 10.0156 17.4324C9.72069 18.5331 9.49806 19.6087 9.34233 20.6407ZM9.04484 13.9244C8.68623 14.8724 8.36291 15.8729 8.08376 16.9147C7.80461 17.9565 7.58438 18.9846 7.42092 19.985C5.38541 19.2556 3.56012 18.4864 2.02303 17.7214C2.07407 16.9491 2.20098 16.1703 2.40895 15.3942C2.61691 14.618 2.89638 13.8802 3.23837 13.1857C4.95203 13.2918 6.91738 13.5383 9.04484 13.9244ZM11.8553 12.4477C13.008 12.6994 14.1905 12.9864 15.3912 13.3081C16.5919 13.6299 17.7595 13.9726 18.8836 14.3309C18.9873 12.8526 18.9425 11.5062 18.7683 10.3589C18.5856 9.15457 18.2751 8.26645 17.9268 7.68591C17.5853 7.11685 17.2836 6.9565 17.1059 6.90889C16.9282 6.86128 16.5868 6.8493 16.0065 7.17138C15.4145 7.49995 14.7016 8.11387 13.9412 9.06543C13.2167 9.97201 12.5047 11.1155 11.8553 12.4477ZM13.5836 6.50404C12.2383 7.75767 10.9301 9.67596 9.83632 12.0369C7.89931 11.6722 6.07329 11.4153 4.41919 11.2693C6.58469 8.40198 9.95996 6.62856 13.5836 6.50404ZM18.9553 23.0756C19.3139 22.1275 19.6372 21.1271 19.9164 20.0853C20.1955 19.0435 20.4157 18.0154 20.5792 17.015C22.6147 17.7444 24.44 18.5136 25.9771 19.2786C25.926 20.0509 25.7991 20.8297 25.5912 21.6058C25.3832 22.382 25.1037 23.1198 24.7617 23.8143C23.0481 23.7082 21.0827 23.4617 18.9553 23.0756ZM20.8375 14.9846C22.6974 15.6373 24.4072 16.3279 25.9127 17.0284C25.471 13.4625 23.4346 10.2391 20.3587 8.3194C20.8969 10.0777 21.0708 12.3931 20.8375 14.9846Z"
-          fill="white"
-        />
-      </g>
-      <path
-        d="M36.8079 29.872L33.4799 30L33.1599 28.528H33.3519C34.3332 28.4213 35.0799 28.1547 35.5919 27.728C36.1252 27.28 36.5732 26.5547 36.9359 25.552L43.7199 7.28H45.2559L52.8079 26.064C53.2559 27.1093 53.6506 27.792 53.9919 28.112C54.3546 28.432 54.9306 28.592 55.7199 28.592L56.0719 30C54.4079 29.8933 52.9039 29.84 51.5599 29.84C50.2372 29.84 48.9466 29.8933 47.6879 30L47.3999 28.624H47.5279C49.2132 28.6027 50.0559 28.304 50.0559 27.728C50.0559 27.4507 49.2879 25.552 47.7519 22.032H39.7839L38.2159 26.384C38.1519 26.64 38.1199 26.864 38.1199 27.056C38.1199 27.504 38.3226 27.8453 38.7279 28.08C39.1332 28.3147 39.8266 28.464 40.8079 28.528L41.1919 30L36.8079 29.872ZM43.4639 11.92L40.3919 20.368H47.0159L43.4639 11.92Z"
-        fill="white"
-      />
-      <path
-        d="M67.4187 18.832C67.056 18.4693 66.5547 18.1067 65.9147 17.744C65.2747 17.3813 64.5387 17.2 63.7067 17.2C62.8747 17.2 62.1067 17.6587 61.4027 18.576C60.6987 19.472 60.3467 20.7413 60.3467 22.384C60.3467 24.0267 60.7733 25.4453 61.6267 26.64C62.48 27.8133 63.7493 28.4 65.4347 28.4C66.7787 28.4 67.888 27.9627 68.7627 27.088C68.8053 27.0453 68.8587 27.024 68.9227 27.024C68.9867 27.024 69.04 27.0453 69.0827 27.088L69.7227 27.824C68.144 29.5307 66.3093 30.384 64.2187 30.384C62.1493 30.384 60.496 29.7227 59.2587 28.4C58.0427 27.0773 57.4347 25.4133 57.4347 23.408C57.4347 20.9333 58.1173 19.056 59.4827 17.776C60.8693 16.496 62.5973 15.856 64.6667 15.856C65.5627 15.856 66.4693 15.984 67.3867 16.24C68.3253 16.496 69.0293 16.816 69.4987 17.2C69.52 17.2427 69.5307 17.2853 69.5307 17.328C69.5307 17.6267 69.2 18.256 68.5387 19.216C68.4533 19.3013 68.336 19.344 68.1867 19.344C68.0587 19.344 67.8027 19.1733 67.4187 18.832Z"
-        fill="white"
-      />
-      <path
-        d="M72.0709 18.192L71.5909 18.224L71.3029 17.296C72.7962 16.9333 73.8949 16.5707 74.5989 16.208C75.3029 15.8453 75.6976 15.6427 75.7829 15.6C76.0602 15.6 76.2202 15.6213 76.2629 15.664C76.3482 15.7493 76.4122 16.432 76.4549 17.712C78.1616 16.4747 79.7082 15.856 81.0949 15.856C82.9296 15.856 84.2096 16.496 84.9349 17.776C86.7269 16.496 88.3909 15.856 89.9269 15.856C93.0202 15.856 94.5669 17.4453 94.5669 20.624V27.728C94.5669 28.112 94.6629 28.3787 94.8549 28.528C95.0469 28.656 95.5162 28.752 96.2629 28.816L96.5509 30.096L93.4149 30L89.9589 30.096L89.7029 28.816C90.7269 28.7307 91.3349 28.6453 91.5269 28.56C91.7402 28.4533 91.8469 28.176 91.8469 27.728V21.712C91.8469 20.3467 91.5802 19.3973 91.0469 18.864C90.5136 18.3093 89.6816 18.032 88.5509 18.032C87.4416 18.032 86.3856 18.384 85.3829 19.088C85.4896 19.6213 85.5429 20.1333 85.5429 20.624V27.728C85.5429 28.112 85.6389 28.3787 85.8309 28.528C86.0229 28.656 86.4922 28.752 87.2389 28.816L87.5269 30.096L84.3909 30L80.9349 30.096L80.6789 28.816C81.7029 28.7307 82.3109 28.6453 82.5029 28.56C82.7162 28.4533 82.8229 28.176 82.8229 27.728V21.712C82.8229 20.3467 82.5562 19.3867 82.0229 18.832C81.5109 18.2773 80.7429 18 79.7189 18C78.6949 18 77.6282 18.2987 76.5189 18.896V27.728C76.5189 28.112 76.6149 28.3787 76.8069 28.528C76.9989 28.656 77.4682 28.752 78.2149 28.816L78.5029 30.096L75.3669 30L71.9109 30.096L71.6549 28.816C72.6789 28.7307 73.2869 28.6453 73.4789 28.56C73.6922 28.4533 73.7989 28.176 73.7989 27.728V20.24C73.7989 19.472 73.6602 18.9387 73.3829 18.64C73.1056 18.3413 72.6682 18.192 72.0709 18.192Z"
-        fill="white"
-      />
-      <path
-        d="M110.658 22.224H101.378V22.64C101.378 24.1973 101.815 25.552 102.69 26.704C103.565 27.8347 104.727 28.4 106.178 28.4C107.629 28.4 108.823 27.9307 109.762 26.992C109.826 26.928 109.879 26.896 109.922 26.896C109.965 26.896 110.018 26.928 110.082 26.992L110.786 27.792C109.186 29.52 107.33 30.384 105.218 30.384C103.127 30.384 101.474 29.7227 100.258 28.4C99.0632 27.0773 98.4659 25.3173 98.4659 23.12C98.4659 20.9013 99.1486 19.1413 100.514 17.84C101.879 16.5173 103.437 15.856 105.186 15.856C106.935 15.856 108.311 16.3893 109.314 17.456C110.317 18.5013 110.818 19.9733 110.818 21.872C110.818 22.1067 110.765 22.224 110.658 22.224ZM107.618 20.72C107.618 18.3733 106.711 17.2 104.898 17.2C103.938 17.2 103.159 17.5413 102.562 18.224C101.965 18.8853 101.602 19.7173 101.474 20.72H107.618Z"
-        fill="white"
-      />
-      <defs>
-        <clipPath id="clip0_48_26148">
-          <rect
-            width="28"
-            height="28"
-            fill="white"
-            transform="translate(0 4.5)"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
--- a/dashboard/15-final/public/hero-desktop.png
+++ b/dashboard/15-final/public/hero-desktop.png
--- a/dashboard/15-final/public/hero-mobile.png
+++ b/dashboard/15-final/public/hero-mobile.png
--- a/dashboard/15-final/public/hero.png
+++ b/dashboard/15-final/public/hero.png