1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-23 15:29:42 +02:00

feat(sidebar): add dark theme colors [EE-3666] (#7414)

This commit is contained in:
Chaim Lev-Ari 2022-08-10 07:12:20 +03:00 committed by GitHub
parent fb3a31a4fd
commit c3ce4d8b53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
83 changed files with 1738 additions and 1200 deletions

View file

@ -1,5 +1,4 @@
import clsx from 'clsx';
import ReactTooltip from 'react-tooltip';
import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
import { Icon } from '@/react/components/Icon';
@ -7,6 +6,8 @@ import { Icon } from '@/react/components/Icon';
import './BoxSelectorItem.css';
import { BoxSelectorOption } from './types';
import { LimitedToBeIndicator } from './LimitedToBeIndicator';
import { BoxOption } from './BoxOption';
interface Props<T extends number | string> {
radioName: string;
@ -27,53 +28,38 @@ export function BoxSelectorItem<T extends number | string>({
}: Props<T>) {
const limitedToBE = isLimitedToBE(option.feature);
const tooltipId = `box-selector-item-${radioName}-${option.id}`;
const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
return (
<div
className={clsx('box-selector-item', {
<BoxOption
className={clsx({
business: limitedToBE,
limited: limitedToBE,
})}
data-tip
data-for={tooltipId}
tooltip-append-to-body="true"
tooltip-placement="bottom"
tooltip-class="portainer-tooltip"
radioName={radioName}
option={option}
selectedValue={selectedValue}
disabled={disabled}
onChange={(value) => onChange(value, limitedToBE)}
tooltip={tooltip}
>
<input
type="radio"
name={radioName}
id={option.id}
checked={option.value === selectedValue}
value={option.value}
disabled={disabled}
onChange={() => onChange(option.value, limitedToBE)}
/>
<label htmlFor={option.id} data-cy={`${radioName}_${option.value}`}>
{limitedToBE && <i className="fas fa-briefcase limited-icon" />}
<div className="boxselector_img_container">
{!!option.icon && (
<Icon
icon={option.icon}
feather={option.featherIcon}
className="boxselector_icon space-right"
/>
)}
<>
{limitedToBE && (
<LimitedToBeIndicator tooltipId={beIndicatorTooltipId} />
)}
<div className={clsx({ 'opacity-30': limitedToBE })}>
<div className="boxselector_img_container">
{!!option.icon && (
<Icon
icon={option.icon}
feather={option.featherIcon}
className="boxselector_icon space-right"
/>
)}
</div>
<div className="boxselector_header">{option.label}</div>
<p className="box-selector-item-description">{option.description}</p>
</div>
<div className="boxselector_header">{option.label}</div>
<p className="box-selector-item-description">{option.description}</p>
</label>
{tooltip && (
<ReactTooltip
place="bottom"
className="portainer-tooltip"
id={tooltipId}
>
{tooltip}
</ReactTooltip>
)}
</div>
</>
</BoxOption>
);
}