Reports redesign

package.json

@@ -51,8 +51,8 @@
     "connect-modrewrite": "0.9.0",
     "deep-diff": "0.3.8",
     "emphasize": "2.0.0",
-    "enzyme": "3.3.0",
-    "enzyme-adapter-react-16": "1.8.0",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
     "eslint-config-airbnb-base": "13.1.0",
     "eslint-config-binary": "1.0.2",
     "eslint-config-prettier": "2.9.0",

src/javascript/_common/base/login.js

@@ -24,12 +24,14 @@ const Login = (() => {
         const marketing_queries  = `&signup_device=${signup_device}${date_first_contact ? `&date_first_contact=${date_first_contact}` : ''}`;
         const default_binary_url = `https://oauth.binary.com/oauth2/authorize?app_id=${getAppId()}&l=${language}${marketing_queries}`;
 
-        return ((server_url && /qa/.test(server_url)) ?
-            `https://${server_url}/oauth2/authorize?app_id=${getAppId()}&l=${language}${marketing_queries}` :
-            getAppId() === domain_app_ids['deriv.app'] ?
-                default_binary_url
-                : urlForCurrentDomain(default_binary_url)
-        );
+        if (server_url && /qa/.test(server_url)) {
+            return `https://${server_url}/oauth2/authorize?app_id=${getAppId()}&l=${language}${marketing_queries}`;
+        }
+        if (getAppId === domain_app_ids['deriv.app']) {
+            return default_binary_url;
+        }
+
+        return urlForCurrentDomain(default_binary_url);
     };
 
     // TODO: update this to handle logging into /app/ url

src/javascript/_common/url.js

@@ -46,7 +46,7 @@ const Url = (() => {
             if (/localhost|binary\.sx/.test(domain)) {
                 domain = `https://binary.com/${url_lang}/`;
             } else {
-                domain = domain.replace(/deriv\.app/, 'binary\.com');
+                domain = domain.replace(/deriv\.app/, 'binary.com');
             }
         }
         const new_url = `${domain}${(normalizePath(path) || 'home')}.html${(pars ? `?${pars}` : '')}`;

src/javascript/app/App/Components/Elements/Calendar/calendar-footer.jsx

@@ -1,9 +1,7 @@
-import PropTypes             from 'prop-types';
-import React                 from 'react';
-import {
-    Icon,
-    IconCalendarToday }      from 'Assets/Common';
-import { localize }          from '_common/localize';
+import PropTypes    from 'prop-types';
+import React        from 'react';
+import Icon         from 'Assets/icon.jsx';
+import { localize } from '_common/localize';
 
 const CalendarFooter = ({
     footer,
@@ -20,7 +18,7 @@ const CalendarFooter = ({
                 { has_range_selection && <span className='calendar__text'>{ `${!is_minimum ? localize('Duration: ') : ''}${duration_date}` }</span> }
                 { has_today_btn &&
                     <Icon
-                        icon={IconCalendarToday}
+                        icon='IconCalendarToday'
                         className='calendar__icon'
                         onClick={onClick}
                     />

src/javascript/app/App/Components/Elements/Calendar/calendar-header.jsx

@@ -1,23 +1,18 @@
-import classNames           from 'classnames';
-import PropTypes            from 'prop-types';
-import React                from 'react';
-import {
-    Icon,
-    IconChevronDoubleLeft,
-    IconChevronDoubleRight,
-    IconChevronLeft,
-    IconChevronRight }      from 'Assets/Common';
-import { month_headers }    from 'Constants/date-time';
+import classNames        from 'classnames';
+import PropTypes         from 'prop-types';
+import React             from 'react';
+import Icon              from 'Assets/icon.jsx';
+import { month_headers } from 'Constants/date-time';
 import {
     addMonths,
     addYears,
     subMonths,
     subYears,
-    toMoment }              from 'Utils/Date';
-import CalendarButton       from './calendar-button.jsx';
+    toMoment }           from 'Utils/Date';
+import CalendarButton    from './calendar-button.jsx';
 import {
     getCentury,
-    getDecade }             from './helper';
+    getDecade }          from './helper';
 
 const CalendarHeader = ({
     calendar_date,
@@ -56,7 +51,7 @@ const CalendarHeader = ({
                 })}
                 onClick={is_prev_year_disabled ? undefined : () => navigateTo(subYears(calendar_date, num_of_years))}
             >
-                <Icon icon={IconChevronDoubleLeft} className='calendar__icon' />
+                <Icon icon='IconChevronDoubleLeft' className='calendar__icon' />
             </CalendarButton>
             <CalendarButton
                 className={classNames('calendar__nav calendar__nav--prev-month', {
@@ -65,7 +60,7 @@ const CalendarHeader = ({
                 is_hidden={!is_date_view}
                 onClick={is_prev_month_disabled ? undefined : () => navigateTo(subMonths(calendar_date, 1))}
             >
-                <Icon icon={IconChevronLeft} className='calendar__icon' />
+                <Icon icon='IconChevronLeft' className='calendar__icon' />
             </CalendarButton>
 
             <React.Fragment>
@@ -106,15 +101,15 @@ const CalendarHeader = ({
                 is_hidden={!is_date_view}
                 onClick={is_next_month_disabled ? undefined : () => navigateTo(addMonths(calendar_date, 1))}
             >
-                <Icon icon={IconChevronRight} className='calendar__icon' />
+                <Icon icon='IconChevronRight' className='calendar__icon' />
             </CalendarButton>
             <CalendarButton
                 className={classNames('calendar__nav calendar__nav--next-year', {
                     'calendar__nav--disabled': is_next_year_disabled,
                 })}
                 onClick={is_next_year_disabled ? undefined : () => navigateTo(addYears(calendar_date, num_of_years))}
             >
-                <Icon icon={IconChevronDoubleRight} className='calendar__icon' />
+                <Icon icon='IconChevronDoubleRight' className='calendar__icon' />
             </CalendarButton>
         </div>
     );

src/javascript/app/App/Components/Elements/Calendar/panels/calendar-days.jsx

@@ -123,7 +123,7 @@ const getDays = ({
                         message={message}
                     />
                 }
-                {moment_date.date()}
+                <span className='calendar__cell-date'>{moment_date.date()}</span>
             </span>
         );
     });

src/javascript/app/App/Components/Elements/ContractAudit/contract-audit.jsx

@@ -1,9 +1,9 @@
-import classNames              from 'classnames';
-import moment                  from 'moment';
-import PropTypes               from 'prop-types';
-import React, { Component }    from 'react';
-import Localize                from 'App/Components/Elements/localize.jsx';
-import { Icon, IconArrowBold } from 'Assets/Common';
+import classNames           from 'classnames';
+import moment               from 'moment';
+import PropTypes            from 'prop-types';
+import React, { Component } from 'react';
+import Localize             from 'App/Components/Elements/localize.jsx';
+import Icon                 from 'Assets/icon.jsx';
 
 const Pair = ({ value, label }) => (
     <div className='pair'>
@@ -66,7 +66,7 @@ class ContractAudit extends Component {
                     onClick={this.toggleVisibility.bind(this)}
                 >
                     <Icon
-                        icon={IconArrowBold}
+                        icon='IconArrowBold'
                         className={classNames('contract-audit__arrow', {
                             'contract-audit__arrow--is-open': this.state.is_visible,
                         })}

src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx

@@ -4,7 +4,7 @@ import React, { Component }  from 'react';
 import { withRouter }        from 'react-router';
 import { CSSTransition }     from 'react-transition-group';
 import { localize }          from '_common/localize';
-import { Icon, IconBack }    from 'Assets/Common';
+import Icon                  from 'Assets/icon.jsx';
 import Localize              from 'App/Components/Elements/localize.jsx';
 import { UnderlyingIcon }    from 'App/Components/Elements/underlying-icon.jsx';
 import Button                from 'App/Components/Form/button.jsx';
@@ -173,7 +173,7 @@ class ContractDrawer extends Component {
                     className='contract-drawer__heading'
                     onClick={() => this.props.history.goBack()}
                 >
-                    <Icon icon={IconBack} />
+                    <Icon icon='IconBack' />
                     <h2><Localize str={this.props.heading || 'Contract'} /></h2>
                 </div>
                 <div className='contract-drawer__body'>{body_content}</div>

src/javascript/app/App/Components/Elements/Drawer/drawer-header.jsx

@@ -2,9 +2,7 @@ import classNames    from 'classnames';
 import PropTypes     from 'prop-types';
 import React         from 'react';
 import { localize }  from '_common/localize';
-import {
-    Icon,
-    IconClose }      from 'Assets/Common';
+import Icon          from 'Assets/icon.jsx';
 
 export const DrawerHeader = ({
     alignment,
@@ -16,7 +14,7 @@ export const DrawerHeader = ({
             {alignment && alignment === 'right' ?
                 <div className={drawer_header_class}>
                     <div className='drawer__icons drawer__icons-btn-close' onClick={closeBtn}>
-                        <Icon icon={IconClose} className='drawer__icons-icon-close' />
+                        <Icon icon='IconClose' className='drawer__icons-icon-close' />
                     </div>
                     <div className='drawer__notifications'>
                         <h4 className='drawer__notifications-header'>{localize('all notifications')}</h4>
@@ -25,7 +23,7 @@ export const DrawerHeader = ({
                 :
                 <div className={drawer_header_class}>
                     <div className='drawer__icons drawer__icons-btn-close' onClick={closeBtn}>
-                        <Icon icon={IconClose} className='drawer__icons-icon-close' />
+                        <Icon icon='IconClose' className='drawer__icons-icon-close' />
                     </div>
                     <div className='drawer__icons drawer__brand-logo'>
                         <div className='drawer__image' />