@eturnity/eturnity_reusable_components 8.10.3-EPDM-11600.1 → 8.10.3-EPDM-13568.3

package/src/assets/svgIcons/profile.svg

@@ -1,4 +1,3 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.01817 9C11.5035 9 13.5182 6.98528 13.5182 4.5C13.5182 2.01472 11.5035 0 9.01817 0C6.53289 0 4.51817 2.01472 4.51817 4.5C4.51817 6.98528 6.53289 9 9.01817 9Z" fill="white"/>
-<path d="M17.0364 18C11.9636 18 5.99091 18 1 18C1 13.5818 4.6 10.9636 9.01818 10.9636C13.4364 10.9636 17.0364 13.5818 17.0364 18Z" fill="white"/>
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 3C8.00001 4.10457 7.10458 5 6.00001 5C4.89544 5 4.00001 4.10457 4.00001 3C4.00001 1.89543 4.89544 1 6.00001 1C7.10458 1 8.00001 1.89543 8.00001 3ZM9.00001 3C9.00001 4.65685 7.65686 6 6.00001 6C4.34316 6 3.00001 4.65685 3.00001 3C3.00001 1.34315 4.34316 0 6.00001 0C7.65686 0 9.00001 1.34315 9.00001 3ZM1 13.5C1 12.0007 1.13241 10.6403 1.79103 9.65235C2.41764 8.71243 3.60311 8 6 8C8.39689 8 9.58236 8.71243 10.209 9.65235C10.8676 10.6403 11 12.0007 11 13.5C11 13.7761 11.2239 14 11.5 14C11.7761 14 12 13.7761 12 13.5C12 11.9993 11.8824 10.3597 11.041 9.09765C10.1676 7.78757 8.60311 7 6 7C3.39689 7 1.83236 7.78757 0.958975 9.09765C0.117592 10.3597 0 11.9993 0 13.5C0 13.7761 0.223858 14 0.5 14C0.776142 14 1 13.7761 1 13.5Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/profitability.svg

@@ -1,3 +1,3 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 6.44778L17.9846 6.43345V5.01433H16.5666L16.5522 5L16.5369 5.01433H15.9369H11.4942V7.06212H14.4891L10.758 10.7942L7.66894 7.70512L6.22526 6.26143L4.77133 7.70512L0 12.4764L1.44369 13.9304L6.22526 9.14881L9.31433 12.2379L9.31126 12.2399L10.7601 13.6877L10.7621 13.6857L10.7713 13.6949L12.215 12.2512L12.2058 12.242L15.9369 8.51092V11.5058H17.9846V7.06212V6.46314L18 6.44778Z" fill="white"/>
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 0C10.2239 0 10 0.223858 10 0.5C10 0.776142 10.2239 1 10.5 1H12.2929L7.97385 5.31905L4.89571 2.68064C4.65766 2.4766 4.30266 2.49023 4.08097 2.71193L0.146447 6.64645C-0.0488155 6.84171 -0.0488155 7.15829 0.146447 7.35355C0.341709 7.54882 0.658291 7.54882 0.853553 7.35355L4.52615 3.68095L7.60429 6.31936C7.84234 6.5234 8.19734 6.50977 8.41903 6.28807L13 1.7071V3.5C13 3.77614 13.2239 4 13.5 4C13.7761 4 14 3.77614 14 3.5V0.6C14 0.26863 13.7314 0 13.4 0H10.5Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/project_analysis.svg

