From 9cec8787e1a43aa2ca77458bd38c7920912f1ac8 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Wed, 8 Oct 2025 14:11:50 +0530 Subject: [PATCH 1/6] feat: observability routing url added in the constants --- src/Assets/IconV2/ic-binoculars.svg | 3 +++ src/Common/Constants.ts | 5 +++++ src/Shared/Components/Icon/Icon.tsx | 2 ++ 3 files changed, 10 insertions(+) create mode 100644 src/Assets/IconV2/ic-binoculars.svg diff --git a/src/Assets/IconV2/ic-binoculars.svg b/src/Assets/IconV2/ic-binoculars.svg new file mode 100644 index 000000000..2eb3697bf --- /dev/null +++ b/src/Assets/IconV2/ic-binoculars.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts index 22219c2e0..8a29c8bd3 100644 --- a/src/Common/Constants.ts +++ b/src/Common/Constants.ts @@ -49,6 +49,7 @@ export const PATTERNS = { } const GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP = '/global-config/templates/devtron-apps' +const OBSERVABILITY_ROOT = '/observability' export const URLS = { LOGIN: '/login', @@ -88,6 +89,10 @@ export const URLS = { GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/detail/:appId`, LICENSE_AUTH: '/license-auth', GLOBAL_CONFIG_EDIT_CLUSTER: '/global-config/cluster-env/edit/:clusterId', + // OBSERVABILITY + OBSERVABILITY: OBSERVABILITY_ROOT, + OBSERVABILITY_OVERVIEW: `${OBSERVABILITY_ROOT}/overview`, + OBSERVABILITY_CUSTOMER_LIST: `${OBSERVABILITY_ROOT}/customers`, } as const export const ROUTES = { diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx index 9182ed7c6..93836eaef 100644 --- a/src/Shared/Components/Icon/Icon.tsx +++ b/src/Shared/Components/Icon/Icon.tsx @@ -20,6 +20,7 @@ import { ReactComponent as ICAzureAks } from '@IconsV2/ic-azure-aks.svg' import { ReactComponent as ICBgCluster } from '@IconsV2/ic-bg-cluster.svg' import { ReactComponent as ICBgEnvironment } from '@IconsV2/ic-bg-environment.svg' import { ReactComponent as ICBharatpe } from '@IconsV2/ic-bharatpe.svg' +import { ReactComponent as ICBinoculars } from '@IconsV2/ic-binoculars.svg' import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg' import { ReactComponent as ICBookOpen } from '@IconsV2/ic-book-open.svg' import { ReactComponent as ICBrain } from '@IconsV2/ic-brain.svg' @@ -262,6 +263,7 @@ export const iconMap = { 'ic-bg-cluster': ICBgCluster, 'ic-bg-environment': ICBgEnvironment, 'ic-bharatpe': ICBharatpe, + 'ic-binoculars': ICBinoculars, 'ic-bitbucket': ICBitbucket, 'ic-book-open': ICBookOpen, 'ic-brain': ICBrain, From 9f62214b1945506a63c16950b7dcc58402d1ab8b Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 4 Nov 2025 13:34:14 +0530 Subject: [PATCH 2/6] feat: replaced all customer with tenants --- src/Common/Constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts index 8a29c8bd3..ce392ca05 100644 --- a/src/Common/Constants.ts +++ b/src/Common/Constants.ts @@ -92,7 +92,7 @@ export const URLS = { // OBSERVABILITY OBSERVABILITY: OBSERVABILITY_ROOT, OBSERVABILITY_OVERVIEW: `${OBSERVABILITY_ROOT}/overview`, - OBSERVABILITY_CUSTOMER_LIST: `${OBSERVABILITY_ROOT}/customers`, + OBSERVABILITY_CUSTOMER_LIST: `${OBSERVABILITY_ROOT}/tenants`, } as const export const ROUTES = { From 4264851ee3a4583e51df235fff474411d34448d8 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Fri, 7 Nov 2025 14:02:54 +0530 Subject: [PATCH 3/6] feat: breadcrumb css updated --- src/Common/BreadCrumb/BreadCrumb.tsx | 8 +++----- src/Common/BreadCrumb/BreadcrumbStore.tsx | 7 ++++++- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/Common/BreadCrumb/BreadCrumb.tsx b/src/Common/BreadCrumb/BreadCrumb.tsx index 38d9bc5c5..f94cdd7ca 100644 --- a/src/Common/BreadCrumb/BreadCrumb.tsx +++ b/src/Common/BreadCrumb/BreadCrumb.tsx @@ -16,7 +16,7 @@ import React, { useMemo, useEffect } from 'react' import { Link, useRouteMatch, useParams } from 'react-router-dom' -import { useBreadcrumbContext } from './BreadcrumbStore' +import { getBreadCrumbSeparator, useBreadcrumbContext } from './BreadcrumbStore' import { ConditionalWrap } from '../Helper' import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types' @@ -90,7 +90,7 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]): export const BreadCrumb: React.FC = ({ breadcrumbs, sep = '/', - className = 'dc__devtron-breadcrumb__item', + className = 'dc__devtron-breadcrumb__item fs-16 fw-4 lh-1-5 dc__ellipsis-right dc__mxw-155', }) => { const { url } = useRouteMatch() const filteredCrumbs = breadcrumbs.filter((crumb) => !!crumb.name) @@ -114,9 +114,7 @@ export const BreadCrumb: React.FC = ({ {breadcrumb.name} - {idx + 1 !== filteredCrumbs.length && breadcrumb.name && ( - {sep} - )} + {idx + 1 !== filteredCrumbs.length && breadcrumb.name && getBreadCrumbSeparator()} ))} diff --git a/src/Common/BreadCrumb/BreadcrumbStore.tsx b/src/Common/BreadCrumb/BreadcrumbStore.tsx index cf91aad28..006488a62 100644 --- a/src/Common/BreadCrumb/BreadcrumbStore.tsx +++ b/src/Common/BreadCrumb/BreadcrumbStore.tsx @@ -22,9 +22,14 @@ const initialState = { } export const BreadcrumbText = ({ heading, isActive, shouldTruncate = false }: BreadcrumbTextProps) => ( -

{heading}

+ {heading} ) +export const getBreadCrumbSeparator = (sep: string = '/') => ( + {sep} +) + + const Store = ({ children }) => { const [state, setState] = useState(initialState) return {children} From d5c5464d38d5e4e45d4d88863bc0d521a6ac6a46 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 11 Nov 2025 12:14:30 +0530 Subject: [PATCH 4/6] chore: icon added --- src/Assets/IconV2/ic-enter-fullscreen.svg | 3 + src/Assets/IconV2/ic-exit-fullscreen.svg | 3 + .../DatePicker/DayPickerRangeController.tsx | 166 ++++++++++++++++++ src/Shared/Components/DatePicker/constants.ts | 79 ++++++++- src/Shared/Components/DatePicker/index.ts | 1 + src/Shared/Components/DatePicker/types.ts | 13 ++ src/Shared/Components/Icon/Icon.tsx | 4 + 7 files changed, 266 insertions(+), 3 deletions(-) create mode 100644 src/Assets/IconV2/ic-enter-fullscreen.svg create mode 100644 src/Assets/IconV2/ic-exit-fullscreen.svg create mode 100644 src/Shared/Components/DatePicker/DayPickerRangeController.tsx diff --git a/src/Assets/IconV2/ic-enter-fullscreen.svg b/src/Assets/IconV2/ic-enter-fullscreen.svg new file mode 100644 index 000000000..a59434ec8 --- /dev/null +++ b/src/Assets/IconV2/ic-enter-fullscreen.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-exit-fullscreen.svg b/src/Assets/IconV2/ic-exit-fullscreen.svg new file mode 100644 index 000000000..93f2add7f --- /dev/null +++ b/src/Assets/IconV2/ic-exit-fullscreen.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Shared/Components/DatePicker/DayPickerRangeController.tsx b/src/Shared/Components/DatePicker/DayPickerRangeController.tsx new file mode 100644 index 000000000..36b6d5f8f --- /dev/null +++ b/src/Shared/Components/DatePicker/DayPickerRangeController.tsx @@ -0,0 +1,166 @@ +/* + * Copyright (c) 2024. Devtron Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useState } from 'react' +import { DayPickerRangeController, isInclusivelyBeforeDay } from 'react-dates' +import CustomizableCalendarDay from 'react-dates/esm/components/CustomizableCalendarDay.js' +import moment, { Moment } from 'moment' + +import 'react-dates/initialize' + +import { Icon } from '../Icon' +import { customDayStyles, DayPickerCalendarInfoHorizontal, DayPickerRangeControllerPresets, styles } from './constants' +import { DatePickerRangeControllerProps } from './types' + +import 'react-dates/lib/css/_datepicker.css' + +export const DatePickerRangeController = ({ + handlePredefinedRange, + handleApply, + calendar, + calendarInputs, + handleDateInput, + handleDatesChange, + calendarValue, + focusedInput, + handleFocusChange, +}: DatePickerRangeControllerProps) => { + const [showCalendar, setShowCalender] = useState(false) + const onClickApplyTimeChange = () => { + setShowCalender(false) + handleApply() + } + + const onClickPredefinedTimeRange = (startDate: Moment, endDate: Moment, endStr: string) => () => { + handlePredefinedRange(startDate, endDate, endStr) + setShowCalender(false) + } + + const renderDatePresets = () => ( +
+
+

Pick time range

+
+
+ From + { + handleDateInput('startDate', event.target.value) + }} + /> +
+
+ To + { + handleDateInput('endDate', event.target.value) + }} + /> +
+ +
+
+
+ {DayPickerRangeControllerPresets.map(({ text, startDate, endDate, endStr }) => { + const isSelected = + startDate.isSame(calendar.startDate, 'minute') && + startDate.isSame(calendar.startDate, 'hour') && + startDate.isSame(calendar.startDate, 'day') && + endDate.isSame(calendar.endDate, 'day') + let buttonStyles = { + ...styles.PresetDateRangePicker_button, + } + if (isSelected) { + buttonStyles = { + ...buttonStyles, + ...styles.PresetDateRangePicker_button__selected, + } + } + return ( + + ) + })} +
+
+ ) + + return ( + <> +
{ + setShowCalender(!showCalendar) + }} + > +

+ {calendarValue} +

+ +
+ {showCalendar && ( + !isInclusivelyBeforeDay(day, moment())} // enable past dates + renderCalendarDay={(props) => } + onOutsideClick={() => { + setShowCalender(false) + }} + initialVisibleMonth={() => moment().subtract(2, 'd')} // + /> + )} + + ) +} diff --git a/src/Shared/Components/DatePicker/constants.ts b/src/Shared/Components/DatePicker/constants.ts index 976fbb6ca..08e27ce3f 100644 --- a/src/Shared/Components/DatePicker/constants.ts +++ b/src/Shared/Components/DatePicker/constants.ts @@ -14,7 +14,9 @@ * limitations under the License. */ -const selectedStyles = { +import moment from 'moment' + +export const selectedStyles = { background: 'var(--B100)', color: 'var(--B500)', @@ -24,7 +26,7 @@ const selectedStyles = { }, } -const selectedSpanStyles = { +export const selectedSpanStyles = { background: 'var(--B100)', color: 'var(--B500)', hover: { @@ -33,7 +35,7 @@ const selectedSpanStyles = { }, } -const hoveredSpanStyles = { +export const hoveredSpanStyles = { background: 'var(--B100)', color: 'var(--B500)', } @@ -145,3 +147,74 @@ export const DATE_PICKER_IDS = { MONTH: 'month_picker', TIME: 'time_picker', } + +export const styles = { + PresetDateRangePicker_panel: { + padding: '0px', + width: '200px', + height: '100%', + }, + PresetDateRangePicker_button: { + width: '188px', + background: 'var(--transparent)', + border: 'none', + color: 'var(--N900)', + padding: '8px', + font: 'inherit', + fontWeight: 500, + lineHeight: 'normal', + overflow: 'visible', + cursor: 'pointer', + ':active': { + outline: 0, + }, + }, + DayPicker__horizontal: { + borderRadius: '4px', + }, + PresetDateRangePicker_button__selected: { + color: 'var(--B500)', + fontWeight: 600, + background: 'var(--B100)', + outline: 'none', + }, +} + +export const DayPickerCalendarInfoHorizontal = { + width: '532px', + boxShadow: 'none', +} + +export const DayPickerRangeControllerPresets = [ + { text: 'Last 5 minutes', endDate: moment(), startDate: moment().subtract(5, 'minutes'), endStr: 'now-5m' }, + { text: 'Last 30 minutes', endDate: moment(), startDate: moment().subtract(30, 'minutes'), endStr: 'now-30m' }, + { text: 'Last 1 hour', endDate: moment(), startDate: moment().subtract(1, 'hours'), endStr: 'now-1h' }, + { text: 'Last 24 hours', endDate: moment(), startDate: moment().subtract(24, 'hours'), endStr: 'now-24h' }, + { text: 'Last 7 days', endDate: moment(), startDate: moment().subtract(7, 'days'), endStr: 'now-7d' }, + { text: 'Last 1 month', endDate: moment(), startDate: moment().subtract(1, 'months'), endStr: 'now-1M' }, + { text: 'Last 6 months', endDate: moment(), startDate: moment().subtract(6, 'months'), endStr: 'now-6M' }, +] + +/** + * Returns a string representing the range of dates + * given by the start and end dates. If the end date + * is 'now' and the start date includes 'now', + * it will return the corresponding range from the + * DayPickerRangeControllerPresets array. + * @param startDateStr - the start date string + * @param endDateStr - the end date string + * @returns - a string representing the range of dates + */ + +export function getCalendarValue(startDateStr: string, endDateStr: string): string { + let str: string = `${startDateStr} - ${endDateStr}` + if (endDateStr === 'now' && startDateStr.includes('now')) { + const range = DayPickerRangeControllerPresets.find((d) => d.endStr === startDateStr) + if (range) { + str = range.text + } else { + str = `${startDateStr} - ${endDateStr}` + } + } + return str +} diff --git a/src/Shared/Components/DatePicker/index.ts b/src/Shared/Components/DatePicker/index.ts index aced868c3..f0cc559fa 100644 --- a/src/Shared/Components/DatePicker/index.ts +++ b/src/Shared/Components/DatePicker/index.ts @@ -16,6 +16,7 @@ export * from './constants' export { default as DateTimePicker } from './DateTimePicker' +export { DatePickerRangeController } from './DayPickerRangeController' export * from './MonthlySelect' export { default as SingleDatePickerComponent } from './SingleDatePickerComponent' export * from './TimeSelect' diff --git a/src/Shared/Components/DatePicker/types.ts b/src/Shared/Components/DatePicker/types.ts index 82cafc3cf..d8844e7d4 100644 --- a/src/Shared/Components/DatePicker/types.ts +++ b/src/Shared/Components/DatePicker/types.ts @@ -143,3 +143,16 @@ export interface DateTimePickerProps */ onChange: (date: Date) => void } + +export interface DatePickerRangeControllerProps { + calendar + calendarInputs + focusedInput + handleFocusChange + handleDatesChange + handleCalendarInputs? + calendarValue: string + handlePredefinedRange: (start: Moment, end: Moment, endStr: string) => void + handleDateInput: (key: 'startDate' | 'endDate', value: string) => void + handleApply: (...args) => void +} diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx index 93836eaef..9126256d7 100644 --- a/src/Shared/Components/Icon/Icon.tsx +++ b/src/Shared/Components/Icon/Icon.tsx @@ -78,12 +78,14 @@ import { ReactComponent as ICDownload } from '@IconsV2/ic-download.svg' import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg' import { ReactComponent as ICEdit } from '@IconsV2/ic-edit.svg' import { ReactComponent as ICEmail } from '@IconsV2/ic-email.svg' +import { ReactComponent as ICEnterFullscreen } from '@IconsV2/ic-enter-fullscreen.svg' import { ReactComponent as ICEnterpriseFeat } from '@IconsV2/ic-enterprise-feat.svg' import { ReactComponent as ICEnterpriseTag } from '@IconsV2/ic-enterprise-tag.svg' import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg' import { ReactComponent as ICEnvironment } from '@IconsV2/ic-environment.svg' import { ReactComponent as ICEnvironmentIsolated } from '@IconsV2/ic-environment-isolated.svg' import { ReactComponent as ICError } from '@IconsV2/ic-error.svg' +import { ReactComponent as ICExitFullscreen } from '@IconsV2/ic-exit-fullscreen.svg' import { ReactComponent as ICExpandRightSm } from '@IconsV2/ic-expand-right-sm.svg' import { ReactComponent as ICExpandSm } from '@IconsV2/ic-expand-sm.svg' import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg' @@ -321,12 +323,14 @@ export const iconMap = { 'ic-ecr': ICEcr, 'ic-edit': ICEdit, 'ic-email': ICEmail, + 'ic-enter-fullscreen': ICEnterFullscreen, 'ic-enterprise-feat': ICEnterpriseFeat, 'ic-enterprise-tag': ICEnterpriseTag, 'ic-env': ICEnv, 'ic-environment-isolated': ICEnvironmentIsolated, 'ic-environment': ICEnvironment, 'ic-error': ICError, + 'ic-exit-fullscreen': ICExitFullscreen, 'ic-expand-right-sm': ICExpandRightSm, 'ic-expand-sm': ICExpandSm, 'ic-failure': ICFailure, From 4e522200195dcb7bc6a5ab51cc24d93d4bcfd1a6 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 11 Nov 2025 13:08:09 +0530 Subject: [PATCH 5/6] chore: code refactoring --- .../Components/DatePicker/DayPickerRangeController.tsx | 10 +++++----- src/Shared/Components/DatePicker/constants.ts | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/Shared/Components/DatePicker/DayPickerRangeController.tsx b/src/Shared/Components/DatePicker/DayPickerRangeController.tsx index 36b6d5f8f..48eeb9ab6 100644 --- a/src/Shared/Components/DatePicker/DayPickerRangeController.tsx +++ b/src/Shared/Components/DatePicker/DayPickerRangeController.tsx @@ -53,15 +53,15 @@ export const DatePickerRangeController = ({
@@ -103,12 +103,12 @@ export const DatePickerRangeController = ({ startDate.isSame(calendar.startDate, 'day') && endDate.isSame(calendar.endDate, 'day') let buttonStyles = { - ...styles.PresetDateRangePicker_button, + ...styles.PresetDateRangePickerButton, } if (isSelected) { buttonStyles = { ...buttonStyles, - ...styles.PresetDateRangePicker_button__selected, + ...styles.PresetDateRangePickerButtonSelected, } } return ( diff --git a/src/Shared/Components/DatePicker/constants.ts b/src/Shared/Components/DatePicker/constants.ts index 08e27ce3f..440e636c0 100644 --- a/src/Shared/Components/DatePicker/constants.ts +++ b/src/Shared/Components/DatePicker/constants.ts @@ -149,12 +149,12 @@ export const DATE_PICKER_IDS = { } export const styles = { - PresetDateRangePicker_panel: { + PresetDateRangePickerPanel: { padding: '0px', width: '200px', height: '100%', }, - PresetDateRangePicker_button: { + PresetDateRangePickerButton: { width: '188px', background: 'var(--transparent)', border: 'none', @@ -169,10 +169,10 @@ export const styles = { outline: 0, }, }, - DayPicker__horizontal: { + DayPickerHorizontal: { borderRadius: '4px', }, - PresetDateRangePicker_button__selected: { + PresetDateRangePickerButtonSelected: { color: 'var(--B500)', fontWeight: 600, background: 'var(--B100)', From 582ff9531c77babc08ff84e622c3ef78a17c32b2 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Wed, 12 Nov 2025 10:25:02 +0530 Subject: [PATCH 6/6] chore: day picker range controller fixes --- .../DatePicker/DayPickerRangeController.tsx | 48 +++++++++++-------- src/Shared/Components/DatePicker/constants.ts | 8 ++-- 2 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/Shared/Components/DatePicker/DayPickerRangeController.tsx b/src/Shared/Components/DatePicker/DayPickerRangeController.tsx index 48eeb9ab6..5e8655339 100644 --- a/src/Shared/Components/DatePicker/DayPickerRangeController.tsx +++ b/src/Shared/Components/DatePicker/DayPickerRangeController.tsx @@ -19,8 +19,11 @@ import { DayPickerRangeController, isInclusivelyBeforeDay } from 'react-dates' import CustomizableCalendarDay from 'react-dates/esm/components/CustomizableCalendarDay.js' import moment, { Moment } from 'moment' +import { ComponentSizeType } from '@Shared/constants' + import 'react-dates/initialize' +import { Button } from '../Button' import { Icon } from '../Icon' import { customDayStyles, DayPickerCalendarInfoHorizontal, DayPickerRangeControllerPresets, styles } from './constants' import { DatePickerRangeControllerProps } from './types' @@ -53,23 +56,23 @@ export const DatePickerRangeController = ({
-
+

Pick time range

- From + From
- To + To
- +
-
+
{DayPickerRangeControllerPresets.map(({ text, startDate, endDate, endStr }) => { const isSelected = startDate.isSame(calendar.startDate, 'minute') && @@ -103,12 +109,12 @@ export const DatePickerRangeController = ({ startDate.isSame(calendar.startDate, 'day') && endDate.isSame(calendar.endDate, 'day') let buttonStyles = { - ...styles.PresetDateRangePickerButton, + ...styles.PresetDateRangePicker_button, } if (isSelected) { buttonStyles = { ...buttonStyles, - ...styles.PresetDateRangePickerButtonSelected, + ...styles.PresetDateRangePicker_button__selected, } } return ( @@ -126,19 +132,21 @@ export const DatePickerRangeController = ({
) + const toggleCalender = () => { + setShowCalender(!showCalendar) + } + + const hideCalender = () => setShowCalender(false) + return ( <>
{ - setShowCalender(!showCalendar) - }} + onClick={toggleCalender} > -

- {calendarValue} -

+

{calendarValue}

{showCalendar && ( @@ -155,9 +163,7 @@ export const DatePickerRangeController = ({ hideKeyboardShortcutsPanel isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())} // enable past dates renderCalendarDay={(props) => } - onOutsideClick={() => { - setShowCalender(false) - }} + onOutsideClick={hideCalender} initialVisibleMonth={() => moment().subtract(2, 'd')} // /> )} diff --git a/src/Shared/Components/DatePicker/constants.ts b/src/Shared/Components/DatePicker/constants.ts index 440e636c0..08e27ce3f 100644 --- a/src/Shared/Components/DatePicker/constants.ts +++ b/src/Shared/Components/DatePicker/constants.ts @@ -149,12 +149,12 @@ export const DATE_PICKER_IDS = { } export const styles = { - PresetDateRangePickerPanel: { + PresetDateRangePicker_panel: { padding: '0px', width: '200px', height: '100%', }, - PresetDateRangePickerButton: { + PresetDateRangePicker_button: { width: '188px', background: 'var(--transparent)', border: 'none', @@ -169,10 +169,10 @@ export const styles = { outline: 0, }, }, - DayPickerHorizontal: { + DayPicker__horizontal: { borderRadius: '4px', }, - PresetDateRangePickerButtonSelected: { + PresetDateRangePicker_button__selected: { color: 'var(--B500)', fontWeight: 600, background: 'var(--B100)',