Merge pull request #121 from denoland/remove-styles-prefix

refactor: remove `BASE_` prefix from constants names
denoland · Apr 26, 2023 · d6b56c3 · d6b56c3
2 parents 6b85ad7 + f4f8c47
commit d6b56c3
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 33 deletions.
diff --git a/components/AuthForm.tsx b/components/AuthForm.tsx
@@ -1,5 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { BASE_BUTTON_STYLES, BASE_INPUT_STYLES } from "@/utils/constants.ts";
+import { BUTTON_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
 
 interface AuthFormProps {
   type: "Login" | "Signup";
@@ -13,16 +13,16 @@ export default function AuthForm({ type }: AuthFormProps) {
         name="email"
         type="email"
         required
-        class={`${BASE_INPUT_STYLES} w-full`}
+        class={`${INPUT_STYLES} w-full`}
       />
       <input
         placeholder="Password"
         name="password"
         type="password"
         required
-        class={`${BASE_INPUT_STYLES} w-full`}
+        class={`${INPUT_STYLES} w-full`}
       />
-      <button type="submit" class={`${BASE_BUTTON_STYLES} w-full`}>
+      <button type="submit" class={`${BUTTON_STYLES} w-full`}>
         {type}
       </button>
     </form>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,9 +1,9 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { ComponentChild, ComponentChildren, JSX } from "preact";
 import {
-  BASE_BUTTON_STYLES,
-  BASE_SITE_WIDTH_STYLES,
+  BUTTON_STYLES,
   SITE_NAME,
+  SITE_WIDTH_STYLES,
 } from "@/utils/constants.ts";
 import Logo from "./Logo.tsx";
 
@@ -34,7 +34,7 @@ function Header(props: JSX.HTMLAttributes<HTMLElement>) {
   return (
     <header
       {...props}
-      class={`p-8 justify-between ${BASE_SITE_WIDTH_STYLES} flex z-10 ${
+      class={`p-8 justify-between ${SITE_WIDTH_STYLES} flex z-10 ${
         props.class ?? ""
       }`}
     >
@@ -50,7 +50,7 @@ function Footer(props: JSX.HTMLAttributes<HTMLElement>) {
   return (
     <footer
       {...props}
-      class={`flex flex-col md:flex-row p-8 justify-between gap-y-4 ${BASE_SITE_WIDTH_STYLES} ${
+      class={`flex flex-col md:flex-row p-8 justify-between gap-y-4 ${SITE_WIDTH_STYLES} ${
         props.class ?? ""
       }`}
     >
@@ -71,7 +71,7 @@ export default function Layout(props: LayoutProps) {
   const headerNavItems = [
     {
       href: "/submit",
-      inner: <span class={BASE_BUTTON_STYLES}>Submit</span>,
+      inner: <span class={BUTTON_STYLES}>Submit</span>,
     },
     props.isLoggedIn
       ? {

diff --git a/routes/_404.tsx b/routes/_404.tsx
@@ -1,14 +1,14 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import Head from "@/components/Head.tsx";
 import Logo from "@/components/Logo.tsx";
-import { BASE_SITE_WIDTH_STYLES } from "@/utils/constants.ts";
+import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
 
 export default function NotFoundPage() {
   return (
     <>
       <Head title="Page not found" />
       <div
-        class={`h-screen flex flex-col justify-center ${BASE_SITE_WIDTH_STYLES} p-4 text-center space-y-4`}
+        class={`h-screen flex flex-col justify-center ${SITE_WIDTH_STYLES} p-4 text-center space-y-4`}
       >
         <Logo />
         <h1 class="text-4xl inline-block font-bold">Page not found</h1>

diff --git a/routes/_500.tsx b/routes/_500.tsx
@@ -2,14 +2,14 @@
 import Head from "@/components/Head.tsx";
 import { ErrorPageProps } from "$fresh/server.ts";
 import Logo from "@/components/Logo.tsx";
-import { BASE_SITE_WIDTH_STYLES } from "@/utils/constants.ts";
+import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
 
 export default function Error500Page(props: ErrorPageProps) {
   return (
     <>
       <Head title="Server error" />
       <div
-        class={`h-screen flex flex-col justify-center ${BASE_SITE_WIDTH_STYLES} p-4 text-center space-y-4`}
+        class={`h-screen flex flex-col justify-center ${SITE_WIDTH_STYLES} p-4 text-center space-y-4`}
       >
         <Logo />
         <h1 class="text-4xl inline-block font-bold">Server error</h1>

diff --git a/routes/account/index.tsx b/routes/account/index.tsx
@@ -4,7 +4,7 @@ import Head from "@/components/Head.tsx";
 import type { Database } from "@/utils/supabase_types.ts";
 import Layout from "@/components/Layout.tsx";
 import type { AccountState } from "./_middleware.ts";
-import { BASE_BUTTON_STYLES } from "../../utils/constants.ts";
+import { BUTTON_STYLES } from "../../utils/constants.ts";
 
 interface AccountPageData extends AccountState {
   customer: Database["public"]["Tables"]["customers"]["Row"];
@@ -50,7 +50,7 @@ export default function AccountPage(props: PageProps<AccountPageData>) {
           </ul>
           <a
             href="/logout"
-            class={`${BASE_BUTTON_STYLES} block text-center mt-8`}
+            class={`${BUTTON_STYLES} block text-center mt-8`}
           >
             Logout
           </a>

diff --git a/routes/blog/[slug].tsx b/routes/blog/[slug].tsx
@@ -5,7 +5,7 @@ import { Head } from "$fresh/runtime.ts";
 import { getPost, Post } from "@/utils/posts.ts";
 import Meta from "@/components/Meta.tsx";
 import Layout from "@/components/Layout.tsx";
-import { BASE_SITE_WIDTH_STYLES } from "@/utils/constants.ts";
+import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
 import type { State } from "@/routes/_middleware.ts";
 
 interface BlogPostPageData extends State {
@@ -40,7 +40,7 @@ export default function PostPage(props: PageProps<BlogPostPageData>) {
         />
       </Head>
       <Layout isLoggedIn={props.data.isLoggedIn}>
-        <main class={`${BASE_SITE_WIDTH_STYLES} px-8 pt-16 flex-1`}>
+        <main class={`${SITE_WIDTH_STYLES} px-8 pt-16 flex-1`}>
           <h1 class="text-5xl font-bold">{post.title}</h1>
           <time class="text-gray-500">
             {date}

diff --git a/routes/blog/index.tsx b/routes/blog/index.tsx
@@ -6,7 +6,7 @@ import { getPosts, Post } from "@/utils/posts.ts";
 import { SITE_NAME } from "@/utils/constants.ts";
 import Head from "@/components/Head.tsx";
 import Layout from "@/components/Layout.tsx";
-import { BASE_SITE_WIDTH_STYLES } from "@/utils/constants.ts";
+import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
 import type { State } from "@/routes/_middleware.ts";
 
 interface BlogPageData extends State {
@@ -29,7 +29,7 @@ export default function BlogPage(props: PageProps<BlogPageData>) {
         href={props.url.href}
       />
       <Layout isLoggedIn={props.data.isLoggedIn}>
-        <main class={`${BASE_SITE_WIDTH_STYLES} px-8 pt-16 flex-1`}>
+        <main class={`${SITE_WIDTH_STYLES} px-8 pt-16 flex-1`}>
           <h1 class="text-5xl font-bold">Blog</h1>
           <div class="mt-8">
             {props.data.posts.map((post) => <PostCard post={post} />)}

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -1,7 +1,7 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import { type SupabaseClient } from "@/utils/supabase.ts";
-import { BASE_SITE_WIDTH_STYLES } from "@/utils/constants.ts";
+import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
 import Layout from "@/components/Layout.tsx";
 import Head from "@/components/Head.tsx";
 import type { Database } from "@/utils/supabase_types.ts";
@@ -65,7 +65,7 @@ export interface ItemListProps {
 
 export function ItemList(props: ItemListProps) {
   return (
-    <div class={`${BASE_SITE_WIDTH_STYLES} divide-y flex-1 px-8`}>
+    <div class={`${SITE_WIDTH_STYLES} divide-y flex-1 px-8`}>
       {props.items.map((item) => <ItemSummary {...item} />)}
     </div>
   );

diff --git a/routes/login/index.tsx b/routes/login/index.tsx
@@ -5,7 +5,7 @@ import Head from "@/components/Head.tsx";
 import AuthForm from "@/components/AuthForm.tsx";
 import OAuthLoginButton from "@/components/OAuthLoginButton.tsx";
 import { GitHub } from "@/components/Icons.tsx";
-import { BASE_NOTICE_STYLES } from "@/utils/constants.ts";
+import { NOTICE_STYLES } from "@/utils/constants.ts";
 import { REDIRECT_PATH_AFTER_LOGIN } from "@/utils/constants.ts";
 import type { State } from "@/routes/_middleware.ts";
 
@@ -73,7 +73,7 @@ export default function LoginPage(props: PageProps) {
             <Logo class="mb-8" />
           </a>
           {errorMessage && POSSIBLE_ERROR_MESSAGES.has(errorMessage) && (
-            <div class={BASE_NOTICE_STYLES}>{errorMessage}</div>
+            <div class={NOTICE_STYLES}>{errorMessage}</div>
           )}
           <AuthForm type="Login" />
           <hr class="my-4" />

diff --git a/routes/signup.tsx b/routes/signup.tsx
@@ -5,7 +5,7 @@ import AuthForm from "@/components/AuthForm.tsx";
 import Logo from "@/components/Logo.tsx";
 import OAuthLoginButton from "@/components/OAuthLoginButton.tsx";
 import { GitHub } from "@/components/Icons.tsx";
-import { BASE_NOTICE_STYLES } from "@/utils/constants.ts";
+import { NOTICE_STYLES } from "@/utils/constants.ts";
 import type { Handlers } from "$fresh/server.ts";
 import { REDIRECT_PATH_AFTER_LOGIN } from "@/utils/constants.ts";
 import type { State } from "./_middleware.ts";
@@ -57,7 +57,7 @@ export default function SignupPage(props: PageProps) {
             <Logo class="mb-8" />
           </a>
           {errorMessage && POSSIBLE_ERROR_MESSAGES.has(errorMessage) && (
-            <div class={BASE_NOTICE_STYLES}>{errorMessage}</div>
+            <div class={NOTICE_STYLES}>{errorMessage}</div>
           )}
           <AuthForm type="Signup" />
           <hr class="my-4" />

diff --git a/routes/submit.tsx b/routes/submit.tsx
@@ -2,7 +2,7 @@
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import Head from "@/components/Head.tsx";
 import Layout from "@/components/Layout.tsx";
-import { BASE_BUTTON_STYLES, BASE_INPUT_STYLES } from "@/utils/constants.ts";
+import { BUTTON_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
 import type { SupabaseClient } from "@/utils/supabase.ts";
 import type { Database } from "@/utils/supabase_types.ts";
 import type { State } from "@/routes/_middleware.ts";
@@ -49,20 +49,20 @@ function Form() {
   return (
     <form class=" space-y-2" method="post">
       <input
-        class={BASE_INPUT_STYLES}
+        class={INPUT_STYLES}
         type="text"
         name="title"
         required
         placeholder="Title"
       />
       <input
-        class={BASE_INPUT_STYLES}
+        class={INPUT_STYLES}
         type="url"
         name="url"
         required
         placeholder="URL"
       />
-      <button class={`${BASE_BUTTON_STYLES} block w-full`} type="submit">
+      <button class={`${BUTTON_STYLES} block w-full`} type="submit">
         Submit
       </button>
     </form>

diff --git a/utils/constants.ts b/utils/constants.ts
@@ -10,10 +10,10 @@ export const STRIPE_PREMIUM_PLAN_PRICE_ID = "price_1MxmZBLtShjVFzl88qok3U5D";
  * 1. Writing custom classes in Tailwind CSS (see https://tailwindcss.com/docs/reusing-styles#compared-to-css-abstractions)
  * 2. Writing custom components which offer no additional funtionality beyond styling
  */
-export const BASE_BUTTON_STYLES =
+export const BUTTON_STYLES =
   "px-4 py-2 bg-pink-700 hover:bg-white text-white hover:text-pink-700 text-lg rounded-lg border-2 border-pink-700 transition duration-300 disabled:(opacity-50 cursor-not-allowed)";
-export const BASE_INPUT_STYLES =
+export const INPUT_STYLES =
   "px-4 py-2 bg-white rounded rounded-lg outline-none w-full border-1 border-gray-300 hover:border-black transition duration-300 disabled:(opacity-50 cursor-not-allowed)";
-export const BASE_NOTICE_STYLES =
+export const NOTICE_STYLES =
   "px-4 py-2 rounded-lg bg-yellow-100 text-yellow-700 mb-4";
-export const BASE_SITE_WIDTH_STYLES = "mx-auto max-w-7xl w-full";
+export const SITE_WIDTH_STYLES = "mx-auto max-w-7xl w-full";