@eturnity/eturnity_reusable_components 9.13.4 → 9.13.6

package/dist/index.es3.js

@@ -26,6 +26,8 @@ const theme = (() => {
     red2: "#de5959",
     red3: "#FFCCCC",
     red4: "#FF9A9A",
+    red6: "#FFEBEB",
+    red5: "#CC4545",
     pureRed: "#ff0000",
     darkRed: "#d00000",
     cornellRed: "#a52019",
@@ -67,6 +69,8 @@ const theme = (() => {
     purple4: "#D0D6F5",
     purple5: "#533181",
     purple6: "#6F20DC",
+    purple7: "#F5EEFF",
+    purple8: "#B17BFA",
     orange: "#ffc338",
     disabled: "#dfe1e1",
     transparentWhite2: "#ffffff32",
@@ -212,35 +216,9 @@ const theme = (() => {
       900: "#6E8E9Efa"
     }
   };
-  const chartGradients = {
-    simple: {
-      from: semanticColors.purple[500],
-      to: semanticColors.purple[400]
-    },
-    stacked: [{
-      from: "#F5EDFF",
-      to: "#DEC5FF"
-    }, {
-      from: "#CAA2FF",
-      to: "#F2E8FF"
-    }, {
-      from: "#B987FC",
-      to: "#904AEF"
-    }, {
-      from: "#8B40F2",
-      to: "#4A1394"
-    }, {
-      from: "#6A05F2",
-      to: "#4905A5"
-    }, {
-      from: "#5402C3",
-      to: "#2B0362"
-    }]
-  };
   return {
     colors,
     semanticColors,
-    chartGradients,
     fonts: {
       mainFont: '"Figtree", sans-serif'
     },
@@ -468,29 +446,27 @@ const theme = (() => {
               backgroundColor: semanticColors.grey[300],
               borderColor: ""
             }
-          }
-        },
-        protag: {
-          main: {
+          },
+          tertiary: {
             default: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: "transparent",
               textColor: semanticColors.teal[800],
-              borderColor: "transparent"
+              borderColor: semanticColors.teal[100]
             },
             hover: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[200],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: semanticColors.teal[100]
             },
             active: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[400],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: semanticColors.teal[100]
             },
             disabled: {
-              backgroundColor: semanticColors.yellow[300],
-              textColor: semanticColors.teal[400],
-              borderColor: ""
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800]
             }
           }
         },
@@ -517,6 +493,54 @@ const theme = (() => {
               borderColor: ""
             }
           }
