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
*/
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))",

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

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