fix(frontend): adjust spacing of items in infraproviders

Fix the spacing of items in the InfraProviders list

Signed-off-by: Edward Sammut Alessi <[email protected]>

Author: Slessi

frontend/src/components/common/Status/TStatus.vue

@@ -216,38 +216,18 @@ const iconColor = computed(() => {
 </script>
 
 <template>
-  <div class="label">
+  <div class="flex items-center gap-1">
     <TIcon
-      class="label-icon"
-      :style="{
-        fill: !!color ? color : iconData?.iconColor || iconColor.color,
-      }"
-      :icon="!!iconType ? iconType : iconData?.iconTypeValue"
+      class="size-4 fill-current"
+      :style="{ fill: color ? color : iconData.iconColor || iconColor.color }"
+      :icon="iconType ? iconType : iconData.iconTypeValue"
     />
     <span
       v-if="title"
-      class="label-title"
-      :style="{
-        color: !!color ? color : iconData?.iconColor || iconColor.color,
-      }"
+      class="text-xs"
+      :style="{ color: color ? color : iconData.iconColor || iconColor.color }"
     >
       {{ title }}
     </span>
   </div>
 </template>
-
-<style scoped>
-@reference "../../../index.css";
-
-.label {
-  @apply flex items-center;
-}
-.label-icon {
-  @apply fill-current;
-  width: 16px;
-  height: 16px;
-}
-.label-title {
-  @apply pl-1 text-xs;
-}
-</style>

frontend/src/views/omni/Settings/InfraProviders.vue

@@ -135,7 +135,7 @@ const openRotateSecretKey = async (name: string) => {
           <div
             v-for="item in items"
             :key="itemID(item)"
-            class="flex items-center rounded border border-naturals-n5 bg-naturals-n1 p-3"
+            class="grid grid-cols-4 items-center rounded border border-naturals-n5 bg-naturals-n1 p-3"
             :class="{ 'border-dashed': !item.spec.name }"
           >
             <div class="flex items-center gap-3">
@@ -154,21 +154,19 @@ const openRotateSecretKey = async (name: string) => {
               </div>
             </div>
 
-            <div class="flex-1"></div>
-
             <TStatus :title="getStatus(item)" />
             <div class="truncate text-xs">
               {{ item.spec.description }}
             </div>
 
-            <div class="flex-3"></div>
-
-            <IconButton icon="key" @click="() => openRotateSecretKey(item.metadata.id!)" />
-            <IconButton
-              icon="delete"
-              danger
-              @click="() => openInfraProviderDelete(item.metadata.id!)"
-            />
+            <div class="justify-self-end">
+              <IconButton icon="key" @click="() => openRotateSecretKey(item.metadata.id!)" />
+              <IconButton
+                icon="delete"
+                danger
+                @click="() => openInfraProviderDelete(item.metadata.id!)"
+              />
+            </div>
           </div>
         </div>
       </template>