GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-18 03:35:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update date picker styles (#4635)

Browse Source
This commit is contained in:
Yunus M 2024-03-01 15:20:21 +05:30 committed by GitHub
parent d77389abe3
commit 44ff1517d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
View File

@ -112,7 +112,14 @@ function CustomTimePickerPopoverContent({
</Button> </Button>
))} ))}
</div> </div>
<div className="relative-date-time"> <div
className={cx(
'relative-date-time',
selectedTime === 'custom' || customDateTimeVisible
? 'date-picker'
: 'relative-times',
)}
>
{selectedTime === 'custom' || customDateTimeVisible ? ( {selectedTime === 'custom' || customDateTimeVisible ? (
<RangePicker <RangePicker
disabledDate={disabledDate} disabledDate={disabledDate}
@ -124,7 +131,7 @@ function CustomTimePickerPopoverContent({
})} })}
/> />
) : ( ) : (
<div> <div className="relative-times-container">
<div className="time-heading">RELATIVE TIMES</div> <div className="time-heading">RELATIVE TIMES</div>
<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div> <div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
</div> </div>

12
frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
View File

@ -58,8 +58,6 @@
.date-time-root { .date-time-root {
.ant-popover-inner { .ant-popover-inner {
width: 532px;
min-height: 334px;
border-radius: 4px !important; border-radius: 4px !important;
border: 1px solid var(--bg-slate-400); border: 1px solid var(--bg-slate-400);
box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2) !important; box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2) !important;
@ -129,12 +127,20 @@
} }
.relative-date-time { .relative-date-time {
width: 307px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 35px; gap: 35px;
padding: 13px 14px; padding: 13px 14px;
&.date-picker {
width: 340px;
height: 380px;
}
&.relative-times {
width: 320px;
}
.relative-date-time-section { .relative-date-time-section {
display: flex; display: flex;
gap: 6px; gap: 6px;

2
frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
View File

@ -53,7 +53,7 @@ export const Options: Option[] = [
{ value: '1day', label: 'Last 1 day' }, { value: '1day', label: 'Last 1 day' },
{ value: '3days', label: 'Last 3 days' }, { value: '3days', label: 'Last 3 days' },
{ value: '1week', label: 'Last 1 week' }, { value: '1week', label: 'Last 1 week' },
{ value: 'custom', label: 'Custom...' }, { value: 'custom', label: 'Custom' },
]; ];
export interface Option { export interface Option {