fix: badge component line-height according to the DS (#7766)

* fix: badge line-height

* fix: revert padding top and bottom

* fix: remove large prop

* fix: remove large prop

* feat: make md default

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/booking/BookingDescription.tsx

@@ -135,7 +135,6 @@ const BookingDescription: FC<Props> = (props) => {
                   <li key={idx}>
                     <Badge
                       variant="gray"
-                      size="lg"
                       className={classNames(
                         duration === dur.toString()
                           ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"

apps/web/pages/event-types/index.tsx

@@ -351,11 +351,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         />
                       )}
                       <div className="flex items-center justify-between space-x-2 rtl:space-x-reverse">
-                        {type.hidden && (
-                          <Badge variant="gray" size="lg">
-                            {t("hidden")}
-                          </Badge>
-                        )}
+                        {type.hidden && <Badge variant="gray">{t("hidden")}</Badge>}
                         <Tooltip content={t("show_eventtype_on_profile")}>
                           <div className="self-center rounded-md p-2 hover:bg-gray-200">
                             <Switch

packages/features/eventtypes/components/EventTypeDescription.tsx

@@ -65,21 +65,21 @@ export const EventTypeDescription = ({
           {eventType.metadata?.multipleDuration ? (
             eventType.metadata.multipleDuration.map((dur, idx) => (
               <li key={idx}>
-                <Badge variant="gray" size="lg" startIcon={FiClock}>
+                <Badge variant="gray" startIcon={FiClock}>
                   {dur}m
                 </Badge>
               </li>
             ))
           ) : (
             <li>
-              <Badge variant="gray" size="lg" startIcon={FiClock}>
+              <Badge variant="gray" startIcon={FiClock}>
                 {eventType.length}m
               </Badge>
             </li>
           )}
           {eventType.schedulingType && (
             <li>
-              <Badge variant="gray" size="lg" startIcon={FiUsers}>
+              <Badge variant="gray" startIcon={FiUsers}>
                 {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
                 {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
               </Badge>
@@ -87,7 +87,7 @@ export const EventTypeDescription = ({
           )}
           {recurringEvent?.count && recurringEvent.count > 0 && (
             <li className="hidden xl:block">
-              <Badge variant="gray" size="lg" startIcon={FiRefreshCw}>
+              <Badge variant="gray" startIcon={FiRefreshCw}>
                 {t("repeats_up_to", {
                   count: recurringEvent.count,
                 })}
@@ -96,7 +96,7 @@ export const EventTypeDescription = ({
           )}
           {stripeAppData.price > 0 && (
             <li>
-              <Badge variant="gray" size="lg" startIcon={FiCreditCard}>
+              <Badge variant="gray" startIcon={FiCreditCard}>
                 <IntlProvider locale="en">
                   <FormattedNumber
                     value={stripeAppData.price / 100.0}
@@ -109,7 +109,7 @@ export const EventTypeDescription = ({
           )}
           {eventType.requiresConfirmation && (
             <li className="hidden xl:block">
-              <Badge variant="gray" size="lg" startIcon={FiClipboard}>
+              <Badge variant="gray" startIcon={FiClipboard}>
                 {eventType.metadata?.requiresConfirmationThreshold
                   ? t("may_require_confirmation")
                   : t("requires_confirmation")}
@@ -119,7 +119,7 @@ export const EventTypeDescription = ({
           {/* TODO: Maybe add a tool tip to this? */}
           {eventType.requiresConfirmation || (recurringEvent?.count && recurringEvent.count) ? (
             <li className="block xl:hidden">
-              <Badge variant="gray" size="lg" startIcon={FiPlus}>
+              <Badge variant="gray" startIcon={FiPlus}>
                 <p>{[eventType.requiresConfirmation, recurringEvent?.count].filter(Boolean).length}</p>
               </Badge>
             </li>
@@ -128,7 +128,7 @@ export const EventTypeDescription = ({
           )}
           {eventType?.seatsPerTimeSlot ? (
             <li>
-              <Badge variant="gray" size="lg" startIcon={FiUser}>
+              <Badge variant="gray" startIcon={FiUser}>
                 <p>{t("event_type_seats", { numberOfSeats: eventType.seatsPerTimeSlot })} </p>
               </Badge>
             </li>

packages/ui/components/badge/Badge.tsx

@@ -20,14 +20,14 @@ const badgeStyles = cva("font-medium inline-flex items-center justify-center rou
       error: "bg-red-100 text-red-800",
     },
     size: {
-      sm: "px-1 py-0.5 text-xs",
-      md: "py-1 px-1.5 text-xs",
-      lg: "py-1 px-2 text-sm",
+      sm: "px-1 py-0.5 text-xs leading-3",
+      md: "py-1 px-1.5 text-xs leading-3",
+      lg: "py-1 px-2 text-sm leading-4",
     },
   },
   defaultVariants: {
     variant: "default",
-    size: "sm",
+    size: "md",
   },
 });