From 69808bb9a4f24f4295c4f520d2653c2daa9f0d0e Mon Sep 17 00:00:00 2001
From: Benjamin Babic <11808448+b-babic@users.noreply.github.com>
Date: Mon, 6 Mar 2023 23:45:40 +0100
Subject: [PATCH] 1172 booking uid design update (#7537)

* booking/[uid] additional fields design update

* add host badge to the who field

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/pages/booking/[uid].tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index fa337a6114..a002ce410d 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -46,7 +46,7 @@ import prisma from "@calcom/prisma";
 import type { Prisma } from "@calcom/prisma/client";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Button, EmailInput, HeadSeo, Label } from "@calcom/ui";
+import { Badge, Button, EmailInput, HeadSeo } from "@calcom/ui";
 import { FiX, FiExternalLink, FiChevronLeft, FiCheck, FiCalendar } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
@@ -497,7 +497,12 @@ export default function Success(props: SuccessProps) {
                           <>
                             {bookingInfo?.user && (
                               <div className="mb-3">
-                                <p>{bookingInfo.user.name}</p>
+                                <p>
+                                  <span className="mr-2">{bookingInfo.user.name}</span>
+                                  <Badge variant="blue" bold>
+                                    {t("Host")}
+                                  </Badge>
+                                </p>
                                 <p className="text-bookinglight">{bookingInfo.user.email}</p>
                               </div>
                             )}
@@ -554,9 +559,10 @@ export default function Success(props: SuccessProps) {
 
                       return (
                         <>
-                          <Label className="col-span-3 mt-8 border-t pt-8 pr-3 font-medium">{label}</Label>
-                          {/* Might be a good idea to use the readonly variant of respective components here */}
-                          <div className="col-span-3 mt-1 mb-2">{response.toString()}</div>
+                          <div className="mt-9 font-medium">{label}</div>
+                          <div className="col-span-2 mb-2 mt-9">
+                            <p className="break-words">{response.toString()}</p>
+                          </div>
                         </>
                       );
                     })}