From 6ef35e4dba33d3ce612af3ce64dd80a91b43f10c Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Wed, 17 Apr 2024 14:35:18 +0100
Subject: [PATCH] chore: settings design match (#14630)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
---
 .../eventtype/EventTypeSingleLayout.tsx       |  1 -
 .../settings/layouts/SettingsLayout.tsx       | 28 +++++++++----------
 .../navigation/tabs/VerticalTabItem.tsx       |  6 ++--
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 5c39f24fdb..821734c3c3 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -481,7 +481,6 @@ function EventTypeSingleLayout({
               sticky
               linkShallow
               itemClassname="items-start"
-              iconClassName="md:mt-px"
             />
           </div>
           <div className="p-2 md:mx-0 md:p-0 xl:hidden">
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index e633a067ad..245a96f247 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -288,11 +288,11 @@ const SettingsSidebarContainer = ({
               {!["teams", "other_teams"].includes(tab.name) && (
                 <React.Fragment key={tab.href}>
                   <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
-                    <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default group flex h-9 w-full flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
+                    <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default group flex h-7 w-full flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
                       {tab && tab.icon && (
                         <Icon
                           name={tab.icon}
-                          className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                          className="text-subtle h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
                         />
                       )}
                       {!tab.icon && tab?.avatar && (
@@ -305,21 +305,21 @@ const SettingsSidebarContainer = ({
                       <Skeleton
                         title={tab.name}
                         as="p"
-                        className="truncate text-sm font-medium leading-5"
+                        className="text-subtle truncate text-sm font-medium leading-5"
                         loadingClassName="ms-3">
                         {t(tab.name)}
                       </Skeleton>
                     </div>
                   </div>
-                  <div className="my-3 space-y-0.5">
+                  <div className="my-3 space-y-px">
                     {tab.children?.map((child, index) => (
                       <VerticalTabItem
                         key={child.href}
                         name={t(child.name)}
                         isExternalLink={child.isExternalLink}
                         href={child.href || "/"}
-                        textClassNames="px-3 text-emphasis font-medium text-sm"
-                        className={`my-0.5 me-5 h-7 ${
+                        textClassNames="text-emphasis font-medium text-sm"
+                        className={`me-5 h-7 !px-2 ${
                           tab.children && index === tab.children?.length - 1 && "!mb-3"
                         }`}
                         disableChevron
@@ -337,13 +337,13 @@ const SettingsSidebarContainer = ({
                         {tab && tab.icon && (
                           <Icon
                             name={tab.icon}
-                            className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                            className="text-subtle h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
                           />
                         )}
                         <Skeleton
                           title={tab.name}
                           as="p"
-                          className="truncate text-sm font-medium leading-5"
+                          className="text-subtle truncate text-sm font-medium leading-5"
                           loadingClassName="ms-3">
                           {t(isOrgAdminOrOwner ? "my_teams" : tab.name)}
                         </Skeleton>
@@ -372,7 +372,7 @@ const SettingsSidebarContainer = ({
                               }>
                               <CollapsibleTrigger asChild>
                                 <div
-                                  className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default flex h-9 w-full flex-row items-center rounded-md px-3 py-[10px]  text-left text-sm font-medium leading-none"
+                                  className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default flex h-9 w-full flex-row items-center rounded-md px-2 py-[10px]  text-left text-sm font-medium leading-none"
                                   onClick={() =>
                                     setTeamMenuState([
                                       ...teamMenuState,
@@ -476,13 +476,13 @@ const SettingsSidebarContainer = ({
                         {tab && tab.icon && (
                           <Icon
                             name={tab.icon}
-                            className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                            className="text-subtle h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
                           />
                         )}
                         <Skeleton
                           title={t("org_admin_other_teams")}
                           as="p"
-                          className="truncate text-sm font-medium leading-5"
+                          className="text-subtle truncate text-sm font-medium leading-5"
                           loadingClassName="ms-3">
                           {t("org_admin_other_teams")}
                         </Skeleton>
@@ -511,7 +511,7 @@ const SettingsSidebarContainer = ({
                               }>
                               <CollapsibleTrigger asChild>
                                 <div
-                                  className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default flex h-9 w-full flex-row items-center rounded-md px-3 py-[10px]  text-left text-sm font-medium leading-none"
+                                  className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default flex h-9 w-full flex-row items-center rounded-md px-2 py-[10px]  text-left text-sm font-medium leading-none"
                                   onClick={() =>
                                     setOtherTeamMenuState([
                                       ...otherTeamMenuState,
@@ -582,8 +582,8 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
 
   return (
     <>
-      <nav className="bg-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b py-2 sm:relative lg:hidden">
-        <div className="flex items-center space-x-3 ">
+      <nav className="bg-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b px-2 py-2 sm:relative lg:hidden">
+        <div className="flex items-center space-x-3">
           <Button StartIcon="menu" color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
             <span className="sr-only">{t("show_navigation")}</span>
           </Button>
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index e51dccb526..fbbc9b1fb5 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -52,10 +52,10 @@ const VerticalTabItem = ({
             target={props.isExternalLink ? "_blank" : "_self"}
             className={classNames(
               props.textClassNames || "text-default text-sm font-medium leading-none",
-              "min-h-8 hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default group flex w-64 flex-row items-center rounded-md px-3 py-[10px] transition",
+              "min-h-7 hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default group flex w-64 flex-row items-center rounded-md px-3 py-2 transition",
               props.disabled && "pointer-events-none !opacity-30",
               (isChild || !props.icon) && "ml-7 w-auto ltr:mr-5 rtl:ml-5",
-              !info ? "h-6" : "h-14",
+              !info ? "h-6" : "h-auto",
               props.className
             )}
             data-testid={`vertical-tab-${name}`}
@@ -72,7 +72,7 @@ const VerticalTabItem = ({
             )}
             <div className="h-fit">
               <span className="flex items-center space-x-2 rtl:space-x-reverse">
-                <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 mt-px truncate">
+                <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 truncate">
                   {t(name)}
                 </Skeleton>
                 {props.isExternalLink ? <Icon name="external-link" data-testid="external-link" /> : null}