@eturnity/eturnity_reusable_components 8.10.1-EPDM-13568.2 → 8.10.1-SLD.0

package/src/assets/svgIcons/subsidies.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99931 1.89062L7.80679 2.67178C8.25016 3.1007 8.86666 3.30101 9.47748 3.21462L10.5899 3.05727L10.784 4.16386C10.8906 4.77147 11.2716 5.2959 11.8165 5.58503L12.809 6.1116L12.3156 7.12094C12.0447 7.67516 12.0447 8.32339 12.3156 8.87761L12.809 9.88695L11.8165 10.4135C11.2716 10.7026 10.8906 11.2271 10.784 11.8347L10.5899 12.9413L9.47748 12.7839C8.86666 12.6975 8.25016 12.8978 7.80679 13.3268L6.99931 14.1079L6.19184 13.3268C5.74846 12.8978 5.13196 12.6975 4.52115 12.7839L3.40874 12.9413L3.21463 11.8347C3.10805 11.2271 2.72703 10.7026 2.18209 10.4135L1.18965 9.88695L1.68304 8.87761C1.95396 8.32339 1.95396 7.67516 1.68304 7.12094L1.18965 6.1116L2.18209 5.58503C2.72703 5.2959 3.10805 4.77147 3.21463 4.16386L3.40874 3.05727L4.52115 3.21462C5.13196 3.30101 5.74846 3.1007 6.19184 2.67178L6.99931 1.89062ZM6.30402 1.1719C6.69169 0.796866 7.30694 0.796866 7.69461 1.1719L8.50208 1.95305C8.72377 2.16751 9.03202 2.26767 9.33743 2.22447L10.4498 2.06713C10.9839 1.99159 11.4817 2.35322 11.5748 2.8845L11.769 3.99108C11.8222 4.29489 12.0128 4.5571 12.2852 4.70167L13.2777 5.22823C13.7541 5.48104 13.9443 6.06617 13.7074 6.55076L13.214 7.5601C13.0785 7.83721 13.0785 8.16133 13.214 8.43844L13.7074 9.44778C13.9443 9.93237 13.7541 10.5175 13.2777 10.7703L12.2852 11.2969C12.0128 11.4414 11.8222 11.7037 11.769 12.0075L11.5748 13.114C11.4817 13.6453 10.9839 14.007 10.4498 13.9314L9.33743 13.7741C9.03202 13.7309 8.72377 13.831 8.50208 14.0455L7.69461 14.8266C7.30694 15.2017 6.69169 15.2017 6.30402 14.8266L5.49654 14.0455C5.27486 13.831 4.96661 13.7309 4.6612 13.7741L3.54879 13.9314C3.01472 14.007 2.51697 13.6453 2.42378 13.114L2.22967 12.0075C2.17638 11.7037 1.98587 11.4414 1.7134 11.2969L0.720955 10.7703C0.24448 10.5175 0.054358 9.93237 0.29124 9.44778L0.784635 8.43844C0.920095 8.16133 0.920095 7.83721 0.784635 7.5601L0.29124 6.55076C0.054358 6.06617 0.24448 5.48104 0.720956 5.22823L1.7134 4.70167C1.98587 4.5571 2.17638 4.29489 2.22967 3.99108L2.42378 2.8845C2.51697 2.35322 3.01472 1.99159 3.54879 2.06713L4.6612 2.22447C4.96661 2.26767 5.27486 2.16751 5.49654 1.95305L6.30402 1.1719ZM5.99931 5.99927C5.99931 6.55156 5.5516 6.99927 4.99931 6.99927C4.44703 6.99927 3.99931 6.55156 3.99931 5.99927C3.99931 5.44699 4.44703 4.99927 4.99931 4.99927C5.5516 4.99927 5.99931 5.44699 5.99931 5.99927ZM8.99933 10.9993C9.55161 10.9993 9.99933 10.5516 9.99933 9.99927C9.99933 9.44698 9.55161 8.99927 8.99933 8.99927C8.44704 8.99927 7.99933 9.44698 7.99933 9.99927C7.99933 10.5516 8.44704 10.9993 8.99933 10.9993ZM9.85287 5.85282C10.0481 5.65756 10.0481 5.34098 9.85287 5.14572C9.6576 4.95046 9.34102 4.95046 9.14576 5.14572L4.14579 10.1457C3.95053 10.341 3.95053 10.6576 4.14579 10.8528C4.34105 11.0481 4.65764 11.0481 4.8529 10.8528L9.85287 5.85282Z" fill="#263238"/>
+<svg fill="none" height="20" viewbox="10 10 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.9948 19.9391L28.6077 14.0211C28.5157 12.6151 27.3927 11.4921 25.9797 11.3931L20.0618 11.0051C19.4838 10.9661 18.9188 11.1761 18.5118 11.5831L11.2858 18.8091C10.9047 19.1901 10.9047 19.8071 11.2858 20.1881L19.8118 28.7141C20.1928 29.0951 20.8098 29.0951 21.1908 28.7141L28.4167 21.4881C28.8247 21.0821 29.0348 20.5171 28.9948 19.9391ZM20.6788 16.4051C19.9238 16.5831 19.1748 16.1231 18.9908 15.3741C18.8198 14.6251 19.2798 13.8761 20.0288 13.6921C20.7778 13.5211 21.5268 13.9811 21.7108 14.7301C21.8808 15.4791 21.4208 16.2281 20.6788 16.4051ZM17.7228 23.5921L16.4088 22.2781L24.2917 14.3951L25.6058 15.7091L17.7228 23.5921ZM21.9928 24.2881C21.2378 24.4651 20.4888 24.0061 20.3048 23.2571C20.1338 22.5081 20.5938 21.7591 21.3428 21.5751C22.0918 21.4041 22.8407 21.8641 23.0247 22.6131C23.1947 23.3621 22.7348 24.1101 21.9928 24.2881Z" fill="#263238"></path>
 </svg>