@@ -1,4 +1,3 @@
-<svg fill="none" height="20" viewbox="10 10 19 20" width="19" xmlns="http://www.w3.org/2000/svg">
-<path d="M28.6783 20.341C27.6293 17.998 25.7073 16.312 23.4423 15.923V14.22L20.2223 11H11.3223V13H11.3273V29H23.4423V24.752C25.7063 24.363 27.6293 22.677 28.6783 20.341ZM13.3273 13H19.3923L21.4423 15.05V15.923C19.1783 16.311 17.2563 17.998 16.2063 20.341C17.2553 22.678 19.1773 24.363 21.4423 24.752V27H13.3273V13ZM22.4423 22.837C20.8943 22.837 19.4283 21.9 18.4643 20.339C19.4283 18.776 20.8933 17.837 22.4423 17.837C23.9913 17.837 25.4563 18.776 26.4203 20.339C25.4563 21.9 23.9903 22.837 22.4423 22.837Z" fill="#263238"></path>
-<path d="M22.4423 21.837C23.2707 21.837 23.9423 21.1654 23.9423 20.337C23.9423 19.5086 23.2707 18.837 22.4423 18.837C21.6138 18.837 20.9423 19.5086 20.9423 20.337C20.9423 21.1654 21.6138 21.837 22.4423 21.837Z" fill="#263238"></path>
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1V8V13H8V5V1H5ZM9 5V13H12V5H9ZM8 14H5H4H1C0.447715 14 0 13.5523 0 13V8C0 7.44772 0.447715 7 1 7H4V1C4 0.447716 4.44772 0 5 0H8C8.55228 0 9 0.447715 9 1V4H12C12.5523 4 13 4.44772 13 5V13C13 13.5523 12.5523 14 12 14H9H8ZM4 8V13H1V8H4Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/project_settings.svg

