refactor(miniapp): simplify dashboard layout and controls

apps/miniapp/src/components/layout/top-bar.tsx

@@ -13,7 +13,7 @@ type Props = {
 export function TopBar(props: Props) {
   return (
     <section class="topbar">
-      <div>
+      <div class="topbar__copy">
         <p class="eyebrow">{props.subtitle}</p>
         <h1>{props.title}</h1>
       </div>

apps/miniapp/src/components/ui/dialog.tsx

@@ -1,6 +1,8 @@
 import * as Dialog from '@kobalte/core/dialog'
 import { Show, type JSX, type ParentProps } from 'solid-js'
 
+import { XIcon } from './icons'
+
 export function Modal(
   props: ParentProps<{
     open: boolean
@@ -24,8 +26,8 @@ export function Modal(
                   {(description) => <Dialog.Description>{description()}</Dialog.Description>}
                 </Show>
               </div>
-              <Dialog.CloseButton class="ui-button ui-button--icon">
-                <span aria-hidden="true">x</span>
+              <Dialog.CloseButton class="ui-button ui-button--icon modal-close-button">
+                <XIcon />
                 <span class="sr-only">{props.closeLabel}</span>
               </Dialog.CloseButton>
             </header>

apps/miniapp/src/components/ui/icons.tsx

@@ -65,3 +65,12 @@ export function GlobeIcon(props: IconProps) {
     </svg>
   )
 }
+
+export function XIcon(props: IconProps) {
+  return (
+    <svg {...iconProps(props)}>
+      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" />
+    </svg>
+  )
+}