Merge pull request #75 from binary-com/dev

V20190521_0
binary-com · May 21, 2019 · ada4646 · ada4646
2 parents 55e81f9 + fa995e3
commit ada4646
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -126,7 +126,7 @@
     "react-router-dom": "5.0.0",
     "react-transition-group": "2.4.0",
     "sinon": "7.2.2",
-    "smartcharts-beta": "0.4.27",
+    "smartcharts-beta": "0.4.28",
     "tt-react-custom-scrollbars": "4.2.1-tt2",
     "url-polyfill": "1.0.9",
     "web-push-notifications": "3.2.15"

diff --git a/src/images/app/header/symbol.svg b/src/images/app/header/symbol.svg
diff --git a/src/javascript/app/App/Components/Layout/Header/menu-links.jsx b/src/javascript/app/App/Components/Layout/Header/menu-links.jsx
@@ -1,13 +1,9 @@
 import PropTypes      from 'prop-types';
 import React          from 'react';
-import Symbol         from 'Images/app/header/symbol.svg';
 import { BinaryLink } from '../../Routes';
 
 const MenuLinks = ({ is_logged_in, items }) => (
     <React.Fragment>
-        <div className='header__navbar-icons header__navbar-icons--deriv-logo'>
-            <Symbol width='30px' height='30px' />
-        </div>
         {!!items.length &&
         <div className='header__menu-links'>
             {
@@ -16,7 +12,12 @@ const MenuLinks = ({ is_logged_in, items }) => (
                         null
                         :
                         <BinaryLink key={idx} to={item.link_to} className='header__menu-link' active_class='header__menu-link--active'>
-                            <span title={item.text} className='header__menu-link-text'>{item.icon}{item.text}{item.logo}</span>
+                            {item.text &&
+                                <span title={item.text} className='header__menu-link-text'>{item.icon}{item.text}{item.logo}</span>
+                            }
+                            {item.image &&
+                                <span className='header__menu-link-text'>{item.image}{item.logo}</span>
+                            }
                         </BinaryLink>
                 ))
             }

diff --git a/src/javascript/app/App/Constants/header-links.js b/src/javascript/app/App/Constants/header-links.js
@@ -1,13 +1,15 @@
 import React           from 'react';
 import { localize }    from '_common/localize';
 import { Icon }        from 'Assets/Common';
-import { IconReports } from 'Assets/Header/NavBar/index';
+import {
+    IconReports,
+    IconDeriv }        from 'Assets/Header/NavBar/index';
 import { routes }      from 'Constants/index';
 
 const header_links = [
     {
         logo   : <div className='header__logo'>{localize('BETA')}</div>,
-        text   : localize('Deriv'),
+        image  : <Icon icon={IconDeriv} className='header__icon' />,
         link_to: routes.trade,
     },
     {

diff --git a/src/javascript/app/Assets/Header/NavBar/icon-deriv.jsx b/src/javascript/app/Assets/Header/NavBar/icon-deriv.jsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import PropTypes  from 'prop-types';
+import React      from 'react';
+
+const IconDeriv = ({ className }) => (
+    <svg className={classNames('inline-icon', className)} width='149' height='16' viewBox='0 0 149 16'>
+        <g fill='none' fillRule='nonzero'>
+            <path fill='#21CE99' d='M3.673.002V.02L9.78 7.945.004 15.868v.017h9.872a6.197 6.197 0 0 0 6.03-4.785l.817-3.533a6.177 6.177 0 0 0-1.191-5.229A6.204 6.204 0 0 0 10.695.002H3.673z' />
+            <path fill='#11825C' d='M9.774 7.96l-4.295 7.925H0z' />
+            <path className='color3-fill' d='M23.757.002h6.156c4.966 0 7.797 3.413 7.014 7.84v.045c-.784 4.44-4.825 7.893-9.79 7.893h-6.164L23.757.002zm3.929 12.64c2.845 0 5.103-1.92 5.596-4.71v-.045c.492-2.793-1.068-4.753-3.925-4.753h-2.685l-1.675 9.508h2.689zM41.637.002h11.92l-.545 3.096h-8.466l-.566 3.2h5.464l-.545 3.084h-5.465l-.585 3.316h8.578l-.545 3.084h-12.03zM64.996 10.138c2.137-.743 3.798-2.347 4.25-4.888v-.045c.262-1.493 0-2.726-.717-3.605C67.674.563 66.214 0 64.207 0H56.98l-2.779 15.77h3.476l2.234-12.638h3.453c1.693 0 2.597.766 2.334 2.253v.044c-.235 1.33-1.364 2.232-3.057 2.232h-2.619l3.782 8.106h4.062l-2.871-5.63zM73.694.002h3.476l-2.779 15.77h-3.476zM79.992.002h3.848l2.167 11.106L92.102.002h3.748l-9.193 15.883H83.57zM124.236 9.875c-.12-.004-.239.014-.352.051-.101.032-.197.076-.287.133a.775.775 0 0 0-.213.194l-.052.053v-.365h-.874v3.294h.874v-1.837a.722.722 0 0 1 .182-.52.584.584 0 0 1 .457-.181.522.522 0 0 1 .445.18c.112.15.167.335.156.521v1.863h.874v-2.097a1.298 1.298 0 0 0-.314-.924 1.156 1.156 0 0 0-.896-.365zM127.435 9.9a2.493 2.493 0 0 0-.678.08c-.187.053-.37.118-.55.194l-.05.028.234.701.064-.025c.144-.051.274-.105.428-.143.15-.038.303-.055.457-.051a.814.814 0 0 1 .535.155.497.497 0 0 1 .17.427 2.53 2.53 0 0 0-.3-.064 2.48 2.48 0 0 0-1.018.026 1.093 1.093 0 0 0-.428.213.945.945 0 0 0-.288.35 1.165 1.165 0 0 0-.103.482v-.002c-.001.158.034.314.103.456.066.125.155.236.263.327.11.093.239.16.378.194.148.044.301.066.455.066a1.38 1.38 0 0 0 .642-.143c.111-.06.217-.132.314-.213v.286h.855v-1.94a1.38 1.38 0 0 0-.365-1.03 1.524 1.524 0 0 0-1.118-.373zm-.144 2.723a.722.722 0 0 1-.39-.105.326.326 0 0 1-.144-.285v-.013a.343.343 0 0 1 .156-.299.893.893 0 0 1 .496-.117c.127 0 .254.012.378.038.105.026.195.039.274.064v.132a.445.445 0 0 1-.051.233.549.549 0 0 1-.159.183 1.07 1.07 0 0 1-.248.13 1.285 1.285 0 0 1-.312.039zM133.36 12.154l-.855-2.213h-.928l1.345 3.217a.602.602 0 0 1-.156.233.362.362 0 0 1-.214.066 1.013 1.013 0 0 1-.194-.026l-.197-.078-.064-.039-.301.664.053.025c.112.06.23.108.35.145.14.04.284.057.428.051.124.004.248-.013.366-.05.109-.04.21-.098.299-.171.096-.083.18-.18.248-.286.08-.138.151-.28.214-.427l1.282-3.332h-.9l-.776 2.22zM139.038 12.169a1.43 1.43 0 0 1-.353.273.876.876 0 0 1-1.235-.47 1.092 1.092 0 0 1-.066-.365v-.012c0-.242.083-.476.235-.664a.951.951 0 0 1 .26-.196.739.739 0 0 1 .34-.079.882.882 0 0 1 .428.105c.128.071.242.164.34.273l.053.053.548-.587-.039-.05a1.765 1.765 0 0 0-.536-.406 1.741 1.741 0 0 0-.77-.156c-.233 0-.464.049-.678.143a2.055 2.055 0 0 0-.55.365 1.55 1.55 0 0 0-.352.548 1.9 1.9 0 0 0-.13.663v.024c-.003.228.041.454.13.663.087.201.206.387.353.549.159.154.345.278.55.364.213.091.444.136.677.13.276.011.55-.047.797-.168.207-.115.392-.265.548-.444l.038-.05-.534-.524-.054.018zM142.888 10.383a1.71 1.71 0 0 0-.562-.365 1.741 1.741 0 0 0-.705-.13c-.468 0-.918.182-1.253.508a1.785 1.785 0 0 0-.366.548c-.089.21-.133.436-.13.663v.024c-.003.228.041.454.13.663.086.204.21.39.366.549a1.713 1.713 0 0 0 1.24.495c.242-.002.481-.05.705-.143.21-.083.4-.207.56-.365a1.69 1.69 0 0 0 .366-.548c.09-.21.134-.436.13-.664v-.013a1.612 1.612 0 0 0-.13-.663 1.35 1.35 0 0 0-.35-.56zm-1.255 2.163a.777.777 0 0 1-.35-.079 1.056 1.056 0 0 1-.289-.213.87.87 0 0 1-.182-.299 1.148 1.148 0 0 1-.066-.365v-.012c.002-.242.085-.477.235-.666.081-.078.173-.144.274-.194a.784.784 0 0 1 .366-.08c.126 0 .25.027.365.08.11.05.208.123.289.213a.766.766 0 0 1 .181.299c.042.117.064.24.067.365v.012a1.148 1.148 0 0 1-.067.365.87.87 0 0 1-.181.299.806.806 0 0 1-.276.196.797.797 0 0 1-.366.08zM148.487 10.214a1.13 1.13 0 0 0-.855-.339c-.23-.008-.456.05-.652.169-.153.09-.29.205-.406.339a1.046 1.046 0 0 0-.338-.34 1.193 1.193 0 0 0-.614-.168.906.906 0 0 0-.34.051.882.882 0 0 0-.273.133c-.078.052-.15.113-.214.181a.177.177 0 0 1-.053.051v-.35h-.888v3.294h.875v-1.837a.773.773 0 0 1 .17-.533.511.511 0 0 1 .428-.181.5.5 0 0 1 .428.168c.112.15.168.334.156.52v1.863h.874v-1.837a.729.729 0 0 1 .17-.533.571.571 0 0 1 .427-.181.514.514 0 0 1 .427.168c.116.153.171.343.156.534v1.862h.855v-2.084a1.396 1.396 0 0 0-.333-.95zM121.118 9.954h1v3.296h-1zM122.03 9.171a.48.48 0 0 0-.48-.482.489.489 0 0 0-.484.482.48.48 0 0 0 .483.482.473.473 0 0 0 .481-.482zM136.1 12.832a.482.482 0 1 0-.963 0 .482.482 0 0 0 .964 0zM120.4 11.23a1.229 1.229 0 0 0-.287-.235 1.183 1.183 0 0 0-.214-.104l-.051-.026.038-.026.118-.078a.97.97 0 0 0 .357-.5c.038-.122.056-.25.051-.377V9.87a1.053 1.053 0 0 0-.312-.768c-.274-.273-.667-.405-1.201-.405h-2.048v4.546h2.099c.233.002.466-.024.693-.077.19-.045.372-.124.534-.235.148-.106.268-.244.353-.405.082-.17.122-.357.117-.546v-.013a1.34 1.34 0 0 0-.064-.416.753.753 0 0 0-.184-.322zm-2.675-.691V9.485h1.082a.916.916 0 0 1 .55.143c.116.09.184.23.18.377v.013a.448.448 0 0 1-.213.427c-.179.101-.382.15-.588.143h-1.017v-.04l.006-.01zm2.06 1.354a.46.46 0 0 1-.213.427c-.184.101-.391.15-.6.143h-1.253v-1.12h1.186c.231-.014.462.035.667.143a.446.446 0 0 1 .214.427v-.02zM131.272 9.888a1.07 1.07 0 0 0-.744.213c-.124.1-.23.218-.314.352v-.495h-.875v3.294h.875V11.99a1.586 1.586 0 0 1 .079-.52.98.98 0 0 1 .213-.365.93.93 0 0 1 .719-.299h.102v-.9l-.055-.017zM109.189 12.503a.885.885 0 0 0 .428.628l-.09-.184s.17-.482-.338-.444z' />
+            <path className='color3-fill' d='M113.888 7.893a4.667 4.667 0 0 0-6.59 0 4.644 4.644 0 0 0 0 6.577 4.667 4.667 0 0 0 6.59 0 4.657 4.657 0 0 0 0-6.577zm-.483 6.11c-.054.051-.105.103-.156.143-1.123.911-1.984.455-1.997.455-.588-.118-.877-.118-1.045-.214-.039-.028-.17-.104-.214-.079a.392.392 0 0 1-.456-.025l-.04-.04a.332.332 0 0 1-.064-.442c.038-.039-.039-.169-.039-.169s-.214-.326-.365-.523a1.58 1.58 0 0 1-.197-.64 2.45 2.45 0 0 1-.248-.352c-.038-.05-.092-.104-.13-.155a.6.6 0 0 1-.08-.092v-.026a.854.854 0 0 1 .261-.326c.054-.039.276-.169.276-.169a.456.456 0 0 1 .338-.196c.223-.013.446.023.654.105l.143.04c.235.077.443.169.614.233.11.052.223.096.34.132.286.077.808-.158.912-.262a.68.68 0 0 0 .261-.35.234.234 0 0 0-.066-.145.924.924 0 0 1-.103-.118l-.027-.025c-.496-.52-.404-.854-.404-.854a.69.69 0 0 0-.261-.546l-.026-.025-.013-.013c.249.071.502.128.757.168.112.023.227.027.34.013.26-.013.455-.025.468-.092a5.115 5.115 0 0 1-.678-.194c-.248-.091-.286-.104-.457-.17a3.853 3.853 0 0 1-.428-.169c.888.235 1.174.326 1.578.326.101.004.203-.005.301-.027.052-.013.236-.051.261-.118a1.555 1.555 0 0 1-.496-.076c-1.03-.34-1.122-.508-1.697-.73a4.783 4.783 0 0 0-.874-.273 2.011 2.011 0 0 0-.757 0c-.783-.184-.966-.17-1.202-.117a3.984 3.984 0 0 1 5.443 1.12l.013.025c.435.647.667 1.41.667 2.189a3.761 3.761 0 0 1-1.107 2.803zm-2.61-4.495c.241.1.427.3.508.549-.496.117-.391-.39-.391-.39l-.118-.159zM101.882.06h.319v15.77h-.319zM107.78 2.32c.233 0 .417-.058.552-.175a.568.568 0 0 0 .203-.45v-.01c0-.207-.068-.362-.205-.468-.137-.105-.32-.157-.55-.157h-.715v1.26h.715zM106.45.5h1.38c.203 0 .387.027.552.083.166.055.305.134.42.237.116.103.204.227.265.37.062.143.093.303.093.48v.01a1.075 1.075 0 0 1-.41.89c-.127.1-.275.176-.445.227-.17.052-.352.078-.545.078h-.695V4h-.615V.5zm5.02 2.995a1.154 1.154 0 0 0 .85-.363c.103-.111.184-.242.243-.392.058-.15.087-.31.087-.48v-.01c0-.17-.03-.33-.088-.482a1.185 1.185 0 0 0-.623-.663 1.146 1.146 0 0 0-.479-.1 1.154 1.154 0 0 0-.85.363 1.225 1.225 0 0 0-.242.392c-.059.15-.088.31-.088.48v.01c0 .17.03.33.088.482a1.185 1.185 0 0 0 .622.663c.147.067.307.1.48.1zm-.01.565c-.27 0-.517-.047-.74-.142a1.758 1.758 0 0 1-.95-.96 1.812 1.812 0 0 1-.135-.698v-.01c0-.247.045-.48.135-.698.09-.218.217-.41.38-.575a1.829 1.829 0 0 1 1.32-.537c.27 0 .517.047.74.143a1.758 1.758 0 0 1 .95.96c.09.218.135.45.135.697v.01c0 .247-.045.48-.135.697-.09.219-.217.41-.38.575a1.829 1.829 0 0 1-1.32.538zM113.77.5h.665l.835 2.595.86-2.605h.52l.86 2.605.835-2.595h.645l-1.22 3.525h-.53l-.86-2.515-.86 2.515h-.53L113.77.5zm5.85 0h2.595v.55h-1.98v.91h1.755v.55h-1.755v.94h2.005V4h-2.62V.5zm4.865 1.735c.22 0 .395-.052.525-.157a.52.52 0 0 0 .195-.428v-.01c0-.19-.063-.334-.19-.432-.127-.099-.305-.148-.535-.148h-.895v1.175h.9zM122.97.5h1.56c.22 0 .415.03.585.093.17.061.312.147.425.257.093.097.165.208.215.335.05.127.075.267.075.42v.01c0 .143-.02.272-.063.387a1.013 1.013 0 0 1-.434.53c-.102.062-.215.11-.338.143L125.94 4h-.725l-.86-1.22h-.77V4h-.615V.5zm3.615 0h2.595v.55h-1.98v.91h1.755v.55H127.2v.94h2.005V4h-2.62V.5zm4.655 2.94c.183 0 .35-.03.5-.087.15-.059.277-.14.382-.246.106-.105.187-.23.245-.375.059-.145.088-.302.088-.472v-.01c0-.17-.03-.328-.088-.475a1.103 1.103 0 0 0-.244-.377 1.123 1.123 0 0 0-.383-.248c-.15-.06-.317-.09-.5-.09h-.69v2.38h.69zM129.935.5h1.305c.273 0 .524.044.752.132.229.089.425.211.59.368.166.157.293.34.383.552.09.212.135.441.135.688v.01c0 .247-.045.477-.135.69a1.63 1.63 0 0 1-.382.555 1.81 1.81 0 0 1-.59.37c-.229.09-.48.135-.753.135h-1.305V.5zm7.035 2.955c.21 0 .375-.04.495-.12.12-.08.18-.2.18-.36v-.01c0-.15-.06-.266-.178-.347-.118-.082-.299-.123-.542-.123h-.975v.96h1.02zm-.18-1.48c.2 0 .36-.04.48-.118.12-.078.18-.197.18-.357v-.01c0-.14-.052-.25-.157-.327-.106-.079-.258-.118-.458-.118h-.885v.93h.84zM135.345.5h1.57c.403 0 .708.103.915.31.157.157.235.35.235.58v.01a.816.816 0 0 1-.153.498.778.778 0 0 1-.16.162 1.364 1.364 0 0 1-.187.12c.103.037.197.08.282.127a.909.909 0 0 1 .22.173.7.7 0 0 1 .143.235c.033.09.05.195.05.315v.01c0 .157-.03.295-.093.415a.824.824 0 0 1-.262.3c-.113.08-.25.14-.41.183-.16.041-.337.062-.53.062h-1.62V.5zm4.64 2.12L138.595.5h.725l.98 1.55.99-1.55h.705l-1.39 2.105V4h-.62V2.62zm2.465.695h.665V4h-.665v-.685zm0-1.955h.665v.685h-.665V1.36z' />
+        </g>
+    </svg>
+);
+
+IconDeriv.propTypes = {
+    className: PropTypes.string,
+};
+
+export { IconDeriv };
diff --git a/src/javascript/app/Assets/Header/NavBar/index.js b/src/javascript/app/Assets/Header/NavBar/index.js
@@ -1,5 +1,6 @@
 export * from './icon-bell.jsx';
 export * from './icon-cashier.jsx';
+export * from './icon-deriv.jsx';
 export * from './icon-hamburger.jsx';
 export * from './icon-portfolio.jsx';
 export * from './icon-reports.jsx';

diff --git a/src/javascript/app/Modules/Contract/Containers/info-box.jsx b/src/javascript/app/Modules/Contract/Containers/info-box.jsx
@@ -18,9 +18,10 @@ const InfoBox = ({
 }) => {
     const Contents = InfoBoxLongcode;
     const info     = is_trade_page ? contract_info : replay_info;
+    const is_ready = is_contract_mode && !!(info.longcode);
     return (
         <CSSTransition
-            in={is_contract_mode}
+            in={is_ready}
             timeout={250}
             classNames={{
                 enter    : 'info-box-container--enter',

diff --git a/src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.jsx b/src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/duration-wrapper.jsx
@@ -64,18 +64,9 @@ class DurationWrapper extends React.Component {
 
     // intercept changes to contract duration and check that trade_store and ui_store are aligned.
     componentWillReact() {
-        const simple_is_missing_duration_unit = (!this.props.is_advanced_duration && this.props.simple_duration_unit === 'd' && this.props.duration_units_list.length === 4);
-        const current_duration_unit           = (this.props.is_advanced_duration ?
-            this.props.advanced_duration_unit : this.props.simple_duration_unit);
         const current_duration                = this.props.getDurationFromUnit(this.props.duration_unit);
-        const has_missing_duration_unit       = !this.hasDurationUnit(current_duration_unit);
         const simple_is_not_type_duration     = (!this.props.is_advanced_duration && this.props.expiry_type !== 'duration');
 
-        if (has_missing_duration_unit || simple_is_missing_duration_unit) {
-            this.setDurationUnit();
-            return;
-        }
-
         // simple only has expiry type duration
         if (simple_is_not_type_duration) {
             this.props.onChange({ target: { name: 'expiry_type', value: 'duration' } });
@@ -91,6 +82,15 @@ class DurationWrapper extends React.Component {
     }
 
     render() {
+        const current_duration_unit           = (this.props.is_advanced_duration ?
+            this.props.advanced_duration_unit : this.props.simple_duration_unit);
+        const has_missing_duration_unit       = !this.hasDurationUnit(current_duration_unit);
+        const simple_is_missing_duration_unit = (!this.props.is_advanced_duration && this.props.simple_duration_unit === 'd' && this.props.duration_units_list.length === 4);
+
+        if (has_missing_duration_unit || simple_is_missing_duration_unit) {
+            this.setDurationUnit();
+        }
+
         return (
             <Duration
                 hasDurationUnit={this.hasDurationUnit}

diff --git a/src/javascript/app/Stores/Modules/SmartChart/chart-barrier-store.js b/src/javascript/app/Stores/Modules/SmartChart/chart-barrier-store.js
@@ -29,7 +29,7 @@ export class ChartBarrierStore {
         onChartBarrierChange = null,
         { color, line_style, not_draggable } = {}
     ) {
-        this.color     = color; // dark mode is the default mode
+        this.color     = color;
         this.lineStyle = line_style || BARRIER_LINE_STYLES.SOLID;
         this.onChange  = this.onBarrierChange;
 

diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js
@@ -560,7 +560,7 @@ export default class TradeStore extends BaseStore {
     @action.bound
     onUnmount() {
         this.disposeSwitchAccount();
-        WS.forgetAll('proposal', 'ticks_history');
+        WS.forgetAll('proposal');
         this.is_trade_component_mounted = false;
     }
 }
diff --git a/src/javascript/app/Stores/ui-store.js b/src/javascript/app/Stores/ui-store.js
@@ -17,7 +17,7 @@ export default class UIStore extends BaseStore {
     @observable is_notifications_drawer_on = false;
     @observable is_positions_drawer_on     = false;
 
-    @observable is_dark_mode_on         = true;
+    @observable is_dark_mode_on         = false;
     @observable is_language_dialog_on   = false;
     @observable is_settings_dialog_on   = false;
     @observable is_accounts_switcher_on = false;

diff --git a/src/sass/app/_common/layout/header.scss b/src/sass/app/_common/layout/header.scss
@@ -36,13 +36,6 @@
         align-self: center;
         height: 100%;
 
-        &--deriv-logo {
-            box-sizing: border-box;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding-right: 0.8em;
-        }
         &--notify-toggle {
             order: 2;
             order: 2;
@@ -88,10 +81,10 @@
 
         &-text {
             @include typeface(--title-left-normal-black);
-            padding: 0.5em 0.5em 0.5em 0;
+            padding: 0.5em 0;
             position: relative;
             @include themify($themes) {
-                @include colorIcon(themed('text_primary_color'), none);
+                @include colorIcon(themed('text_primary_color'), none, themed('text_primary_color'));
                 color: themed('text_primary_color');
             }
 
@@ -139,11 +132,11 @@
         font-weight: normal;
         height: 20px;
         line-height: 1.43;
-        margin-left: 0.8rem;
         text-align: center;
         width: 50px;
     }
     &__icon {
-        margin-right: 0.8em;
+        margin-right: 0.8rem;
+        vertical-align: middle;
     }
 }
diff --git a/src/templates/app/components/loading.jsx b/src/templates/app/components/loading.jsx
@@ -3,7 +3,7 @@ import PropTypes           from 'prop-types';
 
 const Loading = ({ theme, id }) => (
     <div className='initial-loader'>
-        <div id={id} className={`initial-loader__barspinner barspinner barspinner-${ theme || 'dark'}`}>
+        <div id={id} className={`initial-loader__barspinner barspinner barspinner-${ theme || 'light'}`}>
             { Array.from(new Array(5)).map((x, inx) => (
                 <div key={inx} className={`initial-loader__barspinner--rect barspinner__rect barspinner__rect--${inx + 1} rect${inx + 1}`} />
             ))}