[WEB 2418] Fix minor UI inconsistencies (#5568)

* fix: project features modal padding

* fix: minor ui inconsistencies

* fix: lint issue
This commit is contained in:
Akshita Goyal 2024-09-10 14:24:07 +05:30 committed by GitHub
parent 7c77fc1680
commit 5eb868e07d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 13 additions and 4 deletions

View file

@ -19,7 +19,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
const { completedCycleIds, upcomingCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props; const { completedCycleIds, upcomingCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props;
return ( return (
<ContentWrapper variant={ERowVariant.HUGGING}> <ContentWrapper variant={ERowVariant.HUGGING} className="flex-row">
<ListLayout> <ListLayout>
{isArchived ? ( {isArchived ? (
<> <>

View file

@ -27,6 +27,7 @@ type Props = TDropdownProps & {
showCount?: boolean; showCount?: boolean;
onClose?: () => void; onClose?: () => void;
renderByDefault?: boolean; renderByDefault?: boolean;
itemClassName?: string;
} & ( } & (
| { | {
multiple: false; multiple: false;
@ -51,6 +52,7 @@ type ButtonContentProps = {
showCount: boolean; showCount: boolean;
showTooltip?: boolean; showTooltip?: boolean;
value: string | string[] | null; value: string | string[] | null;
className?: string;
}; };
const ButtonContent: React.FC<ButtonContentProps> = (props) => { const ButtonContent: React.FC<ButtonContentProps> = (props) => {
@ -65,6 +67,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
showCount, showCount,
showTooltip = false, showTooltip = false,
value, value,
className,
} = props; } = props;
// store hooks // store hooks
const { getModuleById } = useModule(); const { getModuleById } = useModule();
@ -87,13 +90,16 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
)} )}
</div> </div>
) : value.length > 0 ? ( ) : value.length > 0 ? (
<div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5"> <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5 ">
{value.map((moduleId) => { {value.map((moduleId) => {
const moduleDetails = getModuleById(moduleId); const moduleDetails = getModuleById(moduleId);
return ( return (
<div <div
key={moduleId} key={moduleId}
className="flex max-w-full items-center gap-1 rounded bg-custom-background-80 py-1 text-custom-text-200" className={cn(
"flex max-w-full items-center gap-1 rounded bg-custom-background-80 py-1 text-custom-text-200",
className
)}
> >
{!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />} {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
{!hideText && ( {!hideText && (
@ -159,6 +165,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
const { const {
button, button,
buttonClassName, buttonClassName,
itemClassName = "",
buttonContainerClassName, buttonContainerClassName,
buttonVariant, buttonVariant,
className = "", className = "",
@ -270,6 +277,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
showTooltip={showTooltip} showTooltip={showTooltip}
value={value} value={value}
onChange={onChange as any} onChange={onChange as any}
className={itemClassName}
/> />
</DropdownButton> </DropdownButton>
</button> </button>

View file

@ -69,6 +69,7 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
dropdownArrow dropdownArrow
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline" dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
multiple multiple
itemClassName="px-2"
/> />
</div> </div>
); );

View file

@ -1,6 +1,6 @@
import update from "lodash/update";
import isEmpty from "lodash/isEmpty"; import isEmpty from "lodash/isEmpty";
import set from "lodash/set"; import set from "lodash/set";
import update from "lodash/update";
import { action, makeObservable, observable, runInAction } from "mobx"; import { action, makeObservable, observable, runInAction } from "mobx";
import { computedFn } from "mobx-utils"; import { computedFn } from "mobx-utils";
// types // types