Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

fix(apps) UI release fixes [EE-5197] (#8702)

Browse source 
* fix(apps) searchbar flex resizing and insights

* UI fixes

* update stacks datatable

---------

Co-authored-by: testa113 <testa113>
This commit is contained in:
Ali 2023-03-23 08:20:30 +13:00 • committed by GitHub
parent 3636ac5c26
commit 30248eabb4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 277 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/react/components/InsightsBox/InsightsBox.tsx
View file

@ -8,13 +8,21 @@ import { Button } from '@@/buttons';
import { insightStore } from './insights-store';
export type Props = {
header: string;
content: ReactNode;
header?: string;
content?: ReactNode;
setHtmlContent?: boolean;
insightCloseId?: string; // set if you want to be able to close the box and not show it again
type?: 'default' | 'slim';
className?: string;
};
export function InsightsBox({ header, content, insightCloseId }: Props) {
export function InsightsBox({
header,
content,
insightCloseId,
type = 'default',
className,
}: Props) {
// allow to close the box and not show it again in local storage with zustand
const { addInsightIDClosed, isClosed } = useStore(insightStore);
const isInsightClosed = isClosed(insightCloseId);
@ -24,26 +32,42 @@ export function InsightsBox({ header, content, insightCloseId }: Props) {
}
return (
<div className="relative flex w-full gap-1 rounded-lg bg-gray-modern-3 p-4 text-sm th-highcontrast:bg-legacy-grey-3 th-dark:bg-legacy-grey-3">
<div className="shrink-0">
<div
className={clsx(
'relative flex w-full gap-1 rounded-lg bg-gray-modern-3 p-4 text-sm th-highcontrast:bg-legacy-grey-3 th-dark:bg-legacy-grey-3',
type === 'slim' && 'p-2',
className
)}
>
<div className="mt-0.5 shrink-0">
<Lightbulb className="h-4 text-warning-7 th-highcontrast:text-warning-6 th-dark:text-warning-6" />
</div>
<div>
<p
className={clsx(
// text-[0.9em] matches .form-horizontal .control-label font-size used in many labels in portainer
'mb-2 text-[0.9em] font-medium',
insightCloseId && 'pr-4'
)}
>
{header}
</p>
<div className="small">{content}</div>
{header && (
<p
className={clsx(
// text-[0.9em] matches .form-horizontal .control-label font-size used in many labels in portainer
'align-middle text-[0.9em] font-medium',
insightCloseId && 'pr-10',
content ? 'mb-2' : 'mb-0'
)}
>
{header}
</p>
)}
{content && (
<div className={clsx('small', !header && insightCloseId && 'pr-6')}>
{content}
</div>
)}
</div>
{insightCloseId && (
<Button
icon={X}
className="absolute top-2 right-2 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5"
className={clsx(
'absolute top-3 right-2 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5',
type === 'slim' && insightCloseId && 'top-1'
)}
color="link"
size="medium"
onClick={() => addInsightIDClosed(insightCloseId)}