jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - dropdown active border color

Browse source
This commit is contained in:
Shekar Siri 2022-02-06 15:30:47 +01:00
parent dc87c3f81f
commit 6d3f766787
3 changed files with 55 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
View file

@ -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>
</>
);
}

7
frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
View file

@ -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;
}
}

7
frontend/app/styles/semantic.css
View file

@ -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;
}