forked from github/plane
style: ui improvements and bug fixes (#2758)
* style: add transition to favorite projects dropdown. * style: update project integration settings borders. * style: fix text overflow issue in project views. * fix: issue with non-functional cancel button in leave project modal.
This commit is contained in:
Prateek Shourya
GitHub
parent
7963993171
commit
e6f947ad90
@ -91,7 +91,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
|
||||
return (
|
||||
<>
|
||||
{integration && (
|
||||
<div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
|
||||
<div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-10 w-10 flex-shrink-0">
|
||||
<Image
|
||||
|
||||
@ -30,7 +30,7 @@ export interface ILeaveProjectModal {
|
||||
}
|
||||
|
||||
export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
|
||||
const { project, isOpen } = props;
|
||||
const { project, isOpen, onClose } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
@ -48,6 +48,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
|
||||
|
||||
const handleClose = () => {
|
||||
reset({ ...defaultValues });
|
||||
onClose();
|
||||
};
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
|
||||
@ -149,29 +149,38 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<Disclosure.Panel as="div" className="space-y-2">
|
||||
{orderedFavProjects.map((project, index) => (
|
||||
<Draggable
|
||||
key={project.id}
|
||||
draggableId={project.id}
|
||||
index={index}
|
||||
isDragDisabled={!project.is_member}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<div ref={provided.innerRef} {...provided.draggableProps}>
|
||||
<ProjectSidebarListItem
|
||||
key={project.id}
|
||||
project={project}
|
||||
provided={provided}
|
||||
snapshot={snapshot}
|
||||
handleCopyText={() => handleCopyText(project.id)}
|
||||
shortContextMenu
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
</Disclosure.Panel>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel as="div" className="space-y-2">
|
||||
{orderedFavProjects.map((project, index) => (
|
||||
<Draggable
|
||||
key={project.id}
|
||||
draggableId={project.id}
|
||||
index={index}
|
||||
isDragDisabled={!project.is_member}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<div ref={provided.innerRef} {...provided.draggableProps}>
|
||||
<ProjectSidebarListItem
|
||||
key={project.id}
|
||||
project={project}
|
||||
provided={provided}
|
||||
snapshot={snapshot}
|
||||
handleCopyText={() => handleCopyText(project.id)}
|
||||
shortContextMenu
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
{provided.placeholder}
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -104,7 +104,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Are you sure you want to delete view-{" "}
|
||||
<span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
|
||||
<span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
|
||||
data related to the view will be permanently removed. This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -61,12 +61,12 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
|
||||
<a className="flex items-center justify-between relative rounded p-4 w-full">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
|
||||
<div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
|
||||
<PhotoFilterIcon className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>
|
||||
{view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
|
||||
<p className="text-sm leading-4 font-medium break-all">{truncateText(view.name, 75)}</p>
|
||||
{view?.description && <p className="text-xs text-custom-text-200 break-all">{view.description}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-2 flex flex-shrink-0">
|
||||
|
||||
@ -43,7 +43,7 @@ const ProjectIntegrationsPage: NextPageWithLayout = () => {
|
||||
|
||||
return (
|
||||
<div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
|
||||
<div className="flex items-center py-3.5 border-b border-custom-border-200">
|
||||
<div className="flex items-center py-3.5 border-b border-custom-border-100">
|
||||
<h3 className="text-xl font-medium">Integrations</h3>
|
||||
</div>
|
||||
{workspaceIntegrations ? (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user