Merge branch 'dev'

assets/_variables.scss

@@ -8,6 +8,7 @@
   --black-primary: #161617;
   --radius: 4px;
   --radius-2: 8px;
+  --slider-bg: #5E5E5E;
 }
 
 [trade-theme="default"] {
@@ -60,6 +61,8 @@
   --table-background: #212121;
   --dialog-background: #212121;
   --card-number: #161617;
+  --disabled-indicator: #C4C4C4;
+  --access-indicator: #66C167;
 
   // buttons
   --btn-default: #333333;
@@ -77,6 +80,7 @@
   --text-grey-thirdly: #bdbdbd;
   --text-dark: #888;
   --text-disable: #BEC6CB;
+  --text-transparent: rgba(242, 242, 242, 0.3);
 
   --card-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.2);
   --dropdown-shadow: 0px 12px 24px 0px rgba(18, 18, 18, 0.16);
@@ -90,6 +94,7 @@
   --active-row: #282828;
 
   --border-1: 1px solid rgba(60, 60, 67, 0.36);
+  --border-1-color: rgba(60, 60, 67, 0.36); 
   --border-2: 2px solid #3F3F3F;
 
   --selector-bg: #282828;
@@ -112,6 +117,8 @@
   --normal-card-shadow: #00000080;
 
   --cancel: #c4c4c4;
+
+  --select-color: #333333;
 }
 
 .theme-light {
@@ -132,6 +139,8 @@
   --dialog-background: #f5f5f9;
   --chart-actions-background: #d4d7dE;
   --card-number: #f0f0f0;
+  --disabled-indicator: #C4C4C4;
+  --access-indicator: #66C167;
 
   // buttons
   --btn-default: #E6E8EB;
@@ -141,14 +150,14 @@
   --hover: rgba(200, 200, 200, 0.5);
   --dark-btn-sm: #e0e0e0;
   --swap-tab-active: #e0e0e0;
-
   --text-default: #303133;
-  --text-theme: #fff; 
+  --text-theme: #fff;
   --text-contrast: #000;
   --text-secondary: #606266;
   --text-dark: #aaa;
   --text-grey-thirdly: #787878;
-  --text-disable: #303133;
+  --text-disable: #c4c4c4;
+  --text-transparent: rgba(0, 0, 0, 0.3);
 
   --border-color: #CDD0D6;
 
@@ -158,6 +167,7 @@
   --active-row: #c2deff;
 
   --border-1: 1px solid rgba(60, 60, 67, 0.36);
+  --border-1-color: rgba(60, 60, 67, 0.36); 
   --border-2: 2px solid #CDD0D6;
 
   --selector-bg: #dcdfe6;
@@ -178,5 +188,6 @@
   --cancel: #303133;
 
   --normal-card-shadow: #aaaaaa8a;
+  --select-color: #ffffff;
 }
 

assets/dark.css

