feat(ui): introduce new logo

ui/public/loader.css

@@ -14,7 +14,7 @@
 }
 
 html.dark #loader-wrapper {
-  background-color: #1b1e2a;
+  background-color: #21242E;
 }
 
 #loader {
@@ -27,7 +27,7 @@ html.dark #loader-wrapper {
   margin: -75px 0 0 -75px;
   border-radius: 50%;
   border: 3px solid transparent;
-  border-top-color: #192A4E;
+  border-top-color: #E9C1FF;
   -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
 }
@@ -41,7 +41,7 @@ html.dark #loader-wrapper {
   bottom: 5px;
   border-radius: 50%;
   border: 3px solid transparent;
-  border-top-color: #4F83A5;
+  border-top-color: #CD88FF;
   -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
 }
@@ -55,7 +55,7 @@ html.dark #loader-wrapper {
   bottom: 15px;
   border-radius: 50%;
   border: 3px solid transparent;
-  border-top-color: #9EBFD5;
+  border-top-color: #A950FF;
   -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
   animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
 }

ui/src/assets/icon.svg

@@ -1,6 +1,10 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="68" height="132" viewBox="0 0 68 132" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M67.4138 128.236V100.118C67.4138 99.8246 67.2846 99.5456 67.0605 99.3556L0 42.5V71.8103L65.7576 128.991C66.4048 129.554 67.4138 129.094 67.4138 128.236Z" fill="#6DCACD"/>
-    <path d="M23.1322 21.6865L1.68394 1.57869C1.04528 0.979945 0 1.43279 0 2.30823V109.481C0 109.757 0.114407 110.021 0.316058 110.21L21.7643 130.318C22.403 130.917 23.4483 130.464 23.4483 129.588V22.416C23.4483 22.1396 23.3339 21.8755 23.1322 21.6865Z" fill="#4F83A5"/>
-    <path d="M36.2484 56.6806C34.9938 57.653 33.1469 56.7779 33.1469 55.2109V30.2691C33.1469 29.6963 33.4144 29.1549 33.8731 28.7995L64.8986 4.80463C66.1532 3.83217 68 4.70729 68 6.27427V31.2161C68 31.7889 67.7326 32.3303 67.2739 32.6857L36.2484 56.6806Z" fill="#B8EBD9"/>
+<svg width="264" height="264" viewBox="0 0 264 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 29.513C0 13.2134 13.2134 0 29.513 0H234.487C250.787 0 264 13.2134 264 29.513V234.487C264 250.787 250.787 264 234.487 264H29.513C13.2134 264 0 250.787 0 234.487V29.513Z" fill="#2C0059"/>
+<path d="M125.517 110.8C129.097 107.219 134.902 107.219 138.482 110.8L153.199 125.517C156.78 129.097 156.78 134.902 153.199 138.482L138.482 153.2C134.902 156.78 129.097 156.78 125.517 153.2L110.799 138.482C107.219 134.902 107.219 129.097 110.799 125.517L125.517 110.8Z" fill="#A950FF"/>
+<path d="M193.302 110.682C196.818 107.166 202.519 107.166 206.035 110.682L220.985 125.632C224.501 129.148 224.501 134.849 220.985 138.365L206.035 153.314C202.519 156.831 196.818 156.831 193.302 153.314L178.353 138.365C174.836 134.849 174.836 129.148 178.353 125.632L193.302 110.682Z" fill="#A950FF"/>
+<path d="M125.633 43.0151C129.149 39.4989 134.85 39.4989 138.366 43.0151L153.315 57.9643C156.832 61.4806 156.832 67.1816 153.315 70.6979L138.366 85.6471C134.85 89.1633 129.149 89.1633 125.633 85.6471L110.683 70.6979C107.167 67.1816 107.167 61.4806 110.683 57.9643L125.633 43.0151Z" fill="#E9C1FF"/>
+<path d="M119.368 91.683C122.948 95.2633 122.948 101.068 119.368 104.648L104.651 119.366C101.071 122.946 95.2657 122.946 91.6853 119.366L76.9681 104.648C73.3878 101.068 73.3878 95.2633 76.9681 91.683L91.6854 76.9657C95.2657 73.3854 101.071 73.3854 104.651 76.9657L119.368 91.683Z" fill="#CD88FF"/>
+<path d="M85.6481 125.632C89.1643 129.148 89.1643 134.849 85.6481 138.365L70.6988 153.314C67.1826 156.831 61.4816 156.831 57.9653 153.314L43.0161 138.365C39.4998 134.849 39.4998 129.148 43.0161 125.632L57.9653 110.682C61.4816 107.166 67.1826 107.166 70.6988 110.682L85.6481 125.632Z" fill="#A950FF"/>
+<path d="M187.035 91.683C190.615 95.2633 190.615 101.068 187.035 104.648L172.317 119.366C168.737 122.946 162.932 122.946 159.352 119.366L144.635 104.648C141.054 101.068 141.054 95.2633 144.635 91.683L159.352 76.9657C162.932 73.3854 168.737 73.3854 172.317 76.9657L187.035 91.683Z" fill="#CD88FF"/>
+<path d="M146.483 188.339C154.482 196.338 154.482 209.306 146.483 217.305C138.485 225.303 125.516 225.303 117.517 217.305C109.519 209.306 109.519 196.338 117.517 188.339C125.516 180.34 138.485 180.34 146.483 188.339Z" fill="#F62E76"/>
 </svg>

ui/src/assets/logo-white.svg

