Revert Dynamic Font Size

src/components/Header/PrimaryHeader.tsx

@@ -4,7 +4,6 @@ import { NAVBAR_WIDTH, PRIMARY_HEADER_HEIGHT } from '@/constants/theme';
 import { Button, Divider, Image, Stack } from '@mantine/core';
 import { FC, useCallback } from 'react';
 import styles from './styles/Header.module.css';
-import responsive from '@/styles/responsiveText.module.css';
 import HelpModal from './HelpModal';
 import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 
@@ -33,7 +32,6 @@ const PrimaryHeader: FC = () => {
 				style={{ flexDirection: 'row', height: '100%', justifyContent: 'flex-end' }}
 				gap={8}>
 				<Button
-					className={responsive.responsiveText}
 					variant="outline"
 					style={{ border: 'none' }}
 					component={'a'}
@@ -42,11 +40,7 @@ const PrimaryHeader: FC = () => {
 					Upgrade
 				</Button>
 				<Divider orientation="vertical" />
-				<Button
-					className={responsive.responsiveText}
-					onClick={toggleHelpModal}
-					style={{ border: 'none' }}
-					variant="outline">
+				<Button onClick={toggleHelpModal} style={{ border: 'none' }} variant="outline">
 					Help
 				</Button>
 			</Stack>

src/components/Header/RefreshInterval.tsx

@@ -66,7 +66,7 @@ const RefreshInterval: FC = () => {
 
 					return (
 						<Menu.Item key={interval} onClick={() => onSelectedInterval(interval)}>
-							<Text className={classes.text}>{ms(interval)}</Text>
+							<Text>{ms(interval)}</Text>
 						</Menu.Item>
 					);
 				})}

src/components/Header/StreamDropdown.tsx

@@ -1,7 +1,6 @@
 import { Select } from '@mantine/core';
 import { useCallback, useEffect, useRef } from 'react';
 import classes from './styles/LogQuery.module.css';
-import responsive from '@/styles/responsiveText.module.css';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { STREAM_VIEWS } from '@/constants/routes';
@@ -34,16 +33,13 @@ const StreamDropdown = () => {
 
 	return (
 		<Select
-			size="sm"
 			searchable
 			limit={20}
 			value={valueRef.current}
 			h="100%"
 			classNames={{
 				input: classes.streamInput,
 				description: classes.streamSelectDescription,
-
-				option: responsive.responsiveText,
 			}}
 			onChange={handleChange}
 			styles={{

src/components/Header/TimeRange.tsx

@@ -7,7 +7,6 @@ import type { FC } from 'react';
 import { Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import { FIXED_DURATIONS } from '@/constants/timeConstants';
 import classes from './styles/LogQuery.module.css';
-import responsive from '@/styles/responsiveText.module.css';
 import { useOuterClick } from '@/hooks/useOuterClick';
 import _ from 'lodash';
 import timeRangeUtils from '@/utils/timeRangeUtils';
@@ -139,10 +138,7 @@ const TimeRange: FC = () => {
 						{type === 'fixed' ? (
 							<RelativeTimeIntervals interval={interval} onDurationSelect={onDurationSelect} />
 						) : (
-							<Text
-								onClick={toggleMenu}
-								className={responsive.responsiveText}
-								style={{ fontWeight: 500, whiteSpace: 'nowrap' }}>
+							<Text onClick={toggleMenu} style={{ fontSize: '0.65rem', fontWeight: 500, whiteSpace: 'nowrap' }}>
 								{label}
 							</Text>
 						)}

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

@@ -42,31 +42,6 @@
 	border: 1px #e9ecef solid;
 	border-radius: rem(8px);
 
-	@media (min-width: 1024px) {
-		/* sm: Styles for HD devices */
-		font-size: 10px;
-	}
-
-	@media (min-width: 1980px) {
-		/* md: Styles for FULL HD devices */
-		font-size: 12px;
-	}
-
-	@media (min-width: 1600px) {
-		/* lg: Styles for 2K devices */
-		font-size: 14px;
-	}
-
-	@media (min-width: 2160px) {
-		/* xl: Styles for 4K devices */
-		font-size: 18px;
-	}
-
-	@media (min-width: 3200px) {
-		/* 2xl: Styles for 8K devices */
-		font-size: 24px;
-	}
-
 	&:hover {
 		color: black;
 	}
@@ -102,31 +77,6 @@
 	cursor: pointer;
 	border-radius: 0.65rem;
 
-	@media (min-width: 1024px) {
-		/* sm: Styles for HD devices */
-		font-size: 10px;
-	}
-
-	@media (min-width: 1980px) {
-		/* md: Styles for FULL HD devices */
-		font-size: 12px;
-	}
-
-	@media (min-width: 1600px) {
-		/* lg: Styles for 2K devices */
-		font-size: 14px;
-	}
-
-	@media (min-width: 2160px) {
-		/* xl: Styles for 4K devices */
-		font-size: 18px;
-	}
-
-	@media (min-width: 3200px) {
-		/* 2xl: Styles for 8K devices */
-		font-size: 24px;
-	}
-
 	&:hover {
 		/* color: black !important; */
 
@@ -283,30 +233,6 @@
 	cursor: pointer;
 	border: 1px var(--mantine-color-gray-2) solid;
 	border-radius: rem(8px);
-	@media (min-width: 1024px) {
-		/* sm: Styles for HD devices */
-		font-size: 10px;
-	}
-
-	@media (min-width: 1980px) {
-		/* md: Styles for FULL HD devices */
-		font-size: 12px;
-	}
-
-	@media (min-width: 1600px) {
-		/* lg: Styles for 2K devices */
-		font-size: 14px;
-	}
-
-	@media (min-width: 2160px) {
-		/* xl: Styles for 4K devices */
-		font-size: 18px;
-	}
-
-	@media (min-width: 3200px) {
-		/* 2xl: Styles for 8K devices */
-		font-size: 24px;
-	}
 }
 
 .chevronDown {

src/components/Misc/CreatableSelect.tsx

@@ -75,7 +75,6 @@ export function CreatableSelect(props: Props) {
 			}}>
 			<Combobox.Target>
 				<InputBase
-					size="lg"
 					rightSection={<Combobox.Chevron />}
 					value={search}
 					onChange={(event) => {

src/components/Misc/DeleteOrResetModal.tsx

@@ -98,7 +98,7 @@ const DeleteOrResetModal = ({
 								Please type <span className={classes.confirmationTextHighlight}>{`"${confirmationText}"`}</span> to
 								confirm {type === 'delete' ? 'deletion' : 'reset'}.
 							</Text>
-							<TextInput size="lg" value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
+							<TextInput value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
 						</>
 					)}
 
@@ -109,14 +109,13 @@ const DeleteOrResetModal = ({
 				{/* Action buttons */}
 				<Stack className={classes.actionButtonsContainer}>
 					<Box>
-						<Button variant="outline" size="lg" onClick={closeModal}>
+						<Button variant="outline" onClick={closeModal}>
 							Cancel
 						</Button>
 					</Box>
 					<Box>
 						{/* Disable the button if the confirmation text is not correct or the action is processing. */}
 						<Button
-							size="lg"
 							disabled={(type !== 'simple' && confirmationText !== confirmText) || isActionInProgress}
 							onClick={tryConfirm}>
 							{type === 'reset' ? 'Reset' : 'Delete'}

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

@@ -10,88 +10,19 @@
 
 .headerText {
 	font-weight: 600;
-	@media (min-width: 1024px) {
-		/* sm: Styles for HD devices */
-		font-size: 10px;
-	}
-
-	@media (min-width: 1980px) {
-		/* md: Styles for FULL HD devices */
-		font-size: 12px;
-	}
-
-	@media (min-width: 1600px) {
-		/* lg: Styles for 2K devices */
-		font-size: 14px;
-	}
-
-	@media (min-width: 2160px) {
-		/* xl: Styles for 4K devices */
-		font-size: 18px;
-	}
-
-	@media (min-width: 3200px) {
-		/* 2xl: Styles for 8K devices */
-		font-size: 24px;
-	}
+	font-size: 0.9rem;
 }
 
 .warningText {
 	margin-top: 0.4rem;
 	font-weight: 500;
 	color: var(--mantine-color-gray-8);
-	@media (min-width: 1024px) {
-		/* sm: Styles for HD devices */
-		font-size: 10px;
-	}
-
-	@media (min-width: 1980px) {
-		/* md: Styles for FULL HD devices */
-		font-size: 12px;
-	}
-
-	@media (min-width: 1600px) {
-		/* lg: Styles for 2K devices */
-		font-size: 14px;
-	}
-
-	@media (min-width: 2160px) {
-		/* xl: Styles for 4K devices */
-		font-size: 18px;
-	}
-
-	@media (min-width: 3200px) {
-		/* 2xl: Styles for 8K devices */
-		font-size: 24px;
-	}
+	font-size: 0.7rem;
 }
 
 .confirmationText {
 	color: var(--mantine-color-gray-7);
-	@media (min-width: 1024px) {
-		/* sm: Styles for HD devices */
-		font-size: 10px;
-	}
-
-	@media (min-width: 1980px) {
-		/* md: Styles for FULL HD devices */
-		font-size: 12px;
-	}
-
-	@media (min-width: 1600px) {
-		/* lg: Styles for 2K devices */
-		font-size: 14px;
-	}
-
-	@media (min-width: 2160px) {
-		/* xl: Styles for 4K devices */
-		font-size: 18px;
-	}
-
-	@media (min-width: 3200px) {
-		/* 2xl: Styles for 8K devices */
-		font-size: 24px;
-	}
+	font-size: 0.7rem;
 }
 
 .confirmationTextHighlight {

src/components/Navbar/UserModal.tsx

@@ -2,14 +2,9 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { Modal, Stack } from '@mantine/core';
 import { Text } from '@mantine/core';
 import Cookies from 'js-cookie';
-import responsive from '@/styles/responsiveText.module.css';
 
 const ModalTitle = () => {
-	return (
-		<Text className={responsive.responsiveText} style={{ fontWeight: 600, marginLeft: '0.5rem' }}>
-			User Details
-		</Text>
-	);
+	return <Text style={{ fontWeight: 600, marginLeft: '0.5rem' }}>User Details</Text>;
 };
 
 type UserModalProps = {
@@ -33,18 +28,14 @@ const UserModal = (props: UserModalProps) => {
 			title={<ModalTitle />}>
 			<Stack style={{ padding: '1rem' }}>
 				<Stack gap={0}>
-					<Text className={responsive.responsiveText} style={{ fontWeight: 500 }}>
-						Username:
-					</Text>
-					<Text className={responsive.responsiveText}>{username}</Text>
+					<Text style={{ fontWeight: 500 }}>Username:</Text>
+					<Text>{username}</Text>
 				</Stack>
 				<Stack gap={0}>
-					<Text className={responsive.responsiveText} style={{ fontWeight: 500 }}>
-						Roles:
-					</Text>
+					<Text style={{ fontWeight: 500 }}>Roles:</Text>
 					{Object.entries(userRoles).map(([key, value], index) => {
 						return (
-							<Text key={index} className={responsive.responsiveText}>
+							<Text key={index}>
 								{index + 1}. {key} ({value[0].privilege})
 							</Text>
 						);