Bigger labels (commaai#476)

Author: sshane

src/components/RouteStaticMap.tsx

@@ -40,7 +40,7 @@ const State = (props: {
 }) => {
   return (
     <div class={clsx('absolute flex size-full items-center justify-center gap-2', props.opaque && 'bg-surface text-on-surface')}>
-      <span class="text-label-sm">{props.children}</span>
+      <span class="text-label-md">{props.children}</span>
       {props.trailing}
     </div>
   )

src/pages/dashboard/activities/RouteActivity.tsx

@@ -63,7 +63,7 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
         </div>
 
         <div class="flex flex-col gap-2">
-          <h3 class="text-label-sm uppercase">Route Info</h3>
+          <h3 class="text-label-md uppercase">Route Info</h3>
           <div class="flex flex-col rounded-md overflow-hidden bg-surface-container">
             <RouteStatistics class="p-5" route={route.latest} timeline={timeline()} />
 
@@ -72,14 +72,14 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
         </div>
 
         <div class="flex flex-col gap-2">
-          <h3 class="text-label-sm uppercase">Upload Files</h3>
+          <h3 class="text-label-md uppercase">Upload Files</h3>
           <div class="flex flex-col rounded-md overflow-hidden bg-surface-container">
             <RouteUploadButtons route={route()} />
           </div>
         </div>
 
         <div class="flex flex-col gap-2">
-          <h3 class="text-label-sm uppercase">Route Map</h3>
+          <h3 class="text-label-md uppercase">Route Map</h3>
           <div class="aspect-square overflow-hidden rounded-lg">
             <RouteStaticMap route={route()} />
           </div>

src/pages/dashboard/components/DeviceList.tsx

@@ -37,8 +37,8 @@ const DeviceList: VoidComponent<DeviceListProps> = (props) => {
               activeClass="before:bg-primary"
             >
               <ListItemContent
-                headline={getDeviceName(device)}
-                subhead={<span class="font-mono text-label-sm lowercase">{device.dongle_id}</span>}
+                headline={<span class="font-medium">{getDeviceName(device)}</span>}
+                subhead={<span class="font-mono text-label-md lowercase">{device.dongle_id}</span>}
               />
             </ListItem>
           )}