@eturnity/eturnity_reusable_components 8.10.1-EPDM-13568.0 → 8.10.2

package/package.json

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

package/src/App.vue

@@ -1,22 +1,22 @@
 <template>
-  <ThemeProvider :style="{ height: '100%' }" :theme="theme">
+  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
     <RouterView />
   </ThemeProvider>
 </template>
 
 <script>
   import { ThemeProvider } from 'vue3-styled-components'
-  import theme from '@/assets/theme.js'
+  import theme from './assets/theme'
 
   export default {
     name: 'App',
     components: {
       ThemeProvider,
     },
-    setup() {
-      return {
-        theme,
-      }
+    methods: {
+      getTheme() {
+        return theme
+      },
     },
   }
 </script>

package/src/assets/theme.js

@@ -1,7 +1,7 @@
 const theme = {
   colors: {
-    primary: '#5900CC',
-    secondary: '#FAF5FF',
+    primary: '#48a2d0',
+    secondary: '#fdb813',
     tertiary: '#d5d5d5',
     black: '#263238',
     yellow: '#fdb813',

package/src/components/buttons/buttonIcon/index.vue

@@ -2,33 +2,19 @@
   <PageContainer>
     <ButtonWrapper
       :app-theme="appTheme"
-      :button-size="buttonSize"
-      :custom-color="customColor"
       :custom-color="customColor"
       :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
-      :theme-type="themeType"
-      :type="type"
-      :variant="variant"
     >
-      <IconContainer
-        :button-size="buttonSize"
-        :theme-type="themeType"
-        :type="type"
-        :variant="variant"
-      >
+      <IconContainer :width="height">
         <Icon
-          :color="
-            iconColor ||
-            theme.mainButton[themeType][type][variant].textColor ||
-            theme.colors.white
-          "
+          :color="fontColor ? fontColor : theme.colors.white"
           :name="iconName"
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :button-size="buttonSize">
+      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
         {{ text }}
       </ButtonContainer>
     </ButtonWrapper>
@@ -45,6 +31,7 @@
   //   iconName="external_icon"
   //   fontColor="white"
   //   fontSize="12px"
+  //   height="24px"
   // />
 
   import Icon from '../../icon'
@@ -54,101 +41,67 @@
   const PageContainer = styled.div``
 
   const ButtonAttrs = {
-    type: String,
     isDisabled: Boolean,
     minWidth: String,
     customColor: String,
-    buttonSize: String,
-    variant: String,
     appTheme: String,
     isActive: Boolean,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
     grid-template-columns: auto 1fr;
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) =>
-      props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
-            .disabled.textColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
-            .textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
-            .disabled.backgroundColor
+        ? props.theme.colors.disabled
         : props.customColor
-        ? props.customColor
-        : props.isActive
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
-            .active
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
-            .default};
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
-            .disabled.borderColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
-            .borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        ? props.theme.colors[props.customColor]
+          ? props.theme.colors[props.customColor]
+          : props.customColor
+        : props.appTheme === 'dark'
+        ? props.isActive
+          ? 'rgba(255, 255, 255, 0.2)'
+          : props.theme.colors.black
+        : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
     overflow: hidden;
-    min-width: ${(props) => props.minWidth || 'initial'};
+    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
 
     &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.themeType][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.themeType][props.type][props.variant]
-              .hover};
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.themeType][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.themeType][props.type][props.variant]
-              .active};
+      opacity: 1;
     }
   `
 
   const ButtonContainerAttrs = {
-    buttonSize: String,
+    fontSize: String,
+    fontColor: String,
   }
   const ButtonContainer = styled('div', ButtonContainerAttrs)`