@@ -1,14 +1,16 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="642" height="219" viewBox="0 0 642 219" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M111.82 207.536V167.372C111.82 166.164 111.289 165.016 110.368 164.234L0 70.5665V119.233L105.012 210.641C107.673 212.957 111.82 211.065 111.82 207.536Z" fill="#6DCACD"/>
-    <path d="M37.5948 35.2807L6.92189 6.49579C4.29664 4.03212 0 5.89544 0 9.4976V180.717C0 181.855 0.470279 182.941 1.29917 183.719L31.9721 212.504C34.5973 214.968 38.894 213.104 38.894 209.502V38.2826C38.894 37.1452 38.4237 36.0586 37.5948 35.2807Z" fill="#4F83A5"/>
-    <path d="M60.1254 94.1121C58.0443 95.7267 54.981 94.2737 54.981 91.6719V50.2586C54.981 49.3076 55.4246 48.4087 56.1854 47.8185L107.648 7.97762C109.729 6.36297 112.792 7.81601 112.792 10.4178V51.8311C112.792 52.7821 112.349 53.681 111.588 54.2712L60.1254 94.1121Z" fill="#B8EBD9"/>
-    <path d="M176.753 49.3762H193.06V166.94H176.753V49.3762ZM193.221 128.282L228.903 90.5792H248.762L212.919 128.282L252.476 166.94H232.617L193.221 128.282Z" fill="#4F83A5"/>
-    <path d="M267.982 128.906C267.982 122.151 268.975 116.278 270.962 111.285C272.949 106.194 275.582 101.984 278.861 98.6559C282.14 95.3273 285.916 92.8309 290.188 91.1666C294.46 89.5024 298.832 88.6702 303.303 88.6702C313.736 88.6702 321.734 91.9009 327.298 98.3622C332.862 104.726 335.644 114.466 335.644 127.585C335.644 128.172 335.644 128.955 335.644 129.934C335.644 130.816 335.595 131.648 335.495 132.431H282.438C283.034 140.361 285.369 146.381 289.443 150.493C293.517 154.605 299.875 156.661 308.52 156.661C313.388 156.661 317.462 156.269 320.741 155.486C324.119 154.605 326.652 153.773 328.342 152.99L330.279 164.444C328.59 165.325 325.609 166.255 321.337 167.234C317.164 168.213 312.395 168.702 307.029 168.702C300.273 168.702 294.411 167.723 289.443 165.765C284.574 163.709 280.55 160.919 277.371 157.395C274.191 153.871 271.807 149.71 270.217 144.913C268.727 140.018 267.982 134.682 267.982 128.906ZM321.188 121.417C321.287 115.25 319.697 110.208 316.419 106.292C313.239 102.278 308.818 100.271 303.154 100.271C299.975 100.271 297.143 100.908 294.659 102.18C292.275 103.355 290.238 104.921 288.549 106.879C286.86 108.837 285.518 111.089 284.525 113.634C283.63 116.18 283.034 118.774 282.736 121.417H321.188Z" fill="#4F83A5"/>
-    <path d="M387.362 157.101C393.026 157.101 397.199 156.367 399.881 154.899C402.663 153.43 404.054 151.08 404.054 147.85C404.054 144.521 402.713 141.878 400.03 139.92C397.348 137.962 392.926 135.759 386.766 133.312C383.785 132.137 380.904 130.962 378.122 129.788C375.439 128.515 373.104 127.046 371.117 125.382C369.13 123.718 367.54 121.711 366.348 119.361C365.156 117.012 364.56 114.124 364.56 110.697C364.56 103.942 367.093 98.6069 372.16 94.691C377.228 90.6771 384.133 88.6702 392.877 88.6702C395.062 88.6702 397.248 88.8171 399.434 89.1108C401.62 89.3066 403.657 89.6003 405.545 89.9918C407.433 90.2855 409.072 90.6282 410.463 91.0198C411.953 91.4114 413.096 91.754 413.891 92.0477L411.357 103.796C409.867 103.012 407.532 102.229 404.352 101.446C401.173 100.565 397.348 100.124 392.877 100.124C389.002 100.124 385.623 100.908 382.742 102.474C379.861 103.942 378.42 106.292 378.42 109.523C378.42 111.187 378.718 112.655 379.314 113.928C380.01 115.201 381.003 116.375 382.295 117.452C383.686 118.431 385.375 119.361 387.362 120.242C389.349 121.124 391.734 122.054 394.516 123.033C398.192 124.403 401.471 125.774 404.352 127.144C407.234 128.417 409.668 129.934 411.655 131.697C413.742 133.459 415.331 135.613 416.424 138.158C417.517 140.605 418.064 143.64 418.064 147.262C418.064 154.311 415.381 159.647 410.016 163.269C404.75 166.891 397.199 168.702 387.362 168.702C380.507 168.702 375.141 168.115 371.266 166.94C367.391 165.863 364.758 165.031 363.367 164.444L365.901 152.696C367.491 153.283 370.024 154.164 373.502 155.339C376.979 156.514 381.599 157.101 387.362 157.101Z" fill="#4F83A5"/>
-    <path d="M462.582 90.5792H491.943V102.033H462.582V137.277C462.582 141.095 462.881 144.277 463.477 146.822C464.073 149.269 464.967 151.227 466.159 152.696C467.352 154.066 468.842 155.045 470.63 155.633C472.419 156.22 474.505 156.514 476.89 156.514C481.063 156.514 484.392 156.073 486.875 155.192C489.459 154.213 491.247 153.528 492.241 153.136L494.923 164.444C493.532 165.129 491.098 165.961 487.621 166.94C484.143 168.017 480.169 168.555 475.698 168.555C470.432 168.555 466.06 167.919 462.582 166.646C459.204 165.276 456.472 163.269 454.385 160.626C452.299 157.982 450.809 154.752 449.914 150.934C449.119 147.018 448.722 142.514 448.722 137.424V66.9368H462.582V90.5792Z" fill="#4F83A5"/>
-    <path d="M552.708 88.9639C553.9 88.9639 555.241 89.0618 556.732 89.2576C558.321 89.3555 559.861 89.5513 561.352 89.845C562.842 90.0408 564.183 90.2855 565.376 90.5792C566.667 90.775 567.611 90.9708 568.207 91.1666L565.823 103.061C564.73 102.67 562.892 102.229 560.308 101.74C557.824 101.152 554.595 100.859 550.621 100.859C548.038 100.859 545.454 101.152 542.871 101.74C540.387 102.229 538.748 102.572 537.953 102.768V166.94H524.092V93.8099C527.371 92.6351 531.445 91.5582 536.313 90.5792C541.182 89.5024 546.647 88.9639 552.708 88.9639Z" fill="#4F83A5"/>
-    <path d="M613.385 157.101C616.664 157.101 619.545 157.052 622.029 156.954C624.612 156.759 626.748 156.465 628.438 156.073V133.312C627.444 132.822 625.805 132.431 623.519 132.137C621.333 131.746 618.651 131.55 615.471 131.55C613.385 131.55 611.149 131.697 608.765 131.99C606.479 132.284 604.343 132.92 602.356 133.899C600.468 134.78 598.878 136.053 597.587 137.717C596.295 139.284 595.649 141.389 595.649 144.032C595.649 148.927 597.239 152.353 600.419 154.311C603.598 156.171 607.92 157.101 613.385 157.101ZM612.193 88.6702C617.757 88.6702 622.426 89.4045 626.202 90.8729C630.077 92.2435 633.157 94.2504 635.442 96.8937C637.827 99.4391 639.516 102.523 640.51 106.145C641.503 109.669 642 113.585 642 117.893V165.618C640.808 165.814 639.118 166.108 636.933 166.499C634.846 166.793 632.462 167.087 629.779 167.381C627.096 167.674 624.165 167.919 620.986 168.115C617.906 168.409 614.825 168.555 611.745 168.555C607.374 168.555 603.35 168.115 599.673 167.234C595.997 166.353 592.818 164.982 590.135 163.122C587.452 161.164 585.366 158.619 583.875 155.486C582.385 152.353 581.64 148.584 581.64 144.179C581.64 139.969 582.484 136.347 584.174 133.312C585.962 130.277 588.347 127.83 591.327 125.97C594.308 124.109 597.786 122.739 601.76 121.858C605.734 120.977 609.907 120.536 614.279 120.536C615.67 120.536 617.111 120.634 618.601 120.83C620.091 120.928 621.482 121.124 622.774 121.417C624.165 121.613 625.357 121.809 626.351 122.005C627.345 122.2 628.04 122.347 628.438 122.445V118.627C628.438 116.375 628.189 114.173 627.692 112.019C627.196 109.767 626.301 107.809 625.01 106.145C623.718 104.383 621.93 103.012 619.644 102.033C617.458 100.956 614.577 100.418 611 100.418C606.43 100.418 602.406 100.761 598.928 101.446C595.55 102.033 593.016 102.67 591.327 103.355L589.688 92.0477C591.476 91.2645 594.457 90.5303 598.63 89.845C602.803 89.0618 607.324 88.6702 612.193 88.6702Z" fill="#4F83A5"/>
+<svg width="1044" height="241" viewBox="0 0 1044 241" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M323.487 27.6415H283.212V210.944H323.487V174.435L338.55 158.736L372.269 210.944H418.091L365.891 130.359L416.133 78.0382H366.402L323.487 123.994V27.6415Z" fill="white"/>
+<path d="M740.62 37.3422H700.819V78.0382H677.75V110.86H700.819V180.81C700.819 190.591 703.306 198.202 708.544 203.354C713.777 208.502 721.499 210.944 731.426 210.944H766.292V178.831H740.62V110.86H766.292V78.0382H740.62V37.3422Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M479.561 75.6721C459.903 75.6721 443.994 81.7431 431.993 93.9872L431.983 93.9981C420.133 106.335 414.291 123.23 414.291 144.491C414.291 165.516 420.054 182.324 431.736 194.736C443.436 207.168 459.603 213.31 480.034 213.31C496.679 213.31 510.721 209.385 522.066 201.444L522.075 201.438L522.084 201.432C533.422 193.251 540.502 182.439 543.262 169.046L543.634 167.238H504.142L503.802 168.274C502.429 172.466 499.649 175.858 495.35 178.454C491.134 180.968 485.973 182.262 479.797 182.262C472.284 182.262 466.361 180.184 461.881 176.147C457.413 172.043 455.157 166.703 455.157 159.988V154.513H541.233L541.389 153.184C542.027 147.766 542.346 142.463 542.346 137.274C542.346 118.267 536.601 103.207 524.964 92.297C513.588 81.1712 498.398 75.6721 479.561 75.6721ZM461.617 112.386C465.934 108.654 471.707 106.719 479.088 106.719C486.226 106.719 491.844 108.612 496.087 112.269L496.097 112.278L496.108 112.287C500.4 115.852 502.544 120.507 502.544 126.391V127.252H455.157V126.864C455.157 120.808 457.312 116.034 461.605 112.396L461.617 112.386Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M611.822 75.6721C594.969 75.6721 581.44 79.4259 571.396 87.1017L571.391 87.1053C561.367 94.8285 556.372 105.539 556.372 119.056C556.372 129.61 559.676 138.259 566.374 144.853C573.034 151.41 582.911 155.799 595.818 158.156L595.831 158.159L618.933 161.95L618.953 161.953C622.83 162.485 625.72 163.531 627.739 164.993L627.749 165L627.758 165.007C629.605 166.3 630.875 168.723 631.257 172.716C631.239 176.299 629.816 179.004 626.938 180.991L626.924 181.001C624.047 183.035 619.751 184.155 613.834 184.155C607.335 184.155 602.459 182.74 599.025 180.096C595.742 177.509 594.044 173.8 594.044 168.743V167.238H554.361V168.743C554.361 182.296 559.7 193.192 570.333 201.29L570.338 201.293C581.014 209.362 595.489 213.31 613.597 213.31C631.307 213.31 645.466 209.481 655.905 201.652C666.483 193.778 671.769 182.829 671.769 168.979C671.769 158.072 668.647 149.253 662.262 142.701C655.903 136.177 646.474 132.072 634.179 130.228L634.168 130.226L611.811 126.559L611.793 126.556C609.018 126.171 607.119 125.9 606.089 125.742C605.269 125.531 604.196 125.14 602.851 124.542C601.591 123.982 600.339 123.166 599.097 122.07C597.327 120.495 596.41 118.4 596.41 115.625C596.41 112.111 597.679 109.549 600.169 107.731C602.736 105.859 606.479 104.827 611.586 104.827C617.45 104.827 621.609 106.03 624.309 108.193C626.953 110.312 628.426 113.539 628.537 118.146L628.572 119.614H668.149L668.1 118.062C667.692 105.085 662.439 94.7181 652.364 87.0993C642.32 79.4243 628.751 75.6721 611.822 75.6721ZM655.003 200.448L655.905 201.652L655.901 201.655L655.003 200.448ZM598.099 181.283L599.018 180.091L599.025 180.096L599.03 180.1L598.099 181.283ZM632.762 172.647L631.263 172.785L631.257 172.716L631.257 172.647H632.762Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M930.292 75.6721C912.724 75.6721 898.493 79.6253 887.748 87.6839C877.024 95.7066 871.165 107.173 870.113 121.906L869.998 123.518H909.329L909.433 122.125C909.803 117.171 911.589 113.524 914.682 110.993L914.685 110.991C917.876 108.367 922.461 106.956 928.635 106.956C934.847 106.956 939.227 108.443 942.057 111.152C944.875 113.849 946.414 118.004 946.414 123.906V129.973H913.611C898.773 129.973 886.836 133.665 877.973 141.216C869.151 148.718 864.785 159.021 864.785 171.937C864.785 184.417 868.648 194.534 876.482 202.12L876.494 202.131C884.403 209.629 894.938 213.31 907.932 213.31C917.841 213.31 926.611 211.294 934.198 207.215L934.209 207.209C941.114 203.423 946.016 198.432 948.797 192.219L949.154 194.419L949.158 194.439C950.153 200.078 952.518 204.386 956.398 207.12L956.407 207.126L956.417 207.133C960.264 209.756 966.077 210.944 973.59 210.944H1002.3V182.262H986.334V124.616C986.334 111.078 981.821 99.5067 972.796 89.9901C963.873 80.3291 949.575 75.6721 930.292 75.6721ZM905.178 166.258C905.178 162.46 906.452 159.821 908.85 158.068C911.336 156.251 915.248 155.223 920.827 155.223H946.414V158.332C946.414 165.888 944.123 171.738 939.66 176.057C935.194 180.3 929.056 182.499 921.064 182.499C915.409 182.499 911.442 181.443 908.918 179.571C906.478 177.762 905.178 175.033 905.178 171.109V166.258Z" fill="white"/>
+<path d="M818.496 78.0382C804.834 78.0382 795.324 81.6282 790.812 89.4374C788.858 92.7759 787.494 96.0695 786.744 99.316L786.741 99.3301L786.738 99.3444C786.079 102.477 785.76 106.295 785.76 110.775V210.944H825.561V110.86H864.128V78.0382H818.496Z" fill="white"/>
+<path d="M1028.68 211.054C1024.39 211.054 1020.83 209.693 1018.01 206.971C1015.3 204.131 1013.95 200.639 1013.95 196.497C1013.95 192.355 1015.3 188.923 1018.01 186.201C1020.83 183.361 1024.39 181.941 1028.68 181.941C1032.85 181.941 1036.29 183.361 1039 186.201C1041.71 188.923 1043.06 192.355 1043.06 196.497C1043.06 200.639 1041.71 204.131 1039 206.971C1036.29 209.693 1032.85 211.054 1028.68 211.054Z" fill="#F62E76"/>
+<path d="M115.37 101.148C118.635 97.8839 123.927 97.8839 127.191 101.148L140.609 114.566C143.873 117.83 143.873 123.122 140.609 126.386L127.191 139.804C123.927 143.068 118.635 143.068 115.37 139.804L101.953 126.387C98.6885 123.122 98.6885 117.83 101.953 114.566L115.37 101.148Z" fill="#A950FF"/>
+<path d="M177.17 101.041C180.376 97.8354 185.574 97.8354 188.78 101.041L202.409 114.67C205.615 117.876 205.615 123.074 202.409 126.28L188.78 139.909C185.574 143.115 180.376 143.115 177.17 139.909L163.541 126.28C160.335 123.074 160.335 117.876 163.541 114.67C166.747 111.465 177.17 101.041 177.17 101.041Z" fill="#A950FF"/>
+<path d="M115.476 39.3488C118.682 36.143 123.88 36.143 127.085 39.3488L140.715 52.978C143.92 56.1838 143.92 61.3814 140.715 64.5872L127.085 78.2164C123.88 81.4222 118.682 81.4222 115.476 78.2164L101.847 64.5872C98.6412 61.3814 98.6412 56.1838 101.847 52.978L115.476 39.3488Z" fill="#E9C1FF"/>
+<path d="M109.765 83.7194C113.029 86.9835 113.029 92.2758 109.765 95.54L96.347 108.958C93.0829 112.222 87.7906 112.222 84.5264 108.958L71.1087 95.54C67.8445 92.2758 67.8445 86.9836 71.1087 83.7194L84.5264 70.3016C87.7906 67.0374 93.0829 67.0374 96.347 70.3016L109.765 83.7194Z" fill="#CD88FF"/>
+<path d="M79.0222 114.67C82.228 117.876 82.228 123.074 79.0222 126.28L65.393 139.909C62.1872 143.115 56.9896 143.115 53.7838 139.909L40.1546 126.28C36.9488 123.074 36.9488 117.876 40.1546 114.67L53.7838 101.041C56.9896 97.8354 62.1872 97.8353 65.393 101.041L79.0222 114.67Z" fill="#A950FF"/>
+<path d="M171.457 83.7194C174.721 86.9835 174.721 92.2758 171.457 95.54L158.039 108.958C154.775 112.222 149.482 112.222 146.218 108.958L132.8 95.54C129.536 92.2758 129.536 86.9836 132.8 83.7194L146.218 70.3016C149.482 67.0374 154.775 67.0374 158.039 70.3016L171.457 83.7194Z" fill="#CD88FF"/>
+<path d="M134.486 171.841C141.778 179.133 141.778 190.956 134.486 198.249C127.193 205.541 115.37 205.541 108.078 198.249C100.785 190.956 100.785 179.133 108.078 171.841C115.37 164.548 127.193 164.548 134.486 171.841Z" fill="#F62E76"/>
 </svg>
