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

package/package.json

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

package/src/App.vue

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

package/src/assets/svgIcons/heat_pump.svg

@@ -0,0 +1,5 @@
+<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>

package/src/assets/theme.js

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

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

@@ -1,19 +1,31 @@
 <template>
   <PageContainer>
     <ButtonWrapper
+      :button-size="buttonSize"
       :custom-color="customColor"
-      :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
+      :theme-type="themeType"
+      :type="type"
+      :variant="variant"
     >
-      <IconContainer :width="height">
+      <IconContainer
+        :button-size="buttonSize"
+        :theme-type="themeType"
+        :type="type"
+        :variant="variant"
+      >
         <Icon
-          :color="fontColor ? fontColor : theme.colors.white"
+          :color="
+            iconColor ||
+            theme.mainButton[themeType][type][variant].textColor ||
+            theme.colors.white
+          "
           :name="iconName"
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
+      <ButtonContainer :button-size="buttonSize">
         {{ text }}
       </ButtonContainer>
     </ButtonWrapper>
@@ -40,61 +52,96 @@
   const PageContainer = styled.div``
 
   const ButtonAttrs = {
+    type: String,
     isDisabled: Boolean,
     minWidth: String,
     customColor: String,
-    height: String,
+    buttonSize: String,
+    themeType: String,
+    variant: String,
   }
   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.colors.disabled
+        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+            .disabled.backgroundColor
         : props.customColor
-        ? props.theme.colors[props.customColor]
-          ? props.theme.colors[props.customColor]
-          : props.customColor
-        : props.theme.colors.yellow};
+        ? props.customColor
+        : 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'
+    }};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
     overflow: hidden;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
-    height: ${(props) => props.height};
+    min-width: ${(props) => props.minWidth || 'initial'};
 
     &:hover {
-      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+      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};
     }
 
     &:active {
-      opacity: 1;
+      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};
     }
   `
 
   const ButtonContainerAttrs = {
-    fontSize: String,
-    fontColor: String,
+    buttonSize: 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: 0 14px;
+    padding: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
   `
 
   const IconContainerAttrs = {
-    width: String,
+    buttonSize: String,
+    themeType: String,
+    type: String,
+    variant: String,
   }
   const IconContainer = styled('div', IconContainerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
-    width: ${(props) => props.width};
-    background: ${(props) => props.theme.colors.white + '1a'};
+    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'
+    }};
   `
 
   export default {
@@ -107,35 +154,53 @@
       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,
+        type: Boolean,
       },
       text: {
         required: true,
+        type: String,
       },
       minWidth: {
         required: false,
         default: null,
+        type: String,
       },
       customColor: {
         required: false,
         default: null,
+        type: String,
       },
       iconName: {
         required: true,
+        type: String,
       },
-      fontColor: {
+      iconColor: {
         required: false,
         default: null,
-      },
-      fontSize: {
-        required: false,
-        default: '13px',
-      },
-      height: {
-        required: false,
-        default: '30px',
+        type: String,
       },
     },
     data() {
@@ -143,5 +208,14 @@
         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,6 +2,7 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
+      :button-size="buttonSize"
       :custom-color="customColor"
       :data-id="dataId"
       :data-qa-id="dataQaId"
@@ -10,10 +11,12 @@
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
+      :theme-type="theme"
       :type="type"
+      :variant="variant"
     >
       <LabelComponent :has-icon="Boolean(icon)">
-        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
+        <Icon v-if="icon" :color="iconColor" :name="icon" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -46,30 +49,40 @@
     fontColor: String,
     noWrap: Boolean,
     height: String,
+    variant: String,
+    buttonSize: String,
+    themeType: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
     justify-content: center;
-    padding: 7px 15px;
-    font-size: 14px;
+    padding: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    font-size: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
     color: ${(props) =>
       props.isDisabled
-        ? props.theme.colors.white
-        : props.fontColor
-        ? props.fontColor
-        : props.theme.colors.white};
+        ? 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.colors.disabled
+        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+            .disabled.backgroundColor
         : props.customColor
         ? props.customColor
-        : 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};
+        : 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'
+    }};
     border-radius: 4px;
     text-align: center;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -79,11 +92,21 @@
     height: ${(props) => props.height};
 
     &:hover {
-      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+      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};
     }
 
     &:active {
-      opacity: 1;
+      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};
     }
   `
 
@@ -109,7 +132,12 @@
     props: {
       type: {
         required: false,
-        default: 'primary',
+        default: 'primary', // primary, secondary, tertiary, ghost
+        type: String,
+      },
+      variant: {
+        required: false,
+        default: 'main', // main, cancel
         type: String,
       },
       isDisabled: {
@@ -169,6 +197,15 @@
         type: String,
         default: '',
       },
+      theme: {
+        type: String,
+        default: 'light',
+      },
+      buttonSize: {
+        type: String,
+        default: 'medium',
+        required: false,
+      },
     },
   }
 </script>