+    font-size: ${(props) => props.fontSize};
+    color: ${(props) =>
+      props.fontColor ? props.fontColor : props.theme.colors.white};
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    padding: 5px 10px;
     white-space: nowrap;
   `
 
   const IconContainerAttrs = {
-    buttonSize: String,
-    themeType: String,
-    type: String,
-    variant: String,
+    width: String,
   }
   const IconContainer = styled('div', IconContainerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
-    width: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
-    background: rgba(255, 255, 255, 0.1);
-    border-right: ${(props) => {
-      const borderColor =
-        props.theme.mainButton[props.themeType][props.type][props.variant]
-          .borderColor
-      return borderColor ? `1px solid ${borderColor}` : 'none'
-    }};
+    width: ${(props) => props.width};
+    background: ${(props) => props.theme.colors.white + '1a'};
+    padding: 5px;
   `
 
   export default {
@@ -161,26 +114,6 @@
       Icon,
     },
     props: {
-      type: {
-        required: false,
-        default: 'primary',
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main',
-        type: String,
-      },
-      themeType: {
-        type: String,
-        default: 'light',
-        required: false,
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
       isDisabled: {
         required: false,
         default: false,
@@ -204,7 +137,7 @@
         required: true,
         type: String,
       },
-      iconColor: {
+      fontColor: {
         required: false,
         default: null,
         type: String,
@@ -224,20 +157,16 @@
         default: false,
         type: Boolean,
       },
+      height: {
+        required: false,
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {
         theme: Theme,
       }
     },
-    // computed: {
-    //   getIconColor() {
-    //     console.log(this.theme[this.themeType][this.type][this.variant])
-    //     return (
-    //       this.iconColor ||
-    //       this.theme[this.themeType][this.type][this.variant].textColor
-    //     )
-    //   },
-    // },
   }
 </script>

package/src/components/buttons/mainButton/index.vue

@@ -2,8 +2,6 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
-      :app-theme="appTheme"
-      :button-size="buttonSize"
       :custom-color="customColor"
       :data-id="dataId"
       :data-qa-id="dataQaId"
@@ -13,10 +11,9 @@
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
-      :variant="variant"
     >
       <LabelComponent :has-icon="Boolean(icon)">
-        <Icon v-if="icon" :color="iconColor" :name="icon" size="14px" />
+        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -49,40 +46,30 @@
     fontColor: String,
     noWrap: Boolean,
     height: String,
-    variant: String,
-    buttonSize: String,
-    appTheme: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
     justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
+    padding: 7px 15px;
+    font-size: 14px;
     color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .textColor};
+        ? props.theme.colors.white
+        : props.fontColor
+        ? props.fontColor
+        : props.theme.colors.white};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
+        ? props.theme.colors.disabled
         : props.customColor
         ? props.customColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default};
-
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        : props.type === 'primary'
+        ? props.theme.colors.black
+        : props.type === 'secondary'
+        ? props.theme.colors.grey3
+        : props.type === 'cancel'
+        ? props.theme.colors.red
+        : props.theme.colors.black};
     border-radius: 4px;
     text-align: center;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -92,21 +79,11 @@
     height: ${(props) => props.height};
 
     &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover};
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active};
+      opacity: 1;
     }
   `
 
@@ -132,12 +109,7 @@
     props: {
       type: {
         required: false,
-        default: 'primary', // primary, secondary, tertiary, ghost
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main', // main, cancel
+        default: 'primary',
         type: String,
       },
       isDisabled: {
@@ -197,15 +169,6 @@
         type: String,
         default: '',
       },
-      appTheme: {
-        type: String,
-        default: 'light',
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
     },
   }
 </script>

package/src/components/filter/filterSettings.vue

@@ -297,13 +297,12 @@
       <MainButton
         v-if="buttonText.cancel"
         :text="buttonText.cancel"
-        type="primary"
-        variant="cancel"
+        type="cancel"
         @click="$emit('on-cancel-view')"
       />
       <ResetContainer v-if="!filterViews || !filterViews.length">
         <ResetButton @click="$emit('on-reset-filters')">
-          <Icon :color="theme.colors.primary" :name="'update'" size="14px" />
+          <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
           <div>{{ $gettext('reset_filters') }}</div>
         </ResetButton>
       </ResetContainer>
@@ -476,7 +475,7 @@
     margin-top: 20px;
     align-self: center;
     font-size: 13px;
-    color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.blue};
     cursor: pointer;
   `
 

package/src/components/icon/index.vue

@@ -143,7 +143,6 @@
       background-color: ${(props) =>
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-      border-radius: 4px;
     }
     svg path:not(.fix) {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}