-
-

ui/src/assets/logo.svg

@@ -1,12 +1,17 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="642" height="219" viewBox="0 0 642 219" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M111.82 207.536V167.372C111.82 166.164 111.289 165.016 110.368 164.234L0 70.5665V119.233L105.012 210.641C107.673 212.957 111.82 211.065 111.82 207.536Z" fill="#6DCACD"/>
-    <path d="M37.5948 35.2807L6.92189 6.49579C4.29664 4.03212 0 5.89544 0 9.4976V180.717C0 181.855 0.470279 182.941 1.29917 183.719L31.9721 212.504C34.5973 214.968 38.894 213.104 38.894 209.502V38.2826C38.894 37.1452 38.4237 36.0586 37.5948 35.2807Z" fill="#4F83A5"/>
-    <path d="M60.1254 94.1121C58.0443 95.7267 54.981 94.2737 54.981 91.6719V50.2586C54.981 49.3076 55.4246 48.4087 56.1854 47.8185L107.648 7.97762C109.729 6.36297 112.792 7.81601 112.792 10.4178V51.8311C112.792 52.7821 112.349 53.681 111.588 54.2712L60.1254 94.1121Z" fill="#B8EBD9"/>
-    <path d="M176.753 49.3762H193.06V166.94H176.753V49.3762ZM193.221 128.282L228.903 90.5792H248.762L212.919 128.282L252.476 166.94H232.617L193.221 128.282Z" fill="#4F83A5"/>
-    <path d="M267.982 128.906C267.982 122.151 268.975 116.278 270.962 111.285C272.949 106.194 275.582 101.984 278.861 98.6559C282.14 95.3273 285.916 92.8309 290.188 91.1666C294.46 89.5024 298.832 88.6702 303.303 88.6702C313.736 88.6702 321.734 91.9009 327.298 98.3622C332.862 104.726 335.644 114.466 335.644 127.585C335.644 128.172 335.644 128.955 335.644 129.934C335.644 130.816 335.595 131.648 335.495 132.431H282.438C283.034 140.361 285.369 146.381 289.443 150.493C293.517 154.605 299.875 156.661 308.52 156.661C313.388 156.661 317.462 156.269 320.741 155.486C324.119 154.605 326.652 153.773 328.342 152.99L330.279 164.444C328.59 165.325 325.609 166.255 321.337 167.234C317.164 168.213 312.395 168.702 307.029 168.702C300.273 168.702 294.411 167.723 289.443 165.765C284.574 163.709 280.55 160.919 277.371 157.395C274.191 153.871 271.807 149.71 270.217 144.913C268.727 140.018 267.982 134.682 267.982 128.906ZM321.188 121.417C321.287 115.25 319.697 110.208 316.419 106.292C313.239 102.278 308.818 100.271 303.154 100.271C299.975 100.271 297.143 100.908 294.659 102.18C292.275 103.355 290.238 104.921 288.549 106.879C286.86 108.837 285.518 111.089 284.525 113.634C283.63 116.18 283.034 118.774 282.736 121.417H321.188Z" fill="#4F83A5"/>
-    <path d="M387.362 157.101C393.026 157.101 397.199 156.367 399.881 154.899C402.663 153.43 404.054 151.08 404.054 147.85C404.054 144.521 402.713 141.878 400.03 139.92C397.348 137.962 392.926 135.759 386.766 133.312C383.785 132.137 380.904 130.962 378.122 129.788C375.439 128.515 373.104 127.046 371.117 125.382C369.13 123.718 367.54 121.711 366.348 119.361C365.156 117.012 364.56 114.124 364.56 110.697C364.56 103.942 367.093 98.6069 372.16 94.691C377.228 90.6771 384.133 88.6702 392.877 88.6702C395.062 88.6702 397.248 88.8171 399.434 89.1108C401.62 89.3066 403.657 89.6003 405.545 89.9918C407.433 90.2855 409.072 90.6282 410.463 91.0198C411.953 91.4114 413.096 91.754 413.891 92.0477L411.357 103.796C409.867 103.012 407.532 102.229 404.352 101.446C401.173 100.565 397.348 100.124 392.877 100.124C389.002 100.124 385.623 100.908 382.742 102.474C379.861 103.942 378.42 106.292 378.42 109.523C378.42 111.187 378.718 112.655 379.314 113.928C380.01 115.201 381.003 116.375 382.295 117.452C383.686 118.431 385.375 119.361 387.362 120.242C389.349 121.124 391.734 122.054 394.516 123.033C398.192 124.403 401.471 125.774 404.352 127.144C407.234 128.417 409.668 129.934 411.655 131.697C413.742 133.459 415.331 135.613 416.424 138.158C417.517 140.605 418.064 143.64 418.064 147.262C418.064 154.311 415.381 159.647 410.016 163.269C404.75 166.891 397.199 168.702 387.362 168.702C380.507 168.702 375.141 168.115 371.266 166.94C367.391 165.863 364.758 165.031 363.367 164.444L365.901 152.696C367.491 153.283 370.024 154.164 373.502 155.339C376.979 156.514 381.599 157.101 387.362 157.101Z" fill="#4F83A5"/>
-    <path d="M462.582 90.5792H491.943V102.033H462.582V137.277C462.582 141.095 462.881 144.277 463.477 146.822C464.073 149.269 464.967 151.227 466.159 152.696C467.352 154.066 468.842 155.045 470.63 155.633C472.419 156.22 474.505 156.514 476.89 156.514C481.063 156.514 484.392 156.073 486.875 155.192C489.459 154.213 491.247 153.528 492.241 153.136L494.923 164.444C493.532 165.129 491.098 165.961 487.621 166.94C484.143 168.017 480.169 168.555 475.698 168.555C470.432 168.555 466.06 167.919 462.582 166.646C459.204 165.276 456.472 163.269 454.385 160.626C452.299 157.982 450.809 154.752 449.914 150.934C449.119 147.018 448.722 142.514 448.722 137.424V66.9368H462.582V90.5792Z" fill="#4F83A5"/>
-    <path d="M552.708 88.9639C553.9 88.9639 555.241 89.0618 556.732 89.2576C558.321 89.3555 559.861 89.5513 561.352 89.845C562.842 90.0408 564.183 90.2855 565.376 90.5792C566.667 90.775 567.611 90.9708 568.207 91.1666L565.823 103.061C564.73 102.67 562.892 102.229 560.308 101.74C557.824 101.152 554.595 100.859 550.621 100.859C548.038 100.859 545.454 101.152 542.871 101.74C540.387 102.229 538.748 102.572 537.953 102.768V166.94H524.092V93.8099C527.371 92.6351 531.445 91.5582 536.313 90.5792C541.182 89.5024 546.647 88.9639 552.708 88.9639Z" fill="#4F83A5"/>
-    <path d="M613.385 157.101C616.664 157.101 619.545 157.052 622.029 156.954C624.612 156.759 626.748 156.465 628.438 156.073V133.312C627.444 132.822 625.805 132.431 623.519 132.137C621.333 131.746 618.651 131.55 615.471 131.55C613.385 131.55 611.149 131.697 608.765 131.99C606.479 132.284 604.343 132.92 602.356 133.899C600.468 134.78 598.878 136.053 597.587 137.717C596.295 139.284 595.649 141.389 595.649 144.032C595.649 148.927 597.239 152.353 600.419 154.311C603.598 156.171 607.92 157.101 613.385 157.101ZM612.193 88.6702C617.757 88.6702 622.426 89.4045 626.202 90.8729C630.077 92.2435 633.157 94.2504 635.442 96.8937C637.827 99.4391 639.516 102.523 640.51 106.145C641.503 109.669 642 113.585 642 117.893V165.618C640.808 165.814 639.118 166.108 636.933 166.499C634.846 166.793 632.462 167.087 629.779 167.381C627.096 167.674 624.165 167.919 620.986 168.115C617.906 168.409 614.825 168.555 611.745 168.555C607.374 168.555 603.35 168.115 599.673 167.234C595.997 166.353 592.818 164.982 590.135 163.122C587.452 161.164 585.366 158.619 583.875 155.486C582.385 152.353 581.64 148.584 581.64 144.179C581.64 139.969 582.484 136.347 584.174 133.312C585.962 130.277 588.347 127.83 591.327 125.97C594.308 124.109 597.786 122.739 601.76 121.858C605.734 120.977 609.907 120.536 614.279 120.536C615.67 120.536 617.111 120.634 618.601 120.83C620.091 120.928 621.482 121.124 622.774 121.417C624.165 121.613 625.357 121.809 626.351 122.005C627.345 122.2 628.04 122.347 628.438 122.445V118.627C628.438 116.375 628.189 114.173 627.692 112.019C627.196 109.767 626.301 107.809 625.01 106.145C623.718 104.383 621.93 103.012 619.644 102.033C617.458 100.956 614.577 100.418 611 100.418C606.43 100.418 602.406 100.761 598.928 101.446C595.55 102.033 593.016 102.67 591.327 103.355L589.688 92.0477C591.476 91.2645 594.457 90.5303 598.63 89.845C602.803 89.0618 607.324 88.6702 612.193 88.6702Z" fill="#4F83A5"/>
+<svg width="1044" height="241" viewBox="0 0 1044 241" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M323.487 27.6414H283.212V210.944H323.487V174.435L338.55 158.736L372.269 210.944H418.091L365.891 130.359L416.133 78.0381H366.402L323.487 123.994V27.6414Z" fill="#26282D"/>
+<path d="M740.62 37.3422H700.819V78.0381H677.75V110.86H700.819V180.81C700.819 190.591 703.306 198.202 708.544 203.354C713.777 208.502 721.499 210.944 731.426 210.944H766.292V178.831H740.62V110.86H766.292V78.0381H740.62V37.3422Z" fill="#26282D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M479.561 75.6721C459.903 75.6721 443.994 81.7431 431.993 93.9872L431.983 93.9981C420.133 106.335 414.291 123.23 414.291 144.491C414.291 165.515 420.054 182.324 431.736 194.736C443.436 207.168 459.603 213.31 480.034 213.31C496.679 213.31 510.721 209.385 522.066 201.444L522.075 201.438L522.084 201.432C533.422 193.251 540.502 182.439 543.262 169.046L543.634 167.238H504.142L503.802 168.274C502.429 172.466 499.649 175.858 495.35 178.454C491.134 180.968 485.973 182.262 479.797 182.262C472.284 182.262 466.361 180.184 461.881 176.147C457.413 172.043 455.157 166.703 455.157 159.988V154.513H541.233L541.389 153.184C542.027 147.766 542.346 142.463 542.346 137.274C542.346 118.267 536.601 103.207 524.964 92.2969C513.588 81.1712 498.398 75.6721 479.561 75.6721ZM461.617 112.386C465.934 108.654 471.707 106.719 479.088 106.719C486.226 106.719 491.844 108.612 496.087 112.269L496.097 112.278L496.108 112.287C500.4 115.852 502.544 120.506 502.544 126.391V127.252H455.157V126.864C455.157 120.808 457.312 116.034 461.605 112.396L461.617 112.386Z" fill="#26282D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M611.822 75.6721C594.969 75.6721 581.44 79.4259 571.396 87.1017L571.391 87.1053C561.367 94.8284 556.372 105.539 556.372 119.056C556.372 129.61 559.676 138.259 566.374 144.853C573.034 151.41 582.911 155.799 595.818 158.156L595.831 158.159L618.933 161.95L618.953 161.952C622.83 162.485 625.72 163.531 627.739 164.993L627.748 165L627.758 165.007C629.605 166.3 630.875 168.723 631.257 172.716C631.239 176.299 629.816 179.004 626.938 180.991L626.924 181.001C624.047 183.035 619.751 184.155 613.834 184.155C607.335 184.155 602.459 182.74 599.025 180.096C595.742 177.509 594.044 173.8 594.044 168.743V167.238H554.361V168.743C554.361 182.296 559.7 193.192 570.333 201.29L570.338 201.293C581.014 209.362 595.489 213.31 613.597 213.31C631.307 213.31 645.466 209.481 655.905 201.652C666.483 193.778 671.769 182.829 671.769 168.979C671.769 158.072 668.647 149.253 662.262 142.701C655.903 136.177 646.474 132.071 634.179 130.228L634.168 130.226L611.811 126.559L611.793 126.556C609.018 126.171 607.119 125.9 606.089 125.742C605.269 125.531 604.196 125.14 602.851 124.542C601.591 123.982 600.339 123.166 599.097 122.07C597.327 120.495 596.41 118.4 596.41 115.625C596.41 112.111 597.679 109.549 600.169 107.731C602.736 105.859 606.479 104.827 611.586 104.827C617.45 104.827 621.609 106.03 624.309 108.193C626.953 110.312 628.426 113.539 628.537 118.146L628.572 119.614H668.149L668.1 118.062C667.692 105.085 662.439 94.7181 652.364 87.0993C642.32 79.4243 628.751 75.6721 611.822 75.6721ZM655.003 200.448L655.905 201.652L655.901 201.655L655.003 200.448ZM598.099 181.283L599.018 180.091L599.025 180.096L599.03 180.1L598.099 181.283ZM632.762 172.647L631.263 172.785L631.257 172.716L631.257 172.647H632.762Z" fill="#26282D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M930.292 75.6721C912.724 75.6721 898.493 79.6252 887.748 87.6839C877.024 95.7065 871.165 107.173 870.113 121.906L869.998 123.518H909.329L909.433 122.125C909.803 117.171 911.589 113.524 914.682 110.993L914.685 110.991C917.876 108.367 922.461 106.956 928.635 106.956C934.847 106.956 939.227 108.443 942.057 111.152C944.875 113.849 946.414 118.004 946.414 123.906V129.973H913.611C898.773 129.973 886.836 133.665 877.973 141.216C869.152 148.718 864.785 159.021 864.785 171.937C864.785 184.417 868.648 194.534 876.482 202.12L876.494 202.131C884.403 209.628 894.938 213.31 907.932 213.31C917.841 213.31 926.611 211.294 934.198 207.215L934.209 207.209C941.114 203.422 946.016 198.432 948.797 192.219L949.154 194.419L949.158 194.439C950.153 200.078 952.518 204.386 956.398 207.12L956.407 207.126L956.417 207.133C960.264 209.756 966.077 210.944 973.59 210.944H1002.3V182.262H986.334V124.616C986.334 111.078 981.821 99.5067 972.796 89.9901C963.873 80.3291 949.575 75.6721 930.292 75.6721ZM905.178 166.258C905.178 162.46 906.452 159.821 908.85 158.068C911.336 156.251 915.248 155.223 920.827 155.223H946.414V158.332C946.414 165.888 944.123 171.738 939.66 176.057C935.194 180.3 929.056 182.499 921.064 182.499C915.409 182.499 911.442 181.443 908.918 179.571C906.478 177.762 905.178 175.033 905.178 171.109V166.258Z" fill="#26282D"/>
+<path d="M818.496 78.0381C804.834 78.0381 795.324 81.6282 790.812 89.4373C788.858 92.7759 787.494 96.0695 786.744 99.316L786.741 99.3301L786.738 99.3443C786.079 102.477 785.76 106.295 785.76 110.775V210.944H825.561V110.86H864.128V78.0381H818.496Z" fill="#26282D"/>
+<path d="M1028.68 211.054C1024.39 211.054 1020.83 209.693 1018.01 206.971C1015.3 204.131 1013.95 200.639 1013.95 196.497C1013.95 192.355 1015.3 188.923 1018.01 186.201C1020.83 183.361 1024.39 181.941 1028.68 181.941C1032.85 181.941 1036.29 183.361 1039 186.201C1041.71 188.923 1043.06 192.355 1043.06 196.497C1043.06 200.639 1041.71 204.131 1039 206.971C1036.29 209.693 1032.85 211.054 1028.68 211.054Z" fill="#F62E76"/>
+<path d="M0.937012 27.0463C0.937012 12.1815 12.9873 0.131226 27.8521 0.131226H214.783C229.647 0.131226 241.698 12.1815 241.698 27.0463V213.977C241.698 228.842 229.647 240.892 214.783 240.892H27.852C12.9873 240.892 0.937012 228.842 0.937012 213.977V27.0463Z" fill="#2C0059"/>
+<path d="M115.404 101.178C118.669 97.9129 123.963 97.9129 127.228 101.178L140.65 114.6C143.915 117.865 143.915 123.159 140.65 126.424L127.228 139.846C123.963 143.111 118.669 143.111 115.404 139.846L101.982 126.424C98.7173 123.159 98.7173 117.865 101.982 114.6L115.404 101.178Z" fill="#A950FF"/>
+<path d="M177.223 101.071C180.429 97.8643 185.628 97.8643 188.835 101.071L202.468 114.704C205.675 117.911 205.675 123.11 202.468 126.317L188.835 139.95C185.628 143.157 180.429 143.157 177.223 139.95L163.589 126.317C160.383 123.11 160.383 117.911 163.589 114.704L177.223 101.071Z" fill="#A950FF"/>
+<path d="M115.51 39.3604C118.717 36.1536 123.916 36.1536 127.123 39.3604L140.756 52.9936C143.963 56.2004 143.963 61.3995 140.756 64.6063L127.123 78.2395C123.916 81.4463 118.717 81.4463 115.51 78.2395L101.877 64.6063C98.67 61.3995 98.67 56.2004 101.877 52.9936L115.51 39.3604Z" fill="#E9C1FF"/>
+<path d="M109.797 83.7441C113.062 87.0093 113.062 92.3031 109.797 95.5683L96.3752 108.99C93.11 112.255 87.8162 112.255 84.551 108.99L71.1293 95.5683C67.8642 92.3031 67.8642 87.0093 71.1293 83.7441L84.551 70.3224C87.8162 67.0572 93.11 67.0572 96.3752 70.3224L109.797 83.7441Z" fill="#CD88FF"/>
+<path d="M79.0452 114.704C82.2519 117.911 82.2519 123.11 79.0452 126.317L65.4119 139.95C62.2052 143.157 57.006 143.157 53.7993 139.95L40.166 126.317C36.9593 123.11 36.9593 117.911 40.166 114.704L53.7993 101.071C57.006 97.8643 62.2052 97.8643 65.4119 101.071L79.0452 114.704Z" fill="#A950FF"/>
+<path d="M171.507 83.7441C174.772 87.0093 174.772 92.3031 171.507 95.5683L158.085 108.99C154.82 112.255 149.526 112.255 146.261 108.99L132.839 95.5683C129.574 92.3031 129.574 87.0093 132.839 83.7441L146.261 70.3224C149.526 67.0572 154.82 67.0572 158.085 70.3224L171.507 83.7441Z" fill="#CD88FF"/>
+<path d="M134.525 171.892C141.82 179.186 141.82 191.013 134.525 198.308C127.231 205.602 115.404 205.602 108.109 198.308C100.815 191.013 100.815 179.186 108.109 171.892C115.404 164.597 127.231 164.597 134.525 171.892Z" fill="#F62E76"/>
 </svg>