package/src/assets/svgIcons/variants.svg

@@ -1,3 +1,6 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H5V5H1L1 1ZM0 1C0 0.447715 0.447715 0 1 0H5C5.55228 0 6 0.447715 6 1V5C6 5.55228 5.55228 6 5 6H1C0.447715 6 0 5.55228 0 5V1ZM11 5C9.89543 5 9 4.10457 9 3C9 1.89543 9.89543 1 11 1C12.1046 1 13 1.89543 13 3C13 4.10457 12.1046 5 11 5ZM8 3C8 1.34315 9.34315 0 11 0C12.6569 0 14 1.34315 14 3C14 4.65685 12.6569 6 11 6C9.34315 6 8 4.65685 8 3ZM1 11C1 12.1046 1.89543 13 3 13C4.10457 13 5 12.1046 5 11C5 9.89543 4.10457 9 3 9C1.89543 9 1 9.89543 1 11ZM3 8C1.34315 8 0 9.34315 0 11C0 12.6569 1.34315 14 3 14C4.65685 14 6 12.6569 6 11C6 9.34315 4.65685 8 3 8ZM8 9C8 8.44772 8.44772 8 9 8H13C13.5523 8 14 8.44772 14 9V13C14 13.5523 13.5523 14 13 14H9C8.44772 14 8 13.5523 8 13V9ZM9 9H13V13H9V9Z" fill="#263238"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 0H1C0.45 0 0 0.45 0 1V7C0 7.55 0.45 8 1 8H7C7.55 8 8 7.55 8 7C8 6.45 8 1 8 1C8 0.45 7.55 0 7 0ZM4 6C2.9 6 2 5.1 2 4C2 2.9 2.9 2 4 2C5.1 2 6 2.9 6 4C6 5.1 5.1 6 4 6Z" fill="white"/>
+<path d="M7 10H1C0.45 10 0 10.45 0 11V17C0 17.55 0.45 18 1 18H7C7.55 18 8 17.55 8 17C8 16.45 8 11 8 11C8 10.45 7.55 10 7 10ZM4 16C2.9 16 2 15.1 2 14C2 12.9 2.9 12 4 12C5.1 12 6 12.9 6 14C6 15.1 5.1 16 4 16Z" fill="white"/>
+<path d="M17 0H11C10.45 0 10 0.45 10 1V7C10 7.55 10.45 8 11 8H17C17.55 8 18 7.55 18 7C18 6.45 18 1 18 1C18 0.45 17.55 0 17 0ZM14 6C12.9 6 12 5.1 12 4C12 2.9 12.9 2 14 2C15.1 2 16 2.9 16 4C16 5.1 15.1 6 14 6Z" fill="white"/>
+<path d="M17 10H11C10.45 10 10 10.45 10 11V17C10 17.55 10.45 18 11 18H17C17.55 18 18 17.55 18 17C18 16.45 18 11 18 11C18 10.45 17.55 10 17 10ZM14 16C12.9 16 12 15.1 12 14C12 12.9 12.9 12 14 12C15.1 12 16 12.9 16 14C16 15.1 15.1 16 14 16Z" fill="white"/>
 </svg>

