From 6d3f766787fb807a04cd8f83e7b20d6255f00d63 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sun, 6 Feb 2022 15:30:47 +0100
Subject: [PATCH] feat(ui) - dropdown active border color

---
 .../CustomMetricWidgetPreview.tsx             | 81 ++++++++++---------
 .../FilterValueDropdown.css                   |  7 +-
 frontend/app/styles/semantic.css              |  7 ++
 3 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
index de93de03d..01b3933da 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
@@ -63,47 +63,50 @@ function CustomMetricWidget(props: Props) {
   
 
   return (
-    <div className={stl.wrapper}>
-      <div className="flex items-center mb-10 p-2">
-        
+    <>
+      <div className="flex items-center mb-4">
+        <div className="mr-auto font-medium">Preview</div>
+        <div></div>
       </div>
-      <div>
-        <Loader loading={ loading } size="small">
-          <NoContent
-            size="small"
-            show={ data.chart.length === 0 }
-          >
-            <ResponsiveContainer height={ 240 } width="100%">
-              <AreaChart
-                data={ data.chart }
-                margin={Styles.chartMargins}
-                syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
-              >
-                {gradientDef}
-                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-                <YAxis
-                  {...Styles.yaxis}
-                  label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
-                  allowDecimals={false}
-                />
-                <Tooltip {...Styles.tooltip} />
-                <Area
-                  name="Sessions"
-                  type="monotone"
-                  dataKey="count"
-                  stroke={colors[0]}
-                  fillOpacity={ 1 }
-                  strokeWidth={ 2 }
-                  strokeOpacity={ 0.8 }
-                  fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-                />
-              </AreaChart>
-            </ResponsiveContainer>
-          </NoContent>
-        </Loader>
+      <div className={stl.wrapper}>
+        <div>
+          <Loader loading={ loading } size="small">
+            <NoContent
+              size="small"
+              show={ data.chart.length === 0 }
+            >
+              <ResponsiveContainer height={ 240 } width="100%">
+                <AreaChart
+                  data={ data.chart }
+                  margin={Styles.chartMargins}
+                  syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
+                >
+                  {gradientDef}
+                  <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
+                  <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
+                  <YAxis
+                    {...Styles.yaxis}
+                    label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
+                    allowDecimals={false}
+                  />
+                  <Tooltip {...Styles.tooltip} />
+                  <Area
+                    name="Sessions"
+                    type="monotone"
+                    dataKey="count"
+                    stroke={colors[0]}
+                    fillOpacity={ 1 }
+                    strokeWidth={ 2 }
+                    strokeOpacity={ 0.8 }
+                    fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
+                  />
+                </AreaChart>
+              </ResponsiveContainer>
+            </NoContent>
+          </Loader>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
index 14574c05e..6a06c46cc 100644
--- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
@@ -36,13 +36,14 @@
 }
 .operatorDropdown {
   font-weight: 400;
-  height: 30px;
+  /* height: 30px; */
   min-width: 60px;
   display: flex !important;
   align-items: center;
   justify-content: space-between;
   padding: 0 8px !important;
   font-size: 13px;
+  height: 26px;
   /* background-color: rgba(255, 255, 255, 0.8) !important; */
   /* background-color: $gray-lightest !important; */
   /* border: solid thin rgba(34, 36, 38, 0.15) !important; */
@@ -52,4 +53,8 @@
   &.ui.basic.button {
     box-shadow: 0 0 0 1px rgba(62, 170, 175,36,38,.35) inset, 0 0 0 0 rgba(62, 170, 175,.15) inset !important;
   }
+
+  & input {
+    padding: 0 8px !important;
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/styles/semantic.css b/frontend/app/styles/semantic.css
index 06930c3e9..21b987789 100644
--- a/frontend/app/styles/semantic.css
+++ b/frontend/app/styles/semantic.css
@@ -317,4 +317,11 @@ a:hover {
 
 .ui.search.dropdown>input.search {
   bottom: 0 !important;
+}
+
+.ui.search.dropdown.active>input.search,
+.ui.search.dropdown.visible>input.search {
+  border: solid thin $teal !important;
+  border-radius: 3px;
+  height: 26px;
 }
\ No newline at end of file