+        },
+        protag: {
+          main: {
+            default: {
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            hover: {
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            active: {
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            disabled: {
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[400],
+              borderColor: ""
+            }
+          }
+        },
+        freeTrialTag: {
+          main: {
+            default: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            hover: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            active: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            disabled: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[400],
+              borderColor: ""
+            }
+          }
         }
       },
       dark: {
@@ -759,9 +783,9 @@ const theme = (() => {
           iconWidth: "26px"
         },
         tiny: {
-          padding: "2px 5px",
-          fontSize: "8px",
-          iconWidth: "18px"
+          padding: "3px 5px",
+          fontSize: "11px",
+          iconWidth: "14px"
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.13.4",
+  "version": "9.13.6",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/electricity_tariff.svg

@@ -1,3 +1,3 @@
-<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.36652 9.33445C9.4832 9.20595 9.39203 9 9.21845 9H6.16767L8.29896 0.785289C8.35143 0.583073 8.09775 0.44595 7.95731 0.60061L0.633784 8.66555C0.517096 8.79405 0.608271 9 0.781847 9H3.83263L1.70134 17.2147C1.64887 17.4169 1.90255 17.5541 2.04299 17.3994L9.36652 9.33445Z" fill="#263238"/>
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5125 0.999636C9.0643 1.00006 9.51229 1.44779 9.5125 1.99964V4.44104C9.56257 4.43332 9.61457 4.42835 9.6668 4.42835H11.8973C12.449 4.4288 12.8971 4.87652 12.8973 5.42835V11.9996C12.8971 12.5515 12.4491 12.9992 11.8973 12.9996H8.6668V12.986C8.61656 12.9938 8.56492 12.9996 8.5125 12.9996H6.28203L6.1795 12.9948C6.16229 12.993 6.14468 12.9896 6.12774 12.9869V12.9996H2.89727L2.79473 12.9948C2.29064 12.9434 1.89733 12.5173 1.89727 11.9996V11.3092C2.25984 11.3343 2.61386 11.2265 2.89727 11.0153V11.9996H5.12774V7.99964H4.18633L4.51934 6.99964H5.12774C5.18011 6.99968 5.23184 7.00454 5.28203 7.01233V1.99964C5.28223 1.48213 5.67549 1.05584 6.1795 1.00452L6.28203 0.999636H8.5125ZM6.28203 11.9996H8.5125V1.99964H6.28203V11.9996ZM9.6668 11.9996H11.8973V5.42835H9.6668V11.9996ZM1.5252 0.656862C1.61252 0.394909 1.89606 0.253171 2.15801 0.340456C2.41998 0.42778 2.56174 0.711297 2.47442 0.973268L1.19414 4.81507H3.22246C3.70002 4.81516 4.03723 5.28288 3.88653 5.73596L2.47442 9.97327C2.38695 10.235 2.10346 10.377 1.84161 10.2897C1.57979 10.2024 1.43813 9.91871 1.5252 9.65686L2.80547 5.81507H0.777152C0.299817 5.81486 -0.0372931 5.34708 0.11309 4.89417L1.5252 0.656862Z" fill="black"/>
 </svg>

package/src/assets/svgIcons/suitcase.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="15" viewbox="12 12 16 15" width="16" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.6 16.15H23.5V14.75C23.5 13.973 22.877 13.35 22.1 13.35H17.9C17.123 13.35 16.5 13.973 16.5 14.75V16.15H14.4C13.623 16.15 13 16.773 13 17.55V25.25C13 26.027 13.623 26.65 14.4 26.65H25.6C26.377 26.65 27 26.027 27 25.25V17.55C27 16.773 26.377 16.15 25.6 16.15ZM17.9 14.75H22.1V16.15H17.9V14.75ZM25.6 21.75H14.4V17.55H16.5H17.9H22.1H23.5H25.6V21.75Z" fill="#263238"></path>
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C9.10457 3.22133e-08 10 0.895431 10 2V3H12.5L12.6533 3.00781C13.4097 3.08461 14 3.72334 14 4.5V11.5C14 12.2767 13.4097 12.9154 12.6533 12.9922L12.5 13H1.5C0.723336 13 0.0846097 12.4097 0.0078125 11.6533L0 11.5V4.5C0 3.67157 0.671573 3 1.5 3H4V2C4 0.895431 4.89543 3.22128e-08 6 0H8ZM1.5 4C1.22386 4 1 4.22386 1 4.5V11.5C1 11.7761 1.22386 12 1.5 12H12.5C12.7761 12 13 11.7761 13 11.5V4.5C13 4.22386 12.7761 4 12.5 4H1.5ZM6 1C5.44772 1 5 1.44772 5 2V3H9V2C9 1.44772 8.55228 1 8 1H6Z" fill="black"/>
 </svg>

package/src/assets/theme.js

@@ -26,6 +26,8 @@ const theme = (() => {
     red2: '#de5959',
     red3: '#FFCCCC',
     red4: '#FF9A9A',
+    red6: '#FFEBEB',
+    red5: '#CC4545',
     pureRed: '#ff0000',
     darkRed: '#d00000',
     cornellRed: '#a52019',
@@ -66,6 +68,8 @@ const theme = (() => {
     purple4: '#D0D6F5',
     purple5: '#533181',
     purple6: '#6F20DC',
+    purple7: '#F5EEFF',
+    purple8: '#B17BFA',
     orange: '#ffc338',
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
@@ -213,25 +217,9 @@ const theme = (() => {
     },
   }
 
-  const chartGradients = {
-    simple: {
-      from: semanticColors.purple[500],
-      to: semanticColors.purple[400],
-    },
-    stacked: [
-      { from: '#F5EDFF', to: '#DEC5FF' },
-      { from: '#CAA2FF', to: '#F2E8FF' },
-      { from: '#B987FC', to: '#904AEF' },
-      { from: '#8B40F2', to: '#4A1394' },
-      { from: '#6A05F2', to: '#4905A5' },
-      { from: '#5402C3', to: '#2B0362' },
-    ],
-  }
-
   return {
     colors,
     semanticColors,
-    chartGradients,
     fonts: {
       mainFont: '"Figtree", sans-serif',
     },
@@ -460,28 +448,26 @@ const theme = (() => {
               borderColor: '',
             },
           },
-        },
-        protag: {
-          main: {
+          tertiary: {
             default: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: 'transparent',
               textColor: semanticColors.teal[800],
-              borderColor: 'transparent',
+              borderColor: semanticColors.teal[100],
             },
             hover: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[200],
               textColor: semanticColors.teal[800],
-              borderColor: '',
+              borderColor: semanticColors.teal[100],
             },
             active: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[400],
               textColor: semanticColors.teal[800],
-              borderColor: '',
+              borderColor: semanticColors.teal[100],
             },
             disabled: {
-              backgroundColor: semanticColors.yellow[300],
-              textColor: semanticColors.teal[400],
-              borderColor: '',
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
             },
           },
         },
@@ -509,6 +495,54 @@ const theme = (() => {
             },
           },
         },
+        protag: {
+          main: {
+            default: {
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            disabled: {
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[400],
+              borderColor: '',
+            },
+          },
+        },
+        freeTrialTag: {
+          main: {
+            default: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            disabled: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[400],
+              borderColor: '',
+            },
+          },
+        },
       },
       dark: {
         // theme
@@ -750,9 +784,9 @@ const theme = (() => {
           iconWidth: '26px',
         },
         tiny: {
-          padding: '2px 5px',
-          fontSize: '8px',
-          iconWidth: '18px',
+          padding: '3px 5px',
+          fontSize: '11px',
+          iconWidth: '14px',
         },
       },
     },

package/src/components/filter/filterSettings.vue

@@ -1,35 +1,6 @@
 <template>
   <ContainerWrapper @click="$emit('on-container-click')">
     <UpperContainer v-if="filterViews && filterViews.length">
-      <ViewContainer :max-width="activeView.length">
-        <SelectComponent
-          align-items="vertical"
-          :data-id="componentName + '_filter_view_select'"
-          :data-qa-id="componentName + '_filter_view_select'"
-          font-size="13px"
-          :label="$gettext('active_filter')"
-          select-height="36px"
-          select-width="100%"
-          @click.stop
-        >
-          <template #selector>
-            <OptionTitle>
-              {{ activeView }}
-            </OptionTitle>
-          </template>
-          <template #dropdown>
-            <Option
-              v-for="(item, idx) in filterViews"
-              :key="idx + '_view'"
-              :value="item.name"
-              @click="$emit('on-view-select', item)"
-            >
-              {{ item.name }}
-              <DeleteIcon @click.stop="$emit('on-view-delete', item)" />
-            </Option>
-          </template>
-        </SelectComponent>
-      </ViewContainer>
       <ResetButton
         :data-id="componentName + '_reset_filters_button'"
         :data-qa-id="componentName + '_reset_filters_button'"
@@ -110,10 +81,10 @@
               :is-searchable="filter.choices.length > 7"
               :label="filter.label"
               :label-data-id="filter.dataId"
+              lazy-dropdown-content
               :min-option-length="1"
               select-height="36px"
               select-width="100%"
-              :should-use-teleport="false"
             >
               <template #selector>
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
@@ -261,9 +232,11 @@
                   :enable-time-picker="false"
                   format="yyyy-MM-dd"
                   :locale="getDatePickerLanguage()"
+                  menu-class-name="filter-settings-dp-menu"
                   model-type="format"
                   :model-value="filter.range.start"
                   :placeholder="$gettext('Date from')"
+                  teleport="body"
                   text-input
                   @close="onDatepickerBlur()"
                   @focus="onDatepickerFocus(filter.range)"
@@ -289,9 +262,11 @@
                   :enable-time-picker="false"
                   format="yyyy-MM-dd"
                   :locale="getDatePickerLanguage()"
+                  menu-class-name="filter-settings-dp-menu"
                   model-type="format"
                   :model-value="filter.range.end"
                   :placeholder="$gettext('Date to')"
+                  teleport="body"
                   text-input
                   @close="onDatepickerBlur()"
                   @focus="onDatepickerFocus(filter.range)"
@@ -315,9 +290,9 @@
               font-size="13px"
               :is-searchable="filter.choices.length > 7"
               :label="filter.label"
+              lazy-dropdown-content
               select-height="36px"
               select-width="100%"
-              :should-use-teleport="false"
             >
               <template #selector="{ selectedValue }">
                 <OptionTitle>
@@ -560,7 +535,6 @@
     display: inline-flex;
     gap: 16px;
     width: max-content;
-    margin-top: 20px;
     align-self: center;
     font-size: 13px;
     color: ${(props) => props.theme.colors.primary};
@@ -745,7 +719,11 @@
         return type === 'boolean'
       },
       isMultipleSelector(type) {
-        return type === 'multi_select_integer' || type === 'multi_select_string'
+        return (
+          type === 'multi_select_integer' ||
+          type === 'multi_select_string' ||
+          type === 'multiple_choice'
+        )
       },
       isRangeSelector(type) {
         return type === 'integer_range' || type === 'number_range'
@@ -754,8 +732,16 @@
         return type === 'integer_range'
       },
       isDateSelector(type) {
-        return type === 'datetime'
+        return type === 'datetime' || type === 'date_range'
       },
     },
   }
 </script>
+
+<!-- Teleported menu is under body; unscoped. Expert main.scss also sets z-index so linked package builds pick it up. -->
+<style>
+  /* Must exceed app modal stacks (often ~1e7 in eturnity_expert); default dp menu is 99999. */
+  body .dp__menu.filter-settings-dp-menu {
+    z-index: 10000050 !important;
+  }
+</style>

package/src/components/filter/index.vue

@@ -8,7 +8,8 @@
       @on-toggle="onToggleDropdown()"
     />
     <FilterSettings
-      v-if="isDropdownOpen"
+      v-if="filterSettingsInDOM"
+      v-show="isDropdownOpen"
       :active-language="activeLanguage"
       :active-view="activeView"
       :button-text="buttonText"
@@ -82,6 +83,12 @@
         default: null,
         required: false,
       },
