github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: update user profile button alignment. (#2695)

Browse Source
This commit is contained in:
Prateek Shourya 2023-11-07 18:17:44 +05:30 committed by GitHub
parent 86379c51b7
commit 6e461dd8c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ui/src/avatar/avatar.tsx
View File

@ -42,6 +42,10 @@ type Props = {
* The source of the avatar image * The source of the avatar image
*/ */
src?: string; 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": case "circle":
return "rounded-full"; return "rounded-full";
case "square": case "square":
return "rounded-md"; return "rounded";
default: default:
return "rounded-full"; return "rounded-full";
} }
@ -119,6 +123,7 @@ export const Avatar: React.FC<Props> = (props) => {
size = "md", size = "md",
shape = "circle", shape = "circle",
src, src,
className = ""
} = props; } = props;
// get size details based on the size prop // get size details based on the size prop
@ -145,14 +150,14 @@ export const Avatar: React.FC<Props> = (props) => {
{src ? ( {src ? (
<img <img
src={src} src={src}
className={`h-full w-full ${getBorderRadius(shape)}`} className={`h-full w-full ${getBorderRadius(shape)} ${className}`}
alt={name} alt={name}
/> />
) : ( ) : (
<div <div
className={`${ className={`${
sizeInfo.fontSize sizeInfo.fontSize
} grid place-items-center h-full w-full ${getBorderRadius(shape)}`} } grid place-items-center h-full w-full ${getBorderRadius(shape)} ${className}`}
style={{ style={{
backgroundColor: backgroundColor:
fallbackBackgroundColor ?? "rgba(var(--color-primary-500))", fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",

6
web/components/workspace/sidebar-dropdown.tsx
View File

@ -90,8 +90,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
return ( return (
<div className="flex items-center gap-2 px-4 pt-4"> <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 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 truncate"> <Menu.Button className="text-custom-sidebar-text-200 rounded-sm text-sm font-medium focus:outline-none w-full h-full truncate">
<div <div
className={`flex items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 truncate ${ className={`flex items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 truncate ${
themeStore.sidebarCollapsed ? "justify-center" : "" themeStore.sidebarCollapsed ? "justify-center" : ""
@ -227,7 +227,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
{!themeStore.sidebarCollapsed && ( {!themeStore.sidebarCollapsed && (
<Menu as="div" className="relative flex-shrink-0"> <Menu as="div" className="relative flex-shrink-0">
<Menu.Button className="grid place-items-center outline-none"> <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> </Menu.Button>
<Transition <Transition