@eturnity/eturnity_reusable_components 8.10.1-EPDM-13568.1 → 8.10.1-EPDM-13568.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.10.1-EPDM-13568.1",
+  "version": "8.10.1-EPDM-13568.3",
   "files": [
     "dist",
     "src"

package/src/components/icon/index.vue

@@ -158,8 +158,7 @@
         color && `${fillType}: ${theme.colors[color] || color};`}
     }
     &:hover svg path:not(.fix) {
-      ${({ theme, hoveredColor }) =>
-        hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
+      ${({ theme }) => `fill: ${theme.semanticColors.purple[500]};`}
     }
     &:hover + div {
       background-color: ${(props) => props.hoveredColor};

package/src/components/modals/modal/index.vue

@@ -8,11 +8,12 @@
   >
     <ModalContainer
       v-if="isOpen"
+      :is-loading="isLoading"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
-      <ContentContainer :visible="!isLoading">
+      <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
       <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
@@ -62,7 +63,7 @@
   }
 `
 
-  const modalContainerAttrs = { overflow: String }
+  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
     align-self: center;
     justify-self: center;
@@ -74,8 +75,8 @@
     overflow: ${(props) => props.overflow};
     max-width: 95%;
     max-height: 95%;
-    min-width: 100px;
-    min-height: 100px;
+    min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
+    min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
 
     ::-webkit-scrollbar {
       width: 0.3em;

package/src/components/sideMenu/index.vue

@@ -9,6 +9,7 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
+          :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
@@ -87,7 +88,7 @@
         @click="$emit('on-logout')"
       >
         <RotateIcon
-          :color="theme.colors.primary"
+          :color="theme.semanticColors.teal[800]"
           cursor="pointer"
           name="initial_situation"
           size="18px"
@@ -119,7 +120,7 @@
     grid-gap: 6px;
   `
 
-  const IconAttrs = { isActive: Boolean, isButton: Boolean }
+  const IconAttrs = { isActive: Boolean, isButton: Boolean, fillType: String }
 
   const ListItem = styled('div', IconAttrs)`
     display: grid;
@@ -131,9 +132,18 @@
     border-radius: 4px;
     background-color: ${(props) =>
       props.isActive ? props.theme.semanticColors.purple[50] : ''};
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
 
     :hover {
-      background-color: ${(props) => props.theme.semanticColors.purple[50]};
+      background-color: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      svg path:not(.fix) {
+        ${(props) => props.fillType}: ${(props) =>
+          props.theme.semanticColors.purple[500]};
+      }
     }
   `
 
@@ -141,10 +151,6 @@
   const ListText = styled('div', ListTextAttrs)`
     font-size: 14px;
     font-weight: 400;
-    color: ${(props) =>
-      props.isActive
-        ? props.theme.semanticColors.purple[500]
-        : props.theme.semanticColors.teal[800]};
   `
 
   const IconContainer = styled('div', IconAttrs)`
@@ -160,8 +166,8 @@
       `
         cursor: pointer;
         &:hover {
-          background-color: ${(props) => props.theme.semanticColors.purple[50]};
-        }
+          background-color: ${(props) =>
+            props.theme.semanticColors.purple[100]};
         `}
   `
 
@@ -182,7 +188,7 @@
   const AppVersion = styled.p`
     font-size: 11px;
     line-height: 13px;
-    color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.semanticColors.teal[800]};
     margin-right: 6px;
   `
 
@@ -206,7 +212,8 @@
       props.isActive ? props.theme.semanticColors.purple[50] : ''};
 
     &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[50]};
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
     }
   `
 
@@ -222,14 +229,18 @@
     background: ${(props) =>
       props.isActive ? props.theme.semanticColors.purple[50] : ''};
 
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[50]};
-    }
-
     div {
       color: ${(props) =>
         props.isActive ? props.theme.semanticColors.purple[500] : ''};
     }
+
+    &:hover {
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      svg path:not(.fix) {
+        fill: ${(props) => props.theme.semanticColors.purple[500]};
+      }
+    }
   `
 
   const CollapseWrapper = styled.div`