+      /** Host store slice (e.g. getCurrentFilterData) so the badge tracks live `filters`. */
+      currentFilterData: {
+        type: Object,
+        default: null,
+        required: false,
+      },
       componentName: {
         type: String,
         required: false,
@@ -92,14 +99,62 @@
         isDropdownOpen: false,
         activeFilter: null,
         preventOutsideClick: false,
+        /** Once true, FilterSettings stays mounted; toggled with v-show for instant reopen. */
+        filterSettingsInDOM: false,
+        _unmounted: false,
+        _idlePrewarmId: null,
+        _prewarmTimerId: null,
       }
     },
     computed: {
+      /** Count applied data filters for the settings-trigger badge (not column visibility). */
       numberOfFiltersApplied() {
-        const filterColumns = this.activeFilterView?.columns?.filter(
-          (column) => column.custom_view_filter !== null
-        )
-        return filterColumns?.length > 0 ? filterColumns.length : 0
+        const view = this.activeFilterView
+        const live = this.currentFilterData
+        const resolvedFilters =
+          live != null && Array.isArray(live.filters)
+            ? live.filters
+            : view && Array.isArray(view.filters)
+              ? view.filters
+              : []
+
+        const countFromFilterList = (filters) => {
+          if (!Array.isArray(filters) || !filters.length) {
+            return 0
+          }
+          const first = filters[0]
+          if (
+            first &&
+            typeof first === 'object' &&
+            'custom_view_filter' in first
+          ) {
+            return filters.filter((f) => f && f.custom_view_filter).length
+          }
+          // Flat rows (library / tariffs): multi-select emits one row per value —
+          // badge = number of filter *fields* narrowed, not row count.
+          if (first && typeof first === 'object' && 'field' in first) {
+            return new Set(filters.map((f) => f.field).filter(Boolean)).size
+          }
+          return filters.length
+        }
+
+        const filtersCount = countFromFilterList(resolvedFilters)
+
+        if (!view) {
+          return filtersCount
+        }
+
+        const cols = view.columns
+        if (Array.isArray(cols) && cols.length && typeof cols[0] === 'string') {
+          return filtersCount
+        }
+        if (Array.isArray(cols)) {
+          const n = cols.filter(
+            (c) => c && typeof c === 'object' && c.custom_view_filter
+          ).length
+          return n > 0 ? n : filtersCount
+        }
+        return filtersCount
       },
     },
     watch: {
@@ -111,13 +166,49 @@
     },
     mounted() {
       document.addEventListener('click', this.clickOutside)
+      // Build the heavy panel during idle so the first click often only toggles v-show.
+      const prewarm = () => {
+        if (this._unmounted || this.filterSettingsInDOM) {
+          return
+        }
+        this.filterSettingsInDOM = true
+      }
+      if (typeof requestIdleCallback !== 'undefined') {
+        this._idlePrewarmId = requestIdleCallback(prewarm, { timeout: 2000 })
+      } else {
+        this._prewarmTimerId = setTimeout(prewarm, 600)
+      }
     },
     beforeUnmount() {
+      this._unmounted = true
+      if (
+        this._idlePrewarmId != null &&
+        typeof cancelIdleCallback !== 'undefined'
+      ) {
+        cancelIdleCallback(this._idlePrewarmId)
+      }
+      if (this._prewarmTimerId != null) {
+        clearTimeout(this._prewarmTimerId)
+      }
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {
+      emitFilterPanelOpen() {
+        this.$nextTick(() => {
+          if (this.isDropdownOpen) {
+            this.$emit('on-filter-panel-open')
+          }
+        })
+      },
       onToggleDropdown() {
+        const opening = !this.isDropdownOpen
         this.isDropdownOpen = !this.isDropdownOpen
+        if (opening) {
+          if (!this.filterSettingsInDOM) {
+            this.filterSettingsInDOM = true
+          }
+          this.emitFilterPanelOpen()
+        }
       },
       onContainerClick() {
         // due to newer versions of Chrome (121), contains() is not always working.

package/src/components/inputs/checkbox/index.vue

@@ -252,7 +252,10 @@
     },
     computed: {
       hasLabel() {
-        return !!this.label && !!this.label.length
+        if (this.label == null || this.label === '') {
+          return false
+        }
+        return String(this.label).length > 0
       },
     },
     methods: {

package/src/components/inputs/select/index.vue

@@ -198,7 +198,12 @@
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
             >
-              <slot name="dropdown"></slot>
+              <!-- When lazy, skip building option/checkbox nodes until the user opens
+                   this select (filter settings can have thousands of options otherwise). -->
+              <slot
+                v-if="!lazyDropdownContent || isDropdownOpen"
+                name="dropdown"
+              ></slot>
             </SelectDropdown>
           </Component>
         </DropdownWrapper>
@@ -726,6 +731,12 @@
         required: false,
         default: true,
       },
+      /** If true, dropdown slot content is only rendered while the menu is open. */
+      lazyDropdownContent: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     setup() {
       const modalRef = inject('modalRef', null)

package/src/components/pagination/index.vue

@@ -10,7 +10,7 @@
     >
       <ArrowIconContainer>
         <RCIcon
-          :color="getTheme.colors.brightBlue"
+          :color="getTheme.colors.primary"
           name="arrow_left"
           size="12px"
         />
@@ -73,7 +73,7 @@
       <ArrowText>{{ $gettext('forward') }}</ArrowText>
       <ArrowIconContainer>
         <RCIcon
-          :color="getTheme.colors.brightBlue"
+          :color="getTheme.colors.primary"
           name="arrow_right"
           size="12px"
         />
@@ -88,7 +88,7 @@
   import theme from '@/assets/theme.js'
 
   const PaginationWrapper = styled.nav`
-    color: ${(props) => props.theme.colors.brightBlue};
+    color: ${(props) => props.theme.colors.primary};
     font-size: 13px;
     display: flex;
     flex-wrap: wrap;
@@ -103,17 +103,23 @@
     border-radius: 3px;
     white-space: nowrap;
     cursor: pointer;
-    color: ${(props) => props.theme.colors.brightBlue};
+    height: 100%;
+    align-items: center;
+    color: ${(props) => props.theme.colors.primary};
+    &:hover {
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      background-color: ${(props) => props.theme.semanticColors.purple[100]};
+    }
 
     &.active {
-      color: ${(props) => props.theme.colors.white};
-      background-color: ${(props) => props.theme.colors.brightBlue};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      background-color: ${(props) => props.theme.semanticColors.purple[50]};
       padding: 7px 12px;
       border-radius: 4px;
     }
   `
   const ArrowText = styled.div`
-    color: ${(props) => props.theme.colors.brightBlue};
+    color: ${(props) => props.theme.colors.primary};
   `
   const ArrowIconContainer = styled.div`
     margin: 0 10px;

package/src/components/sideMenu/index.vue

@@ -8,6 +8,9 @@
         <ListItem
           v-if="!item.children"
           :key="idx"
+          :data-active="
+            (activeTab === item.key || activeParentTab === item.key).toString()
+          "
           :data-id="`sub_menu_settings_${item.key}`"
           :data-qa-id="`sub_menu_settings_${item.key}`"
           :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
@@ -31,6 +34,7 @@
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
+            :data-active="activeParentTab === item.key"
             :data-id="`sub_menu_settings_${item.key}`"
             :data-qa-id="`sub_menu_settings_${item.key}`"
             :is-active="activeParentTab === item.key"
@@ -53,7 +57,11 @@
             }}</ListText>
             <ArrowContainer>
               <Icon
-                :color="theme.semanticColors.grey[800]"
+                :color="
+                  activeParentTab === item.key
+                    ? theme.semanticColors.purple[500]
+                    : theme.semanticColors.teal[800]
+                "
                 :name="
                   activeDropdown === item.key
                     ? 'arrow_up_unfilled'
@@ -67,6 +75,7 @@
             <SubRouter
               v-for="subItem in item.children"
               :key="subItem.key"
+              :data-active="activeTab === subItem.key"
               :data-id="`sub_menu_settings_${subItem.key}`"
               :data-qa-id="`sub_menu_settings_${subItem.key}`"
               :is-active="activeTab === subItem.key"
@@ -84,25 +93,15 @@
       </template>
     </ListContainer>
     <BottomSection v-if="hasLogout">
-      <IconContainer
+      <ButtonIcon
         data-id="button_settings_logout"
-        data-qa-id="button_settings_logout"
-        :is-active="false"
-        :is-button="true"
+        icon-name="logout"
+        :text="$gettext('Logout')"
+        type="ghost"
+        variant="tertiary"
         @click="$emit('on-logout')"
-      >
-        <RotateIcon
-          :color="theme.semanticColors.teal[800]"
-          cursor="pointer"
-          name="initial_situation"
-          size="18px"
-        />
-      </IconContainer>
-      <AppVersion
-        data-id="app_side_menu_version"
-        data-qa-id="app_side_menu_version"
-        >{{ appVersion }}</AppVersion
-      >
+      />
+      <AppVersion>{{ appVersion }}</AppVersion>
     </BottomSection>
   </PageContainer>
 </template>
@@ -112,6 +111,7 @@
   import Icon from '../icon'
   import Spinner from '../spinner'
   import theme from '@/assets/theme.js'
+  import ButtonIcon from '../buttons/buttonIcon'
 
   const PageAttrs = { isLoading: Boolean }
   const PageContainer = styled('div', PageAttrs)`
@@ -139,13 +139,13 @@
     padding: 4px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
     color: ${(props) =>
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.theme.semanticColors.teal[800]};
 
-    :hover {
+    &:hover:not([data-active='true']) {
       background-color: ${(props) => props.theme.semanticColors.purple[100]};
       color: ${(props) => props.theme.semanticColors.purple[500]};
       svg path:not(.fix) {
@@ -174,8 +174,7 @@
       `
         cursor: pointer;
         &:hover {
-          background-color: ${(props) =>
-            props.theme.semanticColors.purple[100]};
+          background-color: ${(props) => props.theme.semanticColors.purple[50]};
         `}
   `
 
@@ -217,10 +216,10 @@
     font-weight: 400;
     font-size: 14px;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
 
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
+    &:hover:not([data-active='true']) {
+      background: ${(props) => props.theme.semanticColors.purple[50]};
       color: ${(props) => props.theme.semanticColors.purple[500]} !important;
     }
   `
@@ -236,15 +235,15 @@
     align-items: center;
     cursor: pointer;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
 
     div {
       color: ${(props) =>
         props.isActive ? props.theme.semanticColors.purple[500] : ''};
     }
 
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
+    &:hover:not([data-active='true']) {
+      background: ${(props) => props.theme.semanticColors.purple[50]};
       color: ${(props) => props.theme.semanticColors.purple[500]};
       svg path:not(.fix) {
         fill: ${(props) => props.theme.semanticColors.purple[500]};
@@ -276,12 +275,12 @@
       Spinner,
       SpinnerContainer,
       BottomSection,
-      RotateIcon,
       AppVersion,
       CollapseWrapper,
       CollapseContainer,
       SubRouter,
       ArrowContainer,
+      ButtonIcon,
     },
     props: {
       tabsData: {

package/src/components/threeDots/index.vue

@@ -54,7 +54,14 @@
             v-for="(item, index) in options"
             :key="item.value"
             :color-theme="colorTheme"
-            :data-id="item.dataId"
+            :data-id="
+              item.dataId ||
+              'three_dots_option_item_' + rowIndex + '_' + item.value
+            "
+            :data-qa-id="
+              item.dataId ||
+              'three_dots_option_item_' + rowIndex + '_' + item.value
+            "
             :is-disabled="item.disabled"
             tabindex="0"
             :title="item.title"
@@ -359,6 +366,11 @@
         default: '',
         type: String,
       },
+      rowIndex: {
+        required: false,
+        default: 0,
+        type: Number,
+      },
     },
     data() {
       return {