smartxtrader 3.8.1-xm.0

package/src/sass/static/guide.enjoyhint.scss

@@ -0,0 +1,308 @@
+@font-face {
+    font-family: 'casino_handregular';
+    src: url('../download/fonts/guide/casino_hand-webfont.eot');
+    /* stylelint-disable */
+    src: url('../download/fonts/guide/casino_hand-webfont.eot?#iefix') format('embedded-opentype'),
+        url('../download/fonts/guide/casino_hand-webfont.woff') format('woff'),
+        url('../download/fonts/guide/casino_hand-webfont.ttf') format('truetype'),
+        url('../download/fonts/guide/casino_hand-webfont.svg#casino_handregular') format('svg');
+    /* stylelint-enable */
+    font-weight: 400;
+    font-style: normal;
+}
+
+.enjoyhint {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1010;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.enjoyhint_hide {
+    display: none;
+}
+
+.enjoyhint_disable_events {
+    position: absolute;
+    width: 2000px;
+    height: 1500px;
+    z-index: 1011;
+    pointer-events: all;
+}
+
+.enjoyhint_next_btn {
+    position: absolute;
+    z-index: 1012;
+    pointer-events: all;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    /*width: 100px;
+    height: 40px;*/
+    cursor: pointer;
+    margin: 0 auto;
+    /*border: 2px solid #1ecd97;
+    -webkit-border-radius: 40px;
+    border-radius: 40px;
+    font: normal normal normal 17px/40px "Advent Pro", Helvetica, sans-serif;
+    color: #1ecd97;*/
+    text-align: center;
+    -o-text-overflow: clip;
+    text-overflow: clip;
+    letter-spacing: 1px;
+    // background: 0 0;
+    -webkit-transition: background-color 00.3s cubic-bezier(0, 0, 0, 0), color 00.3s cubic-bezier(0, 0, 0, 0), width 00.3s cubic-bezier(0, 0, 0, 0), border-width 00.3s cubic-bezier(0, 0, 0, 0), border-color 00.3s cubic-bezier(0, 0, 0, 0);
+    -moz-transition: background-color 00.3s cubic-bezier(0, 0, 0, 0), color 00.3s cubic-bezier(0, 0, 0, 0), width 00.3s cubic-bezier(0, 0, 0, 0), border-width 00.3s cubic-bezier(0, 0, 0, 0), border-color 00.3s cubic-bezier(0, 0, 0, 0);
+    -o-transition: background-color 00.3s cubic-bezier(0, 0, 0, 0), color 00.3s cubic-bezier(0, 0, 0, 0), width 00.3s cubic-bezier(0, 0, 0, 0), border-width 00.3s cubic-bezier(0, 0, 0, 0), border-color 00.3s cubic-bezier(0, 0, 0, 0);
+    transition: background-color 00.3s cubic-bezier(0, 0, 0, 0), color 00.3s cubic-bezier(0, 0, 0, 0), width 00.3s cubic-bezier(0, 0, 0, 0), border-width 00.3s cubic-bezier(0, 0, 0, 0), border-color 00.3s cubic-bezier(0, 0, 0, 0);
+    padding: 4px 16px;
+    height: 32px;
+    font-size: $FONT_SIZE_S;
+    font-weight: bold;
+}
+
+.enjoyhint_next_btn:hover {
+    /*color: rgba(255, 255, 255, 1);
+    background: #1ecd97;*/
+}
+
+.enjoyhint_next_btn:active {
+    /*border: 2px solid rgba(33, 224, 163, 1);
+    background: rgba(33, 224, 163, 1);*/
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    transition: none;
+}
+
+.enjoyhint_skip_btn {
+    position: absolute;
+    z-index: 1012;
+    pointer-events: all;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    /*width: 100px;
+    height: 40px;*/
+    cursor: pointer;
+    margin: 0 auto;
+    /*border: 2px solid #1ecd97;
+    -webkit-border-radius: 40px;
+    border-radius: 40px;
+    font: normal normal normal 17px/40px "Advent Pro", Helvetica, sans-serif;
+    color: #1ecd97;*/
+    text-align: center;
+    -o-text-overflow: clip;
+    text-overflow: clip;
+    letter-spacing: 1px;
+    background: 0 0;
+    -webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
+    -moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
+    -o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
+    transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
+}
+
+.enjoyhint_skip_btn:hover {
+    /*color: rgba(255, 255, 255, 1);
+    background: #1ecd97;*/
+}
+
+.enjoyhint_skip_btn:active {
+    /*border: 2px solid rgba(33, 224, 163, 1);
+    background: rgba(33, 224, 163, 1);*/
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    transition: none;
+}
+
+.enjoyhint_close_btn {
+    display: inline-block;
+    position: absolute;
+    z-index: 1012;
+    pointer-events: all;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    width: 0.24em;
+    height: 0.24em;
+    -webkit-border-radius: 1em;
+    border-radius: 1em;
+    font: 400 8em/normal 'Arial', 'Helvetica', sans-serif;
+    color: rgba(0, 0, 0, 1);
+    -o-text-overflow: clip;
+    text-overflow: clip;
+    border: none;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' d='M3.707 2.293L8 6.587l4.293-4.294c.39-.39 1.023-.39 1.414 0 .39.39.39 1.023 0 1.414L9.414 8.001l4.293 4.295c.39.39.39 1.024 0 1.414-.39.39-1.024.39-1.414 0L8 9.416 3.707 13.71c-.39.39-1.023.39-1.414 0-.39-.39-.39-1.023 0-1.414l4.292-4.295-4.292-4.294c-.39-.39-.39-1.024 0-1.414.39-.39 1.024-.39 1.414 0z'/%3E%3C/svg%3E%0A") no-repeat center;
+}
+
+// .enjoyhint_close_btn:before {
+//     display: inline-block;
+//     -webkit-box-sizing: content-box;
+//     -moz-box-sizing: content-box;
+//     box-sizing: content-box;
+//     width: 29px;
+//     height: 2px;
+//     position: absolute;
+//     content: '';
+//     top: 16px;
+//     left: 3px;
+//     border: none;
+//     font: normal 100%/normal 'Arial', 'Helvetica', sans-serif;
+//     color: rgba(0, 0, 0, 1);
+//     -o-text-overflow: clip;
+//     text-overflow: clip;
+//     background: $COLOR_ORANGE;
+//     text-shadow: none;
+//     -webkit-transform: rotateZ(45deg);
+//     transform: rotateZ(45deg);
+// }
+
+// .enjoyhint_close_btn:after {
+//     display: inline-block;
+//     -webkit-box-sizing: content-box;
+//     -moz-box-sizing: content-box;
+//     box-sizing: content-box;
+//     width: 29px;
+//     height: 2px;
+//     position: absolute;
+//     content: '';
+//     top: 16px;
+//     left: 3px;
+//     border: none;
+//     font: normal 100%/normal 'Arial', 'Helvetica', sans-serif;
+//     color: rgba(0, 0, 0, 1);
+//     -o-text-overflow: clip;
+//     text-overflow: clip;
+//     background: $COLOR_ORANGE;
+//     text-shadow: none;
+//     -webkit-transform: rotateZ(-45deg);
+//     transform: rotateZ(-45deg);
+// }
+
+.enjoyhint_close_btn:hover {
+    // color: rgba(255, 255, 255, 1);
+    // background: $COLOR_WHITE;
+    cursor: pointer;
+}
+
+// .enjoyhint_close_btn:active {
+//     border: 2px solid $COLOR_WHITE;
+//     background: $COLOR_WHITE;
+//     -webkit-transition: none;
+//     -moz-transition: none;
+//     -o-transition: none;
+//     transition: none;
+// }
+
+.enjoyhint_btn {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    width: 150px;
+    height: 40px;
+    cursor: pointer;
+    margin: 0 auto;
+    border: 2px solid $COLOR_GREEN;
+    -webkit-border-radius: 40px;
+    border-radius: 40px;
+    font: normal normal normal 17px/40px 'Advent Pro', 'Helvetica', sans-serif;
+    color: $COLOR_GREEN;
+    text-align: center;
+    -o-text-overflow: clip;
+    text-overflow: clip;
+    letter-spacing: 1px;
+    background: 0 0;
+    -webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
+    -moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
+    -o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
+    transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
+}
+
+.enjoyhint_btn:hover {
+    color: rgba(255, 255, 255, 1);
+    background: $COLOR_GREEN;
+}
+
+.enjoyhint_btn:active {
+    border: 2px solid rgba(33, 224, 163, 1);
+    background: rgba(33, 224, 163, 1);
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    transition: none;
+}
+
+.enjoyhint div.canvas-container {
+    position: absolute;
+}
+
+.enjoyhint_canvas {
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+#kinetic_container {
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.enjoyhint_svg_wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    -webkit-transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
+    -moz-transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
+    transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+.enjoyhint_svg_wrapper svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.enjoyhint_svg_transparent .enjoy_hint_label, .enjoyhint_svg_transparent .enjoyhint_svg_wrapper {
+    opacity: 0;
+}
+
+.enjoy_hint_label {
+    position: absolute;
+    color: $COLOR_WHITE;
+    z-index: 107;
+    -webkit-transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
+    -moz-transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
+    transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
+    font-family: 'IBM Plex Sans';
+    font-size: 20px;
+    line-height: 1.6;
+}
+
+.enjoy_hint_label h1 {
+    margin-bottom: 0.4em;
+    font-family: 'IBM Plex Sans';
+    font-size: 32px;
+    font-weight: bold;
+    line-height: 1.56;
+    color: $COLOR_WHITE;
+}
+
+div.kineticjs-content {
+    position: absolute !important;
+}

package/src/sass/static/guide.scss

@@ -0,0 +1,31 @@
+#onboarding-container {
+    @include BIDIR_VALUE(display, inline-block, none);
+    @include BIDIR_PROP(margin-left, margin-right, 15px);
+
+    #onboarding-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+
+        .quill-button__start-icon svg {
+            width: 22px;
+            height: 22px;
+        }
+    }
+}
+
+@media (max-width: 480px) {
+    #onboarding-container {
+        display: none;
+    }
+}
+
+/* trading page */
+#trading_socket_container {
+    #onboarding-container {
+        float: if($LANGUAGE_DIRECTION == ltr, right, left);
+        height: 33px;
+        line-height: 33px;
+    }
+}

