refactor: design and code cleanups (#365)

* cleanups

* fix

* work

* fix

* tweaks

components/Header.tsx

@@ -1,11 +1,10 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import {
-  BUTTON_STYLES,
   LINK_STYLES,
   NAV_STYLES,
   SITE_BAR_STYLES,
+  SITE_NAME,
 } from "@/utils/constants.ts";
-import Logo from "./Logo.tsx";
 import { stripe } from "@/utils/payments.ts";
 import { Bell, CircleFilled } from "./Icons.tsx";
 
@@ -15,7 +14,13 @@ export default function Header(
   return (
     <header class={SITE_BAR_STYLES}>
       <a href="/">
-        <Logo height="48" />
+        <img
+          height="48"
+          width="48"
+          src="/logo.webp"
+          alt={SITE_NAME + " logo"}
+          class="h-12 w-12"
+        />
       </a>
       <nav class={NAV_STYLES}>
         {stripe ? <a href="/pricing" class={LINK_STYLES}>Pricing</a> : null}

components/ItemSummary.tsx

@@ -16,7 +16,7 @@ export default function ItemSummary(props: ItemSummaryProps) {
         item={props.item}
         isVoted={props.isVoted}
       />
-      <div>
+      <div class="space-y-1">
         <span class="mr-2">
           <a
             class="hover:underline"

islands/VoteButton.tsx

@@ -30,14 +30,14 @@ export default function VoteButton(props: VoteButtonProps) {
   }
 
   return (
-    <div
+    <button
       class={(isVoted.value ? "text-pink-700" : "text-inherit") +
         " pr-2 text-center"}
       onClick={onClick}
     >
       ▲
       <br />
       {score.value}
-    </div>
+    </button>
   );
 }

routes/_404.tsx

@@ -1,10 +1,7 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import Logo from "@/components/Logo.tsx";
-
 export default function NotFoundPage() {
   return (
     <main class="flex-1 flex flex-col justify-center p-4 text-center space-y-4">
-      <Logo />
       <h1 class="text-4xl inline-block font-bold">Page not found</h1>
       <p class="text-xl text-blue-900">
         <a href="/">Return home</a>

routes/_500.tsx

@@ -1,11 +1,9 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import { ErrorPageProps } from "$fresh/server.ts";
-import Logo from "@/components/Logo.tsx";
 
 export default function Error500Page(props: ErrorPageProps) {
   return (
     <main class="flex flex-col justify-center p-4 text-center space-y-4">
-      <Logo />
       <h1 class="text-4xl inline-block font-bold">Server error</h1>
       <p>500 internal error: {(props.error as Error).message}</p>
       <p class="text-xl text-blue-900">

routes/pricing.tsx

@@ -63,9 +63,9 @@ function FreePlanCard() {
     <div class={CARD_STYLES}>
       <div class="flex-1 space-y-4">
         <div>
-          <h3 class="text-xl font-bold">
+          <h2 class="text-xl font-bold">
             Free
-          </h3>
+          </h2>
           <p class="text-gray-500">
             Discover and share your favorite Deno projects.
           </p>
@@ -107,9 +107,9 @@ function PremiumPlanCard(
     <div class={CARD_STYLES + " border-primary border"}>
       <div class="flex-1 space-y-4">
         <div>
-          <h3 class="text-xl font-bold">
+          <h2 class="text-xl font-bold">
             {props.product.name}
-          </h3>
+          </h2>
           <p class="text-gray-500">
             {props.product.description}
           </p>
@@ -165,9 +165,9 @@ function EnterprisePricingCard() {
     <div class={CARD_STYLES}>
       <div class="flex-1 space-y-4">
         <div>
-          <h3 class="text-xl font-bold">
+          <h2 class="text-xl font-bold">
             Enterprise
-          </h3>
+          </h2>
           <p class="text-gray-500">
             Make the Deno Hunt experience yours.
           </p>