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(be-teaser): mute styles [EE-6035] (#10349)

Browse source
This commit is contained in:
Ali 2023-09-24 19:56:09 +01:00 • committed by GitHub
parent ffac83864d
commit 13c48ab961
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 604 additions and 616 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/react/components/BEFeatureIndicator/BEFeatureIndicator.css
View file

@ -1,5 +1,6 @@
.be-indicator {
border: solid 1px var(--BE-only);
@apply border-solid border border-gray-6;
@apply text-gray-6 text-xs;
border-radius: 15px;
padding: 5px 10px;
font-weight: 400;
@ -9,11 +10,12 @@
}
.be-indicator .be-indicator-icon {
@apply text-black th-highcontrast:text-white th-dark:text-blue-8;
@apply text-inherit;
}
.be-indicator:hover {
@apply no-underline;
@apply underline;
@apply border-blue-9 text-blue-9;
}
.be-indicator:hover .be-indicator-label {
@ -21,5 +23,5 @@
}
.be-indicator-container {
border: solid 1px var(--BE-only);
@apply border-solid border border-gray-6;
}

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

@ -29,16 +29,14 @@ export function BEFeatureIndicator({
}
return (
<a
className={clsx('be-indicator vertical-center', className)}
className={clsx('be-indicator vertical-center text-xs', className)}
href={url}
target="_blank"
rel="noopener noreferrer"
>
{children}
{showIcon && <Icon icon={Briefcase} className="be-indicator-icon mr-1" />}
<span className="be-indicator-label break-words">
Business Edition Feature
</span>
<span className="be-indicator-label break-words">Business Feature</span>
</a>
);
}

17
app/react/components/BEFeatureIndicator/BEOverlay.tsx
View file

@ -1,16 +1,18 @@
import clsx from 'clsx';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service';
import { Tooltip } from '@@/Tip/Tooltip';
import { BEFeatureIndicator } from '.';
import { BEFeatureIndicator } from './BEFeatureIndicator';
export function BEOverlay({
featureId,
children,
className,
}: {
featureId: FeatureId;
children: React.ReactNode;
className?: string;
}) {
const isLimited = isLimitedToBE(featureId);
if (!isLimited) {
@ -19,13 +21,10 @@ export function BEOverlay({
return (
<div className="be-indicator-container limited-be">
<div className="overlay">
<div className="limited-be-link vertical-center">
<BEFeatureIndicator featureId={FeatureId.CA_FILE} />
<Tooltip message="This feature is currently limited to Business Edition users only. " />
</div>
<div className="limited-be-content">{children}</div>
<div className="limited-be-link vertical-center">
<BEFeatureIndicator featureId={featureId} />
</div>
<div className={clsx('limited-be-content', className)}>{children}</div>
</div>
);
}