package/src/assets/svgIcons/virtual_storage.svg

@@ -1,3 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.59874 3.5716C2.59874 1.86991 3.99228 0.5 5.69942 0.5C6.96139 0.5 8.05087 1.24777 8.53416 2.32521C8.55682 2.37573 8.61524 2.40008 8.66716 2.38086C8.95792 2.27322 9.27253 2.2144 9.60046 2.2144C11.0682 2.2144 12.2677 3.39242 12.2677 4.8574C12.2677 4.89866 12.2667 4.93972 12.2648 4.98056C12.2628 5.02358 12.2874 5.06359 12.3268 5.08102C13.2863 5.5057 14.0015 6.36512 14.0015 7.429C14.0015 8.97487 12.5184 10.072 10.9008 10.072H8.90013C8.8449 10.072 8.80013 10.1168 8.80013 10.172V10.8579C8.80013 11.134 8.57627 11.3579 8.30013 11.3579C8.02398 11.3579 7.80013 11.134 7.80013 10.8579V8.28629C7.80013 8.01015 8.02398 7.78629 8.30013 7.78629C8.57627 7.78629 8.80013 8.01015 8.80013 8.28629V8.972C8.80013 9.02723 8.8449 9.072 8.90012 9.072H10.9008C12.1559 9.072 13.0015 8.25022 13.0015 7.429C13.0015 6.76283 12.4629 6.10939 11.5719 5.87241L11.1882 5.77033C11.1351 5.75621 11.1033 5.70189 11.117 5.64869L11.2163 5.26419C11.2498 5.13461 11.2677 4.99842 11.2677 4.8574C11.2677 3.95528 10.5266 3.2144 9.60046 3.2144C9.212 3.2144 8.85633 3.3447 8.57361 3.56289L8.04049 3.97434C7.98042 4.0207 7.89262 3.98589 7.88064 3.91096L7.77438 3.24596C7.61695 2.26077 6.75113 1.5 5.69942 1.5C4.53393 1.5 3.59874 2.43277 3.59874 3.5716C3.59874 3.8152 3.64116 4.04798 3.71875 4.26386L3.92307 4.83232C3.94729 4.89973 3.89488 4.97 3.82337 4.96599L3.22024 4.93219C3.18007 4.92994 3.13956 4.9288 3.09874 4.9288C1.93324 4.9288 0.998047 5.86157 0.998047 7.0004C0.998047 8.13923 1.93324 9.072 3.09874 9.072H5.09943C5.15466 9.072 5.19943 9.02723 5.19943 8.972V6.57184C5.19943 6.2957 5.42329 6.07184 5.69943 6.07184C5.97557 6.07184 6.19943 6.2957 6.19943 6.57184V13.0008C6.19943 13.277 5.97557 13.5008 5.69943 13.5008C5.42329 13.5008 5.19943 13.277 5.19943 13.0008V10.172C5.19943 10.1168 5.15466 10.072 5.09943 10.072H3.09874C1.39159 10.072 -0.00195312 8.70209 -0.00195312 7.0004C-0.00195312 5.49315 1.09133 4.24619 2.52745 3.98091C2.58088 3.97104 2.6182 3.92161 2.61297 3.86752C2.60355 3.77007 2.59874 3.67135 2.59874 3.5716Z" fill="#263238"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0497 8.45352H8.91235V10.296H11.0497V8.45352Z" fill="white"/>
+<path d="M15.0927 6.53724C14.9069 6.52637 14.7205 6.52637 14.5347 6.53724C14.1318 5.37717 13.336 4.39446 12.2851 3.75918C11.2341 3.12389 9.99417 2.876 8.77976 3.05841C7.56535 3.24082 6.45293 3.84205 5.635 4.75806C4.81708 5.67406 4.34512 6.84719 4.30082 8.07442C4.30975 8.30745 4.33437 8.5396 4.37452 8.76931C4.18359 8.73213 3.98989 8.711 3.79544 8.70614C3.3069 8.6797 2.8181 8.75309 2.35886 8.92183C1.89963 9.09058 1.4796 9.35114 1.12442 9.68762C0.769239 10.0241 0.486352 10.4294 0.293029 10.8789C0.0997049 11.3283 0 11.8124 0 12.3017C0 12.7909 0.0997049 13.2751 0.293029 13.7245C0.486352 14.1739 0.769239 14.5793 1.12442 14.9157C1.4796 15.2522 1.89963 15.5128 2.35886 15.6815C2.8181 15.8503 3.3069 15.9237 3.79544 15.8972H15.0927C15.726 15.9273 16.3587 15.8285 16.9527 15.6068C17.5467 15.3852 18.0895 15.0453 18.5483 14.6078C19.007 14.1703 19.3723 13.6442 19.6218 13.0614C19.8713 12.4786 20 11.8512 20 11.2172C20 10.5833 19.8713 9.95588 19.6218 9.37308C19.3723 8.79029 19.007 8.26419 18.5483 7.82666C18.0895 7.38912 17.5467 7.04925 16.9527 6.82761C16.3587 6.60598 15.726 6.50719 15.0927 6.53724ZM12.6711 13.4862H7.31202V7.05314H8.80709V6.21085H11.1655V7.05314H12.6711V13.4862Z" fill="white"/>
 </svg>

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,30 +2,19 @@
   <PageContainer>
     <ButtonWrapper
       :app-theme="appTheme"
