Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00
Code Issues Releases Activity

chore(prettier): add tailwind prettier plugin [EE-4809] (#8221)

Browse source 
* add prettier plugin

* apply tailwind prettier formatting
This commit is contained in:
Ali 2023-02-13 10:04:24 +13:00 • committed by GitHub
parent 9f6702d0b8
commit 58d66d3142
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
226 changed files with 704 additions and 699 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/react/components/Alert/Alert.tsx
View file

@ -56,7 +56,7 @@ function AlertContainer({
children,
}: PropsWithChildren<{ className?: string }>) {
return (
<div className={clsx('border-2 border-solid rounded-md', 'p-3', className)}>
<div className={clsx('rounded-md border-2 border-solid', 'p-3', className)}>
{children}
</div>
);
@ -68,7 +68,7 @@ function AlertHeader({
}: PropsWithChildren<{ className?: string }>) {
return (
<h4
className={clsx('text-base', 'flex gap-2 items-center !m-0', className)}
className={clsx('text-base', '!m-0 flex items-center gap-2', className)}
>
{children}
</h4>

2
app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx
View file

@ -35,7 +35,7 @@ export function BEFeatureIndicator({
rel="noopener noreferrer"
>
{children}
{showIcon && <Icon icon={Briefcase} className="mr-1 be-indicator-icon" />}
{showIcon && <Icon icon={Briefcase} className="be-indicator-icon mr-1" />}
<span className="be-indicator-label break-words">
Business Edition Feature
</span>

8
app/react/components/BadgeIcon/BadgeIcon.tsx
View file

@ -15,10 +15,10 @@ export function BadgeIcon({ icon, size = '3xl' }: Props) {
className={clsx(
sizeClasses,
`badge-icon
bg-blue-3 text-blue-8
th-dark:bg-gray-9 th-dark:text-blue-3
rounded-full
inline-flex items-center justify-center
inline-flex items-center
justify-center rounded-full
bg-blue-3
text-blue-8 th-dark:bg-gray-9 th-dark:text-blue-3
`
)}
>

10
app/react/components/BoxSelector/BoxOption.module.css
View file

@ -4,8 +4,8 @@
.root label {
@apply border border-solid;
@apply bg-gray-2 border-gray-5 text-black;
@apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
@apply border-gray-5 bg-gray-2 text-black;
@apply th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:text-white;
@apply th-highcontrast:text-white;
font-weight: normal;
@ -42,9 +42,9 @@
}
.root input:checked + label {
@apply bg-blue-2 border-blue-6;
@apply th-dark:bg-blue-10 th-dark:border-blue-7;
@apply th-highcontrast:bg-blue-10 th-highcontrast:border-blue-7;
@apply border-blue-6 bg-blue-2;
@apply th-dark:border-blue-7 th-dark:bg-blue-10;
@apply th-highcontrast:border-blue-7 th-highcontrast:bg-blue-10;
border-radius: 8px;
padding: 15px;

2
app/react/components/BoxSelector/BoxOption.tsx
View file

@ -51,7 +51,7 @@ export function BoxOption<T extends Value>({
{!disabled && (
<div
className={clsx(
'absolute top-4 right-4 h-4 w-4 rounded-full border border-solid border-blue-8 text-white font-bold flex items-center justify-center',
'absolute top-4 right-4 flex h-4 w-4 items-center justify-center rounded-full border border-solid border-blue-8 font-bold text-white',
{
'bg-white': !selected,
'bg-blue-8': selected,

4
app/react/components/BoxSelector/BoxSelectorItem.tsx
View file

@ -63,8 +63,8 @@ export function BoxSelectorItem<T extends Value>({
<div
className={clsx('flex gap-2', {
'opacity-30': limitedToBE,
'flex-col justify-between h-full': !slim,
'items-center slim': slim,
'h-full flex-col justify-between': !slim,
'slim items-center': slim,
})}
>
<div

2
app/react/components/BoxSelector/LimitedToBeIndicator.tsx
View file

@ -16,7 +16,7 @@ export function LimitedToBeIndicator({ featureId, tooltipId }: Props) {
return (
<div className="absolute left-0 top-0 w-full">
<div className="mx-auto max-w-fit bg-warning-4 rounded-b-lg py-1 px-3 flex gap-1 text-sm items-center">
<div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 py-1 px-3 text-sm">
<a href={url} target="_blank" rel="noopener noreferrer">
<span className="text-warning-9">BE Feature</span>
</a>

4
app/react/components/BoxSelector/LogoIcon.tsx
View file

@ -6,8 +6,8 @@ export function LogoIcon({ icon }: Props) {
return (
<div
className={`
text-6xl h-14 w-14
inline-flex items-center justify-center
inline-flex h-14 w-14
items-center justify-center text-6xl
`}
>
<Icon icon={icon} className="!flex" />

12
app/react/components/DashboardItem/DashboardItem.tsx
View file

@ -14,16 +14,16 @@ export function DashboardItem({ value, icon, type, children }: Props) {
return (
<div
className={clsx(
'border-solid rounded-lg border p-3',
'bg-gray-2 hover:bg-blue-2 border-gray-5 hover:border-blue-7',
'th-dark:bg-gray-iron-10 th-dark:hover:bg-gray-10 th-dark:border-gray-neutral-8 th-dark:hover:border-blue-8',
'th-highcontrast:bg-black th-highcontrast:hover:bg-gray-11 th-highcontrast:border-white th-highcontrast:hover:border-blue-8'
'rounded-lg border border-solid p-3',
'border-gray-5 bg-gray-2 hover:border-blue-7 hover:bg-blue-2',
'th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:hover:border-blue-8 th-dark:hover:bg-gray-10',
'th-highcontrast:border-white th-highcontrast:bg-black th-highcontrast:hover:border-blue-8 th-highcontrast:hover:bg-gray-11'
)}
>
<div className="flex items-center" aria-label={type}>
<div
className={clsx(
'icon-badge text-2xl mr-4 !p-2',
'icon-badge mr-4 !p-2 text-2xl',
'bg-blue-3 text-blue-8',
'th-dark:bg-blue-3 th-dark:text-blue-8',
'th-highcontrast:bg-blue-3 th-highcontrast:text-blue-8'
@ -35,7 +35,7 @@ export function DashboardItem({ value, icon, type, children }: Props) {
<div className="flex flex-col justify-around">
<div
className={clsx(
'font-medium text-2xl',
'text-2xl font-medium',
'text-gray-9',
'th-dark:text-white',
'th-highcontrast:text-white'

2
app/react/components/DetailsTable/DetailsRow.tsx
View file

@ -16,7 +16,7 @@ export function DetailsRow({
}: Props) {
return (
<tr className={className}>
<td className={clsx(colClassName, '!break-normal min-w-[150px]')}>
<td className={clsx(colClassName, 'min-w-[150px] !break-normal')}>
{label}
</td>
{children && (

2
app/react/components/EnvironmentStatusBadgeItem.tsx
View file

@ -20,7 +20,7 @@ export function EnvironmentStatusBadgeItem({
<span
className={clsx(
'flex items-center gap-1',
'border-2 border-solid rounded',
'rounded border-2 border-solid',
'w-fit py-px px-1',
'text-xs font-semibold text-gray-7',
{

2
app/react/components/LinkButton.tsx
View file

@ -18,7 +18,7 @@ export function LinkButton({
title={title}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
className={clsx(className, '!m-0 no-link')}
className={clsx(className, 'no-link !m-0')}
disabled={disabled}
as={disabled ? 'span' : Link}
props={{

4
app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
View file

@ -17,7 +17,7 @@ export function Breadcrumbs({ breadcrumbs }: Props) {
: [breadcrumbs];
return (
<div className="text-xs font-medium text-gray-7 th-dark:text-gray-5 th-highcontrast:text-white space-x-2">
<div className="space-x-2 text-xs font-medium text-gray-7 th-highcontrast:text-white th-dark:text-gray-5">
{breadcrumbsArray.map((crumb, index) => (
<Fragment key={index}>
<span>{renderCrumb(crumb)}</span>
@ -42,7 +42,7 @@ function renderCrumb(crumb: Crumb | string) {
<Link
to={crumb.link}
params={crumb.linkParams}
className="text-blue-9 hover:underline hover:text-blue-11 th-dark:text-blue-7 th-dark:hover:text-blue-9 th-highcontrast:text-blue-5"
className="text-blue-9 hover:text-blue-11 hover:underline th-highcontrast:text-blue-5 th-dark:text-blue-7 th-dark:hover:text-blue-9"
>
{crumb.label}
</Link>

2
app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
View file

@ -18,7 +18,7 @@ export function ContextHelp() {
className={clsx(
headerStyles.menuIcon,
'menu-icon',
'icon-badge text-lg !p-2 mr-1',
'icon-badge mr-1 !p-2 text-lg',
'text-gray-8',
'th-dark:text-gray-warm-7'
)}

2
app/react/components/PageHeader/HeaderTitle.tsx
View file

@ -16,7 +16,7 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
return (
<div className="flex justify-between whitespace-normal pt-3">
<div className="flex items-center gap-2">
<div className="font-medium text-2xl text-gray-11 th-dark:text-white th-highcontrast:text-white">
<div className="text-2xl font-medium text-gray-11 th-highcontrast:text-white th-dark:text-white">
{title}
</div>
{children && <span>{children}</span>}

2
app/react/components/PageHeader/NotificationsMenu.tsx
View file

@ -65,7 +65,7 @@ export function NotificationsMenu() {
<div
className={clsx(
headerStyles.menuIcon,
'icon-badge text-lg !p-2 mr-1',
'icon-badge mr-1 !p-2 text-lg',
'text-gray-8',
'th-dark:text-gray-warm-7'
)}

2
app/react/components/PageHeader/UserMenu.tsx
View file

@ -29,7 +29,7 @@ export function UserMenu() {
<div
className={clsx(
styles.menuIcon,
'icon-badge text-lg !p-2 mr-1',
'icon-badge mr-1 !p-2 text-lg',
'text-gray-8',
'th-dark:text-gray-warm-7'
)}

2
app/react/components/PaginationControls/PageInput.tsx
View file

@ -25,7 +25,7 @@ export function PageInput({ onChange, totalPages }: Props) {
return (
<form className="mx-3" onSubmit={handleSubmit}>
<label className="m-0 mr-2 font-normal small" htmlFor="go-to-page-input">
<label className="small m-0 mr-2 font-normal" htmlFor="go-to-page-input">
Go to page
</label>
<Input

4
app/react/components/StatsItem.tsx
View file

@ -16,11 +16,11 @@ export function StatsItem({
iconClass,
}: PropsWithChildren<Props>) {
return (
<span className="flex gap-1 items-center">
<span className="flex items-center gap-1">
<Icon className={clsx('icon icon-sm', iconClass)} icon={icon} />
<span>{value}</span>
{children && (
<span className="ml-1 flex gap-2 items-center">{children}</span>
<span className="ml-1 flex items-center gap-2">{children}</span>
)}
</span>
);

2
app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx
View file

@ -40,7 +40,7 @@ export function TooltipWithChildren({
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div className={styles.tooltipContainer} onClick={onClickHandler}>
{(heading || (BEFeatureID && limitedToBE)) && (
<div className="w-full mb-3 inline-flex justify-between">
<div className="mb-3 inline-flex w-full justify-between">
<span>{heading}</span>
{BEFeatureID && limitedToBE && (
<a

2
app/react/components/ViewLoading/ViewLoading.tsx
View file

@ -21,7 +21,7 @@ export function ViewLoading({ message }: Props) {
{message && (
<span className={styles.message}>
{message}
<Icon icon={Settings} className="animate-spin-slow !ml-1" />
<Icon icon={Settings} className="!ml-1 animate-spin-slow" />
</span>
)}
</div>

2
app/react/components/buttons/LoadingButton.tsx
View file

@ -39,7 +39,7 @@ function loadingButtonIcon(isLoading: boolean, defaultIcon: ReactNode) {
return (
<Icon
icon={Loader2}
className="animate-spin-slow ml-1"
className="ml-1 animate-spin-slow"
aria-label="loading"
/>
);

2
app/react/components/datatables/NestedTable.css
View file

@ -1,5 +1,5 @@
.inner-datatable {
@apply border border-solid rounded-md border-gray-5 th-dark:border-gray-9;
@apply rounded-md border border-solid border-gray-5 th-dark:border-gray-9;
overflow: hidden;
}

2
app/react/components/datatables/SearchBar.tsx
View file

@ -32,7 +32,7 @@ export function SearchBar({
return (
<div
className={clsx('searchBar items-center flex min-w-[90px]', className)}
className={clsx('searchBar flex min-w-[90px] items-center', className)}
>
<Search className="searchIcon lucide shrink-0" />
<input

2
app/react/components/datatables/Table.tsx
View file

@ -23,7 +23,7 @@ function MainComponent({
<div className="table-responsive">
<table
className={clsx(
'table table-hover table-filters nowrap-cells',
'table-hover table-filters nowrap-cells table',
className
)}
role={role}

2
app/react/components/datatables/TableContent.tsx
View file

@ -41,7 +41,7 @@ function TableContentOneColumn({ children }: PropsWithChildren<unknown>) {
// using MAX_SAFE_INTEGER to make sure the single column will be the size of the table
return (
<tr>
<td colSpan={Number.MAX_SAFE_INTEGER} className="text-center text-muted">
<td colSpan={Number.MAX_SAFE_INTEGER} className="text-muted text-center">
{children}
</td>
</tr>

8
app/react/components/datatables/TableHeaderCell.tsx
View file

@ -28,7 +28,7 @@ export function TableHeaderCell({
}: Props) {
return (
<th role={role} style={style} className={className}>
<div className="flex flex-row flex-nowrap h-full items-center gap-1">
<div className="flex h-full flex-row flex-nowrap items-center gap-1">
<SortWrapper
canSort={canSort}
onClick={onSortClick}
@ -66,12 +66,12 @@ function SortWrapper({
type="button"
onClick={() => onClick(!isSortedDesc)}
className={clsx(
'!bg-transparent w-full h-full !ml-0 !px-0 border-none focus:border-none',
'!ml-0 h-full w-full border-none !bg-transparent !px-0 focus:border-none',
styles.sortable,
isSorted && styles.sortingActive
)}
>
<div className="flex flex-row justify-start items-center w-full h-full">
<div className="flex h-full w-full flex-row items-center justify-start">
{children}
<TableHeaderSortIcons
sorted={isSorted}
@ -97,7 +97,7 @@ export function TableColumnHeaderAngular({
isSortedDesc = true,
}: TableColumnHeaderAngularProps) {
return (
<div className="flex flex-row flex-nowrap h-full">
<div className="flex h-full flex-row flex-nowrap">
<SortWrapper
canSort={canSort}
isSorted={!!isSorted}

2
app/react/components/datatables/TableHeaderSortIcons.tsx
View file

@ -12,7 +12,7 @@ interface Props {
export function TableHeaderSortIcons({ sorted, descending, className }: Props) {
return (
<div className="flex flex-row no-wrap w-min-max align-middle">
<div className="no-wrap w-min-max flex flex-row align-middle">
<SortDownIcon
className={clsx(
className,

2
app/react/components/datatables/TableTitle.tsx
View file

@ -19,7 +19,7 @@ export function TableTitle({
}: PropsWithChildren<Props>) {
return (
<div className={clsx('toolBar flex-col', className)}>
<div className="flex gap-1 p-0 w-full items-center">
<div className="flex w-full items-center gap-1 p-0">
<div className="toolBarTitle">
{icon && (
<div className="widget-icon">

2
app/react/components/form-components/FormControl/FormControl.tsx
View file

@ -32,7 +32,7 @@ export function FormControl({
<div
className={clsx(
'form-group',
'after:content-[""] after:clear-both after:table' // to fix issues with float
'after:clear-both after:table after:content-[""]' // to fix issues with float
)}
>
<label

2
app/react/components/form-components/FormSection/FormSection.tsx
View file

@ -25,7 +25,7 @@ export function FormSection({
id={`foldingButton${title}`}
type="button"
onClick={() => setIsExpanded(!isExpanded)}
className="border-0 mx-2 !ml-0 bg-transparent inline-flex justify-center items-center w-2"
className="mx-2 !ml-0 inline-flex w-2 items-center justify-center border-0 bg-transparent"
>
<Icon
icon={isExpanded ? ChevronDown : ChevronRight}

2
app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
View file

@ -12,7 +12,7 @@ export function FormSectionTitle({
return (
<label
htmlFor={htmlFor}
className="col-sm-12 form-section-title cursor-pointer flex items-center"
className="col-sm-12 form-section-title flex cursor-pointer items-center"
>
{children}
</label>

2
app/react/components/form-components/Slider/Slider.module.css
View file

@ -7,7 +7,7 @@
}
.slider :global .rc-slider-handle {
@apply border-blue-8 border-2;
@apply border-2 border-blue-8;
width: 24px;
height: 24px;
margin-top: -8px;

2
app/react/components/form-components/SwitchField/SwitchField.tsx
View file

@ -42,7 +42,7 @@ export function SwitchField({
return (
<label className={clsx(styles.root, fieldClass)}>
<span
className={clsx('text-left space-right control-label !p-0', labelClass)}
className={clsx('space-right control-label !p-0 text-left', labelClass)}
>
{label}
{tooltip && (

2
app/react/components/modals/Modal/CloseButton.tsx
View file

@ -15,7 +15,7 @@ export function CloseButton({
className={clsx(
styles.close,
className,
'absolute top-4 right-5 close-button'
'close-button absolute top-4 right-5'
)}
onClick={() => onClose()}
>

4
app/react/components/modals/Modal/Modal.tsx
View file

@ -39,7 +39,7 @@ export function Modal({
isOpen
className={clsx(
styles.overlay,
'flex items-center justify-center z-50'
'z-50 flex items-center justify-center'
)}
onDismiss={onDismiss}
role="dialog"
@ -47,7 +47,7 @@ export function Modal({
<DialogContent
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
className={clsx(styles.modalDialog, 'p-0 bg-transparent', {
className={clsx(styles.modalDialog, 'bg-transparent p-0', {
'w-[450px]': size === 'md',
'w-[700px]': size === 'lg',
})}

2
app/react/components/modals/Modal/ModalFooter.tsx
View file

@ -6,6 +6,6 @@ export function ModalFooter({ children }: PropsWithChildren<unknown>) {
useModalContext();
return (
<div className="flex justify-end gap-3 [&>*]:flex-1 pt-3">{children}</div>
<div className="flex justify-end gap-3 pt-3 [&>*]:flex-1">{children}</div>
);
}

2
app/react/components/modals/Modal/ModalHeader.tsx
View file

@ -24,7 +24,7 @@ export function ModalHeader({ title, modalType }: Props) {
/>
)}
{typeof title === 'string' ? (
<h5 className="font-bold m-0">{title}</h5>
<h5 className="m-0 font-bold">{title}</h5>
) : (
title
)}

2
app/react/docker/images/ItemView/DockerfileDetails.tsx
View file

@ -61,7 +61,7 @@ export function DockerfileDetails({ image }: Props) {
{image.Env.length > 0 && (
<DetailsTable.Row label="ENV">
<table className="table table-bordered table-condensed">
<table className="table-bordered table-condensed table">
<tbody>
{image.Env.map((variable) => (
<tr key={variable}>

4
app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
View file

@ -144,12 +144,12 @@ export function IngressClassDatatable({
function renderIngressClassDescription() {
return (
<div className="flex flex-col !text-xs text-muted w-full">
<div className="text-muted flex w-full flex-col !text-xs">
<div className="mt-1">{description}</div>
{ingressControllers &&
ingControllerFormValues &&
isUnsavedChanges(ingressControllers, ingControllerFormValues) && (
<span className="flex items-center text-warning mt-1">
<span className="text-warning mt-1 flex items-center">
<Icon icon={AlertTriangle} className="!mr-1" />
<span className="text-warning">Unsaved changes.</span>
</span>

6
app/react/kubernetes/ingresses/CreateIngressView/Annotations/index.tsx
View file

@ -29,7 +29,7 @@ export function Annotations({
<>
{annotations.map((annotation, i) => (
<div className="row" key={annotation.ID}>
<div className="form-group !pl-0 col-sm-4 !m-0">
<div className="form-group col-sm-4 !m-0 !pl-0">
<div className="input-group input-group-sm">
<span className="input-group-addon required">Key</span>
<input
@ -49,7 +49,7 @@ export function Annotations({
</FormError>
)}
</div>
<div className="form-group !pl-0 col-sm-4 !m-0">
<div className="form-group col-sm-4 !m-0 !pl-0">
<div className="input-group input-group-sm">
<span className="input-group-addon required">Value</span>
<input
@ -69,7 +69,7 @@ export function Annotations({
</FormError>
)}
</div>
<div className="col-sm-3 !pl-0 !m-0">
<div className="col-sm-3 !m-0 !pl-0">
<Button
size="small"
color="dangerlight"

44
app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
View file

@ -164,7 +164,7 @@ export function IngressForm({
/>
)}
{errors.ingressName && !isEdit && (
<FormError className="mt-1 error-inline">
<FormError className="error-inline mt-1">
{errors.ingressName}
</FormError>
)}
@ -190,7 +190,7 @@ export function IngressForm({
options={ingressClassOptions}
/>
{errors.className && (
<FormError className="mt-1 error-inline">
<FormError className="error-inline mt-1">
{errors.className}
</FormError>
)}
@ -198,7 +198,7 @@ export function IngressForm({
</div>
</div>
<div className="col-sm-12 px-0 text-muted !mb-0">
<div className="col-sm-12 text-muted !mb-0 px-0">
<div className="mb-2">Annotations</div>
<p className="vertical-center text-muted small">
<Icon icon={Info} mode="primary" />
@ -232,7 +232,7 @@ export function IngressForm({
/>
)}
<div className="col-sm-12 p-0 anntation-actions">
<div className="col-sm-12 anntation-actions p-0">
<Button
className="btn btn-sm btn-light mb-2 !ml-0"
onClick={() => addNewAnnotation()}
@ -280,15 +280,15 @@ export function IngressForm({
)}
</div>
<div className="col-sm-12 px-0 text-muted">Rules</div>
<div className="col-sm-12 text-muted px-0">Rules</div>
</div>
)}
{namespace &&
rule?.Hosts?.map((host, hostIndex) => (
<div className="row mb-5 rule bordered" key={host.Key}>
<div className="row rule bordered mb-5" key={host.Key}>
<div className="col-sm-12">
<div className="row mt-5 rule-actions">
<div className="row rule-actions mt-5">
<div className="col-sm-3 p-0">
{!host.NoHost ? 'Rule' : 'Fallback rule'}
</div>
@ -318,7 +318,7 @@ export function IngressForm({
</div>
{!host.NoHost && (
<div className="row">
<div className="form-group !pl-0 col-sm-6 col-lg-4 !pr-2">
<div className="form-group col-sm-6 col-lg-4 !pl-0 !pr-2">
<div className="input-group input-group-sm">
<span className="input-group-addon required">
Hostname
@ -341,7 +341,7 @@ export function IngressForm({
)}
</div>
<div className="form-group !pr-0 col-sm-6 col-lg-4 !pl-2">
<div className="form-group col-sm-6 col-lg-4 !pr-0 !pl-2">
<div className="input-group input-group-sm">
<span className="input-group-addon">TLS secret</span>
<Select
@ -356,7 +356,7 @@ export function IngressForm({
</div>
</div>
<p className="vertical-center text-muted small whitespace-nowrap col-sm-12 !p-0">
<p className="vertical-center text-muted small col-sm-12 whitespace-nowrap !p-0">
<Icon icon={Info} mode="primary" size="md" />
<span>
Add a secret via{' '}
@ -376,7 +376,7 @@ export function IngressForm({
</div>
)}
{host.NoHost && (
<p className="vertical-center text-muted small whitespace-nowrap col-sm-12 !p-0">
<p className="vertical-center text-muted small col-sm-12 whitespace-nowrap !p-0">
<Icon icon={Info} mode="primary" size="md" />A fallback rule
has no host specified. This rule only applies when an
inbound request has a hostname that does not match with any
@ -385,16 +385,16 @@ export function IngressForm({
)}
<div className="row">
<div className="col-sm-12 px-0 !mb-0 mt-2 text-muted">
<div className="col-sm-12 text-muted !mb-0 mt-2 px-0">
Paths
</div>
</div>
{host.Paths.map((path, pathIndex) => (
<div
className="mt-5 !mb-5 row path"
className="row path mt-5 !mb-5"
key={`path_${path.Key}}`}
>
<div className="form-group !pl-0 col-sm-3 col-xl-2 !m-0">
<div className="form-group col-sm-3 col-xl-2 !m-0 !pl-0">
<div className="input-group input-group-sm">
<span className="input-group-addon required">
Service
@ -417,7 +417,7 @@ export function IngressForm({
{errors[
`hosts[${hostIndex}].paths[${pathIndex}].servicename`
] && (
<FormError className="mt-1 !mb-0 error-inline">
<FormError className="error-inline mt-1 !mb-0">
{
errors[
`hosts[${hostIndex}].paths[${pathIndex}].servicename`
@ -427,7 +427,7 @@ export function IngressForm({
)}
</div>
<div className="form-group !pl-0 col-sm-2 col-xl-2 !m-0">
<div className="form-group col-sm-2 col-xl-2 !m-0 !pl-0">
{servicePorts && (
<>
<div className="input-group input-group-sm">
@ -474,7 +474,7 @@ export function IngressForm({
)}
</div>
<div className="form-group !pl-0 col-sm-3 col-xl-2 !m-0">
<div className="form-group col-sm-3 col-xl-2 !m-0 !pl-0">
<div className="input-group input-group-sm">
<span className="input-group-addon required">
Path type
@ -514,7 +514,7 @@ export function IngressForm({
)}
</div>
<div className="form-group !pl-0 col-sm-3 col-xl-3 !m-0">
<div className="form-group col-sm-3 col-xl-3 !m-0 !pl-0">
<div className="input-group input-group-sm">
<span className="input-group-addon required">Path</span>
<input
@ -547,9 +547,9 @@ export function IngressForm({
)}
</div>
<div className="form-group !pl-0 col-sm-1 !m-0">
<div className="form-group col-sm-1 !m-0 !pl-0">
<Button
className="btn btn-sm btn-only-icon !ml-0 vertical-center"
className="btn btn-sm btn-only-icon vertical-center !ml-0"
color="dangerlight"
type="button"
data-cy={`k8sAppCreate-rmPortButton_${hostIndex}-${pathIndex}`}
@ -576,8 +576,8 @@ export function IngressForm({
))}
{namespace && (
<div className="row p-0 rules-action">
<div className="col-sm-12 p-0 vertical-center">
<div className="row rules-action p-0">
<div className="col-sm-12 vertical-center p-0">
<Button
className="btn btn-sm btn-light !ml-0"
type="button"

2
app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx
View file

@ -33,7 +33,7 @@ export const ingressRules: Column<Ingress> = {
const isHttp = isHTTP(row.original.TLS || [], path.Host);
return (
<div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
<span className="flex px-2 flex-nowrap items-center gap-1">
<span className="flex flex-nowrap items-center gap-1 px-2">
{link(path.Host, path.Path, isHttp)}
<Icon icon={ArrowRight} />
{`${path.ServiceName}:${path.Port}`}

2
app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
View file

@ -72,7 +72,7 @@ function Label({ option }: { option: Option }) {
const Icon = option.Type === 'user' ? UserIcon : TeamIcon;
return (
<div className="flex gap-1 items-center">
<div className="flex items-center gap-1">
<Icon />
<span>{option.Name}</span>
<span>|</span>

2
app/react/nomad/DashboardView/DashboardView.tsx
View file

@ -28,7 +28,7 @@ export function DashboardView() {
{dashboardQuery.isLoading ? (
<div className="text-center" style={{ marginTop: '30%' }}>
Connecting to the Edge environment...
<Icon icon={Settings} className="animate-spin-slow !ml-1" />
<Icon icon={Settings} className="!ml-1 animate-spin-slow" />
</div>
) : (
<>

2
app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx
View file

@ -27,7 +27,7 @@ export function ActionsCell({ row }: CellProps<Task>) {
};
return (
<div className="text-center vertical-center">
<div className="vertical-center text-center">
{/* events */}
<Link
to="nomad.events"

2
app/react/portainer/HomeView/EdgeLoadingSpinner.tsx
View file

@ -9,7 +9,7 @@ export function EdgeLoadingSpinner() {
return (
<div className={clsx('row', styles.root)}>
Connecting to the Edge environment...
<Icon icon={Settings} className="animate-spin-slow !ml-1" />
<Icon icon={Settings} className="!ml-1 animate-spin-slow" />
</div>
);
}

6
app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
View file

@ -50,7 +50,7 @@ export function AssociateAMTDialog({
Select the environments to add to associate to OpenAMT. You may select
across multiple pages.
</span>
<div className="h-8 flex items-center">
<div className="flex h-8 items-center">
<Checkbox
id="settings-container-truncate-name"
label="Select all (in this page)"
@ -63,7 +63,7 @@ export function AssociateAMTDialog({
{environments.map((env) => (
<div
key={env.Id}
className={clsx('h-8 flex items-center pt-1 pl-2')}
className={clsx('flex h-8 items-center pt-1 pl-2')}
>
<Checkbox
id={`${env.Id}`}
@ -76,7 +76,7 @@ export function AssociateAMTDialog({
</div>
))}
</div>
<div className="pt-3 flex justify-end w-full">
<div className="flex w-full justify-end pt-3">
<PaginationControls
showAll={totalCount <= 100}
page={page}

6
app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
View file

@ -27,7 +27,7 @@ export function EditButtons({ environment }: { environment: Environment }) {
);
return (
<ButtonsGrid className="w-11 ml-3">
<ButtonsGrid className="ml-3 w-11">
<LinkButton
disabled={!isAdmin}
to="portainer.endpoints.endpoint"
@ -85,8 +85,8 @@ function ButtonsGrid({
return (
<div
className={clsx(
'grid border border-solid rounded-r-lg',
'border-gray-5 th-dark:border-gray-9 th-highcontrast:border-white',
'grid rounded-r-lg border border-solid',
'border-gray-5 th-highcontrast:border-white th-dark:border-gray-9',
'overflow-hidden',
className
)}

22
app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
View file

@ -30,7 +30,7 @@ export function EnvironmentBrowseButtons({
const dashboardRoute = getDashboardRoute(environment);
return (
<div className="flex flex-col gap-2 justify-center [&>*]:h-1/3 h-24 w-full">
<div className="flex h-24 w-full flex-col justify-center gap-2 [&>*]:h-1/3">
{isBE &&
(browseStatus !== 'snapshot' ? (
<LinkButton
@ -42,7 +42,7 @@ export function EnvironmentBrowseButtons({
}}
size="medium"
color="light"
className="w-full !py-0 !m-0"
className="!m-0 w-full !py-0"
title={
!isEdgeAsync
? 'Browse snapshot is only available for async environments'
@ -55,7 +55,7 @@ export function EnvironmentBrowseButtons({
<Button
icon={X}
onClick={onClickDisconnect}
className="w-full !py-0 !m-0 opacity-60"
className="!m-0 w-full !py-0 opacity-60"
size="medium"
color="light"
>
@ -77,7 +77,7 @@ export function EnvironmentBrowseButtons({
size="medium"
onClick={onClickBrowse}
color="primary"
className="w-full !py-0 !m-0"
className="!m-0 w-full !py-0"
>
Live connect
</LinkButton>
@ -85,7 +85,7 @@ export function EnvironmentBrowseButtons({
<Button
icon={WifiOff}
onClick={onClickDisconnect}
className="w-full !py-0 !m-0 opacity-60"
className="!m-0 w-full !py-0 opacity-60"
size="medium"
color="primary"
>
@ -125,7 +125,7 @@ function BrowseStatusTag({ status }: { status: BrowseStatus }) {
function Disconnected() {
return (
<div className="flex items-center gap-2 justify-center">
<div className="flex items-center justify-center gap-2">
<Icon icon={WifiOff} />
Disconnected
</div>
@ -136,12 +136,12 @@ function Connected() {
return (
<div
className={clsx(
'flex items-center gap-2 justify-center rounded-lg',
'flex items-center justify-center gap-2 rounded-lg',
'text-green-8 th-dark:text-green-4',
'bg-green-3 th-dark:bg-green-3/30'
)}
>
<div className="rounded-full h-2 w-2 bg-green-8 th-dark:bg-green-4" />
<div className="h-2 w-2 rounded-full bg-green-8 th-dark:bg-green-4" />
Connected
</div>
);
@ -151,12 +151,12 @@ function Snapshot() {
return (
<div
className={clsx(
'flex items-center gap-2 justify-center rounded-lg',
'flex items-center justify-center gap-2 rounded-lg',
'text-warning-7 th-dark:text-warning-4',
'bg-warning-3 th-dark:bg-warning-3/10 th-highcontrast:bg-warning-3/30'
'bg-warning-3 th-highcontrast:bg-warning-3/30 th-dark:bg-warning-3/10'
)}
>
<div className="rounded-full h-2 w-2 bg-warning-7" />
<div className="h-2 w-2 rounded-full bg-warning-7" />
Browsing Snapshot
</div>
);

10
app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
View file

@ -59,14 +59,14 @@ export function EnvironmentItem({
className="no-link"
>
<button
className="blocklist-item flex items-stretch overflow-hidden min-h-[110px] bg-transparent w-full !m-0 !pr-56"
className="blocklist-item !m-0 flex min-h-[110px] w-full items-stretch overflow-hidden bg-transparent !pr-56"
onClick={onClickBrowse}
type="button"
>
<div className="ml-2 self-center flex justify-center">
<div className="ml-2 flex justify-center self-center">
<EnvironmentIcon type={environment.Type} />
</div>
<div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start">
<div className="ml-3 mr-auto flex flex-col items-start justify-center gap-3">
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
<span className="font-bold">{environment.Name}</span>
{isEdge ? (
@ -114,8 +114,8 @@ export function EnvironmentItem({
Buttons are extracted out of the main button because it causes errors with react and accessibility issues
see https://stackoverflow.com/questions/66409964/warning-validatedomnesting-a-cannot-appear-as-a-descendant-of-a
*/}
<div className="absolute inset-y-0 right-0 flex justify-end w-56">
<div className="py-3 flex items-center flex-1">
<div className="absolute inset-y-0 right-0 flex w-56 justify-end">
<div className="flex flex-1 items-center py-3">
<EnvironmentBrowseButtons
environment={environment}
onClickBrowse={onClickBrowse}

2
app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
View file

@ -18,7 +18,7 @@ export function EnvironmentStats({ environment }: Props) {
const component = getComponent(platform, environment);
return (
<span className="blocklist-item-desc flex items-center gap-x-10 gap-y-2 flex-wrap">
<span className="blocklist-item-desc flex flex-wrap items-center gap-x-10 gap-y-2">
{component}
</span>
);

10
app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
View file

@ -153,9 +153,9 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
</div>
}
>
<div className="flex gap-4 items-center">
<div className="flex items-center gap-4">
<SearchBar
className="!bg-transparent !m-0 !min-w-[350px]"
className="!m-0 !min-w-[350px] !bg-transparent"
value={searchBarValue}
onChange={setSearchBarValue}
placeholder="Search by name, group, tag, status, URL..."
@ -209,7 +209,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
/>
</div>
<div
className="blocklist !p-0 mt-5 !space-y-2"
className="blocklist mt-5 !space-y-2 !p-0"
data-cy="home-endpointList"
>
{renderItems(
@ -389,7 +389,7 @@ function renderItems(
) {
if (isLoading) {
return (
<div className="text-center text-muted" data-cy="home-loadingEndpoints">
<div className="text-muted text-center" data-cy="home-loadingEndpoints">
Loading...
</div>
);
@ -397,7 +397,7 @@ function renderItems(
if (!totalCount) {
return (
<div className="text-center text-muted" data-cy="home-noEndpoints">
<div className="text-muted text-center" data-cy="home-noEndpoints">
No environments available.
</div>
);

8
app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
View file

@ -69,7 +69,7 @@ export function KubeconfigPrompt({
role="dialog"
onDismiss={onClose}
>
<DialogContent className="p-0 bg-transparent modal-dialog">
<DialogContent className="modal-dialog bg-transparent p-0">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
@ -89,7 +89,7 @@ export function KubeconfigPrompt({
</div>
</form>
<br />
<div className="h-8 flex items-center">
<div className="flex h-8 items-center">
<Checkbox
id="settings-container-truncate-name"
label="Select all (in this page)"
@ -106,7 +106,7 @@ export function KubeconfigPrompt({
key={env.Id}
className={clsx(
styles.checkbox,
'h-8 flex items-center pt-1'
'flex h-8 items-center pt-1'
)}
>
<Checkbox
@ -120,7 +120,7 @@ export function KubeconfigPrompt({
</div>
))}
</div>
<div className="pt-3 flex justify-end w-full">
<div className="flex w-full justify-end pt-3">
<PaginationControls
showAll={totalCount <= 100}
page={page}

4
app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
View file

@ -27,7 +27,7 @@ export function SortbySelector({
}: Props) {
const sorted = sortByButton && !!value;
return (
<div className="flex items-center gap-1 justify-end">
<div className="flex items-center justify-end gap-1">
<Select
placeholder={placeHolder}
options={filterOptions}
@ -37,7 +37,7 @@ export function SortbySelector({
/>
<button
className={clsx(styles.sortButton, 'h-[34px] !m-0')}
className={clsx(styles.sortButton, '!m-0 h-[34px]')}
type="button"
disabled={!sorted}
onClick={(e) => {

10
app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
View file

@ -11,22 +11,22 @@ export function UpdateBadge() {
return (
<span
className={clsx(
'inline-flex items-center gap-2 p-1 font-normal border-solid border border-transparent rounded-3xl h-fit',
'inline-flex h-fit items-center gap-2 rounded-3xl border border-solid border-transparent p-1 font-normal',
'bg-blue-3 text-blue-8',
'th-dark:bg-blue-8 th-dark:text-white',
'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:border-white'
'th-highcontrast:border-white th-highcontrast:bg-transparent th-highcontrast:text-white'
)}
>
<span className="hidden 2xl:!inline text-sm">
<span className="hidden text-sm 2xl:!inline">
Update Available: Edge Agent {version}
</span>
<Link
to="portainer.endpoints.updateSchedules.create"
className={clsx(
'badge font-normal border-solid border border-transparent',
'badge border border-solid border-transparent font-normal',
'bg-blue-8 text-blue-3',
'th-dark:bg-blue-3 th-dark:text-blue-8 th-dark:hover:bg-blue-5 th-dark:hover:text-blue-8',
'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:hover:bg-gray-warm-7 th-highcontrast:hover:text-white th-highcontrast:border-white'
'th-highcontrast:border-white th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:hover:bg-gray-warm-7 th-highcontrast:hover:text-white'
)}
>
Schedule Update

2
app/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector.tsx
View file

@ -76,7 +76,7 @@ function Label({ option }: { option: Option }) {
const Icon = option.Type === 'user' ? UserIcon : TeamIcon;
return (
<div className="flex gap-1 items-center">
<div className="flex items-center gap-1">
<Icon />
<span>{option.Name}</span>
</div>

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
View file

@ -92,7 +92,7 @@ export function WizardKubernetes({ onCreate }: Props) {
);
case EnvironmentCreationTypes.KubeConfigEnvironment:
return (
<div className="px-1 py-5 border border-solid border-orange-1">
<div className="border border-solid border-orange-1 px-1 py-5">
<BEFeatureIndicator
featureId={options.find((o) => o.value === type)?.feature}
/>

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList.tsx
View file

@ -19,7 +19,7 @@ interface Props {
function Item({ item, onChange }: ItemProps<Gpu>) {
return (
<div className="flex gap-2 flex-grow">
<div className="flex flex-grow gap-2">
<InputGroup size="small" className="flex-grow">
<InputGroup.Addon>GPU Name</InputGroup.Addon>
<InputGroup.Input

10
app/react/portainer/environments/wizard/components/Option/Option.module.css
View file

@ -1,9 +1,9 @@
.root {
--selected-item-color: var(--blue-2);
@apply border border-solid;
@apply bg-gray-2 border-gray-5 text-black;
@apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
@apply th-highcontrast:bg-gray-iron-10 th-highcontrast:border-gray-neutral-8 th-highcontrast:text-white;
@apply border-gray-5 bg-gray-2 text-black;
@apply th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:text-white;
@apply th-highcontrast:border-gray-neutral-8 th-highcontrast:bg-gray-iron-10 th-highcontrast:text-white;
display: block;
width: 200px;
@ -36,8 +36,8 @@
}
.active {
@apply bg-blue-3 border-blue-6;
@apply th-dark:bg-blue-10 th-dark:border-blue-7;
@apply border-blue-6 bg-blue-3;
@apply th-dark:border-blue-7 th-dark:bg-blue-10;
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
}

4
app/react/portainer/environments/wizard/components/Option/Option.tsx
View file

@ -44,11 +44,11 @@ export function Option({
disabled={isLimited}
onClick={onClick}
>
<div className="flex items-end justify-center text-center mt-2">
<div className="mt-2 flex items-end justify-center text-center">
<IconComponent selected={active} className={styles.iconComponent} />
</div>
<div className="mt-3 text-center flex flex-col">
<div className="mt-3 flex flex-col text-center">
<h3>{title}</h3>
<h5>{description}</h5>
{isLimited && (

10
app/react/sidebar/EnvironmentSidebar.tsx
View file

@ -46,7 +46,7 @@ export function EnvironmentSidebar() {
<div className="flex items-center gap-1">
<span>Environment:</span>
<Icon icon={Slash} className="text-xl !text-gray-6" />
<span className="text-gray-6 text-sm">None selected</span>
<span className="text-sm text-gray-6">None selected</span>
</div>
</SidebarSectionTitle>
)}
@ -130,7 +130,7 @@ function Title({ environment, onClear }: TitleProps) {
if (!isOpen) {
return (
<div className="w-8 flex justify-center -ml-3" title={environment.Name}>
<div className="-ml-3 flex w-8 justify-center" title={environment.Name}>
<EnvironmentIcon className="text-2xl" />
</div>
);
@ -138,8 +138,8 @@ function Title({ environment, onClear }: TitleProps) {
return (
<div className="flex items-center">
<EnvironmentIcon className="text-2xl mr-3" />
<span className="text-white text-ellipsis overflow-hidden whitespace-nowrap">
<EnvironmentIcon className="mr-3 text-2xl" />
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-white">
{environment.Name}
</span>
@ -149,7 +149,7 @@ function Title({ environment, onClear }: TitleProps) {
onClick={onClear}
className={clsx(
styles.closeBtn,
'flex items-center justify-center transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white'
'ml-auto mr-2 flex h-5 w-5 items-center justify-center rounded border-0 p-1 text-sm text-gray-5 transition-colors duration-200 hover:text-white be:text-gray-6 be:hover:text-white'
)}
>
<X />

2
app/react/sidebar/Footer/Footer.tsx
View file

@ -43,7 +43,7 @@ function BEFooter() {
function FooterContent({ children }: PropsWithChildren<unknown>) {
return (
<div className="text-[10px] space-x-1 text-gray-5 be:text-gray-6 flex items-center mx-auto justify-center">
<div className="mx-auto flex items-center justify-center space-x-1 text-[10px] text-gray-5 be:text-gray-6">
{children}
</div>
);

8
app/react/sidebar/Header.tsx
View file

@ -24,14 +24,14 @@ export function Header({ logo: customLogo }: Props) {
<Link
to="portainer.home"
data-cy="portainerSidebar-homeImage"
className="text-2xl text-white no-underline hover:no-underline hover:text-white focus:no-underline focus:text-white focus:outline-none"
className="text-2xl text-white no-underline hover:text-white hover:no-underline focus:text-white focus:no-underline focus:outline-none"
>
<Logo customLogo={customLogo} isOpen={isOpen} />
</Link>
{isOpen && customLogo && (
<div
className={clsx(
'uppercase text-[9.4px] space-x-1 tracking-[.28em] pt-3',
'space-x-1 pt-3 text-[9.4px] uppercase tracking-[.28em]',
'text-gray-3',
'th-dark:text-gray-warm-6'
)}
@ -62,9 +62,9 @@ export function Header({ logo: customLogo }: Props) {
onClick={() => toggle()}
className={clsx(
styles.collapseBtn,
'w-6 h-6 flex justify-center items-center border-0 rounded',
'flex h-6 w-6 items-center justify-center rounded border-0',
'transition-all duration-200',
'text-sm text-gray-4 be:text-gray-5 hover:text-white be:hover:text-white',
'text-sm text-gray-4 hover:text-white be:text-gray-5 be:hover:text-white',
'bg-blue-11 be:bg-gray-10',
'th-dark:bg-gray-warm-11',
'absolute',

2
app/react/sidebar/SettingsSidebar.tsx
View file

@ -151,7 +151,7 @@ export function SettingsSidebar({ isAdmin, isTeamLeader }: Props) {
}
target="_blank"
rel="noreferrer"
className="px-3 rounded flex h-8 items-center"
className="flex h-8 items-center rounded px-3"
>
Help / About
</a>

4
app/react/sidebar/Sidebar.tsx
View file

@ -35,13 +35,13 @@ export function Sidebar() {
<nav
className={clsx(
styles.nav,
'p-5 flex flex-col flex-1 overflow-y-auto'
'flex flex-1 flex-col overflow-y-auto p-5'
)}
aria-label="Main"
>
<Header logo={LogoURL} />
{/* negative margin + padding -> scrollbar won't hide the content */}
<div className="mt-6 overflow-y-auto flex-1 -mr-4 pr-4">
<div className="mt-6 -mr-4 flex-1 overflow-y-auto pr-4">
<ul className="space-y-9">
<SidebarItem
to="portainer.home"

12
app/react/sidebar/SidebarItem/Head.tsx
View file

@ -47,12 +47,12 @@ export function Head({
onClick={anchorProps.onClick}
className={clsx(
anchorProps.className,
'text-inherit no-underline hover:no-underline hover:text-inherit focus:no-underline focus:text-inherit',
'w-full flex-1 rounded-md flex items-center h-8 space-x-4 text-sm',
'hover:bg-blue-9 th-dark:hover:bg-gray-true-9 be:hover:bg-gray-9 transition-colors duration-200',
'text-inherit no-underline hover:text-inherit hover:no-underline focus:text-inherit focus:no-underline',
'flex h-8 w-full flex-1 items-center space-x-4 rounded-md text-sm',
'transition-colors duration-200 hover:bg-blue-9 be:hover:bg-gray-9 th-dark:hover:bg-gray-true-9',
{
'px-3 justify-start w-full': isOpen,
'justify-center w-8': !isOpen,
'w-full justify-start px-3': isOpen,
'w-8 justify-center': !isOpen,
}
)}
data-cy={dataCy}
@ -66,7 +66,7 @@ export function Head({
return (
<Tippy
className="!opacity-100 bg-blue-9 be:bg-gray-9 th-dark:bg-gray-true-9 !rounded-md !py-2 !px-3"
className="!rounded-md bg-blue-9 !py-2 !px-3 !opacity-100 be:bg-gray-9 th-dark:bg-gray-true-9"
content={label}
delay={[0, 0]}
duration={[0, 0]}

6
app/react/sidebar/SidebarItem/Menu.tsx
View file

@ -39,16 +39,16 @@ export function Menu({
return (
<div className="flex-1">
<div className="flex w-full justify-between items-center relative ">
<div className="relative flex w-full items-center justify-between ">
{head}
{isSidebarOpen && Children.count(children) > 0 && (
<button
className="bg-transparent border-0 w-6 h-6 flex items-center justify-center absolute right-2 text-gray-5"
className="absolute right-2 flex h-6 w-6 items-center justify-center border-0 bg-transparent text-gray-5"
onClick={handleClickArrow}
type="button"
aria-label="Collapse button"
>
<CollapseButtonIcon className="w-4 h-4" />
<CollapseButtonIcon className="h-4 w-4" />
</button>
)}
</div>

2
app/react/sidebar/SidebarItem/Wrapper.tsx
View file

@ -17,7 +17,7 @@ export function Wrapper({
className={clsx(
'flex',
className,
'text-gray-3 min-h-8 [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
'min-h-8 text-gray-3 [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
)}
aria-label={label}
// eslint-disable-next-line react/jsx-props-no-spreading

2
app/react/sidebar/SidebarSection.tsx
View file

@ -45,7 +45,7 @@ export function SidebarSectionTitle({
}
return (
<li className="ml-3 text-sm text-gray-3 be:text-gray-6 transition-all duration-500 ease-in-out">
<li className="ml-3 text-sm text-gray-3 transition-all duration-500 ease-in-out be:text-gray-6">
{children}
</li>
);

4
app/react/sidebar/UpgradeBEBanner/LoadingDialog.tsx
View file

@ -12,7 +12,7 @@ export function LoadingDialog() {
return (
<Modal aria-label="Upgrade Portainer to Business Edition">
<Modal.Body>
<div className="flex flex-col items-center justify-center w-full">
<div className="flex w-full flex-col items-center justify-center">
<Icon
icon={Loader2}
className="animate-spin-slow !text-8xl !text-blue-8"
@ -21,7 +21,7 @@ export function LoadingDialog() {
<h1 className="!text-2xl">Upgrading Portainer...</h1>
<p className="text-center text-gray-6 text-xl">
<p className="text-center text-xl text-gray-6">
Please wait while we upgrade your Portainer to Business Edition.
</p>
</div>

2
app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx
View file

@ -20,7 +20,7 @@ export function NonAdminUpgradeDialog({
Edition.
</Modal.Body>
<Modal.Footer>
<div className="flex gap-2 w-full">
<div className="flex w-full gap-2">
<Button
color="default"
size="medium"

4
app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx
View file

@ -57,11 +57,11 @@ function UpgradeBEBanner() {
<>
<button
type="button"
className="border-0 bg-warning-5 text-warning-9 w-full py-2 font-semibold flex justify-center items-center gap-3"
className="flex w-full items-center justify-center gap-3 border-0 bg-warning-5 py-2 font-semibold text-warning-9"
onClick={handleClick}
>
{isSidebarOpen && <>Upgrade to Business Edition</>}
<ArrowRight className="text-lg lucide" />
<ArrowRight className="lucide text-lg" />
</button>
{isOpen && <UpgradeDialog onDismiss={() => setIsOpen(false)} />}

4
app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx
View file

@ -37,7 +37,7 @@ export function UploadLicenseDialog({
aria-label="Upgrade Portainer to Business Edition"
>
<Modal.Header
title={<h4 className="font-medium text-xl">Upgrade Portainer</h4>}
title={<h4 className="text-xl font-medium">Upgrade Portainer</h4>}
/>
<Formik
initialValues={initialValues}
@ -71,7 +71,7 @@ export function UploadLicenseDialog({
</FormControl>
</Modal.Body>
<Modal.Footer>
<div className="flex gap-2 [&>*]:w-1/2 w-full">
<div className="flex w-full gap-2 [&>*]:w-1/2">
<Button
color="default"
size="medium"