package/src/components/filter/filterSettings.vue

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

package/src/components/icon/index.vue

@@ -143,6 +143,7 @@
       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

@@ -19,6 +19,7 @@
       <TextWrapper :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
+          :app-theme="appTheme"
           :image="image"
           :style="boxStyle"
           :width="infoBoxWidth"
@@ -36,7 +37,7 @@
             </slot>
           </span>
         </TextOverlay>
-        <Arrow :image="image" :style="arrowStyle" />
+        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
       </TextWrapper>
     </Teleport>
   </PageContainer>
@@ -57,11 +58,14 @@
   import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
 
-  const TextOverlay = styled('div')`
-    background-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
+  const TextOverlayAttrs = {
+    appTheme: String,
+    image: Boolean,
+    width: Number,
+  }
+  const TextOverlay = styled('div', TextOverlayAttrs)`
     color: ${(props) =>
-      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
+      props.image ? props.theme.colors.grey1 : props.theme.colors.black};
     font-size: ${(props) => (props.image ? '12px' : '13px')};
     border-radius: 4px;
     padding: 10px;
@@ -82,16 +86,20 @@
     }
   `
 
-  const Arrow = styled('div')`
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
-    border-top-color: ${(props) =>
-      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'};
-  `
+  // const Arrow = styled('div')`
+  //   position: absolute;
+  //   width: 0;
+  //   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};
+  //   filter: ${(props) =>
+  //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+  // `
 
   const PageContainer = styled('div')`
     display: inline-block;
@@ -113,7 +121,7 @@
     components: {
       IconComponent,
       TextOverlay,
-      Arrow,
+      // Arrow,
       PageContainer,
       TextWrapper,
       OverlayImage,
@@ -165,6 +173,11 @@
         default: false,
         required: false,
       },
+      appTheme: {
+        type: String,
+        default: 'light', // light or dark
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -182,7 +195,11 @@
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
-        color: props.image ? theme.colors.grey1 : theme.colors.white,
+        color: props.image
+          ? theme.colors.grey1
+          : props.appTheme === 'dark'
+          ? theme.colors.black
+          : theme.colors.white,
         textAlign: props.image ? 'right' : 'left',
       }))
 
@@ -312,7 +329,9 @@
           overflowY: 'auto',
           backgroundColor: props.image
             ? theme.colors.white
-            : theme.colors.black,
+            : props.appTheme === 'light'
+            ? theme.colors.black
+            : theme.colors.grey5,
         }
       }
 
@@ -354,7 +373,6 @@
       }
 
       const updatePosition = async () => {
-        console.log('updatePosition')
         if (!infoBox.value || !textContent.value) return
 
         // First make the content visible but hidden to get accurate measurements

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

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

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

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

package/src/components/projectMarker/index.vue

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

package/src/components/sideMenu/index.vue

@@ -13,27 +13,49 @@
           @click="$emit('tab-click', { activeKey: item.key })"
         >
           <IconContainer :is-active="activeTab === item.key">
-            <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
+            <Icon
+              :color="
+                activeTab === item.key
+                  ? theme.colors.white
+                  : theme.colors.primary
+              "
+              cursor="pointer"
+              :name="item.icon"
+              size="18px"
+            />
           </IconContainer>
-          <ListText>{{ $gettext(item.label) }}</ListText>
+          <ListText :is-active="activeTab === item.key">{{
+            $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="#fff"
+                :color="
+                  activeParentTab === item.key
+                    ? theme.colors.white
+                    : theme.colors.primary
+                "
                 cursor="pointer"
                 :name="item.icon"
                 size="18px"
               />
             </IconContainer>
-            <ListText>{{ $gettext(item.label) }}</ListText>
+            <ListText :is-active="activeTab === item.key">{{
+              $gettext(item.label)
+            }}</ListText>
             <ArrowContainer>
               <Icon
-                color="white"
+                :color="
+                  activeDropdown === item.key
+                    ? theme.colors.white
+                    : theme.colors.primary
+                "
                 :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
                 size="10px"
               />
@@ -66,7 +88,7 @@
         @click="$emit('on-logout')"
       >
         <RotateIcon
-          color="#fff"
+          :color="theme.colors.primary"
           cursor="pointer"
           name="initial_situation"
           size="18px"
@@ -81,16 +103,17 @@
   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.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
+    background-color: ${(props) => props.theme.colors.white};
     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`
@@ -109,17 +132,19 @@
     padding: 4px;
     border-radius: 6px;
     background-color: ${(props) =>
-      props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
+      props.isActive ? props.theme.colors.primary : ''};
 
     :hover {
-      background-color: rgba(255, 255, 255, 0.1);
+      background-color: rgba(89, 0, 204, 0.2);
     }
   `
 
-  const ListText = styled.div`
+  const ListTextAttrs = { isActive: Boolean }
+  const ListText = styled('div', ListTextAttrs)`
     font-size: 16px;
     font-weight: 700;
-    color: ${(props) => props.theme.colors.white};
+    color: ${(props) =>
+      props.isActive ? props.theme.colors.white : props.theme.colors.primary};
   `
 
   const IconContainer = styled('div', IconAttrs)`
@@ -128,18 +153,16 @@
     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(255, 255, 255, 0.3);
-  }
-  `}
+        cursor: pointer;
+        &:hover {
+          background-color: rgba(89, 0, 204, 0.2);
+        }
+        `}
   `
 
   const SpinnerContainer = styled.div`
@@ -159,7 +182,7 @@
   const AppVersion = styled.p`
     font-size: 11px;
     line-height: 13px;
