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 {