fix: dynamic font size (#393)

This PR adds a feature to dynamically change font 
sizes based on screen resolution.

fixes #395

Author: Koustavd18

src/components/Header/PrimaryHeader.tsx

@@ -4,6 +4,7 @@ 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';
 
@@ -32,6 +33,7 @@ const PrimaryHeader: FC = () => {
 				style={{ flexDirection: 'row', height: '100%', justifyContent: 'flex-end' }}
 				gap={8}>
 				<Button
+					className={responsive.responsiveText}
 					variant="outline"
 					style={{ border: 'none' }}
 					component={'a'}
@@ -40,7 +42,11 @@ const PrimaryHeader: FC = () => {
 					Upgrade
 				</Button>
 				<Divider orientation="vertical" />
-				<Button onClick={toggleHelpModal} style={{ border: 'none' }} variant="outline">
+				<Button
+					className={responsive.responsiveText}
+					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>{ms(interval)}</Text>
+							<Text className={classes.text}>{ms(interval)}</Text>
 						</Menu.Item>
 					);
 				})}

src/components/Header/StreamDropdown.tsx

@@ -1,6 +1,7 @@
 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';
@@ -33,11 +34,17 @@ const StreamDropdown = () => {
 
 	return (
 		<Select
+			size="sm"
 			searchable
 			limit={20}
 			value={valueRef.current}
 			h="100%"
-			classNames={{ input: classes.streamInput, description: classes.streamSelectDescription }}
+			classNames={{
+				input: classes.streamInput,
+				description: classes.streamSelectDescription,
+
+				option: responsive.responsiveText,
+			}}
 			onChange={handleChange}
 			styles={{
 				input: {

src/components/Header/TimeRange.tsx

@@ -7,6 +7,7 @@ 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';
@@ -138,7 +139,10 @@ const TimeRange: FC = () => {
 						{type === 'fixed' ? (
 							<RelativeTimeIntervals interval={interval} onDurationSelect={onDurationSelect} />
 						) : (
-							<Text onClick={toggleMenu} style={{ fontSize: '0.65rem', fontWeight: 500, whiteSpace: 'nowrap' }}>
+							<Text
+								onClick={toggleMenu}
+								className={responsive.responsiveText}
+								style={{ fontWeight: 500, whiteSpace: 'nowrap' }}>
 								{label}
 							</Text>
 						)}

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

@@ -1,58 +1,58 @@
 .container {
-    background-color: white;
-    display: flex;
-    align-items: center;
-    color: #495057;
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: normal;
-    width: 100%;
+	background-color: white;
+	display: flex;
+	align-items: center;
+	color: #495057;
+	font-size: 1rem;
+	font-weight: 500;
+	line-height: normal;
+	width: 100%;
 }
 
 .logoContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	transition: width 0.4s ease-in-out;
-    background-color: var(--mantine-color-gray-0);
+	background-color: var(--mantine-color-gray-0);
 	border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-    height: 100%;
+	height: 100%;
 }
 
 .navContainer {
-    width: calc(100%);
-    justify-content: space-between;
+	width: calc(100%);
+	justify-content: space-between;
 }
 
 .actionBtn {
-    transition: transform 0.2s ease-in-out;
+	transition: transform 0.2s ease-in-out;
 }
 
 .actionBtn:hover {
-    transform: scale(1.3);
-    background-color: #f8f9fa;
+	transform: scale(1.3);
+	background-color: #f8f9fa;
 }
 
 .primaryHeaderContainer {
-    background-color: white;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    flex-direction: row;
-    background-color: var(--mantine-color-gray-0);
+	background-color: white;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	flex-direction: row;
+	background-color: var(--mantine-color-gray-0);
 }
 
 .rightSection {
 	border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-    flex-direction: row;
-    justify-content: flex-end;
-    height: 100%;
-    flex: 1;
-    align-items: center;
+	flex-direction: row;
+	justify-content: flex-end;
+	height: 100%;
+	flex: 1;
+	align-items: center;
 }
 
 .divider {
-    border: 1px solid;
-    height: 70%;
-    border-color: var(--mantine-color-gray-4);
-}
+	border: 1px solid;
+	height: 70%;
+	border-color: var(--mantine-color-gray-4);
+}