@@ -1,4 +1,3 @@
-<svg fill="none" height="20" viewbox="10 10 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 16.5C18.1 16.5 16.5 18 16.5 20C16.5 22 18 23.5 20 23.5C22 23.5 23.5 22 23.5 20C23.5 18 21.9 16.5 20 16.5ZM20 21.4C19.2 21.4 18.5 20.7 18.5 19.9C18.5 19.1 19.2 18.5 20 18.5C20.8 18.5 21.5 19.2 21.5 20C21.5 20.8 20.8 21.4 20 21.4Z" fill="#263238"></path>
-<path d="M21 11H19V13.1C17.8 13.2 16.7 13.7 15.8 14.4L14.3 12.9L12.9 14.3L14.4 15.8C13.7 16.7 13.2 17.8 13.1 19H11V21H13.1C13.3 22.2 13.7 23.3 14.4 24.2L12.9 25.7L14.3 27.1L15.8 25.6C16.7 26.3 17.8 26.8 19 26.9V29H21V26.9C22.2 26.7 23.3 26.3 24.2 25.6L25.7 27.1L27.1 25.7L25.6 24.2C26.3 23.3 26.8 22.2 26.9 21H29V19H26.9C26.7 17.8 26.3 16.7 25.6 15.8L27.1 14.3L25.7 12.9L24.2 14.4C23.3 13.7 22.2 13.2 21 13.1V11ZM20 25C17.2 25 15 22.8 15 20C15 17.2 17.2 15 20 15C22.8 15 25 17.2 25 20C25 22.8 22.8 25 20 25Z" fill="#263238"></path>
+<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="M8 2C8 1.44772 8.44772 1 9 1C9.55229 1 10 1.44772 10 2C10 2.55228 9.55229 3 9 3C8.44772 3 8 2.55228 8 2ZM7.06301 1.5L0.5 1.5C0.223858 1.5 0 1.72386 0 2C0 2.27614 0.223858 2.5 0.5 2.5L7.06301 2.5C7.28503 3.36261 8.06808 4 9 4C9.93192 4 10.715 3.36261 10.937 2.5L13.5 2.5C13.7761 2.5 14 2.27614 14 2C14 1.72386 13.7761 1.5 13.5 1.5L10.937 1.5C10.715 0.637386 9.93192 0 9 0C8.06808 0 7.28503 0.637386 7.06301 1.5ZM0.5 6.5C0.223858 6.5 0 6.72386 0 7C0 7.27614 0.223858 7.5 0.5 7.5H2.06301C2.28503 8.36261 3.06808 9 4 9C4.93192 9 5.71497 8.36261 5.93699 7.5H13.5C13.7761 7.5 14 7.27614 14 7C14 6.72386 13.7761 6.5 13.5 6.5H5.93699C5.71497 5.63739 4.93192 5 4 5C3.06808 5 2.28503 5.63739 2.06301 6.5H0.5ZM4 6C4.55228 6 5 6.44772 5 7C5 7.55228 4.55228 8 4 8C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6ZM7.06301 11.5L0.5 11.5C0.223858 11.5 0 11.7239 0 12C0 12.2761 0.223858 12.5 0.5 12.5L7.06301 12.5C7.28503 13.3626 8.06808 14 9 14C9.93192 14 10.715 13.3626 10.937 12.5L13.5 12.5C13.7761 12.5 14 12.2761 14 12C14 11.7239 13.7761 11.5 13.5 11.5L10.937 11.5C10.715 10.6374 9.93192 10 9 10C8.06808 10 7.28503 10.6374 7.06301 11.5ZM10 12C10 11.4477 9.55229 11 9 11C8.44772 11 8 11.4477 8 12C8 12.5523 8.44772 13 9 13C9.55229 13 10 12.5523 10 12Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/pv.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="20" viewbox="10 10 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 14.975C19.451 14.975 19.006 14.53 19.006 13.981V11.994C19.006 11.445 19.451 11 20 11C20.549 11 20.994 11.445 20.994 11.994V13.981C20.994 14.53 20.549 14.975 20 14.975ZM20.994 28.006V26.019C20.994 25.47 20.549 25.025 20 25.025C19.451 25.025 19.006 25.47 19.006 26.019V28.006C19.006 28.555 19.451 29 20 29C20.549 29 20.994 28.555 20.994 28.006ZM26.019 20.994H28.006C28.555 20.994 29 20.549 29 20C29 19.451 28.555 19.006 28.006 19.006H26.019C25.47 19.006 25.025 19.451 25.025 20C25.025 20.549 25.47 20.994 26.019 20.994ZM11.994 20.994H13.981C14.53 20.994 14.975 20.549 14.975 20C14.975 19.451 14.53 19.006 13.981 19.006H11.994C11.445 19.006 11 19.451 11 20C11 20.549 11.445 20.994 11.994 20.994ZM24.959 16.446L26.364 15.041C26.752 14.653 26.752 14.024 26.364 13.636C25.976 13.248 25.347 13.248 24.959 13.636L23.554 15.041C23.166 15.429 23.166 16.058 23.554 16.446C23.942 16.834 24.571 16.834 24.959 16.446ZM15.041 26.364L16.446 24.959C16.834 24.571 16.834 23.942 16.446 23.554C16.058 23.166 15.429 23.166 15.041 23.554L13.636 24.959C13.248 25.347 13.248 25.976 13.636 26.364C14.024 26.752 14.653 26.752 15.041 26.364ZM23.554 24.959L24.959 26.364C25.347 26.752 25.976 26.752 26.364 26.364C26.752 25.976 26.752 25.347 26.364 24.959L24.959 23.554C24.571 23.166 23.942 23.166 23.554 23.554C23.166 23.942 23.166 24.571 23.554 24.959ZM13.636 15.041L15.041 16.446C15.429 16.834 16.058 16.834 16.446 16.446C16.834 16.058 16.834 15.429 16.446 15.041L15.041 13.636C14.653 13.248 14.024 13.248 13.636 13.636C13.248 14.024 13.248 14.653 13.636 15.041ZM20 16.083C17.805 16.083 16.025 17.862 16.025 20.058C16.025 22.254 17.805 24.032 20 24.032C22.195 24.032 23.975 22.253 23.975 20.057C23.975 17.861 22.195 16.083 20 16.083Z" fill="#263238"></path>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.5C8.27614 0.5 8.5 0.723858 8.5 1V2.86667C8.5 3.14281 8.27614 3.36667 8 3.36667C7.72386 3.36667 7.5 3.14281 7.5 2.86667V1C7.5 0.723858 7.72386 0.5 8 0.5ZM0.5 8C0.5 7.72386 0.723858 7.5 1 7.5H2.86667C3.14281 7.5 3.36667 7.72386 3.36667 8C3.36667 8.27614 3.14281 8.5 2.86667 8.5H1C0.723858 8.5 0.5 8.27614 0.5 8ZM12.6333 8C12.6333 7.72386 12.8572 7.5 13.1333 7.5H15C15.2761 7.5 15.5 7.72386 15.5 8C15.5 8.27614 15.2761 8.5 15 8.5H13.1333C12.8572 8.5 12.6333 8.27614 12.6333 8ZM8 12.6333C8.27614 12.6333 8.5 12.8572 8.5 13.1333V15C8.5 15.2761 8.27614 15.5 8 15.5C7.72386 15.5 7.5 15.2761 7.5 15V13.1333C7.5 12.8572 7.72386 12.6333 8 12.6333ZM4.5 8C4.5 6.067 6.067 4.5 8 4.5C9.933 4.5 11.5 6.067 11.5 8C11.5 9.933 9.933 11.5 8 11.5C6.067 11.5 4.5 9.933 4.5 8ZM8 5.5C6.61929 5.5 5.5 6.61929 5.5 8C5.5 9.38071 6.61929 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8C10.5 6.61929 9.38071 5.5 8 5.5ZM3.4038 2.6967C3.20854 2.50144 2.89196 2.50144 2.6967 2.6967C2.50143 2.89196 2.50143 3.20854 2.6967 3.40381L4.01663 4.72374C4.21189 4.919 4.52847 4.919 4.72374 4.72374C4.919 4.52848 4.919 4.21189 4.72374 4.01663L3.4038 2.6967ZM2.6967 12.5962C2.50143 12.7915 2.50143 13.108 2.6967 13.3033C2.89196 13.4986 3.20854 13.4986 3.4038 13.3033L4.72374 11.9834C4.919 11.7881 4.919 11.4715 4.72374 11.2763C4.52847 11.081 4.21189 11.081 4.01663 11.2763L2.6967 12.5962ZM11.2763 4.01663C11.081 4.21189 11.081 4.52848 11.2763 4.72374C11.4715 4.919 11.7881 4.919 11.9834 4.72374L13.3033 3.40381C13.4986 3.20854 13.4986 2.89196 13.3033 2.6967C13.108 2.50144 12.7915 2.50144 12.5962 2.6967L11.2763 4.01663ZM11.9834 11.2763C11.7881 11.081 11.4715 11.081 11.2763 11.2763C11.081 11.4715 11.081 11.7881 11.2763 11.9834L12.5962 13.3033C12.7915 13.4986 13.108 13.4986 13.3033 13.3033C13.4986 13.108 13.4986 12.7915 13.3033 12.5962L11.9834 11.2763Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/run_simulation.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 13C16.1182 13 13 16.1182 13 20C13 23.8818 16.1182 27 20 27C23.8818 27 27 23.8818 27 20C27 16.1182 23.8818 13 20 13Z" fill="#FF5656"></path>
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 12.9194V1.08062C0.5 0.661372 0.984966 0.428285 1.31235 0.69019L8.71157 6.60957C8.96177 6.80973 8.96177 7.19027 8.71157 7.39044L1.31235 13.3098C0.984966 13.5717 0.5 13.3386 0.5 12.9194Z" stroke="#263238" stroke-linecap="round"/>
 </svg>

