Grooming Traffic Stats Modal - change font and time picker position (#1206)

* font change and time picker position update

* add font-family to variables scss

ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.module.sass

@@ -1,3 +1,5 @@
+@import  "../../../../variables.module"
+
 .barChartContainer
     width: 100%
     display: flex 
@@ -6,3 +8,4 @@
 .axisText
     font-size: 12px
     opacity: 0.9
+    font-family: $text-font-family

ui-common/src/components/modals/TrafficStatsModal/TrafficPieChart/TrafficPieChart.module.sass

@@ -0,0 +1,5 @@
+@import  "../../../../variables.module"
+
+.entryName
+    margin-left: 5px
+    font-family: $text-font-family

ui-common/src/components/modals/TrafficStatsModal/TrafficPieChart/TrafficPieChart.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Cell, Legend, Pie, PieChart, Tooltip } from "recharts";
 import { Utils } from "../../../../helpers/Utils";
 import { ALL_PROTOCOLS ,StatsMode as PieChartMode } from "../consts"
+import styles from "./TrafficPieChart.module.sass";
 
 const RADIAN = Math.PI / 180;
 const renderCustomizedLabel = ({
@@ -76,7 +77,7 @@ export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode,
     if (selectedProtocol === ALL_PROTOCOLS) {
       legend = data.map(protocol => <div style={{ marginBottom: 5, display: "flex" }}>
         <div style={{ height: 15, width: 30, background: protocol?.color }} />
-        <span style={{ marginLeft: 5 }}>
+        <span className={styles.entryName}>
           {protocol.name}
         </span>
       </div>)
@@ -84,7 +85,7 @@ export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode,
       legend = data.find(protocol => protocol.name === selectedProtocol)?.methods.map((method) => <div
         style={{ marginBottom: 5, display: "flex" }}>
         <div style={{ height: 15, width: 30, background: method.color}} />
-        <span style={{ marginLeft: 5 }}>
+        <span className={styles.entryName}>
           {method.name}
         </span>
       </div>)

ui-common/src/components/modals/TrafficStatsModal/TrafficStatsModal.module.sass

@@ -1,9 +1,11 @@
+@import  "../../../variables.module"
+  
 .headlineContainer
   display: flex
 
 .title
   color: #494677
-  font-family: Source Sans Pro,Lucida Grande,Tahoma,sans-serif
+  font-family: $text-font-family
   font-size: 28px
   font-weight: 600
 
@@ -21,8 +23,13 @@
   align-items: center
   margin-bottom: 4%
 
+.selectTitle
+  font-family: $text-font-family
+  margin-right: 15px
+
 .select
   border: none
   border-bottom: 1px black solid
   outline: none
   width: 100px
+  font-family: $text-font-family

ui-common/src/components/modals/TrafficStatsModal/TrafficStatsModal.tsx

@@ -85,20 +85,20 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
           <div className={styles.mainContainer}>
             <div className={styles.selectContainer}>
               <div>
-                <TimeRangePicker refreshStats={refreshStats} />
-              </div>
-              <div>
-                <span style={{ marginRight: 15 }}>Breakdown By</span>
+                <span className={styles.selectTitle}>Breakdown By</span>
                 <select className={styles.select} value={statsMode} onChange={(e) => setStatsMode(e.target.value)}>
                   {modes.map(mode => <option key={mode} value={mode}>{mode}</option>)}
                 </select>
               </div>
               <div>
-                <span style={{ marginRight: 15 }}>Protocol</span>
+                <span className={styles.selectTitle}>Protocol</span>
                 <select className={styles.select} value={selectedProtocol} onChange={(e) => setSelectedProtocol(e.target.value)}>
                   {protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
                 </select>
               </div>
+              <div>
+                <TimeRangePicker refreshStats={refreshStats} />
+              </div>
             </div>
             <div>
               <LoadingWrapper isLoading={isLoading} loaderMargin={20} loaderHeight={50}>

ui-common/src/variables.module.scss

@@ -14,6 +14,8 @@ $content-section-color: #f8f9fc;
 $blue-gray: #494677;
 $light-gray: #8F9BB2;
 
+$text-font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif;
+
 :export {
   mainBackgroundColor: $main-background-color;
   headerBackgroundColor: $header-background-color;
@@ -26,4 +28,5 @@ $light-gray: #8F9BB2;
   blueGray: $blue-gray;
   lightGray: $light-gray;
   contentSectionColor: $content-section-color;
+  textFontFamily: $text-font-family
 }