refactor: improve style readability

Author: NarrowsProjects

lib/public/app.css

@@ -727,28 +727,28 @@ label {
     margin: 0 0 0 var(--space-s);
 }
 
-.active-filters-indicator:has(+ .clear-filter-icon) {
+.active-filters-indicator:has(+ .clear-filter-icon-container) {
     border-right: 0;
     border-radius: .25rem 0 0 .25rem
 }
 
-.clear-filter-icon {
+.clear-filter-icon-container {
     background-color: white;
     border-radius: 0 .25rem .25rem 0;
-    color: var(--color-danger);
     font-weight: 700;
     cursor: pointer;
 }
 
-.clear-filter-icon > * {
+.clear-filter-icon {
     padding: var(--space-xs);
     background-color: white;
+    color: var(--color-danger);
     position: relative;
     border-radius: 0 .25rem .25rem 0;
     z-index: 10;
 }
 
-.clear-filter-icon > *:hover {
+.clear-filter-icon:hover {
     background-color: var(--color-danger);
     color: white;
 }

lib/public/components/Filters/common/filtersPanelPopover.js

@@ -11,7 +11,7 @@
  *  or submit itself to any jurisdiction.
  */
 import { h, info, popover, PopoverAnchors, PopoverTriggerPreConfiguration, DropdownComponent, CopyToClipboardComponent } from '/js/src/index.js';
-import { iconCaretBottom, iconX } from '/js/src/icons.js';
+import { iconCaretBottom } from '/js/src/icons.js';
 import { profiles } from '../../common/table/profiles.js';
 import { applyProfile } from '../../../utilities/applyProfile.js';
 import { tooltip } from '../../common/popover/tooltip.js';
@@ -54,9 +54,9 @@ const resetFiltersButton = (filteringModel, isIcon = false) => {
     };
 
     return isIcon
-        ? h('.clear-filter-icon.b1.b-danger.btn-group-item.last-item.pulse-red', attributes, [h('', 'X')])
+        ? h('.clear-filter-icon-container.btn-group-item.last-item.pulse-red', attributes, h('.clear-filter-icon.b1.b-danger', 'X'))
         : h('button#reset-filters.btn.btn-danger', attributes, 'Reset all filters');
-}
+};
 
 /**
  * Create main header of the filters panel
@@ -178,18 +178,18 @@ const pasteButtonOption = (model) => {
  * @returns {Component} the active filters indicator
  */
 const activeFilterIndicator = (filteringModel) => {
-    const hasActiveFilters = filteringModel.isAnyFilterActive()
+    const hasActiveFilters = filteringModel.isAnyFilterActive();
     const innerText = `Filters ${hasActiveFilters ? 'Active' : 'Inactive'}`;
 
     let indicator = '.active-filters-indicator.b1';
     indicator += hasActiveFilters ? '.b-success.success.pulse-green' : '.inactive';
 
-    const children = [h(indicator, h('', innerText))];
+    const children = [h(indicator, innerText)];
 
     if (hasActiveFilters) {
-        children.push(resetFiltersButton(filteringModel, true))
+        children.push(resetFiltersButton(filteringModel, true));
     }
-    
+
     return h('.flex-row.items-center', children);
 };