Skip to content

Commit dfc2ff1

Browse files
praveen5959praveen5959
authored
fix: Font size fixes on explore & correlation page (#437)
1 parent 63c81cb commit dfc2ff1

File tree

9 files changed

+72
-50
lines changed

9 files changed

+72
-50
lines changed

‎src/components/Header/RefreshInterval.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { Button, Menu, Text, Tooltip, px } from '@mantine/core';
22
import { IconRefresh, IconRefreshOff } from '@tabler/icons-react';
3-
import ms from 'ms';
4-
import type { FC } from 'react';
3+
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
4+
import { logsStoreReducers, useLogsStore } from '@/pages/Stream/providers/LogsProvider';
55
import { useEffect, useMemo, useRef } from 'react';
6+
7+
import type { FC } from 'react';
68
import { REFRESH_INTERVALS } from '@/constants/timeConstants';
7-
import classes from './styles/LogQuery.module.css';
8-
import { useLogsStore, logsStoreReducers } from '@/pages/Stream/providers/LogsProvider';
99
import _ from 'lodash';
10-
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
10+
import classes from './styles/LogQuery.module.css';
11+
import ms from 'ms';
1112

1213
const { setRefreshInterval, getCleanStoreForRefetch } = logsStoreReducers;
1314
const { syncTimeRange } = appStoreReducers;
@@ -66,14 +67,18 @@ const RefreshInterval: FC = () => {
6667

6768
return (
6869
<Menu.Item key={interval} onClick={() => onSelectedInterval(interval)}>
69-
<Text>{ms(interval)}</Text>
70+
<Text style={{ fontSize: '0.65rem', fontWeight: 500 }} c="#495057">
71+
{ms(interval)}
72+
</Text>
7073
</Menu.Item>
7174
);
7275
})}
7376

7477
{refreshInterval !== null && (
7578
<Menu.Item onClick={() => onSelectedInterval(null)}>
76-
<Text>Off</Text>
79+
<Text style={{ fontSize: '0.65rem', fontWeight: 500 }} c="#495057">
80+
Off
81+
</Text>
7782
</Menu.Item>
7883
)}
7984
</Menu.Dropdown>

‎src/components/Header/RefreshNow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/Ap
88
const { getCleanStoreForRefetch } = logsStoreReducers;
99
const { syncTimeRange } = appStoreReducers;
1010

11-
const renderRefreshIcon = () => <IconReload size={px('1rem')} stroke={1.5} />;
11+
const renderRefreshIcon = () => <IconReload color="#495057" size={px('1rem')} stroke={1.5} />;
1212

