+
+
+ {has_error_or_not_loaded
+ ? basis
+ : localize('[_1]', proposal_info.obj_contract_basis.text)
+ }
- :
-
-
-
- {has_error_or_not_loaded
- ? basis
- : localize('[_1]', proposal_info.obj_contract_basis.text)
- }
-
-
- {!has_error_or_not_loaded &&
-
- }
-
- {is_visible &&
-
- {(!has_error_or_not_loaded && has_increased !== null) &&
-
- }
-
- }
-
-
+
+ {!has_error_or_not_loaded &&
+
+ }
- }
-
+ {is_visible &&
+
+ {(!has_error_or_not_loaded && has_increased !== null) &&
+
+ }
+
+ }
+
+
+
);
};
ContractInfo.propTypes = {
diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss
index 5e45fcca87604..222e61600023f 100644
--- a/src/sass/app_2/modules/trading.scss
+++ b/src/sass/app_2/modules/trading.scss
@@ -67,16 +67,6 @@
}
}
}
- &__loader {
- width: 92px;
- height: 8px;
- margin: 3.5px 0;
- @extend .loader;
-
- &--loading {
- @extend .loader--loading;
- }
- }
&__error {
justify-content: center;
align-items: center;
@@ -144,11 +134,26 @@
}
}
}
+ &--animated--slide {
+ width: 92px;
+ height: 8px;
+ margin: 3.5px 0;
+ @extend .loader;
+
+ .trade-container__price-info-basis {
+ @extend .loader--loading;
+ }
+ }
+ &--animated--fade &-value {
+ opacity: 0;
+ }
&-value {
@include typeface(--small-left-bold-black);
@include themify($themes) {
color: themed('text_color');
}
+ opacity: 1;
+ transition: 0.3s;
}
&-basis {
@include typeface(--paragraph-left-normal-black);
@@ -489,7 +494,7 @@
}
&--animated--fade-show .btn-purchase__info--right .btn-purchase__text {
opacity: 1;
- transition: 1s;
+ transition: 0.3s;
}
&__shadow-wrapper:hover:after {
opacity: 0;
From 1b02ff73dfc6d1cbce577f0afac0ee0817e07554 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 30 Apr 2019 15:39:47 +0800
Subject: [PATCH 08/27] fix button bobbing
---
.../Trading/Components/Form/Purchase/contract-info.jsx | 4 ++--
src/sass/app_2/modules/trading.scss | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index c34726d2a66eb..a5a841b791d1b 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -23,8 +23,8 @@ const ContractInfo = ({
'trade-container__price-info',
{
'trade-container__price-info--disabled' : has_error_or_not_loaded,
- 'trade-container__price-info--animated--slide': is_loading && !is_param_change,
- 'trade-container__price-info--animated--fade' : is_loading && is_param_change,
+ 'trade-container__price-info--animated--slide': is_loading && is_param_change,
+ 'trade-container__price-info--animated--fade' : is_loading && !is_param_change,
})}
>
diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss
index 222e61600023f..93f94e56594ff 100644
--- a/src/sass/app_2/modules/trading.scss
+++ b/src/sass/app_2/modules/trading.scss
@@ -137,7 +137,7 @@
&--animated--slide {
width: 92px;
height: 8px;
- margin: 3.5px 0;
+ margin: 6.5px 0;
@extend .loader;
.trade-container__price-info-basis {
From 81c631de90cb52dcd4c0fae62e073d94d083b6e1 Mon Sep 17 00:00:00 2001
From: negar
Date: Tue, 30 Apr 2019 10:20:58 +0800
Subject: [PATCH 09/27] add the beta logo and update binarynex
---
src/images/app_2/header/symbol.svg | 2 +-
.../App/Components/Layout/Header/menu-links.jsx | 2 +-
.../app_2/App/Constants/header-links.js | 14 ++++++--------
src/sass/app_2/_common/layout/header.scss | 15 +++++++++++++++
4 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/src/images/app_2/header/symbol.svg b/src/images/app_2/header/symbol.svg
index cc12dcface03f..b5339b7e64dab 100644
--- a/src/images/app_2/header/symbol.svg
+++ b/src/images/app_2/header/symbol.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/javascript/app_2/App/Components/Layout/Header/menu-links.jsx b/src/javascript/app_2/App/Components/Layout/Header/menu-links.jsx
index e1f60d65c8ea8..ce1b44aea83f4 100644
--- a/src/javascript/app_2/App/Components/Layout/Header/menu-links.jsx
+++ b/src/javascript/app_2/App/Components/Layout/Header/menu-links.jsx
@@ -16,7 +16,7 @@ const MenuLinks = ({ is_logged_in, items }) => (
null
:
- {item.icon}{item.text}
+ {item.icon}{item.text}{item.logo}
))
}
diff --git a/src/javascript/app_2/App/Constants/header-links.js b/src/javascript/app_2/App/Constants/header-links.js
index b804b8c8db9d3..bcff4bc3f4980 100644
--- a/src/javascript/app_2/App/Constants/header-links.js
+++ b/src/javascript/app_2/App/Constants/header-links.js
@@ -1,14 +1,12 @@
-import React from 'react';
-import { localize } from '_common/localize';
-import {
- // IconStatement,
- IconTrade } from 'Assets/Header/NavBar/index';
-import { routes } from 'Constants/index';
+import React from 'react';
+import { localize } from '_common/localize';
+// import { IconStatement } from 'Assets/Header/NavBar/index';
+import { routes } from 'Constants/index';
const header_links = [
{
- icon : ,
- text : localize('Trade'),
+ logo : {localize('BETA')}
,
+ text : localize('BinaryNex'),
link_to: routes.trade,
},
// {
diff --git a/src/sass/app_2/_common/layout/header.scss b/src/sass/app_2/_common/layout/header.scss
index 518c07f83835d..3d1a48032e3ec 100644
--- a/src/sass/app_2/_common/layout/header.scss
+++ b/src/sass/app_2/_common/layout/header.scss
@@ -41,6 +41,7 @@
display: flex;
justify-content: center;
align-items: center;
+ padding-right: 0.8em;
}
&--notify-toggle {
order: 2;
@@ -128,6 +129,20 @@
}
}
}
+ &__logo {
+ background-color: $COLOR_RED;
+ border-radius: 10px;
+ color: $COLOR_WHITE;
+ display: inline-block;
+ font-size: 0.9em;
+ font-weight: normal;
+ height: 20px;
+ line-height: 1.5;
+ margin-left: 0.6em;
+ text-align: center;
+ vertical-align: middle;
+ width: 50px;
+ }
&__icon {
margin-right: 0.8em;
}
From 7e9c4c61ad374f0fa8e3c578777def070e16d355 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 30 Apr 2019 15:41:48 +0800
Subject: [PATCH 10/27] fix only show slide when first load
---
.../Trading/Components/Form/Purchase/contract-info.jsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index a5a841b791d1b..c34726d2a66eb 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -23,8 +23,8 @@ const ContractInfo = ({
'trade-container__price-info',
{
'trade-container__price-info--disabled' : has_error_or_not_loaded,
- 'trade-container__price-info--animated--slide': is_loading && is_param_change,
- 'trade-container__price-info--animated--fade' : is_loading && !is_param_change,
+ 'trade-container__price-info--animated--slide': is_loading && !is_param_change,
+ 'trade-container__price-info--animated--fade' : is_loading && is_param_change,
})}
>
From 9a4ef91dc4937de166d618fb0186ba3c1be6aa98 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 30 Apr 2019 16:39:36 +0800
Subject: [PATCH 11/27] is_param_change -> should_fade
---
.../Trading/Components/Elements/purchase-button.jsx | 12 ++++++------
.../Components/Elements/purchase-fieldset.jsx | 10 +++++-----
.../Components/Form/Purchase/contract-info.jsx | 6 +++---
3 files changed, 14 insertions(+), 14 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
index 7823ceff7978c..a8fae0449ab9e 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
@@ -12,12 +12,12 @@ const PurchaseButton = ({
is_disabled,
is_high_low,
is_loading,
- is_param_change,
+ should_fade,
onClickPurchase,
type,
}) => {
const getIconType = () => {
- if (!is_param_change && is_loading) return '';
+ if (!should_fade && is_loading) return '';
return (is_high_low) ? `${type.toLowerCase()}_barrier` : type.toLowerCase();
};
@@ -29,9 +29,9 @@ const PurchaseButton = ({
'btn-purchase',
{
'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading,
- 'btn-purchase--animated--slide' : !is_param_change && is_loading,
- 'btn-purchase--animated--fade' : is_param_change && is_loading,
- 'btn-purchase--animated--fade-show': is_param_change && !is_loading,
+ 'btn-purchase--animated--slide' : !should_fade && is_loading,
+ 'btn-purchase--animated--fade' : should_fade && is_loading,
+ 'btn-purchase--animated--fade-show': should_fade && !is_loading,
})}
has_effect
onClick={() => { onClickPurchase(info.id, info.stake, type); }}
@@ -46,7 +46,7 @@ const PurchaseButton = ({
- {(!is_param_change && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
+ {(!should_fade && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
index a4bbb9b2645c3..28d8a3a90bbc1 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
@@ -11,11 +11,11 @@ import PurchaseButton from 'Modules/Trading/Components/Elements/purchase-button.
class PurchaseFieldset extends React.PureComponent {
state = {
- show_tooltip : false,
- is_param_change: false,
+ show_tooltip: false,
+ should_fade : false,
}
- componentDidUpdate = () => this.setState({ is_param_change: true });
+ componentDidUpdate = () => this.setState({ should_fade: true });
onMouseEnter = () => this.setState({ show_tooltip: true });
onMouseLeave = () => this.setState({ show_tooltip: false });
@@ -47,7 +47,7 @@ class PurchaseFieldset extends React.PureComponent {
is_high_low={is_high_low}
is_loading={is_loading}
onClickPurchase={onClickPurchase}
- is_param_change={this.state.is_param_change}
+ should_fade={this.state.should_fade}
type={type}
/>
);
@@ -66,7 +66,7 @@ class PurchaseFieldset extends React.PureComponent {
proposal_info={info}
has_increased={info.has_increased}
is_loading={is_loading}
- is_param_change={this.state.is_param_change}
+ should_fade={this.state.should_fade}
is_visible={!is_contract_mode}
/>
{
@@ -23,8 +23,8 @@ const ContractInfo = ({
'trade-container__price-info',
{
'trade-container__price-info--disabled' : has_error_or_not_loaded,
- 'trade-container__price-info--animated--slide': is_loading && !is_param_change,
- 'trade-container__price-info--animated--fade' : is_loading && is_param_change,
+ 'trade-container__price-info--animated--slide': is_loading && !should_fade,
+ 'trade-container__price-info--animated--fade' : is_loading && should_fade,
})}
>
From 427fda504a1848c862485cbd0658dd19d80c3256 Mon Sep 17 00:00:00 2001
From: Sash
Date: Tue, 30 Apr 2019 12:17:05 +0300
Subject: [PATCH 12/27] mobile fixes
---
src/sass/landing_pages/grid_lp.scss | 9 ++++++++-
src/templates/landing_pages/grid_landing.jsx | 6 +++---
2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/src/sass/landing_pages/grid_lp.scss b/src/sass/landing_pages/grid_lp.scss
index f46e64bd39697..5dfe3d7e29e7a 100644
--- a/src/sass/landing_pages/grid_lp.scss
+++ b/src/sass/landing_pages/grid_lp.scss
@@ -184,7 +184,7 @@
}
.header-sub {
font-size: 24px;
- line-height: 50px;
+ line-height: 36px;
font-weight: bold;
}
.home-header-content {
@@ -219,6 +219,13 @@
display: block;
}
+@media (max-width: 480px) {
+ .block-xs {
+ display: block;
+ margin-top: 10px;
+ }
+}
+
@media only screen and (max-width: 1024px) {
.binary-grid-landing {
.home--header {
diff --git a/src/templates/landing_pages/grid_landing.jsx b/src/templates/landing_pages/grid_landing.jsx
index f830b569c6018..35e025bdbce86 100644
--- a/src/templates/landing_pages/grid_landing.jsx
+++ b/src/templates/landing_pages/grid_landing.jsx
@@ -79,7 +79,7 @@ const gridLP = () => (
{('Limited risks')}
-
{('Get started with stakes as low as 10¢.')}
+
{('Get started with stakes as low as 50¢.')}