-    color: ${(props) => props.theme.colors.white};
+    color: ${(props) => props.theme.colors.primary};
     margin-right: 6px;
   `
 
@@ -173,20 +196,19 @@
     margin-left: 65px;
     padding: 8px;
     border-radius: 6px;
-    color: ${(props) => props.theme.colors.white};
+    color: ${(props) =>
+      props.isActive ? props.theme.colors.white : props.theme.colors.primary};
     font-weight: 700;
-    ${({ isActive }) =>
-      isActive &&
-      `
-    background: rgba(255, 255, 255, 0.1);
-  `}
+    background: ${(props) =>
+      props.isActive ? props.theme.colors.primary : ''};
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: rgba(89, 0, 204, 0.2);
     }
   `
 
-  const CollapseContainer = styled.div`
+  const CollapseContainerAttrs = { isActive: Boolean }
+  const CollapseContainer = styled('div', CollapseContainerAttrs)`
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-gap: 20px;
@@ -194,8 +216,16 @@
     border-radius: 6px;
     align-items: center;
     cursor: pointer;
+    background: ${(props) =>
+      props.isActive ? props.theme.colors.primary : ''};
+
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: rgba(89, 0, 204, 0.2);
+    }
+
+    div {
+      color: ${(props) =>
+        props.isActive ? props.theme.colors.white : props.theme.colors.primary};
     }
   `
 
@@ -252,6 +282,7 @@
     data() {
       return {
         activeDropdown: null,
+        theme,
       }
     },
     mounted() {

package/src/components/spinner/index.vue

@@ -72,11 +72,11 @@
       ${(props) =>
         props.isWhite ? props.theme.colors.grey5 : props.theme.colors.white};
     border-top-color: ${(props) =>
-      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+      props.isWhite ? props.theme.colors.white : props.theme.colors.primary};
     border-right-color: ${(props) =>
-      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+      props.isWhite ? props.theme.colors.white : props.theme.colors.primary};
     border-bottom-color: ${(props) =>
-      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+      props.isWhite ? props.theme.colors.white : props.theme.colors.primary};
     animation: spin 1s linear infinite;
     transform: rotate(90deg);
 

package/src/components/tableDropdown/index.vue

@@ -25,18 +25,19 @@
                 item.type === 'template')
             "
           />
-          <TemplateButton
+          <MainButton
             v-if="
               item.type &&
               item.type === 'template' &&
               (item.value === '' || item.value === '-')
             "
             :key="index + '_button'"
-            :show-archived="showArchived"
+            button-size="small"
+            :text="$gettext('Use template...')"
+            :type="primary"
+            :variant="showArchived ? 'cancel' : 'main'"
             @click.stop="onTemplateClick(item.row)"
-          >
-            {{ $gettext('Use template...') }}
-          </TemplateButton>
+          />
           <TemplateLink
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
@@ -137,12 +138,13 @@
                 <span v-if="option !== 'template'">
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
-                <TemplateButton
+                <MainButton
                   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"
                 >
@@ -196,6 +198,7 @@
   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)`
@@ -354,17 +357,6 @@
   `
 
   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 +450,7 @@
       OptionsWrapper,
       OptionsItem,
       SearchContainer,
-      TemplateButton,
+      MainButton,
       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.brightBlue}; // width of the actual scrollbar
+      border-bottom: 10px solid ${(props) => props.theme.colors.primary}; // width of the actual scrollbar
       border-radius: 4px;
     }
   `
@@ -154,7 +154,7 @@
 
     th {
       padding: 11px 15px;
-      background-color: ${(props) => props.theme.colors.blue1};
+      background-color: ${(props) => props.theme.colors.grey5};
       cursor: auto;
       height: 40px;