1313
const RefreshNow: FC = () => {
1414
const [, setLogsStore] = useLogsStore(() => null);

‎src/components/Header/ShareButton.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import { Stack, Menu, px } from '@mantine/core';
2-
import { IconCopy, IconShare, IconFileTypeCsv, IconBraces } from '@tabler/icons-react';
1+
import { IconBraces, IconCopy, IconFileTypeCsv, IconShare } from '@tabler/icons-react';
2+
import { Menu, Stack, px } from '@mantine/core';
3+
import { downloadDataAsCSV, downloadDataAsJson } from '@/utils/exportHelpers';
4+
import { makeExportData, useLogsStore } from '@/pages/Stream/providers/LogsProvider';
5+
36
import IconButton from '../Button/IconButton';
7+
import { copyTextToClipboard } from '@/utils';
48
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
59
import { useCallback } from 'react';
6-
import { copyTextToClipboard } from '@/utils';
7-
import { downloadDataAsCSV, downloadDataAsJson } from '@/utils/exportHelpers';
8-
import { makeExportData, useLogsStore } from '@/pages/Stream/providers/LogsProvider';
910

10-
const renderShareIcon = () => <IconShare size={px('1rem')} stroke={1.5} />;
11+
const renderShareIcon = () => <IconShare color="#495057" size={px('1rem')} stroke={1.5} />;
1112

1213
export default function ShareButton() {
1314
const [isSecureHTTPContext] = useAppStore((store) => store.isSecureHTTPContext);

‎src/components/Header/TimeRange.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import useMountedState from '@/hooks/useMountedState';
21
import { Box, Button, Divider, Menu, NumberInput, Stack, Text, Tooltip, px } from '@mantine/core';
32
import { DatePicker, TimeInput } from '@mantine/dates';
3+
import { Fragment, useCallback, useMemo, useRef, useState } from 'react';
44
import { IconCalendarEvent, IconCheck, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
5-
import dayjs from 'dayjs';
5+
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
6+
import { logsStoreReducers, useLogsStore } from '@/pages/Stream/providers/LogsProvider';
7+
68
import type { FC } from 'react';
7-
import { Fragment, useCallback, useMemo, useRef, useState } from 'react';
89
import { FIXED_DURATIONS } from '@/constants/timeConstants';
9-
import classes from './styles/LogQuery.module.css';
10-
import { useOuterClick } from '@/hooks/useOuterClick';
1110
import _ from 'lodash';
11+
import classes from './styles/LogQuery.module.css';
12+
import dayjs from 'dayjs';
1213
import timeRangeUtils from '@/utils/timeRangeUtils';
13-
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
14-
import { logsStoreReducers, useLogsStore } from '@/pages/Stream/providers/LogsProvider';
14+
import useMountedState from '@/hooks/useMountedState';
15+
import { useOuterClick } from '@/hooks/useOuterClick';
1516

1617
const { getRelativeStartAndEndDate } = timeRangeUtils;
1718
const { setTimeRange, setshiftInterval } = appStoreReducers;
@@ -131,7 +132,7 @@ const TimeRange: FC = () => {
131132
<Stack className={classes.timeRangeBtnContainer}>
132133
<Tooltip label={`${shiftLabelPrefix} Back`}>
133134
<Stack className={classes.timeRangeCtrlIcon} onClick={() => shiftTimeRange('left')}>
134-
<IconChevronLeft stroke={2} size="1rem" style={{ cursor: 'pointer' }} />
135+
<IconChevronLeft color="#495057" stroke={1.5} size="1rem" style={{ cursor: 'pointer' }} />
135136
</Stack>
136137
</Tooltip>
137138
<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={0}>
@@ -143,12 +144,12 @@ const TimeRange: FC = () => {
143144
</Text>
144145
)}
145146
<Stack onClick={toggleMenu} px={10} className="calenderIcon">
146-
<IconCalendarEvent size={px('1rem')} stroke={1.5} style={{ cursor: 'pointer' }} />
147+
<IconCalendarEvent color="#495057" size={px('1rem')} stroke={1.5} style={{ cursor: 'pointer' }} />
147148
</Stack>
148149
</Stack>
149150
<Tooltip label={`${shiftLabelPrefix} Forward`}>
150151
<Stack className={classes.timeRangeCtrlIcon} onClick={() => shiftTimeRange('right')}>
151-
<IconChevronRight stroke={2} size="1rem" style={{ cursor: 'pointer' }} />
152+
<IconChevronRight color="#495057" stroke={1.5} size="1rem" style={{ cursor: 'pointer' }} />
152153
</Stack>
153154
</Tooltip>
154155
</Stack>

‎src/components/Header/styles/LogQuery.module.css

+9
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
color: var(--mantine-color-gray-7);
4242
border: 1px #e9ecef solid;
4343
border-radius: rem(8px);
44+
font-size: 0.65rem;
45+
font-weight: 500;
4446

4547
&:hover {
4648
color: black;
@@ -76,6 +78,9 @@
7678
text-transform: capitalize;
7779
cursor: pointer;
7880
border-radius: 0.65rem;
81+
font-size: 0.65rem;
82+
font-weight: 500;
83+
color: var(--mantine-color-gray-7);
7984

8085
&:hover {
8186
/* color: black !important; */
@@ -204,6 +209,7 @@
204209
background: #545beb !important;
205210
font-weight: 500;
206211
color: white;
212+
font-size: 0.65rem;
207213
}
208214

209215
.fixedRangeBtnSelected:hover {
@@ -239,6 +245,9 @@
239245
cursor: pointer;
240246
border: 1px var(--mantine-color-gray-2) solid;
241247
border-radius: rem(8px);
248+
color: var(--mantine-color-gray-7);
249+
font-weight: 500;
250+
font-size: 0.65rem;
242251
}
243252

244253
.chevronDown {

‎src/pages/Correlation/styles/SavedCorrelationsBtn.module.css

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
border: 1px #e9ecef solid;
55
border-radius: rem(8px);
66
font-size: 0.65rem;
7+
font-weight: 500;
78
&:hover {
89
color: black;
910
}

‎src/pages/Stream/components/PrimaryToolbar.tsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
import { Button, Stack, px, rem } from '@mantine/core';
2-
import IconButton from '@/components/Button/IconButton';
32
import { IconFilterHeart, IconMaximize, IconTable, IconTrash } from '@tabler/icons-react';
43
import { STREAM_PRIMARY_TOOLBAR_CONTAINER_HEIGHT, STREAM_PRIMARY_TOOLBAR_HEIGHT } from '@/constants/theme';
5-
import TimeRange from '@/components/Header/TimeRange';
6-
import RefreshInterval from '@/components/Header/RefreshInterval';
7-
import RefreshNow from '@/components/Header/RefreshNow';
8-
import Querier from './Querier';
94
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
5+
import { filterStoreReducers, useFilterStore } from '../providers/FilterProvider';
6+
import { logsStoreReducers, useLogsStore } from '../providers/LogsProvider';
107
import { useCallback, useEffect } from 'react';
11-
import StreamDropdown from '@/components/Header/StreamDropdown';
12-
import { notifications } from '@mantine/notifications';
138
import { useNavigate, useParams } from 'react-router-dom';
14-
import _ from 'lodash';
15-
import StreamingButton from '@/components/Header/StreamingButton';
9+
10+
import { CorrelationIcon } from '@/components/Navbar/components/CorrelationIcon';
11+
import IconButton from '@/components/Button/IconButton';
12+
import Querier from './Querier';
13+
import RefreshInterval from '@/components/Header/RefreshInterval';
14+
import RefreshNow from '@/components/Header/RefreshNow';
1615
import ShareButton from '@/components/Header/ShareButton';
17-
import { useLogsStore, logsStoreReducers } from '../providers/LogsProvider';
18-
import { filterStoreReducers, useFilterStore } from '../providers/FilterProvider';
16+
import StreamDropdown from '@/components/Header/StreamDropdown';
17+
import StreamingButton from '@/components/Header/StreamingButton';
18+
import TimeRange from '@/components/Header/TimeRange';
19+
import _ from 'lodash';
1920
import classes from './styles/PrimaryToolbar.module.css';
20-
import { CorrelationIcon } from '@/components/Navbar/components/CorrelationIcon';
21+
import { notifications } from '@mantine/notifications';
2122

2223
const { toggleDeleteModal, onToggleView } = logsStoreReducers;
2324
const { toggleSavedFiltersModal } = filterStoreReducers;
24-
const renderMaximizeIcon = () => <IconMaximize size={px('1rem')} stroke={1.5} />;
25+
const renderMaximizeIcon = () => <IconMaximize color="#495057" size={px('1rem')} stroke={1.5} />;
2526
const renderDeleteIcon = () => <IconTrash data-id="delete-stream-btn" size={px('1rem')} stroke={1.5} />;
2627

2728
export const MaximizeButton = () => {
@@ -52,7 +53,7 @@ const AddCorrelationButton = () => {
5253
className={classes.savedFiltersBtn}
5354
h="100%"
5455
onClick={() => navigate('/correlation')}
55-
leftSection={<CorrelationIcon stroke={'#000000'} strokeWidth={1} />}>
56+
leftSection={<CorrelationIcon stroke={'#495057'} strokeWidth={1} />}>
5657
Correlate
5758
</Button>
5859
);
@@ -81,7 +82,7 @@ const ViewToggle = () => {
8182
h="100%"
8283
style={{
8384
backgroundColor: isActive ? '#535BEB' : 'white',
84-
color: isActive ? 'white' : 'black',
85+
color: isActive ? 'white' : '#495057',
8586
}}
8687
onClick={onToggle}
8788
leftSection={<IconTable {...iconProps} />}>

‎src/pages/Stream/components/Querier/index.tsx

+14-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import { Group, Menu, Modal, Stack, px, Tooltip, Tabs } from '@mantine/core';
2-
import { IconChevronDown, IconCodeCircle, IconFilter, IconFilterEdit, IconFilterPlus } from '@tabler/icons-react';
3-
import classes from '../../styles/Querier.module.css';
4-
import { Text } from '@mantine/core';
51
import { FilterQueryBuilder, QueryPills } from './FilterQueryBuilder';
2+
import { Group, Menu, Modal, Stack, Tabs, Tooltip, px } from '@mantine/core';
3+
import { IconChevronDown, IconCodeCircle, IconFilter, IconFilterEdit, IconFilterPlus } from '@tabler/icons-react';
4+
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
5+
import { filterStoreReducers, noValueOperators, useFilterStore } from '../../providers/FilterProvider';
6+
import { logsStoreReducers, useLogsStore } from '../../providers/LogsProvider';
7+
import { useCallback, useEffect, useRef, useState } from 'react';
8+
69
import { AppliedSQLQuery } from './QueryEditor';
710
import QueryCodeEditor from './QueryCodeEditor';
8-
import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider';
9-
import { useCallback, useEffect, useRef, useState } from 'react';
10-
import { filterStoreReducers, noValueOperators, useFilterStore } from '../../providers/FilterProvider';
11-
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
12-
import { useStreamStore } from '../../providers/StreamProvider';
1311
import SaveFilterModal from './SaveFilterModal';
1412
import SavedFiltersModal from './SavedFiltersModal';
13+
import { Text } from '@mantine/core';
1514
import _ from 'lodash';
15+
import classes from '../../styles/Querier.module.css';
1616
import useParamsController from '@/pages/Stream/hooks/useParamsController';
17+
import { useStreamStore } from '../../providers/StreamProvider';
1718

1819
const { setFields, parseQuery, storeAppliedQuery, resetFilters, toggleSubmitBtn, toggleSaveFiltersModal } =
1920
filterStoreReducers;
@@ -275,8 +276,10 @@ const Querier = () => {
275276
justifyContent: 'center',
276277
padding: '0 1rem',
277278
}}>
278-
<Text style={{ fontSize: '0.65rem', fontWeight: 600 }}>{getLabel(viewMode)}</Text>
279-
<IconChevronDown size={px('1rem')} stroke={1.8} />
279+
<Text style={{ fontSize: '0.65rem', fontWeight: 500 }} c="#495057">
280+
{getLabel(viewMode)}
281+
</Text>
282+
<IconChevronDown color="#495057" size={px('1rem')} stroke={1.5} />
280283
</Stack>
281284
</Menu.Target>
282285
<Menu.Dropdown>

‎src/pages/Stream/components/styles/PrimaryToolbar.module.css

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
color: var(--mantine-color-gray-7);
44
border: 1px #e9ecef solid;
55
border-radius: rem(8px);
6+
font-weight: 500;
67
font-size: 0.65rem;
78
&:hover {
89
color: black;

0 commit comments

Comments
 (0)