style: cycle and module sidebar improvement (#3076)

* style: cycle and module sidebar improvement

* chore: issue attachment error message updated
This commit is contained in:
Anmol Singh Bhatia 2023-12-11 22:27:28 +05:30 committed by GitHub
parent 07c15fcc1f
commit 1d3745157d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 14 deletions

View File

@ -281,10 +281,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
cycleDetails.total_issues === 0 cycleDetails.total_issues === 0
? "0 Issue" ? "0 Issue"
: cycleDetails.total_issues === cycleDetails.completed_issues : cycleDetails.total_issues === cycleDetails.completed_issues
? cycleDetails.total_issues > 1 ? cycleDetails.total_issues > 1
? `${cycleDetails.total_issues}` ? `${cycleDetails.total_issues}`
: `${cycleDetails.total_issues}` : `${cycleDetails.total_issues}`
: `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`; : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
return ( return (
<> <>
@ -468,7 +468,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
{progressPercentage ? ( {progressPercentage ? (
<span className="flex h-5 w-9 items-center justify-center rounded bg-amber-50 text-xs font-medium text-amber-500"> <span className="flex h-5 w-9 items-center justify-center rounded bg-amber-500/20 text-xs font-medium text-amber-500">
{progressPercentage ? `${progressPercentage}%` : ""} {progressPercentage ? `${progressPercentage}%` : ""}
</span> </span>
) : ( ) : (

View File

@ -84,10 +84,10 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
disabled: isLoading || disabled, disabled: isLoading || disabled,
}); });
const maxFileSize = envConfig?.file_size_limit ?? MAX_FILE_SIZE;
const fileError = const fileError =
fileRejections.length > 0 fileRejections.length > 0 ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)` : null;
? `Invalid file type or size (max ${envConfig?.file_size_limit ?? MAX_FILE_SIZE / 1024 / 1024} MB)`
: null;
return ( return (
<div <div

View File

@ -256,10 +256,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
moduleDetails.total_issues === 0 moduleDetails.total_issues === 0
? "0 Issue" ? "0 Issue"
: moduleDetails.total_issues === moduleDetails.completed_issues : moduleDetails.total_issues === moduleDetails.completed_issues
? moduleDetails.total_issues > 1 ? moduleDetails.total_issues > 1
? `${moduleDetails.total_issues}` ? `${moduleDetails.total_issues}`
: `${moduleDetails.total_issues}` : `${moduleDetails.total_issues}`
: `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`; : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
return ( return (
<> <>
@ -311,7 +311,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<CustomSelect <CustomSelect
customButton={ customButton={
<span <span
className={`flex h-6 w-20 cursor-default items-center justify-center rounded-sm text-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`} className="flex h-6 w-20 cursor-default items-center justify-center rounded-sm text-center text-xs"
style={{
color: moduleStatus ? moduleStatus.color : "#a3a3a2",
backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
}}
> >
{moduleStatus?.label ?? "Backlog"} {moduleStatus?.label ?? "Backlog"}
</span> </span>
@ -459,7 +463,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
{progressPercentage ? ( {progressPercentage ? (
<span className="flex h-5 w-9 items-center justify-center rounded bg-amber-50 text-xs font-medium text-amber-500"> <span className="flex h-5 w-9 items-center justify-center rounded bg-amber-500/20 text-xs font-medium text-amber-500">
{progressPercentage ? `${progressPercentage}%` : ""} {progressPercentage ? `${progressPercentage}%` : ""}
</span> </span>
) : ( ) : (