Improved borders on teams profile pages. (#6141)

* Improved borders on teams profile pages.

* Improved border styles on dynamic booking pages (pro+free) and improved darkmode avatar border.

* Fixed badge hover state in dark mode

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/pages/[user].tsx

@@ -58,7 +58,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className="dark:bg-darkgray-100 dark:border-darkgray-200 group relative rounded-sm border border-neutral-200 bg-white dark:hover:border-neutral-600">
+          className="dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-600">
           <Icon.FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link href={getUsernameSlugLink({ users: props.users, slug: type.slug })}>
             <a className="flex justify-between px-6 py-4" data-testid="event-type-link">
@@ -68,7 +68,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
               </div>
               <div className="mt-1 self-center">
                 <AvatarGroup
-                  border="border-2 border-white"
+                  border="border-2 border-white dark:border-darkgray-100"
                   truncateAfter={4}
                   className="flex flex-shrink-0"
                   size={10}

apps/web/pages/team/[slug].tsx

@@ -37,12 +37,12 @@ function TeamPage({ team }: TeamPageProps) {
   }, [telemetry, router.asPath]);
 
   const EventTypes = () => (
-    <ul className="">
+    <ul className="rounded-md border border-neutral-200 dark:border-neutral-700">
       {team.eventTypes.map((type, index) => (
         <li
           key={index}
           className={classNames(
-            "dark:bg-darkgray-100 dark:border-darkgray-200 group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:hover:border-neutral-600",
+            "dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-600",
             !isEmbed && "bg-white"
           )}>
           <Link href={`/team/${team.slug}/${type.slug}`}>
@@ -96,9 +96,7 @@ function TeamPage({ team }: TeamPageProps) {
         {(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
         {!showMembers.isOn && team.eventTypes.length > 0 && (
           <div className="mx-auto max-w-3xl ">
-            <div className="dark:border-darkgray-300 rounded-md border">
-              <EventTypes />
-            </div>
+            <EventTypes />
             <div className="relative mt-12">
               <div className="absolute inset-0 flex items-center" aria-hidden="true">
                 <div className="dark:border-darkgray-300 w-full border-t border-gray-200" />

packages/ui/components/badge/Badge.tsx

@@ -9,7 +9,7 @@ const badgeClassNameByVariant = {
   orange: "bg-orange-100 text-orange-800",
   success: "bg-green-100 text-green-800",
   green: "bg-green-100 text-green-800",
-  gray: "bg-gray-100 text-gray-800 dark:bg-transparent dark:text-darkgray-800 group-hover:bg-gray-200",
+  gray: "bg-gray-100 text-gray-800 dark:bg-transparent dark:text-darkgray-800 group-hover:bg-gray-200 dark:group-hover:bg-darkgray-200",
   blue: "bg-blue-100 text-blue-800",
   red: "bg-red-100 text-red-800",
   error: "bg-red-100 text-red-800",