feat(ui): refresh dashboard and paper boat branding

frontend/src/components/conversations/MessageStatusTicks.vue

@@ -16,21 +16,22 @@ limitations under the License.
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { navIconSvg } from '@/components/layout/navIcons'
 
 // The channel's delivery receipt for a message we sent. 'failed' has its own
 // "Not delivered" notice, so it shows no tick.
 type ChannelStatus = 'sent' | 'delivered' | 'read'
 
 const TICKS: Record<ChannelStatus, { icon: string; label: string }> = {
-  sent: { icon: 'fa-solid fa-check', label: '已发送' },
-  delivered: { icon: 'fa-solid fa-check-double', label: '已送达' },
-  read: { icon: 'fa-solid fa-check-double', label: '已读' },
+  sent: { icon: 'check', label: '已发送' },
+  delivered: { icon: 'checks', label: '已送达' },
+  read: { icon: 'checks', label: '已读' },
 }
 
 const props = defineProps<{
   status?: string | null
   // On an accent-filled bubble no blue holds contrast in either theme, so
-  // read becomes an inverted badge in the bubble's own colour pair
+  // the tick inherits the bubble's own foreground instead.
   onAccent?: boolean
 }>()
 
@@ -48,26 +49,40 @@ const tick = computed(() =>
     :aria-label="tick.label"
     role="img"
   >
-    <font-awesome-icon :icon="tick.icon" />
+    <span class="tick-icon" v-html="navIconSvg(tick.icon, 13)"></span>
+    <span class="tick-label">{{ tick.label }}</span>
   </span>
 </template>
 
 <style scoped>
 .status-ticks {
   display: inline-flex;
-  margin-left: 4px;
-  font-size: var(--text-xs);
-  vertical-align: baseline;
+  align-items: center;
+  gap: 3px;
+  color: var(--celadon);
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
 }
 
-.status-ticks--read {
-  color: var(--c-info);
+.tick-icon {
+  display: inline-flex;
+}
+
+.tick-icon :deep(svg) {
+  display: block;
+}
+
+/* A sent message is not a success yet — keep it quiet until it lands. */
+.status-ticks--sent {
+  color: var(--muted);
+}
+
+.status-ticks--on-accent {
+  color: color-mix(in srgb, var(--bubble-human-fg) 78%, transparent);
 }
 
 .status-ticks--on-accent.status-ticks--read {
-  padding: 0 4px;
-  border-radius: var(--radius-full);
-  background: var(--bubble-agent-fg);
-  color: var(--bubble-agent-bg);
+  color: var(--bubble-human-fg);
 }
 </style>