1
0
Fork 0
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:
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

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 />

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>
);

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',

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>

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"

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]}

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>

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

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>
);

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>

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"

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)} />}

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"