@@ -6123,7 +6123,9 @@
 }
 
 .el-notification__content p {
-    margin: 0
+    margin: 0;
+    white-space: normal;
+    text-align: left;
 }
 
 .el-notification__icon {
@@ -6416,14 +6418,14 @@
 .el-tooltip__popper[x-placement^=bottom] .popper__arrow {
     top: -6px;
     border-top-width: 0;
-    border-bottom-color: #F2F2F2
+    border-bottom-color: #161617
 }
 
 .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after {
     top: 1px;
     margin-left: -5px;
     border-top-width: 0;
-    border-bottom-color: #F2F2F2
+    border-bottom-color: #161617
 }
 
 .el-tooltip__popper[x-placement^=right] {
@@ -11624,7 +11626,7 @@
 .el-popper .popper__arrow,
 .el-popper .popper__arrow::after {
     position: absolute;
-    display: block;
+    display: none !important;
     width: 0;
     height: 0;
     border-color: transparent;
@@ -12934,7 +12936,7 @@
 }
 
 .el-input.is-disabled .el-input__inner {
-    background-color: #000;
+    background-color: #212121;
     border-color: transparent;
     color: #C0C4CC;
     cursor: not-allowed

assets/light.css

@@ -6115,7 +6115,9 @@
 }
 
 .el-notification__content p {
-    margin: 0
+    margin: 0;
+    white-space: normal;
+    text-align: left;
 }
 
 .el-notification__icon {
@@ -11575,7 +11577,7 @@
 .el-popper .popper__arrow,
 .el-popper .popper__arrow::after {
     position: absolute;
-    display: block;
+    display: none !important;
     width: 0;
     height: 0;
     border-color: transparent;
@@ -11590,7 +11592,8 @@
 
 .el-popper .popper__arrow::after {
     content: " ";
-    border-width: 6px
+    border-width: 6px;
+    display: none !important;
 }
 
 .el-popper[x-placement^=top] {

assets/main.scss

@@ -23,6 +23,12 @@ body {
   transition: 0.3s;
 }
 
+body {
+  overflow-x: hidden;
+  overflow-y: visible;
+  height: 100vh;
+}
+
 .j-container {
   width: 100%;
   margin: auto;
@@ -834,6 +840,10 @@ a {
   color: var(--text-grey-thirdly) !important;
 }
 
+.color-green {
+  color: var(--main-green) !important;
+}
+
 .weight-700 {
   font-weight: 700;
 }
@@ -943,6 +953,19 @@ a {
 .gap-6 {
   gap: 6px;
 }
+.fs-14 {
+  font-size: 14px;
+}
+.fs-48 {
+  font-size: 48px;
+}
+.fs-24 {
+  font-size: 24px;
+}
+
+.br-4 {
+  border-radius: 4px;
+}
 
 .gap-8 {
   gap: 8px;
@@ -1030,6 +1053,9 @@ a {
   color: var(--text-contrast) !important;
 }
 
+.grey-border {
+  border: 1px solid var(--border-color);  
+}
 .active-border {
   border: 1px solid var(--main-green);
   height: fit-content;
@@ -1101,3 +1127,19 @@ a {
 .rot-90 {
   transform: rotate(90deg) !important;
 }
+
+.text-decoration-underline {
+  text-decoration: underline;
+}
+.gap-16 {
+  gap: 16px;
+}
+.gap-21 {
+  gap: 21px;
+}
+.gap-30 {
+  gap: 30px;
+}
+.gap-32 {
+  gap: 32px;
+}

components/AlcorButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    :class="['alcor-button', { flat, alternative, access, danger, outline, transparent, iconOnly, iconOnlyAlt, round, big, compact }]"
+    :class="['alcor-button', { flat, alternative, access, orange, danger, outline, transparent, iconOnly, iconOnlyAlt, round, big, compact }]"
     @click.prevent="$emit('click')"
     v-bind="$attrs">
     <div class="inner">
@@ -29,6 +29,10 @@ export default {
       default: false,
       type: Boolean
     },
+    orange: {
+      default: false,
+      type: Boolean
+    },
     outline: {
       default: false,
       type: Boolean
@@ -85,6 +89,9 @@ button {
   &.active {
     background: var(--hover);
   }
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .alcor-button .vs-icon {
@@ -95,7 +102,7 @@ button {
   background: transparent;
 }
 
-.alcor-button:hover {
+.alcor-button:hover:not([disabled]) {
   background: var(--hover);
 }
 
@@ -119,6 +126,23 @@ button {
   background: var(--btn-outline);
 }
 
+.alcor-button.orange {
+  background: linear-gradient(90deg, #854000 0%, #FF8A00 100%);
+  border: 1px solid #854000;
+}
+
+.alcor-button.orange:hover {
+  background: transparent;
+  border: 1px solid #FF8A00;
+  color: #FF8A00;
+}
+
+.alcor-button.orange:disabled {
+  background: transparent;
+  border: 1px solid #854000;
+  color: #854000;
+}
+
 .alcor-button.danger {
   background: var(--main-action-red);
   border: 1px solid var(--main-action-red);

components/AlcorContainer.vue

@@ -0,0 +1,12 @@
+<template lang="pug">
+#alcor-container.p-3
+  slot
+
+</template>
+
+<style lang="scss">
+#alcor-container {
+  background-color: var(--background-color-third);
+  border-radius: 8px;
+}
+</style>

components/AlcorLink.vue

@@ -48,7 +48,7 @@ button {
 .alcor-button {
   padding: 6px 10px;
   border-radius: var(--radius);
-  color: var(--text-default) !important;
+  color: var(--text-default);
   background: var(--btn-default);
   transition: all 0.3s;
   display: inline-block;

components/AlcorModal.vue

@@ -1,17 +1,15 @@
 <template lang="pug">
-el-dialog.alcor-modal-component(
+el-dialog#alcor-modal-component(
   :visible="visible"
   :before-close="close"
 )
-  slot [body slot]
+  slot
 </template>
 
 <script>
 import { mapState } from 'vuex'
 
 export default {
-  props: ['isVisible'],
-
   computed: {
     ...mapState('modal', ['visible'])
   },
@@ -25,8 +23,11 @@ export default {
 </script>
 
 <style lang="scss">
-.alcor-modal-component {
-  .el-dialog__header {
+#alcor-modal-component {
+
+  .el-dialog__header,
+  .el-dialog__body,
+  .el-dialog__footer {
     padding: 0;
   }
 
@@ -56,6 +57,10 @@ export default {
       }
     }
   }
+  .el-dialog__headerbtn {
+    top: 15px;
+    right: 15px;
+  }
 
   .el-dialog__close {
     font-weight: 800;