maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Spacing issues on "settings" Button navbar skeleton (fix-settings-skeleton) (#9663) 

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
This commit is contained in:
GitStart-Cal.com 2023-07-05 07:41:29 +08:00 committed by GitHub
parent 6d8a576f60
commit a36f2aa871
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/pages/settings/my-account/profile.tsx
View File

@ -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" />

8
packages/features/settings/layouts/SettingsLayout.tsx
View File

@ -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>

2
packages/features/shell/Shell.tsx
View File

@ -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={

2
packages/ui/components/skeleton/index.tsx
View File

@ -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> = {