package/src/assets/svgIcons/settings.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<path clip-rule="evenodd" d="M18.9818 13H21.0182V14.6545C21.7182 14.7818 22.4182 15.1 23.0545 15.4818L24.2 14.3364L25.6636 15.8L24.5182 16.9455C24.9636 17.5182 25.2818 18.2182 25.4091 18.9818H27V21.0182H25.3455C25.2182 21.7818 24.9636 22.4818 24.5182 23.1182L25.6 24.2L24.1364 25.6636L23.0545 24.5818C22.4182 25.0273 21.7182 25.3455 20.9545 25.4727V27H18.9182V25.4727C18.1545 25.3455 17.4545 25.0273 16.8182 24.5818L15.7364 25.6636L14.2727 24.2L15.3545 23.1182C14.9727 22.4818 14.6545 21.7818 14.5273 21.0182H13V18.9818H14.5909C14.7818 18.2818 15.0364 17.5818 15.4818 16.9455L14.3364 15.8L15.8 14.3364L16.8818 15.4818C17.5182 15.0364 18.2182 14.7818 18.9818 14.5909V13ZM20.0002 23.182C21.7574 23.182 23.182 21.7574 23.182 20.0002C23.182 18.2429 21.7574 16.8184 20.0002 16.8184C18.2429 16.8184 16.8184 18.2429 16.8184 20.0002C16.8184 21.7574 18.2429 23.182 20.0002 23.182Z" fill="#263238" fill-rule="evenodd"></path>
+<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="M7.00024 1.33984L7.34164 1.86741C7.85599 2.66221 8.85715 2.98751 9.74045 2.64682L10.3267 2.42069L10.2929 3.04817C10.2418 3.99351 10.8605 4.84515 11.7754 5.08871L12.3826 5.25038L11.9864 5.7381C11.3894 6.47289 11.3894 7.52557 11.9864 8.26035L12.3826 8.74807L11.7754 8.90974C10.8605 9.15331 10.2418 10.0049 10.2929 10.9503L10.3267 11.5778L9.74045 11.3516C8.85716 11.0109 7.85599 11.3362 7.34165 12.1311L7.00024 12.6586L6.65884 12.1311C6.14449 11.3362 5.14333 11.0109 4.26003 11.3516L3.67374 11.5778L3.70763 10.9503C3.75869 10.0049 3.13994 9.15331 2.22509 8.90974L1.61785 8.74807L2.01409 8.26035C2.61105 7.52557 2.61105 6.47289 2.01409 5.7381L1.61785 5.25038L2.22509 5.08871C3.13993 4.84515 3.75869 3.99351 3.70763 3.04817L3.67374 2.42069L4.26003 2.64682C5.14332 2.98751 6.14449 2.66221 6.65884 1.86741L7.00024 1.33984ZM0.841707 8.11751L1.23795 7.62979C1.53643 7.2624 1.53643 6.73606 1.23795 6.36867L0.841707 5.88095C0.384346 5.318 0.659664 4.47065 1.36057 4.28404L1.96781 4.12238C2.42524 4.00059 2.73461 3.57477 2.70908 3.1021L2.67519 2.47462C2.63607 1.75036 3.35687 1.22667 4.0336 1.48768L4.61989 1.71382C5.06154 1.88416 5.56212 1.72151 5.81929 1.32411L6.1607 0.796547C6.55476 0.18761 7.44572 0.187609 7.83978 0.796547L8.18119 1.32411C8.43836 1.72151 8.93894 1.88416 9.38059 1.71382L9.96688 1.48768C10.6436 1.22667 11.3644 1.75036 11.3253 2.47462L11.2914 3.1021C11.2659 3.57477 11.5752 4.00059 12.0327 4.12237L12.6399 4.28404C13.3408 4.47065 13.6161 5.318 13.1588 5.88095L12.7625 6.36867C12.4641 6.73606 12.4641 7.2624 12.7625 7.62979L13.1588 8.11751C13.6161 8.68046 13.3408 9.52781 12.6399 9.71441L12.0327 9.87608C11.5752 9.99786 11.2659 10.4237 11.2914 10.8964L11.3253 11.5238C11.3644 12.2481 10.6436 12.7718 9.96688 12.5108L9.38059 12.2846C8.93894 12.1143 8.43836 12.2769 8.18119 12.6743L7.83978 13.2019C7.44572 13.8108 6.55476 13.8108 6.1607 13.2019L5.81929 12.6743C5.56212 12.2769 5.06154 12.1143 4.61989 12.2846L4.0336 12.5108C3.35687 12.7718 2.63607 12.2481 2.67519 11.5238L2.70908 10.8964C2.73461 10.4237 2.42524 9.99787 1.96781 9.87608L1.36057 9.71441C0.659665 9.52781 0.384345 8.68046 0.841707 8.11751ZM9.00026 6.99923C9.00026 8.10379 8.10483 8.99923 7.00026 8.99923C5.89569 8.99923 5.00026 8.10379 5.00026 6.99923C5.00026 5.89466 5.89569 4.99923 7.00026 4.99923C8.10483 4.99923 9.00026 5.89466 9.00026 6.99923ZM10.0003 6.99923C10.0003 8.65608 8.65711 9.99923 7.00026 9.99923C5.3434 9.99923 4.00026 8.65608 4.00026 6.99923C4.00026 5.34237 5.3434 3.99923 7.00026 3.99923C8.65711 3.99923 10.0003 5.34237 10.0003 6.99923Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/subscriptions.svg

