replace Typography component with tailwind classes

commaai · Jun 16, 2024 · 72bae77 · 72bae77
1 parent 7c1c6e2
commit 72bae77
Show file tree

Hide file tree

Showing 16 changed files with 103 additions and 246 deletions.
diff --git a/src/components/DeviceStatistics.tsx b/src/components/DeviceStatistics.tsx
@@ -5,8 +5,6 @@ import clsx from 'clsx'
 import { getDeviceStats } from '~/api/devices'
 import { formatDistance, formatDuration } from '~/utils/date'
 
-import Typography from '~/components/material/Typography'
-
 type DeviceStatisticsProps = {
   class?: string
   dongleId: string
@@ -19,28 +17,18 @@ const DeviceStatistics: VoidComponent<DeviceStatisticsProps> = (props) => {
   return (
     <div class={clsx('flex h-10 w-full gap-8', props.class)}>
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Distance
-        </Typography>
-        <Typography variant="label-lg">
-          {formatDistance(allTime()?.distance)}
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Distance</span>
+        <span class="text-label-lg font-mono uppercase">{formatDistance(allTime()?.distance)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Duration
-        </Typography>
-        <Typography variant="label-lg">
-          {formatDuration(allTime()?.minutes)}
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Duration</span>
+        <span class="text-label-lg font-mono uppercase">{formatDuration(allTime()?.minutes)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Routes
-        </Typography>
-        <Typography variant="label-lg">{allTime()?.routes ?? 0}</Typography>
+        <span class="text-body-sm text-on-surface-variant">Routes</span>
+        <span class="text-label-lg font-mono uppercase">{allTime()?.routes ?? 0}</span>
       </div>
     </div>
   )

diff --git a/src/components/RouteStaticMap.tsx b/src/components/RouteStaticMap.tsx
@@ -8,7 +8,6 @@ import { getThemeId } from '~/theme'
 import type { Route } from '~/types'
 
 import Icon from '~/components/material/Icon'
-import Typography from '~/components/material/Typography'
 
 const loadImage = (url: string | undefined): Promise<string | undefined> => {
   if (!url) {
@@ -46,7 +45,7 @@ const State = (props: {
         props.opaque && 'bg-surface text-on-surface',
       )}
     >
-      <Typography variant="label-sm">{props.children}</Typography>
+      <span class="text-label-sm">{props.children}</span>
       {props.trailing}
     </div>
   )

diff --git a/src/components/RouteStatistics.tsx b/src/components/RouteStatistics.tsx
@@ -6,8 +6,6 @@ import { TimelineStatistics, getTimelineStatistics } from '~/api/derived'
 import type { Route } from '~/types'
 import { formatRouteDistance, formatRouteDuration } from '~/utils/date'
 
-import Typography from '~/components/material/Typography'
-
 const formatEngagement = (timeline?: TimelineStatistics): string => {
   if (!timeline) return ''
   const { engagedDuration, duration } = timeline
@@ -29,42 +27,26 @@ const RouteStatistics: VoidComponent<RouteStatisticsProps> = (props) => {
   return (
     <div class={clsx('flex size-full items-stretch gap-8', props.class)}>
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Distance
-        </Typography>
-        <Typography variant="label-lg">
-          {formatRouteDistance(props.route)}
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Distance</span>
+        <span class="text-label-lg font-mono uppercase">{formatRouteDistance(props.route)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Duration
-        </Typography>
-        <Typography variant="label-lg">
-          {formatRouteDuration(props.route)}
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Duration</span>
+        <span class="text-label-lg font-mono uppercase">{formatRouteDuration(props.route)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          Engaged
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">Engaged</span>
         <Suspense>
-          <Typography variant="label-lg">
-            {formatEngagement(timeline())}
-          </Typography>
+          <span class="text-label-lg font-mono uppercase">{formatEngagement(timeline())}</span>
         </Suspense>
       </div>
 
       <div class="flex flex-col justify-between">
-        <Typography variant="body-sm" color="on-surface-variant">
-          User flags
-        </Typography>
+        <span class="text-body-sm text-on-surface-variant">User flags</span>
         <Suspense>
-          <Typography variant="label-lg">
-            {formatUserFlags(timeline())}
-          </Typography>
+          <span class="text-label-lg font-mono uppercase">{formatUserFlags(timeline())}</span>
         </Suspense>
       </div>
     </div>

diff --git a/src/components/material/Button.tsx b/src/components/material/Button.tsx
@@ -3,7 +3,6 @@ import { splitProps } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase, { ButtonBaseProps } from './ButtonBase'
-import Typography from './Typography'
 
 type ButtonProps = ButtonBaseProps & {
   color?: 'primary' | 'secondary' | 'tertiary' | 'error'
@@ -42,7 +41,7 @@ const Button: ParentComponent<ButtonProps> = (props) => {
       {...rest}
     >
       {props.leading}
-      <Typography variant="label-lg">{props.children}</Typography>
+      <span class="text-label-lg">{props.children}</span>
       {props.trailing}
     </ButtonBase>
   )

diff --git a/src/components/material/Card.tsx b/src/components/material/Card.tsx
@@ -2,7 +2,6 @@ import type { ParentComponent, JSXElement, VoidComponent } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase from '~/components/material/ButtonBase'
-import Typography from '~/components/material/Typography'
 
 type CardHeaderProps = {
   class?: string
@@ -19,12 +18,8 @@ export const CardHeader: VoidComponent<CardHeaderProps> = (props) => {
     >
       {props.leading}
       <div class="flex h-12 grow flex-col justify-between">
-        {props.headline && (
-          <Typography variant="title-md">{props.headline}</Typography>
-        )}
-        {props.subhead && (
-          <Typography variant="body-md">{props.subhead}</Typography>
-        )}
+        {props.headline && <span class="text-title-md">{props.headline}</span>}
+        {props.subhead && <span class="text-body-md">{props.subhead}</span>}
       </div>
       {props.trailing}
     </div>
@@ -40,12 +35,8 @@ type CardHeadlineProps = {
 export const CardHeadline: VoidComponent<CardHeadlineProps> = (props) => {
   return (
     <div class={clsx('flex h-12 grow flex-col justify-between', props.class)}>
-      {props.title && <Typography variant="body-lg">{props.title}</Typography>}
-      {props.subhead && (
-        <Typography variant="body-md" color="on-surface-variant">
-          {props.subhead}
-        </Typography>
-      )}
+      {props.title && <span class="text-body-lg">{props.title}</span>}
+      {props.subhead && <span class="text-body-md text-on-surface-variant">{props.subhead}</span>}
     </div>
   )
 }
@@ -55,11 +46,7 @@ type CardContentProps = {
 }
 
 export const CardContent: ParentComponent<CardContentProps> = (props) => {
-  return (
-    <div class={clsx('flex flex-col gap-4 p-4', props.class)}>
-      {props.children}
-    </div>
-  )
+  return <div class={clsx('flex flex-col gap-4 p-4', props.class)}>{props.children}</div>
 }
 
 type CardTextContentProps = {
@@ -71,9 +58,7 @@ export const CardTextContent: ParentComponent<CardTextContentProps> = (
 ) => {
   return (
     <div class={clsx('flex', props.class)}>
-      <Typography variant="body-md" color="on-surface-variant">
-        {props.children}
-      </Typography>
+      <span class="text-body-md text-on-surface-variant">{props.children}</span>
     </div>
   )
 }
@@ -83,11 +68,7 @@ type CardActionsProps = {
 }
 
 export const CardActions: ParentComponent<CardActionsProps> = (props) => {
-  return (
-    <div class={clsx('flex justify-end gap-4', props.class)}>
-      {props.children}
-    </div>
-  )
+  return <div class={clsx('flex justify-end gap-4', props.class)}>{props.children}</div>
 }
 
 type CardProps = {

diff --git a/src/components/material/FloatingActionButton.tsx b/src/components/material/FloatingActionButton.tsx
@@ -2,7 +2,6 @@ import type { JSXElement, ParentComponent } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase, { ButtonBaseProps } from '~/components/material/ButtonBase'
-import Typography from '~/components/material/Typography'
 
 type FloatingActionButtonProps = ButtonBaseProps & {
   leading?: JSXElement
@@ -20,7 +19,7 @@ const FloatingActionButton: ParentComponent<FloatingActionButtonProps> = (
       onClick={props.onClick}
     >
       {props.leading}
-      <Typography variant="label-lg">{props.children}</Typography>
+      <span class="text-label-lg">{props.children}</span>
     </ButtonBase>
   )
 }

diff --git a/src/components/material/List.tsx b/src/components/material/List.tsx
@@ -2,7 +2,6 @@ import type { JSXElement, ParentComponent, VoidComponent } from 'solid-js'
 import clsx from 'clsx'
 
 import ButtonBase from '~/components/material/ButtonBase'
-import Typography from '~/components/material/Typography'
 
 type ListItemContentProps = {
   headline: JSXElement
@@ -12,14 +11,8 @@ type ListItemContentProps = {
 export const ListItemContent: VoidComponent<ListItemContentProps> = (props) => {
   return (
     <div>
-      <Typography color="on-surface" variant="body-lg" as="div">
-        {props.headline}
-      </Typography>
-      {props.subhead && (
-        <Typography color="on-surface-variant" variant="body-md" as="div">
-          {props.subhead}
-        </Typography>
-      )}
+      <div class="text-on-surface text-body-lg">{props.headline}</div>
+      {props.subhead && <div class="text-on-surface-variant text-body-md">{props.subhead}</div>}
     </div>
   )
 }

diff --git a/src/components/material/NavigationBar.tsx b/src/components/material/NavigationBar.tsx
@@ -3,7 +3,6 @@ import { A } from '@solidjs/router'
 import clsx from 'clsx'
 
 import Icon, { IconProps } from '~/components/material/Icon'
-import Typography from '~/components/material/Typography'
 
 type NavigationBarItemProps = {
   icon: IconProps['children']
@@ -25,9 +24,9 @@ export const NavigationBarItem: ParentComponent<NavigationBarItemProps> = (
       <Icon class="flex transition-all" filled={props.selected}>
         {props.icon}
       </Icon>
-      <Typography as="div" class="mt-2 flex" variant="label-lg">
+      <div class="mt-2 flex text-label-lg">
         {props.children}
-      </Typography>
+      </div>
     </A>
   )
 }

diff --git a/src/components/material/TopAppBar.tsx b/src/components/material/TopAppBar.tsx
@@ -1,13 +1,12 @@
 import type { JSXElement, ParentComponent } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
 import clsx from 'clsx'
 
-import Typography from '~/components/material/Typography'
-
 type TopAppBarProps = {
   class?: string
   leading?: JSXElement
   trailing?: JSXElement
-  as?: string
+  component?: string
 }
 
 const TopAppBar: ParentComponent<TopAppBarProps> = (props) => {
@@ -19,9 +18,9 @@ const TopAppBar: ParentComponent<TopAppBarProps> = (props) => {
       )}
     >
       {props.leading}
-      <Typography class="grow" as={props.as || 'h2'} variant="title-lg">
+      <Dynamic class="grow text-title-lg" component={props.component || 'h2'}>
         {props.children}
-      </Typography>
+      </Dynamic>
       {props.trailing}
     </div>
   )