fix: minor ui fixes (#469)

This commit is contained in:
Aaryan Khandelwal 2023-03-17 10:39:06 +05:30 committed by GitHub
parent 5f796e732a
commit 4de0abfc22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 11 deletions

View File

@ -14,12 +14,13 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
return ( return (
<> <>
<div className="flex items-center"> <div className="flex items-center">
<div <button
className="grid h-8 w-8 cursor-pointer place-items-center flex-shrink-0 rounded border border-gray-300 text-center text-sm hover:bg-gray-100" type="button"
className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-gray-300 text-center text-sm hover:bg-gray-100"
onClick={() => router.back()} onClick={() => router.back()}
> >
<ArrowLeftIcon className="h-3 w-3" /> <ArrowLeftIcon className="h-3 w-3" />
</div> </button>
{children} {children}
</div> </div>
</> </>
@ -44,7 +45,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
</a> </a>
</Link> </Link>
) : ( ) : (
<div className="px-3 text-sm max-w-64"> <div className="max-w-64 px-3 text-sm">
<p className={`${icon ? "flex items-center gap-2" : ""}`}> <p className={`${icon ? "flex items-center gap-2" : ""}`}>
{icon} {icon}
<span className="break-all">{title}</span> <span className="break-all">{title}</span>

View File

@ -150,7 +150,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
{cycle ? ( {cycle ? (
<> <>
<div className="flex flex-col items-start justify-center"> <div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-6 text-sm"> <div className="flex gap-2.5 px-5 text-sm">
<div className="flex items-center "> <div className="flex items-center ">
<span <span
className={`flex items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `} className={`flex items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
@ -442,7 +442,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
</div> </div>
</> </>
) : ( ) : (
<Loader> <Loader className="px-5">
<div className="space-y-2"> <div className="space-y-2">
<Loader.Item height="15px" width="50%" /> <Loader.Item height="15px" width="50%" />
<Loader.Item height="15px" width="30%" /> <Loader.Item height="15px" width="30%" />

View File

@ -88,7 +88,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div> <div className="relative">
<div className="relative"> <div className="relative">
<TextArea <TextArea
id="name" id="name"
@ -152,7 +152,13 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
onHTMLChange={(html) => setValue("description_html", html)} onHTMLChange={(html) => setValue("description_html", html)}
editable={!isNotAllowed} editable={!isNotAllowed}
/> />
<div className="text-right text-sm text-gray-500">{isSubmitting && "Saving..."}</div> <div
className={`absolute -bottom-8 right-0 text-sm text-gray-500 ${
isSubmitting ? "block" : "hidden"
}`}
>
Saving...
</div>
</div> </div>
); );
}; };

View File

@ -206,7 +206,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
{module ? ( {module ? (
<> <>
<div className="flex flex-col items-start justify-center"> <div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-6 text-sm"> <div className="flex gap-2.5 px-5 text-sm">
<div className="flex items-center "> <div className="flex items-center ">
<Controller <Controller
control={control} control={control}
@ -526,7 +526,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</> </>
) : ( ) : (
<Loader> <Loader className="px-5">
<div className="space-y-2"> <div className="space-y-2">
<Loader.Item height="15px" width="50%" /> <Loader.Item height="15px" width="50%" />
<Loader.Item height="15px" width="30%" /> <Loader.Item height="15px" width="30%" />

View File

@ -265,7 +265,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
<span> <span>
Progress Progress
<br /> <br />
{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(2)}% {isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%
</span> </span>
<div className="bar relative mt-1 h-1 w-full rounded bg-gray-300"> <div className="bar relative mt-1 h-1 w-full rounded bg-gray-300">
<div <div