@@ -1,3 +1,3 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 12H8V10H0V12ZM0 16H8V14H0V16ZM0 8H8V6H0V8ZM0 2V4H8V2H0ZM10 2H18V16H10V2Z" fill="white"/>
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10H8V8H0V10ZM0 14H8V12H0V14ZM0 6H8V4H0V6ZM0 0V2H8V0H0ZM10 0H18V14H10V0Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/subsidies.svg

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

package/src/assets/svgIcons/variants.svg

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

package/src/assets/svgIcons/vdv.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="6" viewBox="0 0 16 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66579 6.00002L4.85779 0.400024H5.84979L3.58579 6.00002H2.66579ZM2.56979 6.00002L0.305786 0.400024H1.28979L3.48179 6.00002H2.56979Z" fill="#263238"/>
+<path d="M5.94529 6.00002V0.400024H7.70529C8.25462 0.400024 8.73995 0.520024 9.16129 0.760025C9.58795 0.994691 9.92129 1.32269 10.1613 1.74402C10.4066 2.16536 10.5293 2.65069 10.5293 3.20002C10.5293 3.74402 10.4066 4.22669 10.1613 4.64802C9.92129 5.06936 9.58795 5.40002 9.16129 5.64002C8.73995 5.88002 8.25462 6.00002 7.70529 6.00002H5.94529ZM6.87329 5.13602H7.70529C7.96662 5.13602 8.21195 5.08803 8.44129 4.99202C8.67062 4.89069 8.87062 4.75203 9.04129 4.57603C9.21195 4.40002 9.34529 4.19469 9.44129 3.96002C9.53729 3.72536 9.58529 3.47202 9.58529 3.20002C9.58529 2.92802 9.53729 2.67469 9.44129 2.44002C9.34529 2.20536 9.21195 2.00002 9.04129 1.82402C8.87062 1.64802 8.67062 1.51202 8.44129 1.41602C8.21195 1.31469 7.96662 1.26402 7.70529 1.26402H6.87329V5.13602Z" fill="#263238"/>
+<path d="M12.5108 6.00002L14.7028 0.400024H15.6948L13.4308 6.00002H12.5108ZM12.4148 6.00002L10.1508 0.400024H11.1348L13.3268 6.00002H12.4148Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/virtual_storage.svg

