Clean styling

Author: warwickschroeder

src/Frontend/src/components/audit/AuditList.vue

@@ -14,7 +14,7 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import WizardDialog from "@/components/platformcapabilities/WizardDialog.vue";
 import { getAuditingWizardPages } from "@/components/platformcapabilities/wizards/AuditingWizardPages";
 import { useAuditingCapability } from "@/components/platformcapabilities/capabilities/AuditingCapability";
-import { CapabilityStatus } from "@/components/platformcapabilities/types";
+import { CapabilityStatus } from "@/components/platformcapabilities/constants";
 
 const store = useAuditStore();
 const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange } = storeToRefs(store);

src/Frontend/src/components/platformcapabilities/CapabilityCard.vue

@@ -2,8 +2,9 @@
 import { ref, computed } from "vue";
 import FAIcon from "@/components/FAIcon.vue";
 import { IconDefinition, faCircle } from "@fortawesome/free-solid-svg-icons";
-import { CapabilityStatus, StatusIndicator, Capability } from "@/components/platformcapabilities/types";
-import WizardDialog, { type WizardPage } from "./WizardDialog.vue";
+import { StatusIndicator, WizardPage } from "@/components/platformcapabilities/types";
+import { Capability, CapabilityStatus } from "@/components/platformcapabilities/constants";
+import WizardDialog from "./WizardDialog.vue";
 
 const props = defineProps<{
   status: CapabilityStatus;
@@ -107,251 +108,5 @@ function handleButtonClick() {
 </template>
 
 <style scoped>
-.capability-card {
-  background: var(--card-bg, #fff);
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 16px;
-  transition: all 0.2s ease;
-  position: relative;
-  min-height: 150px;
-}
-
-.capability-available {
-  border-left: 4px solid var(--success-color, #28a745);
-}
-
-.capability-unavailable {
-  border-left: 4px solid var(--danger-color, #dc3545);
-}
-
-.capability-partially-unavailable {
-  border-left: 4px solid var(--warning-color, #ffc107);
-}
-
-.capability-loading {
-  border-left: 4px solid var(--border-color, #e0e0e0);
-}
-
-.capability-notconfigured {
-  background: linear-gradient(135deg, #f6f9fc 0%, #e9f2f9 100%);
-  border: 1px solid #c3ddf5;
-  border-left: 4px solid #007bff;
-}
-
-.text-info {
-  color: #007bff;
-}
-
-.text-warning {
-  color: var(--warning-color, #ffc107);
-}
-
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.9);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  z-index: 10;
-}
-
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--border-color, #e0e0e0);
-  border-top-color: var(--primary-color, #007bff);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-text {
-  margin-top: 12px;
-  color: var(--text-secondary, #666);
-  font-size: 14px;
-}
-
-.capability-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 12px;
-}
-
-.capability-icon {
-  font-size: 24px;
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-
-.capability-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.capability-title-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 4px;
-}
-
-.capability-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary, #333);
-}
-
-.status-indicators {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.indicator-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: help;
-}
-
-.indicator-light {
-  font-size: 10px;
-}
-
-.light-success {
-  color: var(--success-color, #28a745);
-}
-
-.light-warning {
-  color: var(--warning-color, #ffc107);
-}
-
-.light-danger {
-  color: var(--danger-color, #dc3545);
-}
-
-.indicator-label {
-  font-size: 12px;
-  color: var(--text-secondary, #666);
-  white-space: nowrap;
-}
-
-.capability-subtitle {
-  font-size: 14px;
-  color: var(--text-secondary, #666);
-  line-height: 1.4;
-}
-
-.capability-status {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
-}
-
-.status-badge {
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.status-available {
-  background-color: #d4edda;
-  color: #155724;
-}
-
-.status-unavailable {
-  background-color: #f8d7da;
-  color: #721c24;
-}
-
-.status-partially-unavailable {
-  background-color: #fff3cd;
-  color: #856404;
-}
-
-.capability-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--border-color, #e0e0e0);
-}
-
-.capability-description {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-secondary, #666);
-  line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.learn-more-btn {
-  padding: 8px 16px;
-  border-radius: 4px;
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  border: 1px solid transparent;
-}
-
-.learn-more-btn.btn-primary {
-  background-color: var(--primary-color, #007bff);
-  color: white;
-  border-color: var(--primary-color, #007bff);
-}
-
-.learn-more-btn.btn-primary:hover {
-  background-color: var(--primary-hover-color, #0056b3);
-  border-color: var(--primary-hover-color, #0056b3);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .capability-header {
-    flex-direction: column;
-  }
-
-  .capability-status {
-    align-items: flex-start;
-    flex-direction: row;
-    gap: 8px;
-  }
-
-  .capability-footer {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .learn-more-btn {
-    width: 100%;
-    text-align: center;
-  }
-}
+@import "@/components/platformcapabilities/styles/capabilityCard.css";
 </style>

src/Frontend/src/components/platformcapabilities/PlatformCapabilitiesDashboardItem.vue

@@ -4,7 +4,7 @@ import CapabilityCard from "@/components/platformcapabilities/CapabilityCard.vue
 import { useAuditingCapability } from "@/components/platformcapabilities/capabilities/AuditingCapability";
 import { useMonitoringCapability } from "@/components/platformcapabilities/capabilities/MonitoringCapability";
 import { useErrorCapability } from "@/components/platformcapabilities/capabilities/ErrorCapability";
-import { Capability } from "@/components/platformcapabilities/types";
+import { Capability } from "@/components/platformcapabilities/constants";
 import { getAuditingWizardPages } from "@/components/platformcapabilities/wizards/AuditingWizardPages";
 import { getMonitoringWizardPages } from "@/components/platformcapabilities/wizards/MonitoringWizardPages";
 import { getErrorWizardPages } from "@/components/platformcapabilities/wizards/ErrorWizardPages";
@@ -66,19 +66,5 @@ const errorWizardPages = computed(() => getErrorWizardPages(error.status.value))
 </template>
 
 <style scoped>
-.capabilities-header {
-  margin-bottom: 10px;
-}
-.capabilities-description {
-  font-size: 14px;
-  color: var(--text-secondary, #666);
-  margin: 0;
-}
-.capabilities-list {
-  display: flex;
-  gap: 16px;
-}
-.capabilities-list > * {
-  flex: 1;
-}
+@import "@/components/platformcapabilities/styles/platformDashboardSection.css";
 </style>