refactor(webapp): extract Title component

This way, we don't need to duplicate text styles for headings (font size, color, weight).
JoosepAlviste · Oct 10, 2023 · dc15093 · dc15093
1 parent bea9fa1
commit dc15093
Show file tree

Hide file tree

Showing 16 changed files with 103 additions and 32 deletions.
diff --git a/apps/webapp/src/components/HomePage/HomePage.css.ts b/apps/webapp/src/components/HomePage/HomePage.css.ts
@@ -33,9 +33,6 @@ export const titleSide = style({
 })
 
 export const title = style({
-  color: vars.color.text,
-  fontSize: '2rem',
-  fontWeight: vars.fontWeight.medium,
   paddingBottom: '0.75rem',
 })
 

diff --git a/apps/webapp/src/components/HomePage/HomePage.tsx b/apps/webapp/src/components/HomePage/HomePage.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { Title } from '../Title'
+
 import FunArrow from './FunArrow.svg?react'
 import HomeCinema from './HomeCinema.svg?react'
 import * as s from './HomePage.css'
@@ -16,7 +18,9 @@ export const HomePage = () => (
 
     <div className={s.container}>
       <div className={s.titleSide}>
-        <div className={s.title}>Watching many shows at a time?</div>
+        <Title as="h1" size="l" className={s.title}>
+          Watching many shows at a time?
+        </Title>
         <h1 className={s.subtitle}>
           Always know which episode to watch next. Keep track of your series and
           seen episodes with{' '}

diff --git a/apps/webapp/src/components/Title/Title.css.ts b/apps/webapp/src/components/Title/Title.css.ts
@@ -0,0 +1,36 @@
+import { style, styleVariants } from '@vanilla-extract/css'
+
+import { vars } from '#/styles/theme.css'
+
+export const title = style({
+  color: vars.color.text,
+  fontWeight: vars.fontWeight.medium,
+})
+
+export const titleSize = styleVariants({
+  l: {
+    fontSize: '2rem',
+  },
+
+  m: {
+    fontSize: '1.5rem',
+  },
+
+  s: {
+    fontSize: '1rem',
+  },
+
+  xs: {
+    fontSize: '0.875rem',
+  },
+})
+
+export const titleVariant = styleVariants({
+  default: {
+    color: vars.color.text,
+  },
+
+  tertiary: {
+    color: vars.color.textTertiary,
+  },
+})
diff --git a/apps/webapp/src/components/Title/Title.tsx b/apps/webapp/src/components/Title/Title.tsx
@@ -0,0 +1,28 @@
+import classNames from 'classnames'
+import React, { type HTMLAttributes } from 'react'
+
+import * as s from './Title.css'
+
+type TitleProps = HTMLAttributes<HTMLHeadingElement> & {
+  as?: 'h1' | 'h2' | 'h3'
+  size?: keyof typeof s.titleSize
+  variant?: keyof typeof s.titleVariant
+}
+
+export const Title = ({
+  as: Component = 'h1',
+  size = 'm',
+  variant = 'default',
+  className,
+  ...rest
+}: TitleProps) => (
+  <Component
+    className={classNames(
+      s.title,
+      s.titleSize[size],
+      s.titleVariant[variant],
+      className,
+    )}
+    {...rest}
+  />
+)
diff --git a/apps/webapp/src/components/Title/index.ts b/apps/webapp/src/components/Title/index.ts
@@ -0,0 +1 @@
+export * from './Title'
diff --git a/apps/webapp/src/components/index.ts b/apps/webapp/src/components/index.ts
@@ -11,5 +11,6 @@ export * from './IconButton'
 export * from './Tooltip'
 export * from './Error'
 export * from './AlertDialog'
+export * from './Title'
 
 export * from './HomePage'
diff --git a/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts b/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts
@@ -17,8 +17,6 @@ export const formSide = style({
 })
 
 export const title = style({
-  fontSize: '1.5rem',
-  fontWeight: vars.fontWeight.medium,
   marginBottom: '2rem',
 })
 

diff --git a/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.tsx b/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.tsx
@@ -1,5 +1,7 @@
 import React, { type ReactElement } from 'react'
 
+import { Title } from '#/components'
+
 import * as s from './AuthLayout.css'
 import HorrorMovie from './HorrorMovie.svg?react'
 
@@ -12,7 +14,7 @@ export const AuthLayout = ({ children, otherAction }: AuthLayoutProps) => {
   return (
     <div className={s.container}>
       <div className={s.formSide}>
-        <h1 className={s.title}>Serieslist</h1>
+        <Title className={s.title}>Serieslist</Title>
 
         {children}
         <div className={s.separatorContainer}>

diff --git a/apps/webapp/src/features/search/components/Search/Search.css.ts b/apps/webapp/src/features/search/components/Search/Search.css.ts
@@ -69,9 +69,6 @@ export const searchTitle = style({
   paddingRight: '1.25rem',
   paddingBottom: '0.25rem',
   paddingLeft: '1.25rem',
-  fontWeight: vars.fontWeight.medium,
-  color: vars.color.textTertiary,
-  fontSize: '0.875rem',
 })
 
 export const searchResultsList = style({

diff --git a/apps/webapp/src/features/search/components/Search/Search.tsx b/apps/webapp/src/features/search/components/Search/Search.tsx
@@ -13,7 +13,7 @@ import React, {
 import Highlighter from 'react-highlight-words'
 import { navigate } from 'vike/client/router'
 
-import { Icon, LoadingSpinner } from '#/components'
+import { Icon, LoadingSpinner, Title } from '#/components'
 import { SeriesPoster } from '#/features/series'
 import { graphql } from '#/generated/gql'
 import { useDebouncedCallback, useSSR } from '#/hooks'
@@ -295,7 +295,14 @@ export const Search = ({
             } else if (searchResults.length) {
               return (
                 <>
-                  <div className={s.searchTitle}>Series</div>
+                  <Title
+                    as="h3"
+                    size="xs"
+                    variant="tertiary"
+                    className={s.searchTitle}
+                  >
+                    Series
+                  </Title>
                   <ul className={s.searchResultsList}>
                     {searchResults.map((series, index) => (
                       <li

diff --git a/apps/webapp/src/features/series/components/SeriesDetailsPage/SeriesDetailsPage.css.ts b/apps/webapp/src/features/series/components/SeriesDetailsPage/SeriesDetailsPage.css.ts
@@ -49,11 +49,6 @@ export const titleContainer = style({
   },
 })
 
-export const title = style({
-  fontSize: '2rem',
-  fontWeight: vars.fontWeight.medium,
-})
-
 export const imdbLogo = style({
   height: '2rem',
   width: '2rem',
@@ -122,8 +117,6 @@ export const seasons = style({
 
 export const seasonsTitle = style({
   marginBottom: '1rem',
-  fontSize: '1.375rem',
-  fontWeight: vars.fontWeight.medium,
 })
 
 export const seasonTabsContainer = style({
@@ -201,6 +194,4 @@ export const episodesTitleRow = style({
 
 export const episodesTitle = style({
   flex: 1,
-  fontSize: '1rem',
-  fontWeight: vars.fontWeight.medium,
 })
diff --git a/apps/webapp/src/features/series/components/SeriesDetailsPage/SeriesDetailsPage.tsx b/apps/webapp/src/features/series/components/SeriesDetailsPage/SeriesDetailsPage.tsx
@@ -3,7 +3,7 @@ import * as Tabs from '@radix-ui/react-tabs'
 import { isAfter } from 'date-fns'
 import React from 'react'
 
-import { Button, Tooltip } from '#/components'
+import { Button, Title, Tooltip } from '#/components'
 import { useAuthenticatedUser } from '#/features/auth'
 import { graphql } from '#/generated/gql'
 import { useToast } from '#/hooks'
@@ -133,7 +133,7 @@ export const SeriesDetailsPage = ({ seriesId }: SeriesDetailsPageProps) => {
           <SeriesPoster series={series} size="l" className={s.poster} />
 
           <div className={s.titleContainer}>
-            <h1 className={s.title}>{series.title}</h1>
+            <Title size="l">{series.title}</Title>
             {series.imdbId && (
               <a
                 href={`https://imdb.com/title/${series.imdbId}`}
@@ -172,7 +172,9 @@ export const SeriesDetailsPage = ({ seriesId }: SeriesDetailsPageProps) => {
             defaultValue={firstNonZeroSeason?.id}
             className={s.seasons}
           >
-            <h2 className={s.seasonsTitle}>Seasons</h2>
+            <Title as="h2" className={s.seasonsTitle}>
+              Seasons
+            </Title>
 
             <div className={s.seasonTabsContainer}>
               <Tabs.List className={s.seasonTabs}>
@@ -196,7 +198,9 @@ export const SeriesDetailsPage = ({ seriesId }: SeriesDetailsPageProps) => {
               return (
                 <Tabs.Content key={season.id} value={season.id}>
                   <div className={s.episodesTitleRow}>
-                    <h3 className={s.episodesTitle}>{season.title}</h3>
+                    <Title as="h3" size="s" className={s.episodesTitle}>
+                      {season.title}
+                    </Title>
 
                     {currentUser && (
                       <Tooltip

diff --git a/apps/webapp/src/pages/about/index.page.css.ts b/apps/webapp/src/pages/about/index.page.css.ts
@@ -15,8 +15,6 @@ export const page = style({
 })
 
 export const title = style({
-  fontSize: '1.5rem',
-  fontWeight: vars.fontWeight.medium,
   marginBottom: '1rem',
 })
 

diff --git a/apps/webapp/src/pages/about/index.page.tsx b/apps/webapp/src/pages/about/index.page.tsx
@@ -1,11 +1,15 @@
 import React from 'react'
 
+import { Title } from '#/components'
+
 import * as s from './index.page.css'
 import TMDBLogo from './TMDBLogo.svg?react'
 
 export const Page = () => (
   <div className={s.page}>
-    <h1 className={s.title}>About Serieslist</h1>
+    <Title as="h1" className={s.title}>
+      About Serieslist
+    </Title>
     <p>
       This product uses the TMDB API but is not endorsed or certified by TMDB.
       <a target="_blank" href="https://www.themoviedb.org/" rel="noreferrer">

diff --git a/apps/webapp/src/renderer/_error.page.css.ts b/apps/webapp/src/renderer/_error.page.css.ts
@@ -21,9 +21,7 @@ export const illustration = style({
 })
 
 export const title = style({
-  fontSize: '2rem',
   marginBottom: '1rem',
-  color: vars.color.text,
 })
 
 export const text = style({

diff --git a/apps/webapp/src/renderer/_error.page.tsx b/apps/webapp/src/renderer/_error.page.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { Title } from '#/components'
 import { usePageContext } from '#/hooks'
 
 import Illustration404 from './404.svg?react'
@@ -13,15 +14,19 @@ export const Page = () => {
     return (
       <div className={s.container}>
         <Illustration404 className={s.illustration} />
-        <h1 className={s.title}>Page not found</h1>
+        <Title size="l" className={s.title}>
+          Page not found
+        </Title>
         {abortReason ? <p className={s.text}>{abortReason}</p> : null}
       </div>
     )
   } else {
     return (
       <div className={s.container}>
         <ServerDown className={s.illustration} />
-        <h1 className={s.title}>Internal server error</h1>
+        <Title size="l" className={s.title}>
+          Internal server error
+        </Title>
         <p className={s.text}>Something went wrong...</p>
       </div>
     )