mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
chore(prettier): add tailwind prettier plugin [EE-4809] (#8221)
* add prettier plugin * apply tailwind prettier formatting
This commit is contained in:
parent
9f6702d0b8
commit
58d66d3142
226 changed files with 704 additions and 699 deletions
|
@ -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 />
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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]}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)} />}
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue