Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit a786393

Browse files
Koustavd18Koustavd18
authored
Revert Dynamic Font Size (#400)
1 parent 1c92264 commit a786393

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+130
-2073
lines changed

‎src/components/Header/PrimaryHeader.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { NAVBAR_WIDTH, PRIMARY_HEADER_HEIGHT } from '@/constants/theme';
44
import { Button, Divider, Image, Stack } from '@mantine/core';
55
import { FC, useCallback } from 'react';
66
import styles from './styles/Header.module.css';
7-
import responsive from '@/styles/responsiveText.module.css';
87
import HelpModal from './HelpModal';
98
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
109

@@ -33,7 +32,6 @@ const PrimaryHeader: FC = () => {
3332
style={{ flexDirection: 'row', height: '100%', justifyContent: 'flex-end' }}
3433
gap={8}>
3534
<Button
36-
className={responsive.responsiveText}
3735
variant="outline"
3836
style={{ border: 'none' }}
3937
component={'a'}
@@ -42,11 +40,7 @@ const PrimaryHeader: FC = () => {
4240
Upgrade
4341
</Button>
4442
<Divider orientation="vertical" />
45-
<Button
46-
className={responsive.responsiveText}
47-
onClick={toggleHelpModal}
48-
style={{ border: 'none' }}
49-
variant="outline">
43+
<Button onClick={toggleHelpModal} style={{ border: 'none' }} variant="outline">
5044
Help
5145
</Button>
5246
</Stack>

‎src/components/Header/RefreshInterval.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const RefreshInterval: FC = () => {
6666

6767
return (
6868
<Menu.Item key={interval} onClick={() => onSelectedInterval(interval)}>
69-
<Text className={classes.text}>{ms(interval)}</Text>
69+
<Text>{ms(interval)}</Text>
7070
</Menu.Item>
7171
);
7272
})}

‎src/components/Header/StreamDropdown.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Select } from '@mantine/core';
22
import { useCallback, useEffect, useRef } from 'react';
33
import classes from './styles/LogQuery.module.css';
4-
import responsive from '@/styles/responsiveText.module.css';
54
import { useNavigate, useParams } from 'react-router-dom';
65
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
76
import { STREAM_VIEWS } from '@/constants/routes';
@@ -34,16 +33,13 @@ const StreamDropdown = () => {
3433

3534
return (
3635
<Select
37-
size="sm"
3836
searchable
3937
limit={20}
4038
value={valueRef.current}
4139
h="100%"
4240
classNames={{
4341
input: classes.streamInput,
4442
description: classes.streamSelectDescription,
45-
46-
option: responsive.responsiveText,
4743
}}
4844
onChange={handleChange}
4945
styles={{

‎src/components/Header/TimeRange.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import type { FC } from 'react';
77
import { Fragment, useCallback, useMemo, useRef, useState } from 'react';
88
import { FIXED_DURATIONS } from '@/constants/timeConstants';
99
import classes from './styles/LogQuery.module.css';
10-
import responsive from '@/styles/responsiveText.module.css';
1110
import { useOuterClick } from '@/hooks/useOuterClick';
1211
import _ from 'lodash';
1312
import timeRangeUtils from '@/utils/timeRangeUtils';
@@ -139,10 +138,7 @@ const TimeRange: FC = () => {
139138
{type === 'fixed' ? (
140139
<RelativeTimeIntervals interval={interval} onDurationSelect={onDurationSelect} />
141140
) : (
142-
<Text
143-
onClick={toggleMenu}
144-
className={responsive.responsiveText}
145-
style={{ fontWeight: 500, whiteSpace: 'nowrap' }}>
141+
<Text onClick={toggleMenu} style={{ fontSize: '0.65rem', fontWeight: 500, whiteSpace: 'nowrap' }}>
146142
{label}
147143
</Text>
148144
)}

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

Lines changed: 0 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -42,31 +42,6 @@
4242
border: 1px #e9ecef solid;
4343
border-radius: rem(8px);
4444

45-
@media (min-width: 1024px) {
46-
/* sm: Styles for HD devices */
47-
font-size: 10px;
48-
}
49-
50-
@media (min-width: 1980px) {
51-
/* md: Styles for FULL HD devices */
52-
font-size: 12px;
53-
}
54-
55-
@media (min-width: 1600px) {
56-
/* lg: Styles for 2K devices */
57-
font-size: 14px;
58-
}
59-
60-
@media (min-width: 2160px) {
61-
/* xl: Styles for 4K devices */
62-
font-size: 18px;
63-
}
64-
65-
@media (min-width: 3200px) {
66-
/* 2xl: Styles for 8K devices */
67-
font-size: 24px;
68-
}
69-
7045
&:hover {
7146
color: black;
7247
}
@@ -102,31 +77,6 @@
10277
cursor: pointer;
10378
border-radius: 0.65rem;
10479

105-
@media (min-width: 1024px) {
106-
/* sm: Styles for HD devices */
107-
font-size: 10px;
108-
}
109-
110-
@media (min-width: 1980px) {
111-
/* md: Styles for FULL HD devices */
112-
font-size: 12px;
113-
}
114-
115-
@media (min-width: 1600px) {
116-
/* lg: Styles for 2K devices */
117-
font-size: 14px;
118-
}
119-
120-
@media (min-width: 2160px) {
121-
/* xl: Styles for 4K devices */
122-
font-size: 18px;
123-
}
124-
125-
@media (min-width: 3200px) {
126-
/* 2xl: Styles for 8K devices */
127-
font-size: 24px;
128-
}
129-
13080
&:hover {
13181
/* color: black !important; */
13282

@@ -283,30 +233,6 @@
283233
cursor: pointer;
284234
border: 1px var(--mantine-color-gray-2) solid;
285235
border-radius: rem(8px);
286-
@media (min-width: 1024px) {
287-
/* sm: Styles for HD devices */
288-
font-size: 10px;
289-
}
290-
291-
@media (min-width: 1980px) {
292-
/* md: Styles for FULL HD devices */
293-
font-size: 12px;
294-
}
295-
296-
@media (min-width: 1600px) {
297-
/* lg: Styles for 2K devices */
298-
font-size: 14px;
299-
}
300-
301-
@media (min-width: 2160px) {
302-
/* xl: Styles for 4K devices */
303-
font-size: 18px;
304-
}
305-
306-
@media (min-width: 3200px) {
307-
/* 2xl: Styles for 8K devices */
308-
font-size: 24px;
309-
}
310236
}
311237

312238
.chevronDown {

‎src/components/Misc/CreatableSelect.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ export function CreatableSelect(props: Props) {
7575
}}>
7676
<Combobox.Target>
7777
<InputBase
78-
size="lg"
7978
rightSection={<Combobox.Chevron />}
8079
value={search}
8180
onChange={(event) => {

‎src/components/Misc/DeleteOrResetModal.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const DeleteOrResetModal = ({
9898
Please type <span className={classes.confirmationTextHighlight}>{`"${confirmationText}"`}</span> to
9999
confirm {type === 'delete' ? 'deletion' : 'reset'}.
100100
</Text>
101-
<TextInput size="lg" value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
101+
<TextInput value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
102102
</>
103103
)}
104104

@@ -109,14 +109,13 @@ const DeleteOrResetModal = ({
109109
{/* Action buttons */}
110110
<Stack className={classes.actionButtonsContainer}>
111111
<Box>
112-
<Button variant="outline" size="lg" onClick={closeModal}>
112+
<Button variant="outline" onClick={closeModal}>
113113
Cancel
114114
</Button>
115115
</Box>
116116
<Box>
117117
{/* Disable the button if the confirmation text is not correct or the action is processing. */}
118118
<Button
119-
size="lg"
120119
disabled={(type !== 'simple' && confirmationText !== confirmText) || isActionInProgress}
121120
onClick={tryConfirm}>
122121
{type === 'reset' ? 'Reset' : 'Delete'}

‎src/components/Misc/styles/DeleteOrResetModal.module.css

Lines changed: 3 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -10,88 +10,19 @@
1010

1111
.headerText {
1212
font-weight: 600;
13-
@media (min-width: 1024px) {
14-
/* sm: Styles for HD devices */
15-
font-size: 10px;
16-
}
17-
18-
@media (min-width: 1980px) {
19-
/* md: Styles for FULL HD devices */
20-
font-size: 12px;
21-
}
22-
23-
@media (min-width: 1600px) {
24-
/* lg: Styles for 2K devices */
25-
font-size: 14px;
26-
}
27-
28-
@media (min-width: 2160px) {
29-
/* xl: Styles for 4K devices */
30-
font-size: 18px;
31-
}
32-
33-
@media (min-width: 3200px) {
34-
/* 2xl: Styles for 8K devices */
35-
font-size: 24px;
36-
}
13+
font-size: 0.9rem;
3714
}
3815

3916
.warningText {
4017
margin-top: 0.4rem;
4118
font-weight: 500;
4219
color: var(--mantine-color-gray-8);
43-
@media (min-width: 1024px) {
44-
/* sm: Styles for HD devices */
45-
font-size: 10px;
46-
}
47-
48-
@media (min-width: 1980px) {
49-
/* md: Styles for FULL HD devices */
50-
font-size: 12px;
51-
}
52-
53-
@media (min-width: 1600px) {
54-
/* lg: Styles for 2K devices */
55-
font-size: 14px;
56-
}
57-
58-
@media (min-width: 2160px) {
59-
/* xl: Styles for 4K devices */
60-
font-size: 18px;
61-
}
62-
63-
@media (min-width: 3200px) {
64-
/* 2xl: Styles for 8K devices */
65-
font-size: 24px;
66-
}
20+
font-size: 0.7rem;
6721
}
6822

6923
.confirmationText {
7024
color: var(--mantine-color-gray-7);
71-
@media (min-width: 1024px) {
72-
/* sm: Styles for HD devices */
73-
font-size: 10px;
74-
}
75-
76-
@media (min-width: 1980px) {
77-
/* md: Styles for FULL HD devices */
78-
font-size: 12px;
79-
}
80-
81-
@media (min-width: 1600px) {
82-
/* lg: Styles for 2K devices */
83-
font-size: 14px;
84-
}
85-
86-
@media (min-width: 2160px) {
87-
/* xl: Styles for 4K devices */
88-
font-size: 18px;
89-
}
90-
91-
@media (min-width: 3200px) {
92-
/* 2xl: Styles for 8K devices */
93-
font-size: 24px;
94-
}
25+
font-size: 0.7rem;
9526
}
9627

9728
.confirmationTextHighlight {

‎src/components/Navbar/UserModal.tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,9 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
22
import { Modal, Stack } from '@mantine/core';
33
import { Text } from '@mantine/core';
44
import Cookies from 'js-cookie';
5-
import responsive from '@/styles/responsiveText.module.css';
65

76
const ModalTitle = () => {
8-
return (
9-
<Text className={responsive.responsiveText} style={{ fontWeight: 600, marginLeft: '0.5rem' }}>
10-
User Details
11-
</Text>
12-
);
7+
return <Text style={{ fontWeight: 600, marginLeft: '0.5rem' }}>User Details</Text>;
138
};
149

1510
type UserModalProps = {
@@ -33,18 +28,14 @@ const UserModal = (props: UserModalProps) => {
3328
title={<ModalTitle />}>
3429
<Stack style={{ padding: '1rem' }}>
3530
<Stack gap={0}>
36-
<Text className={responsive.responsiveText} style={{ fontWeight: 500 }}>
37-
Username:
38-
</Text>
39-
<Text className={responsive.responsiveText}>{username}</Text>
31+
<Text style={{ fontWeight: 500 }}>Username:</Text>
32+
<Text>{username}</Text>
4033
</Stack>
4134
<Stack gap={0}>
42-
<Text className={responsive.responsiveText} style={{ fontWeight: 500 }}>
43-
Roles:
44-
</Text>
35+
<Text style={{ fontWeight: 500 }}>Roles:</Text>
4536
{Object.entries(userRoles).map(([key, value], index) => {
4637
return (
47-
<Text key={index} className={responsive.responsiveText}>
38+
<Text key={index}>
4839
{index + 1}. {key} ({value[0].privilege})
4940
</Text>
5041
);

0 commit comments

Comments
 (0)