#1398

apache · Sep 16, 2024 · d00b2a7 · d00b2a7
1 parent 495122e
commit d00b2a7
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 66 deletions.
diff --git a/karavan-app/src/main/webui/src/designer/selector/DslSelector.css b/karavan-app/src/main/webui/src/designer/selector/DslSelector.css
@@ -133,29 +133,27 @@
     font-weight: 200;
 }
 
-.dsl-modal .label-eip {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
-}
-
-.dsl-modal .label-component {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
-}
-
-.dsl-modal .label-kamelet {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
-}
-
-.dsl-modal .label-component-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
-}
-
-.dsl-modal .label-kamelet-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+.dsl-modal .navigation-selector,
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+    .label-eip {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
+    }
+    .label-component {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
+    }
+    .label-kamelet {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
+    }
+    .label-component-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
+    .label-kamelet-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
 }
 
-
 .dsl-modal .labels {
     opacity: 0.5;
     font-weight: 200;

diff --git a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
@@ -144,7 +144,7 @@ export function DslSelector(props: Props) {
         const isComp = selectedToggles.includes('components')
         const isKam = selectedToggles.includes('kamelets')
         return (
-            <ToggleGroup aria-label="Default with single selectable">
+            <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
                 {parentDsl !== undefined && <ToggleGroupItem
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>

diff --git a/karavan-designer/src/designer/selector/DslSelector.css b/karavan-designer/src/designer/selector/DslSelector.css
@@ -133,29 +133,27 @@
     font-weight: 200;
 }
 
-.dsl-modal .label-eip {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
-}
-
-.dsl-modal .label-component {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
-}
-
-.dsl-modal .label-kamelet {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
-}
-
-.dsl-modal .label-component-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
-}
-
-.dsl-modal .label-kamelet-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+.dsl-modal .navigation-selector,
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+    .label-eip {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
+    }
+    .label-component {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
+    }
+    .label-kamelet {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
+    }
+    .label-component-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
+    .label-kamelet-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
 }
 
-
 .dsl-modal .labels {
     opacity: 0.5;
     font-weight: 200;

diff --git a/karavan-designer/src/designer/selector/DslSelector.tsx b/karavan-designer/src/designer/selector/DslSelector.tsx
@@ -144,7 +144,7 @@ export function DslSelector(props: Props) {
         const isComp = selectedToggles.includes('components')
         const isKam = selectedToggles.includes('kamelets')
         return (
-            <ToggleGroup aria-label="Default with single selectable">
+            <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
                 {parentDsl !== undefined && <ToggleGroupItem
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>

diff --git a/karavan-space/src/designer/selector/DslSelector.css b/karavan-space/src/designer/selector/DslSelector.css
@@ -133,29 +133,27 @@
     font-weight: 200;
 }
 
-.dsl-modal .label-eip {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
-}
-
-.dsl-modal .label-component {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
-}
-
-.dsl-modal .label-kamelet {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
-}
-
-.dsl-modal .label-component-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
-}
-
-.dsl-modal .label-kamelet-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+.dsl-modal .navigation-selector,
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+    .label-eip {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
+    }
+    .label-component {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
+    }
+    .label-kamelet {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
+    }
+    .label-component-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
+    .label-kamelet-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
 }
 
-
 .dsl-modal .labels {
     opacity: 0.5;
     font-weight: 200;

diff --git a/karavan-space/src/designer/selector/DslSelector.tsx b/karavan-space/src/designer/selector/DslSelector.tsx
@@ -144,7 +144,7 @@ export function DslSelector(props: Props) {
         const isComp = selectedToggles.includes('components')
         const isKam = selectedToggles.includes('kamelets')
         return (
-            <ToggleGroup aria-label="Default with single selectable">
+            <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
                 {parentDsl !== undefined && <ToggleGroupItem
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>