@eturnity/eturnity_reusable_components 8.34.0-EPDM-16204.0 → 8.37.0-EPDM-16798.0

package/src/assets/theme.js

@@ -26,8 +26,6 @@ const theme = (() => {
     red2: '#de5959',
     red3: '#FFCCCC',
     red4: '#FF9A9A',
-    red6: '#FFEBEB',
-    red5: '#CC4545',
     pureRed: '#ff0000',
     darkRed: '#d00000',
     cornellRed: '#a52019',
@@ -68,8 +66,6 @@ const theme = (() => {
     purple4: '#D0D6F5',
     purple5: '#533181',
     purple6: '#6F20DC',
-    purple7: '#F5EEFF',
-    purple8: '#B17BFA',
     orange: '#ffc338',
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
@@ -184,9 +180,25 @@ 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',
     },
@@ -403,26 +415,28 @@ const theme = (() => {
               borderColor: '',
             },
           },
-          tertiary: {
+        },
+        protag: {
+          main: {
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: 'transparent',
             },
             hover: {
-              backgroundColor: semanticColors.grey[200],
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.grey[400],
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[400],
+              borderColor: '',
             },
           },
         },
@@ -450,152 +464,153 @@ const theme = (() => {
             },
           },
         },
-        protag: {
+      },
+      dark: {
+        // theme
+        primary: {
+          // type
           main: {
+            // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: colors.white,
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.yellow[200],
-              textColor: semanticColors.teal[400],
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.grey[400],
               borderColor: '',
             },
           },
-        },
-        freeTrialTag: {
-          main: {
+          cancel: {
+            // variant
             default: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[400],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.blue[200],
-              textColor: semanticColors.teal[400],
+              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.grey[800],
               borderColor: '',
             },
           },
         },
-      },
-      dark: {
-        // theme
-        primary: {
+        secondary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: colors.white,
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[800],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[600],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[700],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[400],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[800],
+              textColor: semanticColors.red[400],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[700],
+              textColor: semanticColors.red[300],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[600],
+              textColor: semanticColors.red[200],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },
         },
-        secondary: {
+        tertiary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.teal[800],
+              backgroundColor: 'transparent',
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[500],
             },
             hover: {
               backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[400],
             },
             active: {
               backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[300],
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: '',
+              borderColor: semanticColors.grey[800],
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[800],
+              backgroundColor: semanticColors.teal[200],
               textColor: semanticColors.red[400],
-              borderColor: '',
+              borderColor: semanticColors.teal[500],
             },
             hover: {
               backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
-              borderColor: '',
+              textColor: semanticColors.red[700],
+              borderColor: semanticColors.teal[400],
             },
             active: {
               backgroundColor: semanticColors.red[600],
               textColor: semanticColors.red[200],
-              borderColor: '',
+              borderColor: semanticColors.teal[300],
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: '',
+              borderColor: semanticColors.grey[800],
             },
           },
         },
@@ -739,9 +754,9 @@ const theme = (() => {
           iconWidth: '26px',
         },
         tiny: {
-          padding: '3px 5px',
-          fontSize: '11px',
-          iconWidth: '14px',
+          padding: '2px 5px',
+          fontSize: '10px',
+          iconWidth: '18px',
         },
       },
     },

package/src/components/filterComponent/viewFilter.vue

@@ -115,7 +115,7 @@
                       .replace('${index}', index)
                   "
                   :data-qa-id="
-                    rowDataId.dataQaId
+                    rowDataId.dataId
                       .replace('${type}', 'selectedDate')
                       .replace('${index}', index)
                   "

package/src/components/sideMenu/index.vue

@@ -8,9 +8,6 @@
         <ListItem
           v-if="!item.children"
           :key="idx"
-          :data-active="
-            (activeTab === item.key || activeParentTab === item.key).toString()
-          "
           :data-id="`sub_menu_settings_${item.key}`"
           :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
@@ -33,7 +30,6 @@
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
-            :data-active="activeParentTab === item.key"
             :data-id="`sub_menu_settings_${item.key}`"
             :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
@@ -55,11 +51,7 @@
             }}</ListText>
             <ArrowContainer>
               <Icon
-                :color="
-                  activeParentTab === item.key
-                    ? theme.semanticColors.purple[500]
-                    : theme.semanticColors.teal[800]
-                "
+                :color="theme.semanticColors.grey[800]"
                 :name="
                   activeDropdown === item.key
                     ? 'arrow_up_unfilled'
@@ -73,7 +65,6 @@
             <SubRouter
               v-for="subItem in item.children"
               :key="subItem.key"
-              :data-active="activeTab === subItem.key"
               :data-id="`sub_menu_settings_${subItem.key}`"
               :is-active="activeTab === subItem.key"
               @click="
@@ -90,14 +81,19 @@
       </template>
     </ListContainer>
     <BottomSection v-if="hasLogout">
-      <ButtonIcon
+      <IconContainer
         data-id="button_settings_logout"
-        icon-name="logout"
-        text="Logout"
-        type="ghost"
-        variant="tertiary"
+        :is-active="false"
+        :is-button="true"
         @click="$emit('on-logout')"
-      />
+      >
+        <RotateIcon
+          :color="theme.semanticColors.teal[800]"
+          cursor="pointer"
+          name="initial_situation"
+          size="18px"
+        />
+      </IconContainer>
       <AppVersion>{{ appVersion }}</AppVersion>
     </BottomSection>
   </PageContainer>
@@ -108,7 +104,6 @@
   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)`
@@ -136,18 +131,18 @@
     padding: 4px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[100] : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
     color: ${(props) =>
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.theme.semanticColors.teal[800]};
 
-    &:hover:not([data-active='true']) {
-      background-color: ${(props) => props.theme.semanticColors.grey[300]};
-      color: ${(props) => props.theme.semanticColors.teal[800]};
+    :hover {
+      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.teal[800]};
+          props.theme.semanticColors.purple[500]};
       }
     }
   `
@@ -214,11 +209,11 @@
     font-weight: 400;
     font-size: 14px;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[100] : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
 
-    &:hover:not([data-active='true']) {
-      background: ${(props) => props.theme.semanticColors.grey[300]};
-      color: ${(props) => props.theme.semanticColors.teal[800]} !important;
+    &:hover {
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
     }
   `
 
@@ -233,18 +228,18 @@
     align-items: center;
     cursor: pointer;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[100] : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
 
     div {
       color: ${(props) =>
         props.isActive ? props.theme.semanticColors.purple[500] : ''};
     }
 
-    &:hover:not([data-active='true']) {
-      background: ${(props) => props.theme.semanticColors.grey[300]};
-      color: ${(props) => props.theme.semanticColors.teal[800]};
+    &:hover {
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
       svg path:not(.fix) {
-        fill: ${(props) => props.theme.semanticColors.teal[800]};
+        fill: ${(props) => props.theme.semanticColors.purple[500]};
       }
     }
   `
@@ -273,12 +268,12 @@
       Spinner,
       SpinnerContainer,
       BottomSection,
+      RotateIcon,
       AppVersion,
       CollapseWrapper,
       CollapseContainer,
       SubRouter,
       ArrowContainer,
-      ButtonIcon,
     },
     props: {
       tabsData: {