[WEB 2418] Fix minor UI inconsistencies (#5568)
* fix: project features modal padding * fix: minor ui inconsistencies * fix: lint issue
This commit is contained in:
parent
7c77fc1680
commit
5eb868e07d
4 changed files with 13 additions and 4 deletions
|
|
@ -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 ? (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue