cleanup: remove unused styles (commaai#32)

ugtthis · Jun 16, 2024 · f935c86 · f935c86
1 parent 368aed9
commit f935c86
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 49 deletions.
diff --git a/src/components/DeviceStatistics.tsx b/src/components/DeviceStatistics.tsx
@@ -18,17 +18,17 @@ const DeviceStatistics: VoidComponent<DeviceStatisticsProps> = (props) => {
     <div class={clsx('flex h-10 w-full gap-8', props.class)}>
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Distance</span>
-        <span class="text-label-lg font-mono uppercase">{formatDistance(allTime()?.distance)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatDistance(allTime()?.distance)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Duration</span>
-        <span class="text-label-lg font-mono uppercase">{formatDuration(allTime()?.minutes)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatDuration(allTime()?.minutes)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Routes</span>
-        <span class="text-label-lg font-mono uppercase">{allTime()?.routes ?? 0}</span>
+        <span class="font-mono text-label-lg uppercase">{allTime()?.routes ?? 0}</span>
       </div>
     </div>
   )

diff --git a/src/components/RouteStatistics.tsx b/src/components/RouteStatistics.tsx
@@ -28,25 +28,25 @@ const RouteStatistics: VoidComponent<RouteStatisticsProps> = (props) => {
     <div class={clsx('flex size-full items-stretch gap-8', props.class)}>
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Distance</span>
-        <span class="text-label-lg font-mono uppercase">{formatRouteDistance(props.route)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatRouteDistance(props.route)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Duration</span>
-        <span class="text-label-lg font-mono uppercase">{formatRouteDuration(props.route)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatRouteDuration(props.route)}</span>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Engaged</span>
         <Suspense>
-          <span class="text-label-lg font-mono uppercase">{formatEngagement(timeline())}</span>
+          <span class="font-mono text-label-lg uppercase">{formatEngagement(timeline())}</span>
         </Suspense>
       </div>
 
       <div class="flex flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">User flags</span>
         <Suspense>
-          <span class="text-label-lg font-mono uppercase">{formatUserFlags(timeline())}</span>
+          <span class="font-mono text-label-lg uppercase">{formatUserFlags(timeline())}</span>
         </Suspense>
       </div>
     </div>

diff --git a/src/components/material/List.tsx b/src/components/material/List.tsx
@@ -11,8 +11,8 @@ type ListItemContentProps = {
 export const ListItemContent: VoidComponent<ListItemContentProps> = (props) => {
   return (
     <div>
-      <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 class="text-body-lg text-on-surface">{props.headline}</div>
+      {props.subhead && <div class="text-body-md text-on-surface-variant">{props.subhead}</div>}
     </div>
   )
 }

diff --git a/src/components/material/Ripple.tsx b/src/components/material/Ripple.tsx
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
@@ -20,7 +20,7 @@ export default function Login() {
         />
 
         <div class="flex flex-col items-center gap-2">
-          <h1 class="md:mt-4 text-display-sm font-extrabold">comma connect</h1>
+          <h1 class="text-display-sm font-extrabold md:mt-4">comma connect</h1>
           <p class="text-body-lg">Manage your openpilot experience.</p>
         </div>
 

diff --git a/src/pages/dashboard/components/DeviceList.tsx b/src/pages/dashboard/components/DeviceList.tsx
@@ -36,7 +36,7 @@ const DeviceList: VoidComponent<DeviceListProps> = (props) => {
               <ListItemContent
                 headline={getDeviceName(device)}
                 subhead={
-                  <span class="lowercase text-label-sm font-mono">
+                  <span class="font-mono text-label-sm lowercase">
                     {device.dongle_id}
                   </span>
                 }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -140,12 +140,6 @@ export default {
         }],
       },
       keyframes: {
-        ripple: {
-          '100%': {
-            transform: 'scale(4)',
-            opacity: '0',
-          },
-        },
         shimmer: {
           '100%': {
             transform: 'translateX(100%)',
@@ -203,15 +197,12 @@ export default {
         },
       },
       animation: {
-        ripple: 'ripple 600ms linear',
         indeterminate1: 'indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite',
         indeterminate2: 'indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite',
         'circular-rotate': 'circular-rotate 1.4s linear infinite',
         'circular-dash': 'circular-dash 1.4s ease-in-out infinite',
       },
       transitionProperty: {
-        typography: 'color, font-size, font-weight',
-        surface: 'background-color, border-color, color, box-shadow',
         indeterminate: 'transform, background-color',
         drawer: 'left, opacity, width',
       },