adding dark theme support + lint

Author: Hubert-Szczepanski-SAP

src/components/ComponentsSelection/ComponentsSelection.module.css

@@ -14,6 +14,12 @@
   background: color-mix(in srgb, var(--sapBackgroundColor) 98%, #000 2%);
 }
 
+@media (prefers-color-scheme: dark) {
+  .row.providerRow {
+    background: color-mix(in srgb, var(--sapBackgroundColor) 97%, #fff 3%);
+  }
+}
+
 .row.providerRow:hover {
   background: var(--sapList_Hover_Background);
 }
@@ -31,4 +37,4 @@
 .providerRow .checkBox {
   font-size: 0.875rem;
   opacity: 0.85;
-}
+}

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -52,7 +52,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
     return filtered.sort((a, b) => {
       const isCrossplaneA = a.name === 'crossplane';
       const isCrossplaneB = b.name === 'crossplane';
-      
+
       if (isCrossplaneA && !isCrossplaneB) return -1;
       if (isCrossplaneB && !isCrossplaneA) return 1;