@@ -1,4 +1,3 @@
-<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 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>

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

@@ -2,19 +2,30 @@
   <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 :width="height">
+      <IconContainer
+        :app-theme="appTheme"
+        :button-size="buttonSize"
+        :type="type"
+        :variant="variant"
+      >
         <Icon
-          :color="fontColor ? fontColor : theme.colors.white"
+          :color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
           :name="iconName"
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
+      <ButtonContainer :button-size="buttonSize">
         {{ text }}
       </ButtonContainer>
     </ButtonWrapper>
@@ -31,7 +42,6 @@
   //   iconName="external_icon"
   //   fontColor="white"
   //   fontSize="12px"
-  //   height="24px"
   // />
 
   import Icon from '../../icon'
@@ -41,67 +51,107 @@
   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.colors.disabled
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .disabled.backgroundColor
         : props.customColor
-        ? 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};
+        ? 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'
+    }};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
     overflow: hidden;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
+    min-width: ${(props) => props.minWidth || 'initial'};
 
     &:hover {
-      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+      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};
     }
 
     &:active {
-      opacity: 1;
+      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};
     }
   `
 
   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: 5px 10px;
+    padding: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
     white-space: nowrap;
   `
 
   const IconContainerAttrs = {
-    width: String,
+    buttonSize: String,
+    appTheme: 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'};
-    padding: 5px;
+    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'
+    }};
   `
 
   export default {
@@ -114,6 +164,26 @@
       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,
@@ -137,7 +207,7 @@
         required: true,
         type: String,
       },
-      fontColor: {
+      iconColor: {
         required: false,
         default: null,
         type: String,
@@ -157,16 +227,20 @@
         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,18 +2,19 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
-      :custom-color="customColor"
+      :app-theme="appTheme"
+      :button-size="buttonSize"
       :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" :color="iconColor" size="14px" />
+        <Icon v-if="icon" :name="icon" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -42,34 +43,39 @@
     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: 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.appTheme][props.type][props.variant]
+            .disabled.textColor
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .default.textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? 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};
+        ? 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'
+    }};
     border-radius: 4px;
     text-align: center;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -79,11 +85,21 @@
     height: ${(props) => props.height};
 
     &:hover {
-      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+      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};
     }
 
     &:active {
-      opacity: 1;
+      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};
     }
   `
 
@@ -109,7 +125,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: {
@@ -131,16 +152,6 @@
         required: true,
         type: String,
       },
-      customColor: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      fontColor: {
-        required: false,
-        default: '',
-        type: String,
-      },
       noWrap: {
         required: false,
         default: false,
@@ -169,6 +180,33 @@
         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,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;
   `