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

chore: small changes to dropdown & main sidebar (#9719)

This commit is contained in:
Ciarán Hanrahan 2023-07-02 11:12:50 +01:00 committed by GitHub
parent 407b0518b3
commit 6fb51db6ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/features/ee/teams/components/TeamList.tsx
View File

@ -43,7 +43,7 @@ export default function TeamList(props: Props) {
}
return (
<ul className="bg-default divide-subtle border-subtle mb-2 divide-y rounded border">
<ul className="bg-default divide-subtle border-subtle mb-2 divide-y rounded-md border overflow-hidden">
{props.teams.map((team) => (
<TeamListItem
key={team?.id as number}

4
packages/features/filters/components/TeamsFilter.tsx
View File

@ -127,13 +127,13 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(({ label, icon, ...rest }, ref) => {
return (
<div className="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer">
<div className="hover:bg-subtle flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer">
<label className="flex w-full items-center justify-between hover:cursor-pointer">
<div className="flex items-center">
<div className="text-default flex h-4 w-4 items-center justify-center ltr:mr-2 rtl:ml-2">
{icon}
</div>
<label htmlFor={rest.id} className="text-default cursor-pointer truncate text-sm">
<label htmlFor={rest.id} className="text-default cursor-pointer truncate text-sm font-medium">
{label}
</label>
</div>

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

@ -340,24 +340,24 @@ function UserDropdown({ small }: UserDropdownProps) {
<button
className={classNames(
"hover:bg-emphasis group mx-0 flex cursor-pointer appearance-none items-center rounded-full text-left outline-none focus:outline-none focus:ring-0 md:rounded-none lg:rounded",
small ? "p-2" : "px-2 py-1"
small ? "p-2" : "px-2 py-1.5"
)}>
<span
className={classNames(
small ? "h-4 w-4" : "h-6 w-6 ltr:mr-2 rtl:ml-2",
small ? "h-4 w-4" : "h-5 w-5 ltr:mr-2 rtl:ml-2",
"relative flex-shrink-0 rounded-full bg-gray-300"
)}>
<Avatar
size={small ? "xs" : "sm"}
size={small ? "xs" : "xsm"}
imageSrc={avatar?.avatar || WEBAPP_URL + "/" + user.username + "/avatar.png"}
alt={user.username || "Nameless User"}
className="overflow-hidden"
/>
<span
className={classNames(
"border-muted absolute -bottom-1 -right-1 rounded-full border-2 bg-green-500",
"border-muted absolute -bottom-1 -right-1 rounded-full border bg-green-500",
user.away ? "bg-yellow-500" : "bg-green-500",
small ? "-bottom-0.5 -right-0.5 h-2.5 w-2.5" : "bottom-0 right-0 h-3 w-3"
small ? "-bottom-0.5 -right-0.5 h-2.5 w-2.5" : "-bottom-0.5 -right-0 h-2 w-2"
)}
/>
</span>
@ -604,7 +604,7 @@ const { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMor
const Navigation = () => {
return (
<nav className="mt-2 flex-1 md:px-2 lg:mt-6 lg:px-0">
<nav className="mt-2 flex-1 md:px-2 lg:mt-4 lg:px-0">
{desktopNavigationItems.map((item) => (
<NavigationItem key={item.name} item={item} />
))}
@ -654,7 +654,7 @@ const NavigationItem: React.FC<{
href={item.href}
aria-label={t(item.name)}
className={classNames(
"[&[aria-current='page']]:bg-emphasis text-default group flex items-center rounded-md px-3 py-2 text-sm font-medium",
"[&[aria-current='page']]:bg-emphasis text-default group flex items-center rounded-md py-1.5 px-2 text-sm font-medium",
isChild
? `[&[aria-current='page']]:text-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 [&[aria-current='page']]:bg-transparent ${
props.index === 0 ? "mt-0" : "mt-px"
@ -901,7 +901,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
target={item.target}
className={classNames(
"text-left",
"[&[aria-current='page']]:bg-emphasis text-default justify-right group flex items-center rounded-md px-3 py-2 text-sm font-medium",
"[&[aria-current='page']]:bg-emphasis text-default justify-right group flex items-center rounded-md py-1.5 px-2 text-sm font-medium",
"[&[aria-current='page']]:text-emphasis mt-0.5 w-full text-sm",
isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : "",
index === 0 && "mt-3"

2
packages/ui/components/divider/Divider.tsx
View File

@ -1,7 +1,7 @@
import { classNames } from "@calcom/lib";
export function Divider({ className, ...props }: JSX.IntrinsicElements["hr"]) {
className = classNames("border-subtle", className);
className = classNames("border-subtle my-1", className);
return <hr className={className} {...props} />;
}

2
packages/ui/components/empty-screen/EmptyScreen.tsx
View File

@ -34,7 +34,7 @@ export function EmptyScreen({
<div
data-testid="empty-screen"
className={classNames(
"min-h-80 flex w-full flex-col items-center justify-center rounded-md p-7 lg:p-20",
"select-none flex-col items-center justify-center rounded-lg p-7 lg:p-20",
border && "border-subtle border",
dashedBorder && "border-dashed",
className

8
packages/ui/components/popover/AnimatedPopover.tsx
View File

@ -47,12 +47,12 @@ export const AnimatedPopover = ({
<div
ref={ref}
className={classNames(
"hover:border-emphasis border-default text-default hover:text-emphasis mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
"hover:border-emphasis border-default text-default hover:text-emphasis radix-state-open:border-emphasis radix-state-open:outline-none radix-state-open:ring-2 radix-state-open:ring-emphasis -mr-0.5 mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer",
popoverTriggerClassNames
)}>
<div className="max-w-36 flex items-center">
<Tooltip content={text}>
<div className="truncate">
<div className="select-none truncate font-medium">
{text}
{count && count > 0 && (
<div className="flex h-4 w-4 items-center justify-center rounded-full">{count}</div>
@ -60,7 +60,7 @@ export const AnimatedPopover = ({
</div>
</Tooltip>
<ChevronDown
className={classNames("ml-2 transition-transform duration-150", open && "rotate-180")}
className={classNames("ml-2 w-4 transition-transform duration-150", open && "rotate-180")}
/>
</div>
</div>
@ -68,7 +68,7 @@ export const AnimatedPopover = ({
<Popover.Content side="bottom" align={align} asChild>
<div
className={classNames(
"bg-default border-default scroll-bar absolute z-50 mt-2 max-h-64 w-56 overflow-y-auto rounded-md border py-[2px] shadow-sm focus-within:outline-none",
"bg-default border-subtle scroll-bar absolute z-50 mt-1 max-h-64 w-56 select-none overflow-y-auto rounded-md border py-[2px] shadow-md focus-within:outline-none",
align === "end" && "-translate-x-[228px]"
)}>
{children}