Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 13:55:21 +02:00
Code Issues Releases Activity

fix(app): dark theme be teaser colors [EE-5621] (#9124)

Browse source 
* fix(app): dark theme be teaser colors

* fix(app): review comments and prettier format

* fix(app): revert changes on arbitrary class

* feat(app/teaser): blue lock svg on dark theme
This commit is contained in:
LP B 2023-07-11 17:35:43 +02:00 • committed by GitHub
parent 64b227b2e1
commit 39eed67fd7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 39 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,15 +9,15 @@
}
.be-indicator .be-indicator-icon {
color: #000000;
@apply text-black th-highcontrast:text-white th-dark:text-blue-8;
}
.be-indicator:hover {
text-decoration: none;
@apply no-underline;
}
.be-indicator:hover .be-indicator-label {
text-decoration: underline;
@apply underline;
}
.be-indicator-container {

3
app/react/components/BoxSelector/BoxSelectorItem.module.css
View file

@ -38,10 +38,11 @@
padding-left: 20px;
}
/* used for BE teaser. Dark theme specs defined by EE-5621 */
.box-selector-item.limited.business label,
.box-selector-item.limited.business input:checked + label {
@apply border-warning-7 bg-warning-1 text-black;
@apply th-dark:bg-warning-8 th-dark:bg-opacity-10 th-dark:text-white;
@apply th-dark:border-blue-8 th-dark:bg-[color:var(--bg-BE-only)] th-dark:text-white;
@apply th-highcontrast:bg-warning-8 th-highcontrast:bg-opacity-10 th-highcontrast:text-white;
filter: none;

9
app/react/components/BoxSelector/LimitedToBeIndicator.tsx
View file

@ -11,9 +11,9 @@ interface Props {
export function LimitedToBeIndicator({ tooltipId, url }: Props) {
return (
<div className="absolute left-0 top-0 w-full">
<div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 py-1 px-3 text-sm">
<div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 py-1 px-3 text-sm th-dark:bg-[color:var(--bg-BE-only)]">
<a
className="text-warning-9"
className="text-warning-9 th-dark:text-blue-8"
href={url}
target="_blank"
rel="noreferrer"
@ -26,7 +26,10 @@ export function LimitedToBeIndicator({ tooltipId, url }: Props) {
heading="Business Edition feature."
message="This feature is currently limited to Business Edition users only."
>
<HelpCircle className="ml-1 !text-warning-7" aria-hidden="true" />
<HelpCircle
className="ml-1 !text-warning-7 th-dark:!text-blue-8"
aria-hidden="true"
/>
</TooltipWithChildren>
</div>
</div>

4
app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css
View file

@ -34,9 +34,9 @@
}
.tooltip-beteaser {
color: var(--ui-warning-5);
@apply text-warning-5 th-dark:text-blue-8;
}
.tooltip-beteaser:hover {
color: var(--ui-warning-5);
@apply text-warning-5 th-dark:text-blue-8;
}

3
app/react/components/buttons/Button.css
View file

@ -10,9 +10,10 @@
color: inherit;
}
/* used for BE teaser. Dark theme specs defined by EE-5621 */
.btn-warninglight {
@apply border-warning-5 bg-warning-2 text-black;
@apply th-dark:bg-warning-5 th-dark:bg-opacity-10 th-dark:text-white;
@apply th-dark:border-blue-8 th-dark:bg-blue-8 th-dark:bg-opacity-10 th-dark:text-white;
@apply th-highcontrast:bg-warning-5 th-highcontrast:bg-opacity-10 th-highcontrast:text-white;
}

20
app/react/portainer/feature-flags/feature-flags.css
View file

@ -43,8 +43,10 @@ div.limited-be {
float: right;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
background-color: var(--ui-warning-5);
color: var(--ui-warning-9);
@apply bg-warning-5 text-warning-9;
@apply th-dark:bg-[color:var(--bg-BE-only)] th-dark:text-blue-8;
padding: 5px 10px;
touch-action: auto;
cursor: hand;
@ -52,25 +54,23 @@ div.limited-be {
}
.limited-be-link a {
cursor: hand;
pointer-events: auto;
color: var(--ui-warning-9);
@apply pointer-events-auto cursor-pointer;
@apply text-warning-9 th-dark:text-blue-8;
}
.limited-be-link a:hover {
text-decoration: underline;
color: var(--ui-warning-9);
@apply text-warning-9 underline th-dark:text-blue-8;
}
.overlay {
background-image: url(~@/assets/ico/lock.svg);
background-repeat: no-repeat;
background-position: center;
@apply bg-center bg-no-repeat;
@apply bg-[url(~@/assets/ico/lock.svg)] th-dark:bg-[url(~@/assets/ico/lock-2.svg)];
}
.limited-be input,
.limited-be .widget-body {
background: rgba(247, 144, 9, 0.05);
@apply th-dark:bg-[color:var(--bg-BE-only)];
}
.form-control.limited-be[disabled] {

18
app/react/portainer/feature-flags/feature-ids.js
View file

@ -1,18 +0,0 @@
export const K8S_RESOURCE_POOL_LB_QUOTA = 'k8s-resourcepool-Ibquota';
export const K8S_RESOURCE_POOL_STORAGE_QUOTA = 'k8s-resourcepool-storagequota';
export const RBAC_ROLES = 'rbac-roles';
export const REGISTRY_MANAGEMENT = 'registry-management';
export const K8S_SETUP_DEFAULT = 'k8s-setup-default';
export const S3_BACKUP_SETTING = 's3-backup-setting';
export const HIDE_INTERNAL_AUTHENTICATION_PROMPT = 'hide-internal-authentication-prompt';
export const TEAM_MEMBERSHIP = 'team-membership';
export const HIDE_INTERNAL_AUTH = 'hide-internal-auth';
export const EXTERNAL_AUTH_LDAP = 'external-auth-ldap';
export const ACTIVITY_AUDIT = 'activity-audit';
export const HIDE_AUTO_UPDATE_WINDOW = 'hide-auto-update-window';
export const IMAGE_UP_TO_DATE_INDICATOR = 'image-up-to-date-indicator';
export const FORCE_REDEPLOYMENT = 'force-redeployment';
export const STACK_PULL_IMAGE = 'stack-pull-image';
export const STACK_WEBHOOK = 'stack-webhook';
export const CONTAINER_WEBHOOK = 'container-webhook';
export const K8S_ANNOTATIONS = 'k8s-annotations';