forked from github/plane
style: update user profile button alignment. (#2695)
This commit is contained in:
parent
86379c51b7
commit
6e461dd8c3
@ -42,6 +42,10 @@ type Props = {
|
||||
* The source of the avatar image
|
||||
*/
|
||||
src?: string;
|
||||
/**
|
||||
* The custom CSS class name to apply to the component
|
||||
*/
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -94,7 +98,7 @@ export const getBorderRadius = (shape: "circle" | "square") => {
|
||||
case "circle":
|
||||
return "rounded-full";
|
||||
case "square":
|
||||
return "rounded-md";
|
||||
return "rounded";
|
||||
default:
|
||||
return "rounded-full";
|
||||
}
|
||||
@ -119,6 +123,7 @@ export const Avatar: React.FC<Props> = (props) => {
|
||||
size = "md",
|
||||
shape = "circle",
|
||||
src,
|
||||
className = ""
|
||||
} = props;
|
||||
|
||||
// get size details based on the size prop
|
||||
@ -145,14 +150,14 @@ export const Avatar: React.FC<Props> = (props) => {
|
||||
{src ? (
|
||||
<img
|
||||
src={src}
|
||||
className={`h-full w-full ${getBorderRadius(shape)}`}
|
||||
className={`h-full w-full ${getBorderRadius(shape)} ${className}`}
|
||||
alt={name}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`${
|
||||
sizeInfo.fontSize
|
||||
} grid place-items-center h-full w-full ${getBorderRadius(shape)}`}
|
||||
} grid place-items-center h-full w-full ${getBorderRadius(shape)} ${className}`}
|
||||
style={{
|
||||
backgroundColor:
|
||||
fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
|
||||
|
@ -90,8 +90,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-4 pt-4">
|
||||
<Menu as="div" className="relative col-span-4 text-left flex-grow truncate">
|
||||
<Menu.Button className="text-custom-sidebar-text-200 rounded-sm text-sm font-medium focus:outline-none w-full truncate">
|
||||
<Menu as="div" className="relative col-span-4 text-left flex-grow h-full truncate">
|
||||
<Menu.Button className="text-custom-sidebar-text-200 rounded-sm text-sm font-medium focus:outline-none w-full h-full truncate">
|
||||
<div
|
||||
className={`flex items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 truncate ${
|
||||
themeStore.sidebarCollapsed ? "justify-center" : ""
|
||||
@ -227,7 +227,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
||||
{!themeStore.sidebarCollapsed && (
|
||||
<Menu as="div" className="relative flex-shrink-0">
|
||||
<Menu.Button className="grid place-items-center outline-none">
|
||||
<Avatar name={user?.display_name} src={user?.avatar} size={32} shape="square" />
|
||||
<Avatar name={user?.display_name} src={user?.avatar} size={30} shape="square" className="!text-base" />
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
|
Loading…
Reference in New Issue
Block a user