new prop 'ChartMode' added to fix issue with chart type and granularity icons

Author: nijil-deriv

src/botPage/view/Dialogs/Chart.js

@@ -1,14 +1,11 @@
 import {
     SmartChart,
     setSmartChartsPublicPath,
-    ChartTypes,
     StudyLegend,
     Views,
-    Timeperiod,
     DrawTools,
     Share,
-    CrosshairToggle,
-    ChartSize,
+    ChartMode,
 } from 'smartcharts-beta';
 import React, { PureComponent } from 'react';
 import { translate } from '../../../common/i18n';
@@ -121,14 +118,14 @@ class ChartContent extends PureComponent {
 
     renderControls = () => (
         <React.Fragment>
-            <CrosshairToggle enabled={false} />
-            <ChartTypes enabled={true} onChange={chartType => this.setState({ chartType })} />
-            <Timeperiod enabled={true} onChange={granularity => this.setState({ granularity })} />
-            <StudyLegend />
+            <ChartMode
+                onChartType={chartType => this.setState({ chartType })}
+                onGranularity={granularity => this.setState({ granularity })}
+            />
+            <StudyLegend searchInputClassName="data-hj-whitelist" />
             <DrawTools />
-            <Views />
+            <Views searchInputClassName="data-hj-whitelist" />
             <Share />
-            <ChartSize />
         </React.Fragment>
     );
 
@@ -151,19 +148,18 @@ class ChartContent extends PureComponent {
 
         return (
             <SmartChart
-                id={this.chartId}
+                barriers={barriers}
+                chartControlsWidgets={this.renderControls}
                 chartType={this.state.chartType}
                 granularity={this.state.granularity}
-                symbol={this.state.symbol}
+                id={this.chartId}
                 isMobile={false}
-                topWidgets={this.renderTopWidgets}
-                chartControlsWidgets={this.renderControls}
                 requestAPI={this.requestAPI.bind(this)}
-                requestSubscribe={this.requestSubscribe.bind(this)}
                 requestForget={this.requestForget.bind(this)}
-                barriers={barriers}
+                requestSubscribe={this.requestSubscribe.bind(this)}
                 settings={this.settings}
-                enabledNavigationWidget={false}
+                symbol={this.state.symbol}
+                topWidgets={this.renderTopWidgets}
             />
         );
     }

static/css/_chart.scss

@@ -1,64 +1,28 @@
-// .smartcharts-mobile {
-//     font-size: 10px;
+.cq-chart-control-bottom .cq-chart-controls .ciq-menu .cq-menu-dropdown.cq-menu-dropdown-enter-done, .cq-chart-control-bottom .cq-chart-controls .ciq-menu .cq-menu-dropdown.cq-menu-dropdown-enter-active {
+    transform: translateX(-40%) translateY(0em);
+}
 
-//     /*
-//       chart controls should still
-//       be visible when its dropdown shows up.
-//      */
-//     .ciq-period, 
-//     .cq-download, 
-//     .ciq-views, 
-//     .ciq-drawtools, 
-//     .ciq-studies, 
-//     .cq-chart-setting, 
-//     .ciq-draw-tools, 
-//     .cq-comparison-new, 
-//     .ciq-chart-types {
-//         .cq-menu-overlay {
-//             height: calc(100% - 40px);
-//         }
-//     }
+.ciq-list .ciq-list-item {
+    font-size: 0.8em;
+}
 
-//     .cq-modal-dropdown {
-//         position: absolute !important;
-//     }
-
-//     .drag-price > .price {
-//         font-size: 10px;
-//         padding: 1px 5px;
-//     }
-
-//     .ic-icon > svg {
-//         box-sizing: content-box !important;
-//     }
-
-//     .cq-chart-controls {
-//         .cq-menu-btn > .cq-toggle {
-//             padding: 0.35em 0em !important;
-//         }
-
-//         .cq-chart-size > :first-child {
-//             margin-right: 2em !important;
-//         }
-        
-//         .ic-icon-with-sub {
-//             &:hover .ic-subtitle {
-//                 visibility: visible;
-//             }
-//             .ic-subtitle {
-//                 visibility: hidden;
-//                 width: 60px;
-//                 color: #fff !important;
-//                 background: #15212d;
-//                 padding: 5px 0;
-//                 border-radius: 5px;
-//                 position: absolute;
-//                 z-index: 1;
-//                 bottom: 40px;
-//                 left: -15px;
-//                 display: block;
-//                 margin-bottom: 5px;
-//             }
-//         }
-//     }
-// }
+.cq-categorical-display {
+    .cq-item, 
+    .cq-active-item,
+    .empty-category,
+    .cq-filter,
+    .cq-lookup-input>input,
+    .category-title,
+    .empty-category {
+        font-size: 0.8em;
+    }
+    .category-title {
+        font-weight: bold;
+    }
+    .empty-category {
+        padding: 0 0.8em 0.8em;
+    }
+    .category.category-has-subtitle {
+        padding-top: 4em
+    }
+}