ui/src/assets/onboarding/onboarding-execute-dark.svg

@@ -17,7 +17,7 @@
 <circle cx="46" cy="39.5" r="2" fill="#5DCA75"/>
 <path d="M119.652 29.5L115.625 34.4696L118.5 37.0509L112.905 43.4077" stroke="#A626E2" stroke-width="1.27819" stroke-linecap="round"/>
 <path d="M124.652 29.5L120.625 34.4696L123.5 37.0509L117.905 43.4077" stroke="#A626E2" stroke-width="1.27819" stroke-linecap="round"/>
-<rect x="52.5" y="78" width="41" height="18" rx="1.5" fill="#192A4E" stroke="#5F72B1"/>
+<rect x="52.5" y="78" width="41" height="18" rx="1.5" fill="#8405FF" stroke="#8405FF"/>
 <path d="M72.2466 94.25H71.4966L72.2466 89H69.6216C68.9616 89 69.3741 88.4375 69.3891 88.415C70.3566 86.705 71.8116 84.155 73.7541 80.75H74.5041L73.7541 86H76.3866C76.6866 86 76.8516 86.1425 76.6866 86.495C73.7241 91.6625 72.2466 94.25 72.2466 94.25Z" fill="white"/>
 <mask id="path-21-inside-1_298_2258" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M87.7575 64.9141L84.9852 85.298L103.728 76.8182L98.5488 72.9579L103.33 66.5437L97.7175 62.3603L92.9364 68.7744L87.7575 64.9141Z"/>

