change on colors allowed for ellipsis

vatesfr · May 21, 2024 · 4e2dd50 · 4e2dd50
1 parent 4e72d76
commit 4e2dd50
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/@xen-orchestra/web-core/lib/components/UiLegend.vue b/@xen-orchestra/web-core/lib/components/UiLegend.vue
@@ -1,7 +1,7 @@
 <template>
   <li class="legend">
     <span class="ellipsis" :class="legend.color"></span><span class="label">{{ legend.label }}</span
-    ><UiIcon :icon="faCircleInfo" color="info" class="ui-icon" />
+    ><UiIcon :icon="legend.info ? faCircleInfo : undefined" color="info" class="ui-icon" />
 
     <span class="value">{{ legend.value }}</span>
     <span class="unit">{{ legend.unit }}</span>
@@ -15,9 +15,10 @@ import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 defineProps<{
   legend: {
     value: number
-    color: Color | 'unknown'
+    color: Color | 'dark-blue' | 'disabled'
     label: string
     unit?: string
+    info?: boolean
   }
 }>()
 </script>
@@ -33,7 +34,7 @@ defineProps<{
     min-width: 0.8rem;
     border-radius: 50%;
 
-    &.info {
+    &.default {
       background-color: var(--color-purple-base);
     }
     &.success {
@@ -45,8 +46,11 @@ defineProps<{
     &.error {
       background-color: var(--color-red-base);
     }
-    &.unknown {
-      background-color: var(--background-color-purple-10);
+    &.disabled {
+      background-color: var(--color-grey-300);
+    }
+    &.dark-blue {
+      background-color: var(--color-grey-100);
     }
   }
 
@@ -58,7 +62,6 @@ defineProps<{
 
   & .ui-icon {
     font-size: 1.2rem;
-    margin-right: auto;
   }
 
   & .value,
@@ -67,5 +70,9 @@ defineProps<{
     font-size: 1.3rem;
     color: var(--color-grey-300);
   }
+
+  & .value {
+    margin-left: auto;
+  }
 }
 </style>