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

* 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

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);

app/assets/ico/lock-2.svg

@@ -0,0 +1,11 @@
+<svg width="76" height="75" viewBox="0 0 76 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_2)">
+<path opacity="0.2" d="M75.5 37.5C75.5 16.7893 58.7107 0 38 0C17.2893 0 0.5 16.7893 0.5 37.5C0.5 58.2107 17.2893 75 38 75C58.7107 75 75.5 58.2107 75.5 37.5Z" fill="#E1DFDF" fill-opacity="0.08"/>
+<path d="M31.5353 36.1666V30.8333C31.5353 29.0652 32.2164 27.3695 33.4288 26.1192C34.6412 24.869 36.2855 24.1666 38 24.1666C39.7145 24.1666 41.3588 24.869 42.5712 26.1192C43.7835 27.3695 44.4646 29.0652 44.4646 30.8333V36.1666M28.9495 36.1666H47.0505C48.4786 36.1666 49.6364 37.3605 49.6364 38.8333V48.1666C49.6364 49.6394 48.4786 50.8333 47.0505 50.8333H28.9495C27.5214 50.8333 26.3636 49.6394 26.3636 48.1666V38.8333C26.3636 37.3605 27.5214 36.1666 28.9495 36.1666Z" stroke="#0086C9" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="76" height="75" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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 {

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;

app/react/components/BoxSelector/LimitedToBeIndicator.tsx

@@ -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>

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;
 }

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;
 }
 

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] {

app/react/portainer/feature-flags/feature-ids.js

@@ -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';