ui/src/assets/onboarding/onboarding-execute-light.svg

@@ -18,7 +18,7 @@
 <circle cx="46" cy="39.5" r="2" fill="#5DCA75"/>
 <path d="M119.652 29.5L115.625 34.4696L118.5 37.0509L112.905 43.4077" stroke="#A626E2" stroke-width="1.27819" stroke-linecap="round"/>
 <path d="M124.652 29.5L120.625 34.4696L123.5 37.0509L117.905 43.4077" stroke="#A626E2" stroke-width="1.27819" stroke-linecap="round"/>
-<rect x="52.5" y="74" width="41" height="18" rx="1.5" fill="#192A4E" stroke="#5F72B1"/>
+<rect x="52.5" y="74" width="41" height="18" rx="1.5" fill="#8405FF" stroke="#8405FF"/>
 <path d="M72.2466 90.25H71.4966L72.2466 85H69.6216C68.9616 85 69.3741 84.4375 69.3891 84.415C70.3566 82.705 71.8116 80.155 73.7541 76.75H74.5041L73.7541 82H76.3866C76.6866 82 76.8516 82.1425 76.6866 82.495C73.7241 87.6625 72.2466 90.25 72.2466 90.25Z" fill="white"/>
 <mask id="path-22-inside-1_298_2388" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M87.7575 60.9141L84.9852 81.298L103.728 72.8182L98.5488 68.9579L103.33 62.5437L97.7175 58.3603L92.9364 64.7744L87.7575 60.9141Z"/>

ui/src/components/executions/ExecutionRoot.vue

@@ -6,7 +6,7 @@
         <bottom-line v-if="canDelete || isAllowedTrigger || isAllowedEdit">
             <ul>
                 <li>
-                    <el-button :icon="Delete" type="danger" size="large" v-if="canDelete" @click="deleteExecution">
+                    <el-button :icon="Delete" size="large" type="default" v-if="canDelete" @click="deleteExecution">
                         {{ $t('delete') }}
                     </el-button>
                 </li>

ui/src/components/executions/Executions.vue

@@ -124,7 +124,7 @@
                         <el-button v-if="canUpdate" :icon="StopCircleOutline" size="large" @click="killExecutions()">
                             {{ $t('kill') }}
                         </el-button>
-                        <el-button v-if="canDelete" :icon="Delete" size="large" @click="deleteExecutions()">
+                        <el-button v-if="canDelete" :icon="Delete" size="large" type="default" @click="deleteExecutions()">
                             {{ $t('delete') }}
                         </el-button>
                     </bottom-line-counter>

ui/src/components/executions/VarValue.vue

@@ -3,7 +3,7 @@
         v-if="isFile(value)"
         :icon="Download"
         target="_blank"
-        type="info"
+        type="primary"
         :href="itemUrl(value)"
     >
         {{ $t('download') }}

ui/src/components/flows/FlowEdit.vue

@@ -4,7 +4,7 @@
         <bottom-line v-if="canSave || canDelete || canExecute">
             <ul>
                 <li>
-                    <el-button :icon="icon.Delete" type="danger" size="large" v-if="canDelete" @click="deleteFile">
+                    <el-button :icon="icon.Delete" size="large" v-if="canDelete" @click="deleteFile">
                         {{ $t('delete') }}
                     </el-button>
                 </li>
@@ -22,7 +22,7 @@
                 </li>
 
                 <li>
-                    <el-button class="edit-flow-save-button" :icon="icon.ContentSave" size="large" @click="save" v-if="canSave" type="info">
+                    <el-button class="edit-flow-save-button" :icon="icon.ContentSave" size="large" @click="save" v-if="canSave" type="primary">
                         {{ $t('save') }}
                     </el-button>
                 </li>

ui/src/components/flows/Flows.vue

@@ -144,7 +144,7 @@
                 </li>
                 <li v-if="user && user.hasAnyAction(permission.FLOW, action.CREATE)">
                     <router-link :to="{name: 'flows/create'}">
-                        <el-button :icon="Plus" type="info" size="large">
+                        <el-button :icon="Plus" type="primary" size="large">
                             {{ $t('create') }}
                         </el-button>
                     </router-link>

ui/src/components/flows/TriggerAvatar.vue

@@ -11,7 +11,7 @@
                     :hide-after="0"
                 >
                     <template #reference>
-                        <el-avatar class="me-1" size="small" button>
+                        <el-avatar shape="square" class="me-1" size="small" button>
                             {{ name(trigger) }}
                         </el-avatar>
                     </template>

ui/src/components/flows/TriggerFlow.vue

@@ -41,7 +41,7 @@
             },
             type: {
                 type: String,
-                default: "info"
+                default: "primary"
             },
         },
         data() {

ui/src/components/graph/Topology.vue

@@ -312,7 +312,7 @@
                 <trigger-flow type="default" :disabled="flow.disabled" :flow-id="flow.id" :namespace="flow.namespace" />
             </li>
             <li>
-                <el-button :icon="ContentSave" size="large" @click="save" v-if="isAllowedEdit" :disabled="!haveChange" type="info">
+                <el-button :icon="ContentSave" size="large" @click="save" v-if="isAllowedEdit" :disabled="!haveChange" type="primary">
                     {{ $t('save') }}
                 </el-button>
             </li>

ui/src/components/home/HomeSummaryNamespace.vue

@@ -7,6 +7,7 @@
         />
     </el-card>
 </template>
+
 <script>
     import NamespaceTreeMap from "./NamespaceTreeMap.vue";
     import State from "../../utils/state";
@@ -47,20 +48,3 @@
         }
     };
 </script>
-
-<style lang="scss" scoped>
-@import "../../styles/_variable.scss";
-
-@media (min-width: map-get($grid-breakpoints, "lg")) and (max-width: 1500px) {
-    .row.home-summary > div {
-        -webkit-box-flex: 0;
-        -ms-flex: 0 0 100%;
-        flex: 0 0 100%;
-        max-width: 100%;
-        &.legend {
-            margin-top: $spacer * 1.5;
-        }
-    }
-}
-
-</style>

ui/src/components/home/HomeSummaryPie.vue

@@ -4,10 +4,10 @@
         :header="title"
     >
         <el-row :span="12" :gutter="15" v-if="count > 0" class="home-summary">
-            <el-col :md="6" :lg="12" :xl="6">
+            <el-col :md="6" :lg="12" :xl="12">
                 <status-pie :data="data" />
             </el-col>
-            <el-col :md="6" :lg="12" :xl="6">
+            <el-col :md="6" :lg="12" :xl="12">
                 <home-summary-status-label class="mt-sm-4 mt-md-0 mt-lg-4 mt-xl-0" :data="data" />
             </el-col>
         </el-row>
@@ -46,3 +46,9 @@
     };
 </script>
 
+
+<style lang="scss" scoped>
+    .home-summary {
+        justify-content: center;
+    }
+</style>

ui/src/components/home/HomeSummaryStatusLabel.vue

@@ -16,9 +16,7 @@
                 </div>
 
                 <div class="big-number">
-                    <el-tag type="info" disable-transitions>
-                        {{ count }}
-                    </el-tag>
+                    {{ count }}
                 </div>
             </div>
         </template>
@@ -60,7 +58,7 @@
         > div {
             justify-content: center;
             align-items: center;
-
+            color: var(--bs-gray-900);
 
             .icon {
                 vertical-align: middle;
@@ -70,28 +68,24 @@
                 flex-grow: 1;
 
                 h6 {
-                    font-weight: 400;
                     line-height: 1;
                     margin-bottom: 0;
+                    font-size: var(--font-size-sm);
+                    text-transform: uppercase;
+                    font-weight: bold;
                 }
 
                 .percent {
-                    color: var(--bs-gray-500);
                     line-height: 1.5;
                     font-size: var(--font-size-xs);
                 }
             }
 
-            :deep(.el-tag) {
-                font-size: 150%;
-                background: none;
-                color: var(--bs-gray-600);
-                font-weight: 400;
-                padding: 0;
-            }
 
             .big-number {
                 vertical-align: middle;
+                font-size: 150%;
+                font-weight: bold;
             }
         }
     }

ui/src/components/home/StatusPie.vue

@@ -42,6 +42,7 @@
                 },
                 spacing: 0,
                 cutout: "75%",
