feat(ui): group dashboard navigation into sectioned routes and align view layouts with dcrouter

ts_web/elements/sipproxy-view-overview.ts

@@ -11,22 +11,8 @@ export class SipproxyViewOverview extends DeesElement {
     cssManager.defaultStyles,
     viewHostCss,
     css`
-      :host {
-        display: block;
-        padding: 24px;
-      }
-
-      .section-heading {
-        font-size: 0.7rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-        color: #64748b;
-        margin: 32px 0 12px;
-      }
-
-      .section-heading:first-of-type {
-        margin-top: 24px;
+      dees-statsgrid {
+        margin-bottom: 32px;
       }
     `,
   ];
@@ -141,13 +127,15 @@ export class SipproxyViewOverview extends DeesElement {
     const onlineCount = allDevices.filter((d) => d.connected).length;
 
     return html`
+      <dees-heading level="3">Stats</dees-heading>
+
       <dees-statsgrid
         .tiles=${tiles}
         .minTileWidth=${220}
         .gap=${16}
       ></dees-statsgrid>
 
-      <div class="section-heading">Devices</div>
+      <dees-heading level="hr">Devices</dees-heading>
       <dees-table
         heading1="Devices"
         heading2="${onlineCount} of ${allDevices.length} online"