package/src/components/infoText/index.vue

@@ -48,7 +48,6 @@
       <TextWrapper :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
-          :app-theme="appTheme"
           :image="image"
           :style="boxStyle"
           :width="infoBoxWidth"
@@ -93,8 +92,10 @@
     width: Number,
   }
   const TextOverlay = styled('div', TextOverlayAttrs)`
+    background-color: ${(props) =>
+      props.image ? props.theme.colors.white : props.theme.colors.black};
     color: ${(props) =>
-      props.image ? props.theme.colors.grey1 : props.theme.colors.black};
+      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
     font-size: ${(props) => (props.image ? '12px' : '13px')};
     border-radius: 4px;
     padding: 10px;
@@ -121,11 +122,7 @@
   //   height: 0;
   //   border: 8px solid transparent;
   //   border-top-color: ${(props) =>
-  //     props.image
-  //       ? props.theme.colors.white
-  //       : props.appTheme === 'dark'
-  //       ? props.theme.colors.grey5
-  //       : props.theme.colors.black};
+  //     props.image ? props.theme.colors.white : props.theme.colors.black};
   //   filter: ${(props) =>
   //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
   // `

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

@@ -25,7 +25,6 @@
       <InfoText
         v-if="labelInfoText"
         :align-arrow="labelInfoAlign"
-        :app-theme="appTheme"
         :text="labelInfoText"
       />
     </LabelWrapper>