-      :button-size="buttonSize"
       :custom-color="customColor"
       :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
-      :type="type"
-      :variant="variant"
     >
-      <IconContainer
-        :app-theme="appTheme"
-        :button-size="buttonSize"
-        :type="type"
-        :variant="variant"
-      >
+      <IconContainer :width="height">
         <Icon
-          :color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
+          :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>
@@ -42,6 +31,7 @@
   //   iconName="external_icon"
   //   fontColor="white"
   //   fontSize="12px"
+  //   height="24px"
   // />
 
   import Icon from '../../icon'
@@ -51,107 +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.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.customColor
-        ? props.theme.colors.black
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
     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.isActive
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .active.backgroundColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.backgroundColor};
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.customColor
-        ? props.customColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.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.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.customColor
-          ? props.customColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+      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.backgroundColor};
+      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,
-    appTheme: 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.appTheme][props.type][props.variant]
-          .default.borderColor
-      return borderColor ? `1px solid ${borderColor}` : 'none'
-    }};
+    width: ${(props) => props.width};
+    background: ${(props) => props.theme.colors.white + '1a'};
+    padding: 5px;
   `
 
   export default {
@@ -164,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,
@@ -207,7 +137,7 @@
         required: true,
         type: String,
       },
-      iconColor: {
+      fontColor: {
         required: false,
         default: null,
         type: String,
@@ -227,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,19 +2,18 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
-      :app-theme="appTheme"
-      :button-size="buttonSize"
+      :custom-color="customColor"
       :data-id="dataId"
       :data-qa-id="dataQaId"
+      :font-color="fontColor"
       :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
-      :variant="variant"
     >
       <LabelComponent :has-icon="Boolean(icon)">
-        <Icon v-if="icon" :name="icon" size="14px" />
+        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -43,39 +42,34 @@
     type: String,
     isDisabled: Boolean,
     minWidth: String,
+    customColor: String,
+    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]
-            .default.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.mainButton[props.appTheme][props.type][props.variant]
-            .default.backgroundColor};
-    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]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        ? props.theme.colors.disabled
+        : 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};
     border-radius: 4px;
     text-align: center;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -85,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.backgroundColor};
+      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.backgroundColor};
+      opacity: 1;
     }
   `
 
