diff --git a/.prettierrc b/.prettierrc index 2f43352e6..a22f6545a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,21 +5,17 @@ "trailingComma": "es5", "overrides": [ { - "files": [ - "*.html" - ], + "files": ["*.html"], "options": { "parser": "angular" } }, { - "files": [ - "*.{j,t}sx", - "*.ts" - ], + "files": ["*.{j,t}sx", "*.ts"], "options": { "printWidth": 80 } } - ] -} \ No newline at end of file + ], + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css index cbded5622..c177fa995 100644 --- a/app/assets/css/bootstrap-override.css +++ b/app/assets/css/bootstrap-override.css @@ -201,7 +201,7 @@ input:checked + .slider:before { /* Widget */ .widget .widget-icon { - @apply mr-1 !p-2 text-lg flex-none; + @apply mr-1 flex-none !p-2 text-lg; @apply bg-blue-3 text-blue-8; @apply th-dark:bg-gray-9 th-dark:text-blue-3; diff --git a/app/assets/css/button.css b/app/assets/css/button.css index aca35155f..4aa79e1fc 100644 --- a/app/assets/css/button.css +++ b/app/assets/css/button.css @@ -31,22 +31,22 @@ fieldset[disabled] .btn { .btn.btn-primary { @apply border-graphite-700 bg-graphite-700 text-mist-100; @apply hover:border-graphite-700/90 hover:bg-graphite-700/90 hover:text-mist-100; - @apply focus:border-blue-5 focus:shadow-graphite-700/80 focus:text-mist-100; + @apply focus:border-blue-5 focus:text-mist-100 focus:shadow-graphite-700/80; @apply th-dark:border-mist-100 th-dark:bg-mist-100 th-dark:text-graphite-700; @apply th-dark:hover:border-mist-100/90 th-dark:hover:bg-mist-100/90 th-dark:hover:text-graphite-700; - @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-graphite-700; + @apply th-dark:focus:border-blue-5 th-dark:focus:text-graphite-700 th-dark:focus:shadow-white/80; @apply th-highcontrast:border-mist-100 th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700; @apply th-highcontrast:hover:border-mist-100/90 th-highcontrast:hover:bg-mist-100/90 th-highcontrast:hover:text-graphite-700; - @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-graphite-700; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:text-graphite-700 th-highcontrast:focus:shadow-white/80; } /* Sidebar background is always dark, so we need to override the primary button styles */ .btn.btn-primary.sidebar { @apply border-mist-100 bg-mist-100 text-graphite-700; @apply hover:border-mist-100/90 hover:bg-mist-100/90 hover:text-graphite-700; - @apply focus:border-blue-5 focus:shadow-white/80 focus:text-graphite-700; + @apply focus:border-blue-5 focus:text-graphite-700 focus:shadow-white/80; } .btn.btn-primary:active, @@ -71,15 +71,15 @@ fieldset[disabled] .btn { @apply border-graphite-700 bg-mist-100 text-graphite-700; @apply hover:border-graphite-700 hover:bg-graphite-700/10 hover:text-graphite-700; - @apply focus:border-blue-5 focus:shadow-graphite-700/20 focus:text-graphite-700; + @apply focus:border-blue-5 focus:text-graphite-700 focus:shadow-graphite-700/20; @apply th-dark:border-mist-100 th-dark:bg-graphite-700 th-dark:text-mist-100; @apply th-dark:hover:border-mist-100 th-dark:hover:bg-mist-100/20 th-dark:hover:text-mist-100; - @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-mist-100; + @apply th-dark:focus:border-blue-5 th-dark:focus:text-mist-100 th-dark:focus:shadow-white/80; @apply th-highcontrast:border-mist-100 th-highcontrast:bg-graphite-700 th-highcontrast:text-mist-100; @apply th-highcontrast:hover:border-mist-100 th-highcontrast:hover:bg-mist-100/20 th-highcontrast:hover:text-mist-100; - @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-mist-100; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:text-mist-100 th-highcontrast:focus:shadow-white/80; } .btn.btn-secondary:active, @@ -93,9 +93,9 @@ fieldset[disabled] .btn { .btn.btn-danger { @apply border-error-8 bg-error-8; @apply hover:border-error-7 hover:bg-error-7 hover:text-white; - @apply focus:border-blue-5 focus:shadow-error-8/20 focus:text-white; - @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-white; - @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-white; + @apply focus:border-blue-5 focus:text-white focus:shadow-error-8/20; + @apply th-dark:focus:border-blue-5 th-dark:focus:text-white th-dark:focus:shadow-white/80; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:text-white th-highcontrast:focus:shadow-white/80; } .btn.btn-danger:active, @@ -111,8 +111,8 @@ fieldset[disabled] .btn { @apply border-error-5 th-highcontrast:border-error-7 th-dark:border-error-7; @apply border border-solid; - @apply focus:border-blue-5 focus:shadow-error-8/20 focus:text-error-9; - @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-white; + @apply focus:border-blue-5 focus:text-error-9 focus:shadow-error-8/20; + @apply th-dark:focus:border-blue-5 th-dark:focus:text-white th-dark:focus:shadow-white/80; @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80; } .btn.btn-icon.btn-dangerlight { @@ -132,16 +132,16 @@ fieldset[disabled] .btn { .btn.btn-light { @apply border-gray-5 bg-white text-gray-8; @apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-10; - @apply focus:border-blue-5 focus:shadow-graphite-700/20 focus:text-gray-8; + @apply focus:border-blue-5 focus:text-gray-8 focus:shadow-graphite-700/20; /* dark mode */ @apply th-dark:border-gray-warm-7 th-dark:bg-gray-iron-10 th-dark:text-gray-warm-4; @apply th-dark:hover:border-gray-6 th-dark:hover:bg-gray-iron-9 th-dark:hover:text-gray-warm-4; - @apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-gray-warm-4; + @apply th-dark:focus:border-blue-5 th-dark:focus:text-gray-warm-4 th-dark:focus:shadow-white/80; @apply th-highcontrast:border-gray-2 th-highcontrast:bg-black th-highcontrast:text-white; @apply th-highcontrast:hover:border-gray-6 th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:text-gray-warm-4; - @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-white; + @apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:text-white th-highcontrast:focus:shadow-white/80; } .btn.btn-light:active, @@ -177,14 +177,14 @@ fieldset[disabled] .btn { a.no-link, a[ng-click] { - @apply text-current th-dark:text-current th-highcontrast:text-current; + @apply text-current th-highcontrast:text-current th-dark:text-current; @apply hover:text-current hover:no-underline; @apply focus:text-current focus:no-underline; } a, a.hyperlink { - @apply text-blue-8 hover:text-blue-9 th-dark:text-blue-7 th-dark:hover:text-blue-8 th-highcontrast:text-blue-5 th-highcontrast:hover:text-blue-6; + @apply text-blue-8 hover:text-blue-9 th-highcontrast:text-blue-5 th-highcontrast:hover:text-blue-6 th-dark:text-blue-7 th-dark:hover:text-blue-8; @apply cursor-pointer hover:underline; } diff --git a/app/docker/views/services/edit/service.html b/app/docker/views/services/edit/service.html index 406c487ca..b5bb5d591 100644 --- a/app/docker/views/services/edit/service.html +++ b/app/docker/views/services/edit/service.html @@ -244,7 +244,7 @@
- - + +
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html index 0997029fe..071c8106d 100644 --- a/app/kubernetes/views/deploy/deploy.html +++ b/app/kubernetes/views/deploy/deploy.html @@ -155,7 +155,7 @@
URL
-
+
Specify the URL to the Kubernetes manifest. diff --git a/app/portainer/views/auth/auth.html b/app/portainer/views/auth/auth.html index 2504141a7..527b48b06 100644 --- a/app/portainer/views/auth/auth.html +++ b/app/portainer/views/auth/auth.html @@ -5,8 +5,8 @@
- - + +
diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html index 6264620ab..4733ca216 100644 --- a/app/portainer/views/init/admin/initAdmin.html +++ b/app/portainer/views/init/admin/initAdmin.html @@ -6,8 +6,8 @@
- - + +
diff --git a/app/portainer/views/logout/logout.html b/app/portainer/views/logout/logout.html index 95299d5d0..32d55e718 100644 --- a/app/portainer/views/logout/logout.html +++ b/app/portainer/views/logout/logout.html @@ -5,8 +5,8 @@
- - + +
diff --git a/app/react/components/Alert/Alert.tsx b/app/react/components/Alert/Alert.tsx index 238735d42..d4c849f83 100644 --- a/app/react/components/Alert/Alert.tsx +++ b/app/react/components/Alert/Alert.tsx @@ -96,7 +96,7 @@ export function AlertContainer({ return (
diff --git a/app/react/components/Blocklist/BlocklistItem.stories.tsx b/app/react/components/Blocklist/BlocklistItem.stories.tsx index e38d1933e..ceded4193 100644 --- a/app/react/components/Blocklist/BlocklistItem.stories.tsx +++ b/app/react/components/Blocklist/BlocklistItem.stories.tsx @@ -48,14 +48,14 @@ export const AsDiv: Story = { export const WithCustomContent: Story = { args: { children: ( -
-
+
+
Deployed - Revision #4 + Revision #4
-
- my-app-1.0.0 - +
+ my-app-1.0.0 + {localizeDate(new Date('2000-01-01'))}
diff --git a/app/react/components/Blocklist/BlocklistItem.tsx b/app/react/components/Blocklist/BlocklistItem.tsx index d4ff4a1c1..96ba28a39 100644 --- a/app/react/components/Blocklist/BlocklistItem.tsx +++ b/app/react/components/Blocklist/BlocklistItem.tsx @@ -23,7 +23,7 @@ export function BlocklistItem({ type="button" className={clsx( className, - 'blocklist-item flex items-stretch overflow-hidden bg-transparent w-full !ml-0 no-link text-left', + 'blocklist-item no-link !ml-0 flex w-full items-stretch overflow-hidden bg-transparent text-left', { 'blocklist-item--selected': isSelected, } diff --git a/app/react/components/BoxSelector/BoxOption.tsx b/app/react/components/BoxSelector/BoxOption.tsx index e9fdb9440..82e723666 100644 --- a/app/react/components/BoxSelector/BoxOption.tsx +++ b/app/react/components/BoxSelector/BoxOption.tsx @@ -52,7 +52,7 @@ export function BoxOption({ {!disabled && (
diff --git a/app/react/components/CodeEditor/CodeEditor.module.css b/app/react/components/CodeEditor/CodeEditor.module.css index 9d32be427..e31773bf6 100644 --- a/app/react/components/CodeEditor/CodeEditor.module.css +++ b/app/react/components/CodeEditor/CodeEditor.module.css @@ -47,11 +47,11 @@ .root :global(.cm-editor .cm-gutters) { border-right: 0px; - @apply bg-gray-2 th-dark:bg-gray-10 th-highcontrast:bg-black; + @apply bg-gray-2 th-highcontrast:bg-black th-dark:bg-gray-10; } .root :global(.cm-merge-b) { - @apply border-0 border-l border-solid border-l-gray-5 th-dark:border-l-gray-7 th-highcontrast:border-l-gray-2; + @apply border-0 border-l border-solid border-l-gray-5 th-highcontrast:border-l-gray-2 th-dark:border-l-gray-7; } .root :global(.cm-editor .cm-gutters .cm-lineNumbers .cm-gutterElement) { @@ -166,9 +166,9 @@ /* Tooltip styles for all themes */ .root :global(.cm-tooltip) { - @apply bg-white border border-solid border-gray-5 shadow-md text-xs rounded h-min; - @apply th-dark:bg-gray-9 th-dark:border-gray-7 th-dark:text-white; - @apply th-highcontrast:bg-black th-highcontrast:border-gray-7 th-highcontrast:text-white; + @apply h-min rounded border border-solid border-gray-5 bg-white text-xs shadow-md; + @apply th-dark:border-gray-7 th-dark:bg-gray-9 th-dark:text-white; + @apply th-highcontrast:border-gray-7 th-highcontrast:bg-black th-highcontrast:text-white; } /* Hide the completionInfo tooltip when it's empty */ @@ -186,10 +186,10 @@ .root :global(.cm-editor .cm-collapsedLines) { /* inherit bg, instead of using styles from library */ background: inherit; - @apply bg-blue-2 th-dark:bg-blue-10 th-highcontrast:bg-white th-dark:text-white th-highcontrast:text-black; + @apply bg-blue-2 th-highcontrast:bg-white th-highcontrast:text-black th-dark:bg-blue-10 th-dark:text-white; } .root :global(.cm-editor .cm-collapsedLines):hover { - @apply bg-blue-3 th-dark:bg-blue-9 th-highcontrast:bg-white th-dark:text-white th-highcontrast:text-black; + @apply bg-blue-3 th-highcontrast:bg-white th-highcontrast:text-black th-dark:bg-blue-9 th-dark:text-white; } .root :global(.cm-editor .cm-collapsedLines:before) { diff --git a/app/react/components/CodeEditor/CodeEditor.tsx b/app/react/components/CodeEditor/CodeEditor.tsx index 07c79842d..1bf4bc0b8 100644 --- a/app/react/components/CodeEditor/CodeEditor.tsx +++ b/app/react/components/CodeEditor/CodeEditor.tsx @@ -135,7 +135,7 @@ export function CodeEditor({ )}
)} -
+
{fileName && ( @@ -72,14 +72,14 @@ export function DiffViewer({ height, } as React.CSSProperties } - className="h-full [scrollbar-gutter:stable] overflow-y-scroll" + className="h-full overflow-y-scroll [scrollbar-gutter:stable]" > .cm-scroller]:!min-h-[var(--editor-min-height)]' + '[&_.cm-content]:!min-h-[var(--editor-min-height)] [&_.cm-editor>.cm-scroller]:!min-h-[var(--editor-min-height)] [&_.cm-gutters]:!min-h-[var(--editor-min-height)]' )} id={id} data-cy={dataCy} @@ -125,7 +125,7 @@ function DiffFileNameHeaders({ data-cy="original" />
-
+
-
+
@@ -65,7 +65,7 @@ export function ExpandableMessageByLines({ color="link" size="xsmall" onClick={() => setIsExpanded(!isExpanded)} - className="!ml-0 !p-0 mt-1" + className="!ml-0 mt-1 !p-0" data-cy="expandable-message-lines-button" > {isExpanded ? 'Show less' : 'Show more'} diff --git a/app/react/components/InlineLoader/InlineLoader.tsx b/app/react/components/InlineLoader/InlineLoader.tsx index d91354de7..e25c8ff23 100644 --- a/app/react/components/InlineLoader/InlineLoader.tsx +++ b/app/react/components/InlineLoader/InlineLoader.tsx @@ -27,7 +27,7 @@ export function InlineLoader({ children, className, size = 'sm' }: Props) { sizeStyles[size] )} > - + {children}
); diff --git a/app/react/components/PageHeader/AskAILink.tsx b/app/react/components/PageHeader/AskAILink.tsx index 7fc16a53a..0c040dd57 100644 --- a/app/react/components/PageHeader/AskAILink.tsx +++ b/app/react/components/PageHeader/AskAILink.tsx @@ -14,7 +14,7 @@ export function AskAILink() { color="none" className={clsx( headerStyles.menuIcon, - 'icon-badge mr-1 !p-2 text-lg cursor-pointer', + 'icon-badge mr-1 cursor-pointer !p-2 text-lg', 'text-gray-8', 'th-dark:text-gray-warm-7' )} diff --git a/app/react/components/PageHeader/ContextHelp.tsx b/app/react/components/PageHeader/ContextHelp.tsx index 766a308c8..88cc8a7db 100644 --- a/app/react/components/PageHeader/ContextHelp.tsx +++ b/app/react/components/PageHeader/ContextHelp.tsx @@ -17,7 +17,7 @@ export function ContextHelp() { color="none" className={clsx( headerStyles.menuIcon, - 'icon-badge mr-1 !p-2 text-lg cursor-pointer', + 'icon-badge mr-1 cursor-pointer !p-2 text-lg', 'text-gray-8', 'th-dark:text-gray-warm-7' )} diff --git a/app/react/components/PageHeader/HeaderContainer.tsx b/app/react/components/PageHeader/HeaderContainer.tsx index 164c368a2..6856f1c89 100644 --- a/app/react/components/PageHeader/HeaderContainer.tsx +++ b/app/react/components/PageHeader/HeaderContainer.tsx @@ -19,7 +19,7 @@ export function HeaderContainer({ id, children }: PropsWithChildren) {
diff --git a/app/react/components/PageHeader/PageTitle.stories.tsx b/app/react/components/PageHeader/PageTitle.stories.tsx index 43d8d5eef..5c7e9c3bc 100644 --- a/app/react/components/PageHeader/PageTitle.stories.tsx +++ b/app/react/components/PageHeader/PageTitle.stories.tsx @@ -23,7 +23,7 @@ Primary.args = { function WithChildrenTemplate({ title }: StoryProps) { return ( - additional content + additional content ); } diff --git a/app/react/components/PaginationControls/ItemsPerPageSelector.tsx b/app/react/components/PaginationControls/ItemsPerPageSelector.tsx index 744db42c2..a2744f926 100644 --- a/app/react/components/PaginationControls/ItemsPerPageSelector.tsx +++ b/app/react/components/PaginationControls/ItemsPerPageSelector.tsx @@ -12,7 +12,7 @@ export function ItemsPerPageSelector({ value, onChange, showAll }: Props) { return (