From a36f2aa8711f4fa9a413cf475efa64a54a704b85 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Wed, 5 Jul 2023 07:41:29 +0800
Subject: [PATCH] fix: Spacing issues on "settings" Button navbar skeleton
 (fix-settings-skeleton) (#9663)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 apps/web/pages/settings/my-account/profile.tsx        | 4 ++--
 packages/features/settings/layouts/SettingsLayout.tsx | 8 +++++---
 packages/features/shell/Shell.tsx                     | 2 +-
 packages/ui/components/skeleton/index.tsx             | 2 +-
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 2902938cec..584fb8913b 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -48,9 +48,9 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mb-8 mt-6 space-y-6">
+      <div className="mb-8 space-y-6">
         <div className="flex items-center">
-          <SkeletonAvatar className="me-4 h-16 w-16 px-4" />
+          <SkeletonAvatar className="me-4 mt-0 h-16 w-16 px-4" />
           <SkeletonButton className="h-6 w-32 rounded-md p-5" />
         </div>
         <SkeletonText className="h-8 w-full" />
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 58a405d879..2c5a583ff3 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -256,7 +256,9 @@ const SettingsSidebarContainer = ({
                     isExternalLink={child.isExternalLink}
                     href={child.href || "/"}
                     textClassNames="px-3 text-emphasis font-medium text-sm"
-                    className={`my-0.5 h-7 ${tab.children && index === tab.children?.length - 1 && "!mb-3"}`}
+                    className={`my-0.5 me-5 h-7 ${
+                      tab.children && index === tab.children?.length - 1 && "!mb-3"
+                    }`}
                     disableChevron
                   />
                 ))}
@@ -512,12 +514,12 @@ function ShellHeader() {
               {t(meta.title)}
             </h1>
           ) : (
-            <div className="bg-emphasis mb-1 h-6 w-24 animate-pulse rounded-md" />
+            <div className="bg-emphasis mb-1 h-5 w-24 animate-pulse rounded-md" />
           )}
           {meta.description && isLocaleReady ? (
             <p className="text-default text-sm ltr:mr-4 rtl:ml-4">{t(meta.description)}</p>
           ) : (
-            <div className="bg-emphasis mb-1 h-6 w-32 animate-pulse rounded-md" />
+            <div className="bg-emphasis h-5 w-32 animate-pulse rounded-md" />
           )}
         </div>
         <div className="ms-auto flex-shrink-0">{meta.CTA}</div>
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 12298c008e..3756282be8 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -915,7 +915,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
                   <Icon
                     className={classNames(
                       "h-4 w-4 flex-shrink-0 [&[aria-current='page']]:text-inherit",
-                      "md:ltr:mr-2 md:rtl:ml-2"
+                      "me-3 md:ltr:mr-2 md:rtl:ml-2"
                     )}
                     aria-hidden="true"
                     aria-current={
diff --git a/packages/ui/components/skeleton/index.tsx b/packages/ui/components/skeleton/index.tsx
index 2e537c9eac..2dbe96434d 100644
--- a/packages/ui/components/skeleton/index.tsx
+++ b/packages/ui/components/skeleton/index.tsx
@@ -14,7 +14,7 @@ interface SkeletonContainer {
 }
 
 const SkeletonAvatar: React.FC<SkeletonBaseProps> = ({ className }) => {
-  return <div className={classNames(`bg-emphasis mt-1 rounded-full ltr:mr-2 rtl:ml-2`, className)} />;
+  return <div className={classNames(`bg-emphasis me-3 mt-1 rounded-full`, className)} />;
 };
 
 type SkeletonProps<T> = {