+                borderWidth: 0,
                 borderColor: cssVariable("--bs-border-color"),
                 hoverBorderColor: cssVariable("--bs-border-color"),
                 plugins: {

ui/src/components/inputs/Editor.vue

@@ -14,7 +14,7 @@
             </el-button-group>
             <span v-if="!this.guidedProperties.tourStarted">
                 <el-tooltip :content="editorDocumentation ? $t('hide task documentation') : $t('show task documentation')" :persistent="false" transition="" :hide-after="0">
-                    <el-button type="info" :icon="editorDocumentation ? icon.Close : icon.BookMultipleOutline" circle style="float: right" size="small" @click="setShowDocumentation" />
+                    <el-button type="primary" :icon="editorDocumentation ? icon.Close : icon.BookMultipleOutline" circle style="float: right" size="small" @click="setShowDocumentation" />
                 </el-tooltip>
             </span>
         </nav>
@@ -186,7 +186,7 @@
                 return  {
                     ...{
                         tabSize: 2,
-                        fontFamily: "'Source Code Pro', SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+                        fontFamily: "'Source Code Pro', monospace",
                         fontSize: 12,
                         showFoldingControls: "always",
                         scrollBeyondLastLine: false,
@@ -394,7 +394,7 @@
                 padding-top: 7px;
 
                 html.dark & {
-                    background-color: var(--bs-gray-100-darken-5);
+                    background-color: var(--bs-gray-100);
                 }
             }
 
@@ -439,14 +439,14 @@
 
     html.dark {
         .monaco-editor, .monaco-editor-background {
-            background-color: var(--bs-gray-100-darken-5);
-            --vscode-editor-background: var(--bs-gray-100-darken-5);
-            --vscode-breadcrumb-background: var(--bs-gray-100-darken-5);
-            --vscode-editorGutter-background: var(--bs-gray-100-darken-5);
+            background-color: var(--input-bg);
+            --vscode-editor-background: var(--input-bg);
+            --vscode-breadcrumb-background: var(--input-bg);
+            --vscode-editorGutter-background: var(--input-bg);
         }
 
         .monaco-editor .margin {
-            background-color: var(--bs-gray-100-darken-5);
+            background-color: var(--input-bg);
         }
     }
 

ui/src/components/layout/News.vue

@@ -1,6 +1,6 @@
 <template>
     <el-button class="news-link" @click="show">
-        <gift title="" />
+        <bell title="" />
         <CheckboxBlankCircle v-if="hasUnread" class="new" title="" />
     </el-button>
 
@@ -27,7 +27,7 @@
 
 <script>
     import {mapState} from "vuex";
-    import Gift from "vue-material-design-icons/Gift.vue";
+    import Bell from "vue-material-design-icons/Bell.vue";
     import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
     import CheckboxBlankCircle from "vue-material-design-icons/CheckboxBlankCircle.vue";
     import Markdown from "./Markdown.vue";
@@ -35,7 +35,7 @@
 
     export default {
         components: {
-            Gift,
+            Bell,
             OpenInNew,
             CheckboxBlankCircle,
             Markdown,
@@ -88,10 +88,10 @@
     }
 
     .new {
-        font-size: calc(var(--font-size-sm) * 0.7);
+        font-size: calc(var(--font-size-sm) * 0.7) !important;
         color: var(--el-color-error);
         position: absolute;
-        margin-left: 14px;
+        margin-left: 10px;
         margin-top: -12px;
 
         animation-name: grow;

ui/src/components/layout/Pagination.vue

@@ -21,7 +21,6 @@
                 :page-size="internalSize"
                 v-model:page-size="internalSize"
                 small
-                background
                 layout="prev, pager, next"
                 :pager-count="5"
                 :total="Math.min((max || total ),total)"
@@ -103,8 +102,7 @@
             padding: 0 4px;
             line-height: 1.85;
             font-size: var(--el-font-size-extra-small);
-            border-radius: var(--bs-border-radius-sm);
-            border: 1px solid var(--bs-border-color);
+            color: var(--bs-purple);
             white-space: nowrap;
         }
     }

ui/src/components/layout/TopNavBar.vue

@@ -19,8 +19,13 @@
             </el-breadcrumb>
         </div>
         <div class="side ms-auto ps-2">
-            <auth />
+            <a href="https://api.kestra.io/v1/communities/slack/redirect"
+               target="_blank"
+               class="el-button el-button--small is-text is-has-bg">
+                Live chat
+            </a>
             <news />
+            <auth />
         </div>
     </nav>
 </template>
@@ -55,26 +60,26 @@
         .top-title {
             overflow: hidden;
             h1 {
-                color: var(--el-primary);
+                color: var(--bs-black);
                 margin-bottom: calc(var(--spacer) * 0.5);
                 font-weight: bold;
 
                 html.dark & {
-                    color: var(--tertiary);
+                    color: var(--bs-white);
                 }
             }
 
-            .el-breadcrumb {
-                color: var(--bs-secondary);
+            :deep(.el-breadcrumb) {
                 display: flex;
+
                 a {
                     font-weight: normal;
-                    color: var(--bs-secondary);
+                    color: var(--bs-gray-500);
                     white-space: nowrap;
                 }
 
                 .el-breadcrumb__separator {
-                    color: var(--bs-tertiary);
+                    color: var(--bs-gray-500);
                 }
 
                 .el-breadcrumb__item {
@@ -92,6 +97,12 @@
                 a {
                     cursor: pointer !important;
                 }
+
+                html.dark & {
+                    a, .el-breadcrumb__separator {
+                        color: var(--bs-gray-700);
+                    }
+                }
             }
         }
 
@@ -106,8 +117,25 @@
                 border: 0;
                 padding-left: 8px;
                 padding-right: 8px;
-                color: var(--bs-secondary);
+                color: var(--bs-gray-700);
                 background-color: transparent;
+
+                .material-design-icon {
+                    font-size: var(--font-size-lg);
+                }
+            }
+
+            .is-text {
+                font-weight: bold;
+                border: 1px solid var(--bs-border-color);
+                height: 32px;
+                line-height: 32px;
+                background-color: var(--bs-white) !important;
+
+                html.dark & {
+                    color: var(--bs-white);
+                    background-color: var(--bs-gray-500) !important;
+                }
             }
         }
     }

ui/src/components/logs/LogLine.vue

@@ -105,8 +105,11 @@
     div.line {
         white-space: pre-wrap;
         word-break: break-all;
-        padding-right: calc(var(--spacer) / 2);
+        padding: 2px 2px 0 2px;
 
+        span {
+            margin-bottom: 2px;
+        }
         .el-tag {
             border-radius: 0;
             border: 0;
@@ -129,10 +132,10 @@
             span:first-child {
                 margin-right: 6px;
                 font-family: var(--bs-font-sans-serif);
-                color: var(--bs-gray-400);
+                color: var(--bs-gray-500);
 
                 html.dark & {
-                    color: var(--bs-gray-400-darken-15);
+                    color: var(--bs-gray-700);
                 }
                 user-select: none;
 
@@ -142,7 +145,8 @@
             }
 
             &:not(.el-tag), & a {
-                color: var(--bs-gray-600);
+                color: var(--bs-gray-700);
+                border-radius: var(--bs-border-radius);
             }
 
             & a:hover {
@@ -151,6 +155,7 @@
 
             &.log-level {
                 white-space: pre;
+                border-radius: var(--bs-border-radius);
             }
         }
 

ui/src/components/onboarding/OnboardingBottom.vue

@@ -7,6 +7,7 @@
                 :lg="8"
                 :md="24"
                 :offset="32"
+                class="mb-4"
             >
                 <onboarding-card
                     :title="card.title"
@@ -33,13 +34,13 @@
                     {
                         title: this.$t("get started"),
                         content: this.$t("get started content"),
-                        imgClass: "get-started",
+                        imgClass: "started",
                         link: "https://kestra.io/docs/getting-started/"
                     },
                     {
                         title: this.$t("watch demo"),
                         content: this.$t("watch demo content"),
-                        imgClass: "demo-video",
+                        imgClass: "demo",
                         link: "<iframe width=\"100%\" height=\"100%\" src=\"https://www.youtube.com/embed/pSz6cPGYPPQ\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>"
                     },
                     {

ui/src/components/onboarding/OnboardingCard.vue

@@ -1,11 +1,11 @@
 <template>
     <el-card @click="openLink">
         <Export class="icon" />
-        <div class="content">
-            <div>
-                <div class="img" :class="imgClass" />
+        <div class="content row">
+            <div class="col-lg-4 col-xl-6">
+                <img :src="imgSrc" class="img-fluid" alt="" />
             </div>
-            <div>
+            <div class="col-lg-8 col-xl-6">
                 <h3>{{ title }}</h3>
                 <p>{{ content }}</p>
             </div>
@@ -58,6 +58,13 @@
                     window.open(this.link, "_blank");
                 }
             }
+        },
+        computed: {
+            imgSrc() {
+                const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
+
+                return new URL("../../assets/onboarding/onboarding-" + this.imgClass + "-" + (darkTheme ? "dark" : "light") + ".svg", import.meta.url).href;
+            },
         }
     }
 </script>
@@ -71,7 +78,6 @@
     }
 
     p {
-        color: var(--bs-gray-500);
         margin-bottom: 0;
     }
 
@@ -79,45 +85,18 @@
         position: absolute;
         top: calc(var(--spacer) / 2);
         right: calc(var(--spacer) / 2);
-        color: var(--bs-gray-500);
         font-size: var(--font-size-lg);
     }
 