@@ -475,10 +474,6 @@
     },
     inheritAttrs: false,
     props: {
-      appTheme: {
-        type: String,
-        required: false,
-      },
       placeholder: {
         type: String,
         required: false,

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

@@ -21,7 +21,6 @@
         <InfoText
           v-if="infoTextMessage != ''"
           :align-arrow="infoTextAlign"
-          :app-theme="appTheme"
           data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
@@ -264,11 +263,6 @@
         default: '',
         type: String,
       },
-      appTheme: {
-        type: String,
-        required: false,
-        default: 'light',
-      },
       alignItems: {
         required: false,
         default: 'horizontal',

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

@@ -1,6 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
@@ -36,7 +37,11 @@
 
   const ContentContainer = styled.div``
 
-  const pageAttrs = { backdrop: String, position: String }
+  const pageAttrs = {
+    backdrop: String,
+    position: String,
+    addPaddingTop: Boolean,
+  }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;
@@ -50,7 +55,7 @@
       : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
-  padding-top: 80px;
+  padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
   @media (max-width: 425px) {
     background: white;
@@ -148,6 +153,10 @@
         type: String,
         default: 'auto',
       },
+      addPaddingTop: {
+        type: Boolean,
+        default: false,
+      },
     },
     watch: {
       isOpen: {

package/src/components/projectMarker/index.vue

@@ -59,8 +59,7 @@
           <MainButton :text="$gettext('Delete')" @click="onDelete" />
           <MainButton
             :text="$gettext('Cancel')"
-            type="primary"
-            variant="cancel"
+            type="cancel"
             @click="closeDeleteModal"
           />
         </CtaContainer>

package/src/components/sideMenu/index.vue

@@ -12,50 +12,30 @@
           :is-active="activeTab === item.key || activeParentTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <IconContainer :is-active="activeTab === item.key">
-            <Icon
-              :color="
-                activeTab === item.key
-                  ? theme.colors.white
-                  : theme.colors.primary
-              "
-              cursor="pointer"
-              :name="item.icon"
-              size="18px"
-            />
+          <IconContainer
+            :is-active="activeTab === item.key || activeParentTab === item.key"
+          >
+            <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
           </IconContainer>
-          <ListText :is-active="activeTab === item.key">{{
-            $gettext(item.label)
-          }}</ListText>
+          <ListText>{{ $gettext(item.label) }}</ListText>
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
             :data-id="`sub_menu_settings_${item.key}`"
-            :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
           >
             <IconContainer :is-active="activeParentTab === item.key">
               <Icon
-                :color="
-                  activeParentTab === item.key
-                    ? theme.colors.white
-                    : theme.colors.primary
-                "
+                color="#fff"
                 cursor="pointer"
                 :name="item.icon"
                 size="18px"
               />
             </IconContainer>
-            <ListText :is-active="activeTab === item.key">{{
-              $gettext(item.label)
-            }}</ListText>
+            <ListText>{{ $gettext(item.label) }}</ListText>
             <ArrowContainer>
               <Icon
-                :color="
-                  activeDropdown === item.key
-                    ? theme.colors.white
-                    : theme.colors.primary
-                "
+                color="white"
                 :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
                 size="10px"
               />
@@ -88,7 +68,7 @@
         @click="$emit('on-logout')"
       >
         <RotateIcon
-          :color="theme.colors.primary"
+          color="#fff"
           cursor="pointer"
           name="initial_situation"
           size="18px"
@@ -103,17 +83,16 @@
   import styled from 'vue3-styled-components'
   import Icon from '../icon'
   import Spinner from '../spinner'
-  import theme from '@/assets/theme.js'
 
   const PageAttrs = { isLoading: Boolean }
   const PageContainer = styled('div', PageAttrs)`
-    background-color: ${(props) => props.theme.colors.white};
+    background-color: ${(props) =>
+      props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
     padding: 14px 12px;
     min-width: 220px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    border-right: 1px solid rgba(89, 0, 204, 0.2);
   `
 
   const ListContainer = styled.div`
@@ -132,19 +111,17 @@
     padding: 4px;
     border-radius: 6px;
     background-color: ${(props) =>
-      props.isActive ? props.theme.colors.primary : ''};
+      props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
 
     :hover {
-      background-color: rgba(89, 0, 204, 0.2);
+      background-color: rgba(255, 255, 255, 0.1);
     }
   `
 
-  const ListTextAttrs = { isActive: Boolean }
-  const ListText = styled('div', ListTextAttrs)`
+  const ListText = styled.div`
     font-size: 16px;
     font-weight: 700;
-    color: ${(props) =>
-      props.isActive ? props.theme.colors.white : props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.white};
   `
 
   const IconContainer = styled('div', IconAttrs)`
@@ -153,16 +130,18 @@
     justify-items: center;
     width: 32px;
     height: 32px;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
     border-radius: 6px;
 
     ${({ isButton = false }) =>
       isButton &&
       `
-        cursor: pointer;
-        &:hover {
-          background-color: rgba(89, 0, 204, 0.2);
-        }
-        `}
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  `}
   `
 
   const SpinnerContainer = styled.div`
@@ -182,7 +161,7 @@
   const AppVersion = styled.p`
     font-size: 11px;
     line-height: 13px;
-    color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.white};
     margin-right: 6px;
   `
 
@@ -196,19 +175,20 @@
     margin-left: 65px;
     padding: 8px;
     border-radius: 6px;
-    color: ${(props) =>
-      props.isActive ? props.theme.colors.white : props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.white};
     font-weight: 700;
-    background: ${(props) =>
-      props.isActive ? props.theme.colors.primary : ''};
+    ${({ isActive }) =>
+      isActive &&
+      `
+    background: rgba(255, 255, 255, 0.1);
+  `}
 
     &:hover {
-      background: rgba(89, 0, 204, 0.2);
+      background: rgba(255, 255, 255, 0.1);
     }
   `
 
-  const CollapseContainerAttrs = { isActive: Boolean }
-  const CollapseContainer = styled('div', CollapseContainerAttrs)`
+  const CollapseContainer = styled.div`
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-gap: 20px;
@@ -216,16 +196,8 @@
     border-radius: 6px;
     align-items: center;
     cursor: pointer;
-    background: ${(props) =>
-      props.isActive ? props.theme.colors.primary : ''};
-
     &:hover {
-      background: rgba(89, 0, 204, 0.2);
-    }
-
-    div {
-      color: ${(props) =>
-        props.isActive ? props.theme.colors.white : props.theme.colors.primary};
+      background: rgba(255, 255, 255, 0.1);
     }
   `
 
@@ -282,9 +254,17 @@
     data() {
       return {
         activeDropdown: null,
-        theme,
       }
     },
+    methods: {
+      toggleActiveDropdown(value) {
+        if (this.activeDropdown === value) {
+          this.activeDropdown = null
+        } else {
+          this.activeDropdown = value
+        }
+      },
+    },
     watch: {
       activeTab: {
         // once active tab is received, check if any parent
@@ -297,14 +277,5 @@
         once: true,
       },
     },
-    methods: {
-      toggleActiveDropdown(value) {
-        if (this.activeDropdown === value) {
-          this.activeDropdown = null
-        } else {
-          this.activeDropdown = value
-        }
-      },
-    },
   }
 </script>

package/src/components/spinner/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <SpinnerContainer
-    v-if="fullWidth"
-    data-test-id="spinner_full_container"
-    :size="size"
-  >
+  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
-        <SpinnerCircle :is-white="isWhite" :size="size" />
+      <SpinnerWrapper data-test-id="spinner_full_wrapper">
+        <SpinnerSvg
+          :class="{ white: isWhite }"
+          data-test-id="spinner_full_icon"
+          :style="{ width: size, height: size }"
+        />
       </SpinnerWrapper>
     </Container>
   </SpinnerContainer>
@@ -15,14 +15,21 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
-      <SpinnerCircle :is-white="isWhite" :size="size" />
+    <SpinnerWrapper data-test-id="spinner_wrapper">
+      <SpinnerSvg
+        :class="{ white: isWhite }"
+        data-test-id="spinner_icon"
+        :style="{ width: size, height: size }"
+      />
     </SpinnerWrapper>
   </Container>
 </template>
 
 <script>
+  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+  // <spinner size="30px" />
   import styled from 'vue3-styled-components'
+  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
 
   const SpinnerContainer = styled.div`
     position: fixed;
@@ -36,72 +43,35 @@
     justify-items: center;
     z-index: 100;
   `
-
   const containerAttrs = { limitedToModal: Boolean }
   const Container = styled('div', containerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
     position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
+    height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
   `
 
-  const wrapperAttrs = { size: String }
-  const SpinnerWrapper = styled('div', wrapperAttrs)`
-    width: ${(props) =>
-      props.size === 'large'
-        ? '56px'
-        : props.size === 'medium'
-        ? '40px'
-        : '24px'};
-    height: ${(props) =>
-      props.size === 'large'
-        ? '56px'
-        : props.size === 'medium'
-        ? '40px'
-        : '24px'};
-  `
-
-  const circleAttrs = { size: String, isWhite: Boolean }
-  const SpinnerCircle = styled('div', circleAttrs)`
-    width: 100%;
-    height: 100%;
-    border-radius: 100%;
-    border: ${(props) => (props.size === 'large' ? '4px' : '2px')} solid
-      ${(props) =>
-        props.isWhite ? props.theme.colors.grey5 : props.theme.colors.white};
-    border-top-color: ${(props) =>
-      props.isWhite ? props.theme.colors.white : props.theme.colors.primary};
-    border-right-color: ${(props) =>
-      props.isWhite ? props.theme.colors.white : props.theme.colors.primary};
-    border-bottom-color: ${(props) =>
-      props.isWhite ? props.theme.colors.white : props.theme.colors.primary};
-    animation: spin 1s linear infinite;
-    transform: rotate(90deg);
+  const SpinnerWrapper = styled.div`
+    width: ${(props) => (props.size ? props.size : '60px')};
+    height: auto;
 
-    @keyframes spin {
-      to {
-        transform: rotate(450deg);
-      }
+    .white {
+      filter: brightness(0) invert(1);
     }
   `
 
   export default {
-    name: 'NewSpinner',
+    name: 'SpinnerComponent',
     components: {
-      SpinnerContainer,
-      SpinnerCircle,
       Container,
       SpinnerWrapper,
+      SpinnerContainer,
+      SpinnerSvg,
     },
     props: {
-      size: {
-        type: String,
-        default: 'medium',
-        validator: (value) => ['small', 'medium', 'large'].includes(value),
-      },
-      isWhite: {
+      fullWidth: {
         required: false,
         default: false,
         type: Boolean,
@@ -111,7 +81,12 @@
         default: false,
         type: Boolean,
       },
-      fullWidth: {
+      size: {
+        required: false,
+        default: '60px',
+        type: String,
+      },
+      isWhite: {
         required: false,
         default: false,
         type: Boolean,

package/src/components/tableDropdown/index.vue

@@ -25,19 +25,18 @@
                 item.type === 'template')
             "
           />
-          <MainButton
+          <TemplateButton
             v-if="
               item.type &&
               item.type === 'template' &&
               (item.value === '' || item.value === '-')
             "
             :key="index + '_button'"
-            button-size="small"
-            :text="$gettext('Use template...')"
-            :type="primary"
-            :variant="showArchived ? 'cancel' : 'main'"
+            :show-archived="showArchived"
             @click.stop="onTemplateClick(item.row)"
-          />
+          >
+            {{ $gettext('Use template...') }}
+          </TemplateButton>
           <TemplateLink
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
@@ -122,7 +121,7 @@
                 @on-change="onSearch($event)"
               />
             </SearchContainer>
-            <Spinner v-if="optionsLoading" size="small" />
+            <Spinner v-if="optionsLoading" />
             <EmptyText v-else-if="!optionsLoading && !optionItems.length">
               {{ emptyText ? emptyText : $gettext('No components found.') }}
             </EmptyText>
@@ -140,13 +139,12 @@
                 <span v-if="option !== 'template'">
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
-                <MainButton
+                <TemplateButton
                   v-else-if="option === 'template' && item.has_template"
-                  button-size="small"
-                  :text="$gettext('Use template...')"
-                  :type="primary"
                   @click.stop="onTemplateClick(item)"
-                />
+                >
+                  {{ $gettext('Use template...') }}
+                </TemplateButton>
                 <NoTemplate
                   v-else-if="option === 'template' && !item.has_template"
                 >
@@ -200,7 +198,6 @@
   import Icon from '../icon'
   import theme from '@/assets/theme.js'
   import InfoText from '../infoText'
-  import MainButton from '../buttons/mainButton'
 
   const rowAttrs = { disabled: Boolean, isOpen: Boolean }
   const DropdownRow = styled('div', rowAttrs)`
@@ -359,6 +356,17 @@
   `
 
   const templateAttrs = { showArchived: Boolean }
+  const TemplateButton = styled('div', templateAttrs)`
+    cursor: pointer;
+    background-color: #263238;
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : props.theme.colors.white};
+    padding: 4px 10px;
+    display: inline-block;
+    border-radius: 4px;
+    text-align: center;
+    margin-left: 15px;
+  `
 
   const NoTemplate = styled('div', templateAttrs)`
     color: ${(props) =>
@@ -458,7 +466,7 @@
       OptionsWrapper,
       OptionsItem,
       SearchContainer,
-      MainButton,
+      TemplateButton,
       NoTemplate,
       TemplateLink,
       InputText,

package/src/components/tables/mainTable/index.vue

@@ -91,7 +91,7 @@
     }
 
     ::-webkit-scrollbar-thumb {
-      border-bottom: 10px solid ${(props) => props.theme.colors.primary}; // width of the actual scrollbar
+      border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
       border-radius: 4px;
     }
   `
@@ -154,7 +154,7 @@
 
     th {
       padding: 11px 15px;
-      background-color: ${(props) => props.theme.colors.grey5};
+      background-color: ${(props) => props.theme.colors.blue1};
       cursor: auto;
       height: 40px;
 

package/src/assets/svgIcons/heat_pump.svg

@@ -1,5 +0,0 @@
-<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.48791 8.60607C2.0063 8.2283 2.71145 7.71445 3.97197 7.71445C4.5703 7.71445 5.04544 7.82349 5.45393 7.99996C5.84112 8.16724 6.14723 8.38769 6.39326 8.56488L6.4106 8.57737C6.67117 8.76496 6.86936 8.90486 7.10995 9.00878C7.33842 9.10745 7.62765 9.18186 8.04848 9.18186C8.83404 9.18186 9.16094 8.94855 9.63985 8.60676C9.77269 8.51195 9.91723 8.4088 10.0865 8.29996C10.405 8.09514 10.8293 8.18732 11.0341 8.50586C11.2389 8.82439 11.1467 9.24866 10.8282 9.45348C10.7333 9.5145 10.6339 9.58693 10.5267 9.66506C10.0086 10.0426 9.3078 10.5533 8.04848 10.5533C7.45001 10.5533 6.97476 10.4442 6.56619 10.2678C6.17879 10.1005 5.87258 9.87993 5.62647 9.70269L5.60933 9.69035C5.34871 9.50272 5.15058 9.36282 4.91005 9.25891C4.68167 9.16025 4.39259 9.08586 3.97197 9.08586C3.18671 9.08586 2.8624 9.31732 2.38624 9.65715C2.24614 9.75714 2.09289 9.86651 1.91089 9.98213C1.59124 10.1852 1.16749 10.0907 0.964421 9.77102C0.761356 9.45136 0.855873 9.02761 1.17553 8.82455C1.27346 8.76234 1.37636 8.68735 1.48791 8.60607Z" fill="#5900CC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.48791 5.17755C2.0063 4.79979 2.71145 4.28594 3.97197 4.28594C4.5703 4.28594 5.04544 4.39497 5.45393 4.57145C5.84112 4.73872 6.14723 4.95918 6.39326 5.13636L6.4106 5.14885C6.67117 5.33645 6.86936 5.47635 7.10995 5.58026C7.33842 5.67894 7.62765 5.75334 8.04848 5.75334C8.83404 5.75334 9.16094 5.52004 9.63985 5.17824C9.77269 5.08344 9.91723 4.98028 10.0865 4.87144C10.405 4.66662 10.8293 4.75881 11.0341 5.07734C11.2389 5.39588 11.1467 5.82014 10.8282 6.02496C10.7333 6.08599 10.6339 6.15842 10.5267 6.23654C10.0086 6.61409 9.3078 7.12475 8.04848 7.12475C7.45001 7.12475 6.97476 7.01572 6.56619 6.83926C6.17879 6.67194 5.87258 6.45142 5.62647 6.27417L5.60933 6.26183C5.34871 6.0742 5.15058 5.93431 4.91005 5.83039C4.68167 5.73173 4.39259 5.65734 3.97197 5.65734C3.18671 5.65734 2.8624 5.88881 2.38624 6.22864C2.24614 6.32863 2.09289 6.438 1.91089 6.55361C1.59124 6.75668 1.16749 6.66216 0.964421 6.3425C0.761356 6.02285 0.855873 5.5991 1.17553 5.39603C1.27346 5.33382 1.37636 5.25884 1.48791 5.17755Z" fill="#5900CC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.48791 1.74904C2.0063 1.37127 2.71145 0.857422 3.97197 0.857422C4.5703 0.857422 5.04544 0.966459 5.45393 1.14293C5.84112 1.31021 6.14723 1.53066 6.39326 1.70785L6.4106 1.72034C6.67117 1.90793 6.86936 2.04783 7.10995 2.15175C7.33842 2.25042 7.62765 2.32483 8.04848 2.32483C8.83404 2.32483 9.16094 2.09152 9.63985 1.74973C9.77269 1.65492 9.91723 1.55177 10.0865 1.44293C10.405 1.23811 10.8293 1.33029 11.0341 1.64883C11.2389 1.96736 11.1467 2.39163 10.8282 2.59645C10.7333 2.65747 10.6339 2.7299 10.5267 2.80803C10.0086 3.18557 9.3078 3.69623 8.04848 3.69623C7.45001 3.69623 6.97476 3.58721 6.56619 3.41075C6.17879 3.24343 5.87258 3.0229 5.62647 2.84566L5.60933 2.83332C5.34871 2.64569 5.15058 2.50579 4.91005 2.40188C4.68167 2.30322 4.39259 2.22883 3.97197 2.22883C3.18671 2.22883 2.8624 2.46029 2.38624 2.80012C2.24614 2.90011 2.09289 3.00948 1.91089 3.1251C1.59124 3.32816 1.16749 3.23365 0.964421 2.91399C0.761356 2.59433 0.855873 2.17058 1.17553 1.96752C1.27346 1.90531 1.37636 1.83032 1.48791 1.74904Z" fill="#5900CC"/>
-</svg>