switch to custom classes

denoland · Dec 10, 2023 · fe7f8f3 · fe7f8f3
1 parent d081bd9
commit fe7f8f3
Show file tree

Hide file tree

Showing 17 changed files with 77 additions and 102 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,12 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import {
-  ACTIVE_LINK_STYLES,
-  LINK_STYLES,
-  NAV_STYLES,
-  SITE_BAR_STYLES,
-  SITE_NAME,
-} from "@/utils/constants.ts";
-import classnames from "npm:[email protected]";
+import { SITE_NAME } from "@/utils/constants.ts";
 import IconBrandDiscord from "tabler_icons_tsx/brand-discord.tsx";
 import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx";
 import IconRss from "tabler_icons_tsx/rss.tsx";
@@ -66,33 +59,31 @@ export interface FooterProps {
 
 export default function Footer(props: FooterProps) {
   return (
-    <footer
-      class={`${SITE_BAR_STYLES} flex-col md:flex-row mt-8`}
-    >
+    <footer class="site-bar-styles flex-col md:flex-row mt-8">
       <p>© {SITE_NAME}</p>
-      <nav class={NAV_STYLES}>
+      <nav class="nav-styles">
         <a
           href="/blog"
-          class={classnames(LINK_STYLES, ACTIVE_LINK_STYLES)}
+          class="link-styles active-link-styles"
         >
           Blog
         </a>
-        <a href="/feed" aria-label="Deno Hunt RSS Feed" class={LINK_STYLES}>
+        <a href="/feed" aria-label="Deno Hunt RSS Feed" class="link-styles">
           <IconRss class="h-6 w-6" />
         </a>
         <a
           href="https://discord.gg/deno"
           target="_blank"
           aria-label="Deno SaaSKit on Discord"
-          class={LINK_STYLES}
+          class="link-styles"
         >
           <IconBrandDiscord class="h-6 w-6" />
         </a>
         <a
           href="https://github.com/denoland/saaskit"
           target="_blank"
           aria-label="Deno SaaSKit repo on GitHub"
-          class={LINK_STYLES}
+          class="link-styles"
         >
           <IconBrandGithub class="h-6 w-6" />
         </a>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,15 +1,8 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import {
-  ACTIVE_ANCESTOR_LINK_STYLES,
-  ACTIVE_LINK_STYLES,
-  LINK_STYLES,
-  SITE_BAR_STYLES,
-  SITE_NAME,
-} from "@/utils/constants.ts";
+import { SITE_NAME } from "@/utils/constants.ts";
 import { isStripeEnabled } from "@/utils/stripe.ts";
 import IconX from "tabler_icons_tsx/x.tsx";
 import IconMenu from "tabler_icons_tsx/menu-2.tsx";
-import classnames from "npm:[email protected]";
 import { User } from "@/utils/db.ts";
 
 export interface HeaderProps {
@@ -23,14 +16,8 @@ export interface HeaderProps {
 }
 
 export default function Header(props: HeaderProps) {
-  const NAV_ITEM = "text-gray-500 px-3 py-4 sm:py-2";
   return (
-    <header
-      class={classnames(
-        SITE_BAR_STYLES,
-        "flex-col sm:flex-row",
-      )}
-    >
+    <header class="site-bar-styles flex-col sm:flex-row">
       <input
         type="checkbox"
         id="nav-toggle"
@@ -75,15 +62,15 @@ export default function Header(props: HeaderProps) {
       >
         <a
           href="/dashboard"
-          class={classnames(LINK_STYLES, ACTIVE_ANCESTOR_LINK_STYLES, NAV_ITEM)}
+          class="link-styles data-[ancestor]:!text-black data-[ancestor]:!dark:text-white nav-item"
         >
           Dashboard
         </a>
         {isStripeEnabled() &&
           (
             <a
               href="/pricing"
-              class={classnames(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
+              class="link-styles data-[current]:!text-black data-[current]:!dark:text-white nav-item"
             >
               Pricing
             </a>
@@ -92,13 +79,13 @@ export default function Header(props: HeaderProps) {
           ? (
             <a
               href="/account"
-              class={classnames(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
+              class="link-styles data-[current]:!text-black data-[current]:!dark:text-white nav-item"
             >
               Account
             </a>
           )
           : (
-            <a href="/signin" class={classnames(LINK_STYLES, NAV_ITEM)}>
+            <a href="/signin" class="link-styles nav-item">
               Sign in
             </a>
           )}

diff --git a/components/TabsBar.tsx b/components/TabsBar.tsx
@@ -1,6 +1,4 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { LINK_STYLES } from "@/utils/constants.ts";
-import classnames from "npm:[email protected]";
 import { ComponentChildren } from "preact";
 
 export interface TabItemProps {
@@ -15,13 +13,11 @@ export function TabItem(props: TabItemProps) {
   return (
     <a
       href={props.path}
-      class={classnames(
-        "px-4 py-2 rounded-lg",
+      class={`px-4 py-2 rounded-lg ${
         props.active
           ? "bg-gray-100 text-black dark:bg-gray-800 dark:text-white"
-          : "",
-        LINK_STYLES,
-      )}
+          : ""
+      } link-styles`}
     >
       {props.children}
     </a>

diff --git a/islands/ItemsList.tsx b/islands/ItemsList.tsx
@@ -2,7 +2,6 @@
 import { Signal, useComputed, useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
 import { type Item } from "@/utils/db.ts";
-import { LINK_STYLES } from "@/utils/constants.ts";
 import IconInfo from "tabler_icons_tsx/info-circle.tsx";
 import { fetchValues } from "@/utils/http.ts";
 import { decodeTime } from "std/ulid/mod.ts";
@@ -167,7 +166,7 @@ export default function ItemsList(props: ItemsListProps) {
   }, []);
 
   if (isLoadingSig.value === undefined) {
-    return <p class={LINK_STYLES}>Loading...</p>;
+    return <p class="link-styles">Loading...</p>;
   }
 
   return (
@@ -185,7 +184,7 @@ export default function ItemsList(props: ItemsListProps) {
         })
         : <EmptyItemsList />}
       {cursorSig.value !== "" && (
-        <button onClick={loadMoreItems} class={LINK_STYLES}>
+        <button onClick={loadMoreItems} class="link-styles">
           {isLoadingSig.value ? "Loading..." : "Load more"}
         </button>
       )}

diff --git a/islands/UsersTable.tsx b/islands/UsersTable.tsx
@@ -3,7 +3,6 @@ import { useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
 import type { User } from "@/utils/db.ts";
 import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx";
-import { LINK_STYLES } from "@/utils/constants.ts";
 import { fetchValues } from "@/utils/http.ts";
 import { PremiumBadge } from "@/components/PremiumBadge.tsx";
 
@@ -86,7 +85,7 @@ export default function UsersTable(props: UsersTableProps) {
       {cursorSig.value !== "" && (
         <button
           onClick={loadMoreUsers}
-          class={LINK_STYLES + " p-4"}
+          class="link-styles p-4"
         >
           {isLoadingSig.value ? "Loading..." : "Load more"}
         </button>

diff --git a/routes/_404.tsx b/routes/_404.tsx
@@ -1,12 +1,11 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { HEADING_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 
 export default function NotFoundPage() {
   return (
     <main class="flex-1 p-4 flex flex-col justify-center text-center">
-      <h1 class={HEADING_STYLES}>Page not found</h1>
+      <h1 class="heading-styles">Page not found</h1>
       <p>
-        <a href="/" class={LINK_STYLES}>Return home &#8250;</a>
+        <a href="/" class="link-styles">Return home &#8250;</a>
       </p>
     </main>
   );

diff --git a/routes/_500.tsx b/routes/_500.tsx
@@ -1,14 +1,13 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import { PageProps } from "$fresh/server.ts";
-import { HEADING_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 
 export default function Error500Page(props: PageProps) {
   return (
     <main class="flex flex-1 flex-col justify-center p-4 text-center space-y-4">
-      <h1 class={HEADING_STYLES}>Server error</h1>
+      <h1 class="heading-styles">Server error</h1>
       <p>500 internal error: {(props.error as Error).message}</p>
       <p>
-        <a href="/" class={LINK_STYLES}>Return home &#8250;</a>
+        <a href="/" class="link-styles">Return home &#8250;</a>
       </p>
     </main>
   );

diff --git a/routes/account/index.tsx b/routes/account/index.tsx
@@ -1,7 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import { defineRoute } from "$fresh/server.ts";
 import type { SignedInState } from "@/plugins/session.ts";
-import { BUTTON_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 import { isStripeEnabled } from "@/utils/stripe.ts";
 import Head from "@/components/Head.tsx";
 import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx";
@@ -27,7 +26,7 @@ export default defineRoute<SignedInState>((_req, ctx) => {
               <span>
                 {sessionUser.login}
               </span>
-              <a href={`/users/${sessionUser.login}`} class={LINK_STYLES}>
+              <a href={`/users/${sessionUser.login}`} class="link-styles">
                 Go to my profile &#8250;
               </a>
             </p>
@@ -47,7 +46,7 @@ export default defineRoute<SignedInState>((_req, ctx) => {
               {isStripeEnabled() && (
                 <span>
                   <a
-                    class={LINK_STYLES}
+                    class="link-styles"
                     href={`/account/${action.toLowerCase()}`}
                   >
                     {action} &#8250;
@@ -59,7 +58,7 @@ export default defineRoute<SignedInState>((_req, ctx) => {
         </ul>
         <a
           href="/signout?success_url=/"
-          class={`${BUTTON_STYLES} block text-center`}
+          class="button-styles block text-center"
         >
           Sign out
         </a>

diff --git a/routes/blog/index.tsx b/routes/blog/index.tsx
@@ -2,7 +2,6 @@
 import { defineRoute } from "$fresh/server.ts";
 import { getPosts, type Post } from "@/utils/posts.ts";
 import Head from "@/components/Head.tsx";
-import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts";
 
 function PostCard(props: Post) {
   return (
@@ -36,7 +35,7 @@ export default defineRoute(async (_req, ctx) => {
     <>
       <Head title="Blog" href={ctx.url.href} />
       <main class="p-4 flex-1">
-        <h1 class={HEADING_WITH_MARGIN_STYLES}>Blog</h1>
+        <h1 class="heading-with-margin-styles">Blog</h1>
         <div class="divide-y">
           {posts.map((post) => <PostCard {...post} />)}
         </div>

diff --git a/routes/dashboard/stats.tsx b/routes/dashboard/stats.tsx
@@ -2,7 +2,6 @@
 import Chart from "@/islands/Chart.tsx";
 import Head from "@/components/Head.tsx";
 import TabsBar from "@/components/TabsBar.tsx";
-import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts";
 import { defineRoute } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
 
@@ -47,7 +46,7 @@ export default defineRoute((_req, ctx) => {
     <>
       <Head title="Dashboard" href={ctx.url.href} />
       <main class="flex-1 p-4 flex flex-col f-client-nav">
-        <h1 class={HEADING_WITH_MARGIN_STYLES}>Dashboard</h1>
+        <h1 class="heading-with-margin-styles">Dashboard</h1>
         <TabsBar
           links={[{
             path: "/dashboard/stats",

diff --git a/routes/dashboard/users.tsx b/routes/dashboard/users.tsx
@@ -1,7 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import Head from "@/components/Head.tsx";
 import TabsBar from "@/components/TabsBar.tsx";
-import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts";
 import UsersTable from "@/islands/UsersTable.tsx";
 import { defineRoute } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
@@ -20,7 +19,7 @@ export default defineRoute((_req, ctx) => {
         />
       </Head>
       <main class="flex-1 p-4 f-client-nav">
-        <h1 class={HEADING_WITH_MARGIN_STYLES}>Dashboard</h1>
+        <h1 class="heading-with-margin-styles">Dashboard</h1>
         <TabsBar
           links={[{
             path: "/dashboard/stats",

diff --git a/routes/pricing.tsx b/routes/pricing.tsx
@@ -1,6 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { State } from "@/plugins/session.ts";
-import { BUTTON_STYLES } from "@/utils/constants.ts";
 import { assertIsPrice, isStripeEnabled, stripe } from "@/utils/stripe.ts";
 import { formatCurrency } from "@/utils/display.ts";
 import Stripe from "stripe";
@@ -45,7 +44,7 @@ function FreePlanCard() {
       <div class="text-center">
         <a
           href="/account/manage"
-          class={`${BUTTON_STYLES} w-full rounded-md block`}
+          class="button-styles w-full rounded-md block"
         >
           Manage
         </a>
@@ -99,15 +98,15 @@ function PremiumPlanCard(props: PremiumCardPlanProps) {
         {props.isSubscribed
           ? (
             <a
-              class={`${BUTTON_STYLES} w-full rounded-md block`}
+              class="button-styles w-full rounded-md block"
               href="/account/manage"
             >
               Manage
             </a>
           )
           : (
             <a
-              class={`${BUTTON_STYLES} w-full rounded-md block`}
+              class="button-styles w-full rounded-md block"
               href="/account/upgrade"
             >
               Upgrade
@@ -152,7 +151,7 @@ function EnterprisePricingCard() {
       <div class="text-center">
         <a
           href="mailto:[email protected]"
-          class={`${BUTTON_STYLES} w-full rounded-md block`}
+          class="button-styles w-full rounded-md block"
         >
           Contact us
         </a>
@@ -180,7 +179,7 @@ export default defineRoute<State>(async (_req, ctx) => {
       <Head title="Pricing" href={ctx.url.href} />
       <main class="mx-auto max-w-5xl w-full flex-1 flex flex-col justify-center px-4">
         <div class="mb-8 text-center">
-          <h1 class="text-3xl font-bold">Pricing</h1>
+          <h1 class="heading-styles">Pricing</h1>
           <p class="text-gray-500">Choose the plan that suites you</p>
         </div>
         <div class="flex flex-col md:flex-row gap-4">

diff --git a/routes/submit.tsx b/routes/submit.tsx
@@ -1,5 +1,4 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { HEADING_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
 import Head from "@/components/Head.tsx";
 import IconCheckCircle from "tabler_icons_tsx/circle-check.tsx";
 import IconCircleX from "tabler_icons_tsx/circle-x.tsx";
@@ -49,7 +48,7 @@ export default defineRoute<State>((_req, ctx) => {
       <Head title="Submit" href={ctx.url.href} />
       <main class="flex-1 flex flex-col justify-center mx-auto w-full space-y-16 p-4 max-w-6xl">
         <div class="text-center">
-          <h1 class={HEADING_STYLES}>
+          <h1 class="heading-styles">
             Share your project
           </h1>
           <p class="text-gray-500">
@@ -91,7 +90,7 @@ export default defineRoute<State>((_req, ctx) => {
               </label>
               <input
                 id="submit_title"
-                class={`${INPUT_STYLES} w-full mt-2`}
+                class="input-styles w-full mt-2"
                 type="text"
                 name="title"
                 required
@@ -108,7 +107,7 @@ export default defineRoute<State>((_req, ctx) => {
                 URL
               </label>
               <input
-                class={`${INPUT_STYLES} w-full mt-2`}
+                class="input-styles w-full mt-2"
                 type="url"
                 name="url"
                 required