@@ -125,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: {
@@ -152,6 +131,16 @@
         required: true,
         type: String,
       },
+      customColor: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      fontColor: {
+        required: false,
+        default: '',
+        type: String,
+      },
       noWrap: {
         required: false,
         default: false,
@@ -180,33 +169,6 @@
         type: String,
         default: '',
       },
-      appTheme: {
-        type: String,
-        default: 'light',
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
-    },
-    mounted() {
-      console.log('MainButton props:', {
-        type: this.type,
-        variant: this.variant,
-        isDisabled: this.isDisabled,
-        icon: this.icon,
-        iconColor: this.iconColor,
-        text: this.text,
-        noWrap: this.noWrap,
-        minWidth: this.minWidth,
-        height: this.height,
-        id: this.id,
-        dataId: this.dataId,
-        dataQaId: this.dataQaId,
-        appTheme: this.appTheme,
-        buttonSize: this.buttonSize,
-      })
     },
   }
 </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

@@ -10,7 +10,6 @@
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
-      :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
       <i data-test-id="icon_svg" v-html="icon.html"></i>
@@ -81,11 +80,6 @@
       required: false,
       default: 'none',
     },
-    fillType: {
-      required: false,
-      default: 'fill',
-      type: String,
-    },
   })
 
   const Wrapper = styled('div', {
@@ -111,7 +105,7 @@
     right: -7px;
     background-color: ${({ theme }) => theme.colors.red};
     color: ${({ theme }) => theme.colors.white};
-    border-radius: 100%;
+    border-radius: 4px;
     width: 15px;
     height: 15px;
     display: flex;
@@ -135,14 +129,12 @@
     transform-origin: 0% 100%;
     transform: rotate(-45deg);
   `
-  const IconImageAttrs = {
+  const IconImage = styled('div', {
     color: String,
     backgroundColor: String,
     hoveredColor: String,
     animation: String,
-    fillType: String,
-  }
-  const IconImage = styled('div', IconImageAttrs)`
+  })`
     animation: ${(props) => props.animation};
     width: 100%;
     svg {
@@ -151,14 +143,13 @@
       background-color: ${(props) =>
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-      border-radius: ${(props) => (props.backgroundColor ? '8px' : '0')};
     }
     svg path:not(.fix) {
-      ${({ theme, color, fillType }) =>
-        color && `${fillType}: ${theme.colors[color] || color};`}
+      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
     &:hover svg path:not(.fix) {
-      ${({ theme }) => `fill: ${theme.semanticColors.purple[500]};`}
+      ${({ theme, hoveredColor }) =>
+        hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }
     &:hover + div {
       background-color: ${(props) => props.hoveredColor};

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