package/src/sass/static/pages.scss

@@ -0,0 +1,299 @@
+// styling for static pages that are too short or simple to need their own styling page
+
+.box-row {
+    border-bottom: 1px solid $COLOR_GRAY;
+
+    &__box {
+        padding: 2rem;
+    }
+    &__box:not(:last-child) {
+        border-right: 1px solid $COLOR_GRAY;
+    }
+    &__img {
+        height: 50px;
+    }
+    &--top {
+        &__box {
+            padding-top: 1rem;
+        }
+    }
+    &--bottom {
+        border: none;
+
+        &__box {
+            padding-bottom: 0;
+        }
+    }
+    &--no-border, &--no-border &__box {
+        border: none;
+    }
+    @media screen and (max-width: 480px) {
+        &, &__box {
+            border: none;
+        }
+    }
+}
+
+.steps {
+    @media (max-width: 480px) {
+        flex-direction: column;
+
+        .step:not(:first-child) {
+            margin-top: 2rem;
+        }
+    }
+}
+
+.box-inlay-borders {
+    .border-right-top {
+        min-height: 200px;
+    }
+    .border-right-bottom {
+        min-height: 300px;
+    }
+    .border-right-top, .border-right-bottom {
+        @include BIDIR_PROP(border-right, border-left, 1px solid $COLOR_GRAY);
+    }
+    @media screen and (max-width: 480px) {
+        .border-bottom, .border-right-top, .border-right-bottom {
+            border: none;
+        }
+    }
+}
+
+.box-overlay-image {
+    margin-bottom: 2rem;
+
+    .box-wrapper {
+        display: flex;
+        position: relative;
+        flex-direction: row;
+        align-items: center;
+
+        &.right {
+            flex-direction: row-reverse;
+
+            .box-content {
+                left: 25%;
+            }
+        }
+        .box-img {
+            width: 60%;
+        }
+        .box-content {
+            padding: 1rem 0;
+            border: 1px solid $COLOR_GRAY;
+            width: 300px;
+            background: $COLOR_WHITE;
+            left: 45%;
+            position: absolute;
+
+            h4 {
+                text-align: left;
+                margin: 0 1rem;
+            }
+            .box-headerline {
+                border-color: $COLOR_ORANGE;
+                border-bottom-width: 2px;
+                margin: 10px 1rem 0;
+                width: 75px;
+            }
+            .box-text {
+                text-align: left;
+                margin: 0.5rem 1rem;
+            }
+        }
+        @media screen and (max-width: 768px) {
+            flex-direction: column;
+
+            &.right {
+                flex-direction: column;
+
+                .box-content {
+                    left: unset;
+                }
+            }
+            .box-img {
+                width: 100%;
+            }
+            .box-content {
+                position: relative;
+                width: 100%;
+                left: unset;
+            }
+        }
+    }
+}
+
+.faded {
+    color: $COLOR_GRAY_SHADE;
+    font-size: $FONT_SIZE_N;
+    font-weight: 100;
+    margin-bottom: 0;
+}
+
+#account_currency {
+    display: flex;
+    align-items: center;
+    background-color: $COLOR_LIGHT_GRAY;
+    padding: 30px;
+    border-radius: 4px;
+
+    &_img {
+        width: 80px;
+        height: 80px;
+        margin-right: 20px;
+        @media screen and (max-width: 500px) {
+            display: none;
+        }
+    }
+    &_current {
+        color: $primaryBrandColor;
+        font-weight: 300;
+    }
+    &_hint {
+        font-size: 1rem;
+        margin: 10px 0 0;
+    }
+}
+
+._elevio_launcher {
+    display: none;
+
+    ._6byvm._zvdyj {
+        bottom: 8px !important;
+        right: 8px !important;
+    }
+}
+
+// override elevio styles for both in page contents and popup
+body #_elev_io {
+    * {
+        font-family: $FONT-STACK;
+    }
+    ._nr4k9 { // suggestion title
+        display: block;
+        margin-bottom: 20px;
+        color: $COLOR_BLUE;
+        font-size: 22px;
+        font-weight: 300;
+    }
+    ._1b4vy:hover { // category titles
+        color: $COLOR_BLUE;
+    }
+    ._elevio_articlelink > div { // links
+        color: $COLOR_BLUE;
+        text-decoration: none;
+        font-weight: 700;
+
+        > div {
+            background: none;
+        }
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.page_404 .big-error-code {
+    color: $COLOR_GRAY;
+    font-size: 10em;
+}
+
+#pa_list #accordion {
+    table {
+        width: 80%;
+        margin-left: auto;
+        margin-right: auto;
+
+        td {
+            padding: 10px 4px;
+
+            &:nth-of-type(1) {
+                width: 40%;
+            }
+        }
+    }
+}
+
+#set_currency {
+    #frm_set_currency {
+        .section-divider {
+            max-width: 500px;
+        }
+    }
+    .currency_list > div {
+        padding: 15px;
+        background-image: url('../images/pages/set_currency/tick-normal.svg');
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        line-height: 30px;
+
+        &:hover {
+            cursor: pointer;
+        }
+        &.selected {
+            background-image: url('../images/pages/set_currency/tick-selected.svg');
+        }
+        .currency-name {
+            line-height: 22px;
+            padding: 4px 0;
+        }
+    }
+    .list-style-inside {
+        list-style-position: inside;
+    }
+}
+
+.lightbox #set_currency {
+    padding: 25px;
+    padding-bottom: 4px;
+    width: 40em;
+
+    #set_currency_text {
+        margin-top: 0;
+    }
+    #fiat_currencies, #crypto_currencies {
+        + div {
+            max-width: 30em;
+        }
+    }
+    .section-divider {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    #submit_section {
+        margin-top: 20px;
+        margin-bottom: 16px;
+    }
+}
+
+#client-limits img {
+    margin-left: 5px;
+    margin-bottom: 3px;
+}
+
+.select-options {
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+    }
+    &::-webkit-scrollbar:vertical {
+        width: 11px;
+    }
+    &::-webkit-scrollbar:horizontal {
+        height: 11px;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 8px;
+        border: 2px solid $COLOR_WHITE; /* should match background, can't be transparent */
+        background-color: $COLOR_LIGHT_GRAY;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: $COLOR_WHITE;
+        border-radius: 8px;
+    }
+}
+
+#self_exclusion_dialog #dialog_content {
+    max-width: 496px;
+}

package/src/sass/static.scss

@@ -0,0 +1,5 @@
+@import '_common/common_import';
+
+@import 'static/guide.enjoyhint';
+@import 'static/guide';
+@import 'static/pages';

package/src/templates/.eslintrc.js

@@ -0,0 +1,6 @@
+
+module.exports = {
+    rules: {
+        'react/prop-types': 0,
+    },
+};