update customer profile card

src/components/CustomerProfileCard.vue

@@ -1,25 +1,30 @@
 <template>
 	<div v-if="customer" class="customer-profile-card">
-		<button v-if="photoURL" type="button" class="avatar-trigger" @click="handlePhotoClick">
+		<div v-if="photoURL" class="avatar-trigger" @click="handlePhotoClick">
 			<t-image :src="photoURL" :alt="customerName" fit="cover" class="avatar" />
-		</button>
+			<div @click.stop>
+				<t-image-viewer
+					v-model:visible="photoViewerVisible"
+					:images="photoViewerImages"
+					show-index
+				/>
+			</div>
+		</div>
 		<div v-else class="avatar fallback" v-text="avatarText" />
 		<div class="content">
 			<div class="header">
-				<div class="name">
+				<div class="name white">
 					<span v-text="customerName"></span>
 					<gender-icon v-if="customer.gender" :value="customer.gender" size="1rem" />
 				</div>
-				<span class="gray" v-text="customerCode" />
+				<t-tag
+					class="code"
+					variant="outline"
+					shape="round"
+					:content="customerCode"
+				/>
 			</div>
-			<telephone-link class="telephone gray" :value="customerTelephone" />
-		</div>
-		<div @click.stop>
-			<t-image-viewer
-				v-model:visible="photoViewerVisible"
-				:images="photoViewerImages"
-				show-index
-			/>
+			<telephone-link class="telephone white" :value="customerTelephone" />
 		</div>
 	</div>
 </template>
@@ -65,17 +70,12 @@ function openPhotoViewer(): void {
 	padding: .5rem;
 	display: flex;
 	box-shadow: var(--td-shadow-1);
-	background: #e6eeff;
+	background: linear-gradient(135deg, #43cea2, var(--td-brand-color));
 	border-radius: 1.125rem;
 
 	.avatar-trigger {
-		padding: 0;
-		border: 0;
 		width: 4rem;
 		height: 4rem;
-		display: block;
-		cursor: pointer;
-		background: transparent;
 		border-radius: .875rem;
 	}
 
@@ -86,7 +86,11 @@ function openPhotoViewer(): void {
 
 	.content {
 		flex: 1;
+		display: flex;
 		min-width: 0;
+		padding-bottom: .25rem;
+		flex-direction: column;
+		justify-content: space-between;
 
 		.header {
 			display: flex;
@@ -97,8 +101,14 @@ function openPhotoViewer(): void {
 			.name {
 				gap: .5rem;
 				display: flex;
+				font-size: 1.25rem;
 				align-items: center;
 			}
+
+			.code {
+				color: #FFF;
+				background: transparent;
+			}
 		}
 
 		.telephone {

src/components/TelephoneLink.vue

@@ -1,19 +1,13 @@
 <template>
-	<component
-		:is="href ? 'a' : 'span'"
-		v-if="displayText"
-		:href="href || undefined"
-		class="telephone-link"
-		:class="{ clickable: !!href }"
-		@click="handleClick"
-	>
-		<t-icon v-if="value" name="call" />
-		<span v-text="displayText" />
-	</component>
+	<contact-number :value="value" @click="handleClick" underline>
+		<template #icon>
+			<t-icon v-if="value" name="call" />
+		</template>
+	</contact-number>
 </template>
 
 <script setup lang="ts">
-import { buildTelephoneURL, canDialTelephone } from "@/utils/telephone";
+import { ContactNumber } from "timi-web";
 
 defineOptions({
 	name: "TelephoneLink"
@@ -27,8 +21,6 @@ const props = withDefaults(defineProps<{
 });
 
 const textValue = computed(() => props.value?.trim() || "");
-const displayText = computed(() => textValue.value || props.placeholder);
-const href = computed(() => canDialTelephone(textValue.value) ? buildTelephoneURL(textValue.value) : "");
 
 function handleClick(event: MouseEvent): void {
 	if (textValue.value) {
@@ -42,10 +34,5 @@ function handleClick(event: MouseEvent): void {
 	color: inherit;
 	word-break: break-all;
 	text-decoration: none;
-
-	&.clickable {
-		text-decoration: underline;
-		text-underline-offset: .16rem;
-	}
 }
 </style>