diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css index d4a121a7b..68e4d1a00 100644 --- a/app/assets/css/theme.css +++ b/app/assets/css/theme.css @@ -259,6 +259,9 @@ /* Dark Theme */ [theme='dark'] { + --BE-only: var(--ui-blue-8); + --bg-BE-only: rgba(225, 223, 223, 0.08); + --text-log-viewer-color-json-grey: var(--text-log-viewer-color); --text-log-viewer-color-json-magenta: var(--text-log-viewer-color); --text-log-viewer-color-json-yellow: var(--text-log-viewer-color); diff --git a/app/assets/ico/lock-2.svg b/app/assets/ico/lock-2.svg new file mode 100644 index 000000000..cfcaa8c1e --- /dev/null +++ b/app/assets/ico/lock-2.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.css b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.css index 5104e41a5..6c61a6561 100644 --- a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.css +++ b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.css @@ -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 { diff --git a/app/react/components/BoxSelector/BoxSelectorItem.module.css b/app/react/components/BoxSelector/BoxSelectorItem.module.css index f9861473e..655d81fcc 100644 --- a/app/react/components/BoxSelector/BoxSelectorItem.module.css +++ b/app/react/components/BoxSelector/BoxSelectorItem.module.css @@ -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; diff --git a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx index ad992a5e7..6f3b7fa4d 100644 --- a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx +++ b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx @@ -11,9 +11,9 @@ interface Props { export function LimitedToBeIndicator({ tooltipId, url }: Props) { return (
-
+
-
diff --git a/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css b/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css index 5232cbf69..79ee04534 100644 --- a/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css +++ b/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css @@ -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; } diff --git a/app/react/components/buttons/Button.css b/app/react/components/buttons/Button.css index 38d4b25c3..90ac96592 100644 --- a/app/react/components/buttons/Button.css +++ b/app/react/components/buttons/Button.css @@ -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; } diff --git a/app/react/portainer/feature-flags/feature-flags.css b/app/react/portainer/feature-flags/feature-flags.css index ad395d581..553c4e454 100644 --- a/app/react/portainer/feature-flags/feature-flags.css +++ b/app/react/portainer/feature-flags/feature-flags.css @@ -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] { diff --git a/app/react/portainer/feature-flags/feature-ids.js b/app/react/portainer/feature-flags/feature-ids.js deleted file mode 100644 index b03093729..000000000 --- a/app/react/portainer/feature-flags/feature-ids.js +++ /dev/null @@ -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';