-    .content {
-        display: flex;
+    p, .icon {
+        color: var(--bs-gray-500);
 
-        > div:first-child {
-            min-width: 160px;
-            flex-wrap: nowrap;
+        html.dark & {
+            color: var(--bs-gray-700);
         }
     }
 
-    div.img {
-        min-height: 130px;
-        height: 100%;
-
-        &.get-started {
-            background: url("../../assets/onboarding/onboarding-started-light.svg") no-repeat top left;
-
-            html.dark & {
-                background: url("../../assets/onboarding/onboarding-started-dark.svg") no-repeat top left;
-            }
-        }
-
-        &.demo-video {
-            background: url("../../assets/onboarding/onboarding-demo-light.svg") no-repeat top left;
-
-            html.dark & {
-                background: url("../../assets/onboarding/onboarding-demo-dark.svg") no-repeat top left;
-            }
-        }
-
-        &.help {
-            background: url("../../assets/onboarding/onboarding-help-light.svg") no-repeat top left;
-
-            html.dark & {
-                background: url("../../assets/onboarding/onboarding-help-dark.svg") no-repeat top left;
-            }
-        }
+    img {
+        max-width: 100%;
     }
 </style>

ui/src/components/onboarding/Welcome.vue

@@ -19,7 +19,7 @@
                     </el-row>
                     <el-row justify="center" class="mt-4">
                         <router-link :to="{name: 'flows/create'}">
-                            <el-button size="large" type="info">
+                            <el-button size="large" type="primary">
                                 {{ $t('welcome button create') }}
                             </el-button>
                         </router-link>

ui/src/components/templates/TemplateEdit.vue

@@ -4,12 +4,12 @@
         <bottom-line v-if="canSave || canDelete">
             <ul>
                 <li>
-                    <el-button :icon="Delete" type="danger" size="large" v-if="canDelete" @click="deleteFile">
+                    <el-button :icon="Delete" size="large" type="default" v-if="canDelete" @click="deleteFile">
                         {{ $t('delete') }}
                     </el-button>
 
                     <template v-if="canSave">
-                        <el-button :icon="ContentSave" @click="save" type="info" size="large">
+                        <el-button :icon="ContentSave" @click="save" type="primary" size="large">
                             {{ $t('save') }}
                         </el-button>
                     </template>

ui/src/components/templates/Templates.vue

@@ -95,7 +95,7 @@
                 </li>
                 <li>
                     <router-link :to="{name: 'templates/create'}">
-                        <el-button :icon="Plus" type="info" size="large">
+                        <el-button :icon="Plus" type="primary" size="large">
                             {{ $t('create') }}
                         </el-button>
                     </router-link>

ui/src/override/components/LeftMenu.vue

@@ -261,6 +261,7 @@
                     background: url(../../../src/assets/logo.svg) 0 0 no-repeat;
                     background-size: 179px 55px;
                     display: block;
+                    transition: 0.2s all;
 
                     html.dark & {
                         background: url(../../../src/assets/logo-white.svg) 0 0 no-repeat;
@@ -276,7 +277,11 @@
             font-size: var(--el-font-size-extra-small);
             text-align: center;
             display: block;
-            color: var(--bs-tertiary);
+            color: var(--bs-gray-400);
+
+            html.dark & {
+                color: var(--bs-gray-600);
+            }
         }
 
         .vsm--icon {
@@ -292,18 +297,24 @@
             }
         }
 
+        .vsm--item {
+            padding: 0 30px;
+            transition: padding 0.2s ease;
+        }
+
+        .vsm--child {
+            .vsm--item {
+                padding: 0;
+            }
+        }
         .vsm--link {
             padding: 0.3rem 0.5rem;
             margin-bottom: 0.3rem;
-            border-left: 4px solid transparent;
-            padding-left: 37px;
+            border-radius: var(--bs-border-radius);
+            transition: padding 0.2s ease;
 
-            &_level-1 {
-                &.vsm--link_exact-active,
-                &.vsm--link_active {
-                    box-shadow: none;
-                    border-left: 4px solid var(--bs-secondary);
-                }
+            html.dark & {
+                color: var(--bs-white);
             }
 
             &_exact-active,
@@ -324,9 +335,6 @@
             border-top: 1px solid var(--bs-border-color);
         }
 
-        &.vsm_collapsed .vsm--icon {
-            left: 0;
-        }
 
         a.vsm--link_active[href="#"] {
             cursor: initial !important;
@@ -339,31 +347,32 @@
             }
         }
 
-        .vsm--dropdown_mobile-item {
-            .vsm--item {
-                .vsm--title {
-                    left: 0;
-                    position: relative;
-                }
-            }
-        }
 
         a.vsm--link_active[href="#"] {
             cursor: initial !important;
         }
 
         html.dark & {
-            background-color: var(--bs-gray-100-darken-5);
+            background-color: var(--bs-gray-100);
 
             .vsm--dropdown {
                 background-color: var(--bs-gray-100);
             }
         }
 
+
+        .vsm--mobile-bg {
+            border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 ;
+        }
+
         &.vsm_collapsed {
             .logo {
                 a {
-                    left: 11px;
+                    left: 8px;
+
+                    span.img {
+                        background-size: 207px 55px !important;
+                    }
                 }
             }
 
@@ -371,6 +380,10 @@
                 padding-left: 13px;
             }
 
+            .vsm--item {
+                padding: 0 5px;
+            }
+
             span.version {
                 opacity: 0;
             }

ui/src/styles/_theme-dark.scss

@@ -1,4 +1,27 @@
 // gray
+$gray-900: #CAC5DA;
+$gray-800: #A69FC1;
+$gray-700: #918BA9;
+$gray-600: #404559;
+$gray-500: #2F3342;
+$gray-400: #2C303F;
+$gray-300: #202435;
+$gray-200: #21242E;
+$gray-100: #1C1E27;
+
+$light: $gray-200;
+$dark: $gray-100;
+
+// body
+$body-color: $gray-900;
+$border-color: $gray-600;
+$body-bg: $gray-200;
+$card-bg: $gray-500;
+$input-bg: $gray-100;
+
+
+
+/*
 $gray-900: #d6e2f3;
 $gray-800: #d0d7e0;
 $gray-700: #c1c1d8;
@@ -9,12 +32,7 @@ $gray-300: #283456;
 $gray-200: #292e40;
 $gray-100: #202331;
 
-$light: $gray-200;
-$dark: $gray-100;
-
-// body
-$body-color: $gray-900;
 $border-color: $gray-200;
 $body-bg: #1b1e2a;
 $card-bg: #222635;
-
+ */

ui/src/styles/_variable.scss

@@ -1,68 +1,73 @@
 // color system
-$blue: #1761fd;
-$indigo: #6610f2;
-$purple: #6d81f5;
-$pink: #fd3c97;
-$red: #f5325c;
-$orange: #ff8500;
-$yellow: #ffb822;
-$green: #22b783;
-$teal: #03d87f;
-$cyan: #12a4ed;
+$blue: #1761FD !default;
+$indigo: #8405FF !default;
+$purple: #9F9DFF !default;
+$pink: #FD3C97 !default;
+$red: #F1444C !default;
+$red-light: #FF9D9D !default;
+$orange: #FCB37C !default;
+$yellow: #FCE07C !default;
+$green: #03DABA !default;
+$teal: #03D87F !default;
+$cyan: #60C5FE !default;
 
 // primary color
-$primary: #192A4E;
-$secondary: #4F83A5;
-$tertiary: #9EBFD5;
+$primary: #8405FF !default;
+$secondary: #C182FF !default;
+$tertiary: #2F3342 !default;
 
 // gray
-$white: #FFF;
-$gray-100: #f8f8fc;
-$gray-200: #f1f5fa;
-$gray-300: #eaf0f9;
-$gray-400: #b6c2e4;
-$gray-500: #8997bd;
-$gray-600: #7081b9;
-$gray-700: #303e67;
-$gray-800: #2c3652;
-$gray-900: #1d2c48;
-$black: #000;
+$white: #FFF !default;
+$gray-100: #f8f8fc !default;
+$gray-200: #f1f5fa !default;
+$gray-300: #eaf0f9 !default;
+$gray-400: #b6c2e4 !default;
+$gray-500: #8997bd !default;
+$gray-600: #7081b9 !default;
+$gray-700: #303e67 !default;
+$gray-800: #2c3652 !default;
+$gray-900: #1d2c48 !default;
+$black: #26282D !default;
 
-$light: $gray-200;
-$dark: $gray-900;
+$light: $gray-200 !default;
+$dark: $gray-900 !default;
 
 // fonts
-$font-size-base: 1rem;
-$font-family-sans-serif: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-$font-family-monospace: 'Source Code Pro', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-$font-size-xs: $font-size-base * 0.75;
+$font-size-base: 1rem !default;
+$font-family-sans-serif: "Public Sans", sans-serif;
+$font-family-monospace: "Source Code Pro", monospace;
+$font-size-xs: $font-size-base * 0.75 !default;
 
 // border radius
-$border-radius: 0.25rem;
-$border-radius-lg: 0.5rem;
-$border-radius-sm: 0.15rem;
+$border-radius: 0.25rem !default;
+$border-radius-lg: 0.5rem !default;
+$border-radius-sm: 0.15rem !default;
 
 // layout
-$menu-width: 268px;
-$spacer: 1rem;
+$menu-width: 268px !default;
+$spacer: 1rem !default;
 
 // body
-$body-color: $gray-700;
-$border-color: $gray-300;
-$body-bg: $gray-100;
-$card-bg: $white;
+$body-color: $gray-800 !default;
+$border-color: $gray-300 !default;
+$body-bg: $gray-100 !default;
+$card-bg: $white !default;
+$input-bg: $white !default;
 
-$link-color: $cyan;
+$link-color: $primary !default;
 
 // border radius
-$border-radius: .25rem;
-$border-radius-sm: .15rem;
+$border-radius: .25rem !default;
+$border-radius-sm: .15rem !default;
 
 // shadow
 $box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
 $box-shadow: 0 .5rem 1rem rgba($black, .15);
 $box-shadow-lg: 0 1rem 3rem rgba($black, .175);
 
+// element-plus
+$types: primary, success, warning, danger, error, info !default;
+
 // bootstrap
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/mixins";

ui/src/styles/layout/element-plus-overload.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use 'element-plus/theme-chalk/src/mixins/mixins' as *;
-@use 'element-plus/theme-chalk/src/' as *;
 @import "../variable";
 
 // button
@@ -34,10 +33,7 @@
 // input
 .el-input, .el-date-editor, .el-textarea {
     --el-input-border-color: var(--bs-border-color);
-
-    html.dark & {
-        --el-input-bg-color: var(--bs-gray-100-darken-5);
-    }
+    --el-input-bg-color: var(--input-bg);
 }
 
 .el-input, .el-input-number, .el-select, .el-date-editor.el-input {
@@ -64,7 +60,7 @@
     }
 
     label {
-        display: flex;
+        displabey: flex;
         cursor: pointer;
         margin-left: 10px;
         line-height: 30px;
@@ -133,7 +129,7 @@
     --el-checkbox-font-size: var(--font-size-base);
 
     html.dark & {
-        --el-checkbox-bg-color: var(--bs-gray-100-darken-5);
+        --el-checkbox-bg-color: var(--input-bg);
     }
 }
 
@@ -220,6 +216,10 @@ form.ks-horizontal {
         display: none;
     }
 
+    .el-table__empty-text {
+        color: var(--bs-gray-600);
+    }
+
     th {
         white-space: nowrap;
         div.cell {
@@ -234,8 +234,25 @@ form.ks-horizontal {
             white-space: nowrap;
         }
 
-        a {
+        a, button {
             color: var(--bs-body-color);
+            width: 28px;
+            border-radius: var(--bs-border-radius);
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: var(--bs-gray-400);
+
+            .material-design-icon__svg {
+                bottom: -0.125rem;
+            }
+        }
+
+        button {
+            .material-design-icon__svg {
+                bottom: 0;
+            }
         }
     }
 
@@ -268,7 +285,7 @@ form.ks-horizontal {
 .el-tabs {
     .el-tabs__active-bar {
         height: 4px;
-        background-color: var(--bs-secondary);
+        background-color: var(--bs-primary);
     }
 
     .el-tabs__item {
@@ -276,11 +293,12 @@ form.ks-horizontal {
         transition: all 0.3s ease;
         > * {
             padding: var(--spacer) calc(var(--spacer) * 1.5);
-            color: var(--bs-tertiary);
+            color: var(--bs-gray-700);
         }
 
-        &.is-active {
-            color: var(--bs-secondary);
+        &.is-active > * {
+            color: var(--bs-primary);
+            font-weight: bold;
         }
     }
 
@@ -288,6 +306,19 @@ form.ks-horizontal {
         height: 1px;
         background-color: var(--el-border-color);
     }
+
+    html.dark & {
+        .el-tabs__active-bar {
+            background-color: var(--bs-secondary);
+        }
+
+        .el-tabs__item {
+            &.is-active > * {
+                color: var(--bs-secondary);
+            }
+        }
+
+    }
 }
 
 // card
@@ -300,13 +331,10 @@ form.ks-horizontal {
 
     .el-card__header {
         padding: $card-cap-padding-y $card-cap-padding-x;
-        color: var(--bs-secondary);
         font-weight: bold;
+        font-size: var(--font-size-sm)
     }
 
-    .el-card__body {
-        padding: calc(var(--spacer) / 2);
-    }
 }
 
 // message box
@@ -368,11 +396,24 @@ form.ks-horizontal {
 
 // message box
 .el-pagination {
-    html.dark & {
-        --el-pagination-button-bg-color: var(--bs-gray-200);
-        --el-disabled-bg-color: var(--bs-gray-100);
-        --el-pagination-button-color: var(--bs-gray-600);
-        --el-pagination-hover-color: var(--bs-gray-800);
+    --el-pagination-bg-color: transparent;
+    --el-pagination-text-color: var(--bs-body-color);
+    --el-pagination-button-color: var(--bs-body-color);
+    --el-pagination-hover-color: var(--bs-purple);
+
+    //html.dark & {
+    //    --el-pagination-button-bg-color: var(--bs-gray-200);
+    //    --el-pagination-button-color: var(--bs-gray-600);
+    //    --el-pagination-hover-color: var(--bs-gray-800);
+    //}
+
+    li, button {
+        border: 1px solid var(--bs-border-color);
+        margin-right: 3px;
+
+        &.is-active {
+            border: 1px solid var(--bs-purple);
+        }
     }
 }
 
@@ -503,6 +544,13 @@ form.ks-horizontal {
     .el-alert__description {
         margin: 0;
     }
+
+
+    @each $type in $types {
+        &.el-alert--#{$type} {
+            border: 1px solid var(--el-color-#{$type}-light-5);
+        }
+    }
 }
 
 // notifications
@@ -553,6 +601,11 @@ form.ks-horizontal {
 // avatar
 .el-avatar {
     --el-avatar-bg-color: var(--bs-gray-400);
+    --el-avatar-text-color: var(--bs-black);
+
+    html.dark & {
+        --el-avatar-text-color: var(--bs-white);
+    }
 }
 
 

ui/src/styles/layout/html-tag.scss

@@ -26,8 +26,12 @@ blockquote {
     border-left: 5px solid var(--bs-gray-400);
     margin-top: calc(var(--spacer) * 2);
     padding: calc(var(--spacer) / 4)  0 calc(var(--spacer) / 4) var(--spacer);
-    color: var(--bs-gray-500);
+    color: var(--bs-gray-600);
     p {
         margin-bottom: 0;
     }
+
+    html.dark & {
+        color: var(--bs-gray-700);
+    }
 }

ui/src/styles/layout/root-dark.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @import "../theme-dark";
+@import "../variable";
 
 // Bootstrap
 @import "bootstrap/scss/functions";
@@ -21,7 +22,9 @@ html.dark {
     #{--bs-body-color}: $body-color;
     #{--bs-body-bg}: $body-bg;
     #{--bs-border-color}: $border-color;
+    #{--bs-link-color}: $secondary;
     #{--card-bg}: $card-bg;
+    #{--input-bg}: $input-bg;
 
     --el-bg-color: var(--bs-body-bg);
     --el-bg-color-page: var(--bs-body-bg);
@@ -33,19 +36,19 @@ html.dark {
     --el-text-color-primary: var(--bs-primary);
     --el-text-color-regular: var(--bs-body-color);
     --el-text-color-secondary: var(--bs-secondary);
-    --el-text-color-placeholder: var(--bs-gray-600);
-    --el-text-color-disabled: var(--bs-gray-200);
+    --el-text-color-placeholder: var(--bs-gray-800);
+    --el-text-color-disabled: var(--bs-gray-400);
 
     --el-border-color: var(--bs-border-color);
-    --el-border-color-light: var(--bs-secondary);
-    --el-border-color-lighter: var(--bs-secondary);
-    --el-border-color-extra-light: var(--bs-secondary);
-    --el-border-color-dark: var(--bs-secondary);
-    --el-border-color-darker: var(--bs-secondary);
+    --el-border-color-light: var(--bs-border-color);
+    --el-border-color-lighter: var(--bs-border-color);
+    --el-border-color-extra-light: var(--bs-border-color);
+    --el-border-color-dark: var(--bs-border-color);
+    --el-border-color-darker: var(--bs-border-color);
 
     --el-fill-color: var(--bs-gray-700);
-    --el-fill-color-light: var(--bs-gray-600);
-    --el-fill-color-lighter: var(--bs-gray-500);
+    --el-fill-color-light: var(--bs-gray-800);
+    --el-fill-color-lighter: var(--bs-gray-700);
     --el-fill-color-extra-light: var(--bs-gray-400);
     --el-fill-color-dark: var(--bs-gray-800);
     --el-fill-color-darker: var(--bs-gray-900);

ui/src/styles/layout/root.scss

@@ -51,6 +51,7 @@
     #{--font-size-base}: $font-size-base;
     #{--font-size-lg}: $font-size-lg;
     #{--card-bg}: $card-bg;
+    #{--input-bg}: $input-bg;
 
     #{--bs-tertiary}: $tertiary;
 

ui/src/styles/vendor.scss

@@ -21,8 +21,8 @@
     ),
 
     $colors: (
-        'white': #ffffff,
-        'black': #000000,
+        'white': global-var.$white,
+        'black': global-var.$black,
         'primary': (
             'base': global-var.$primary,
         ),
@@ -51,13 +51,14 @@
 
 // vue-sidebar
 @use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss" with (
-    $primary-color: global-var.$secondary,
+    $primary-color: global-var.$primary,
     $base-bg: global-var.$white,
-    $item-color: global-var.$tertiary,
-    $item-active-color: global-var.$secondary,
+    $item-color: global-var.$black,
+    $item-active-bg: global-var.$primary,
+    $item-active-color: global-var.$white,
     $item-font-size: global-var.$font-size-base,
-    $item-hover-color: global-var.$tertiary,
-    $item-hover-bg: darken(global-var.$secondary, 5%),
+    $item-hover-color: global-var.$white,
+    $item-hover-bg: global-var.$secondary,
 );
 
 // third
@@ -68,5 +69,5 @@
 @use "@vue-flow/controls/dist/style.css" as controls;
 
 //noinspection CssUnknownTarget
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;700;800&family=Source+Code+Pro:wght@400;700;800&display=swap");
 

ui/src/utils/state.js

@@ -12,7 +12,7 @@ const STATE = Object.freeze({
     CREATED: {
         name: "CREATED",
         colorClass: "info",
-        color: "#4F83A5",
+        color: "#9F9DFF",
         icon: ProgressWrench,
         isRunning: true,
         isKillable: true,
@@ -21,7 +21,7 @@ const STATE = Object.freeze({
     RESTARTED: {
         name: "RESTARTED",
         colorClass: "info",
-        color: "#4F83A5",
+        color: "#9F9DFF",
         icon: Restart,
         isRunning: false,
         isKillable: true,
@@ -30,7 +30,7 @@ const STATE = Object.freeze({
     SUCCESS: {
         name: "SUCCESS",
         colorClass: "success",
-        color: "#22b783",
+        color: "#03DABA",
         icon: CheckCircle,
         isRunning: false,
         isKillable: false,
@@ -39,7 +39,7 @@ const STATE = Object.freeze({
     RUNNING: {
         name: "RUNNING",
         colorClass: "primary",
-        color: "#4F83A5",
+        color: "#9F9DFF",
         icon: PlayCircle,
         isRunning: true,
         isKillable: true,
@@ -48,7 +48,7 @@ const STATE = Object.freeze({
     KILLING: {
         name: "KILLING",
         colorClass: "warning",
-        color: "#ffb822",
+        color: "#FCE07C",
         icon: CloseCircle,
         isRunning: true,
         isKillable: false,
@@ -57,7 +57,7 @@ const STATE = Object.freeze({
     KILLED: {
         name: "KILLED",
         colorClass: "warning",
-        color: "#ffb822",
+        color: "#FCE07C",
         icon: StopCircle,
         isRunning: false,
         isKillable: false,
@@ -66,7 +66,7 @@ const STATE = Object.freeze({
     WARNING: {
         name: "WARNING",
         colorClass: "warning",
-        color: "#ff8500",
+        color: "#FCB37C",
         icon: AlertCircle,
         isRunning: false,
         isKillable: false,
@@ -75,7 +75,7 @@ const STATE = Object.freeze({
     FAILED: {
         name: "FAILED",
         colorClass: "danger",
-        color: "#f5325c",
+        color: "#F1444C",
         icon: CloseCircle,
         isRunning: false,
         isKillable: false,
@@ -84,7 +84,7 @@ const STATE = Object.freeze({
     PAUSED: {
         name: "PAUSED",
         colorClass: "",
-        color: "#6d81f5",
+        color: "#8405FF",
         icon: PauseCircle,
         isRunning: false,
         isKillable: false,

ui/vite.config.js

@@ -15,4 +15,7 @@ export default defineConfig({
     plugins: [
         vue(),
     ],
+    css: {
+        devSourcemap: true
+    },
 })