WIP: Dynamic Font Size

parseablehq · Dec 20, 2024 · 600f10c · 600f10c
1 parent 4fa3439
commit 600f10c
Show file tree

Hide file tree

Showing 26 changed files with 1,393 additions and 280 deletions.
diff --git a/src/components/Header/styles/LogQuery.module.css b/src/components/Header/styles/LogQuery.module.css
@@ -16,7 +16,7 @@
 	background: #fff;
 	padding: 0;
 	width: 36px;
-	color: #211F1F;
+	color: #211f1f;
 	border: 1px #e9ecef solid;
 	border-radius: rem(8px);
 
@@ -26,12 +26,12 @@
 }
 
 .refreshNowBtn:hover {
-	background-color: #E0E0E0;
+	background-color: #e0e0e0;
 }
 
 .streamButton {
 	background: #fff;
-	color: #211F1F;
+	color: #211f1f;
 	border: 1px #e9ecef solid;
 	border-radius: rem(8px);
 }
@@ -49,7 +49,34 @@
 }
 
 .intervalbtn:hover {
-	background-color: #E0E0E0;
+	background-color: #e0e0e0;
+}
+
+.streamSelect {
+	@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;
+	}
 }
 
 .homeIcon {
@@ -97,7 +124,6 @@
 	background: #424242;
 	font-weight: 600;
 	color: #fff;
-
 }
 
 .customRangeContainer {
@@ -158,7 +184,7 @@
 	background-color: white;
 	padding: 6px 12px;
 	margin-right: 0.625rem;
-	color: #211F1F;
+	color: #211f1f;
 	border: 1px #e9ecef solid;
 }
 
@@ -177,7 +203,7 @@
 }
 
 .timeRangeBTn:hover {
-	background-color: #E0E0E0;
+	background-color: #e0e0e0;
 	color: black;
 }
 
@@ -187,7 +213,7 @@
 }
 
 .dropdownOption {
-	color: #211F1F;
+	color: #211f1f;
 	font-size: var(--mantine-font-size-md);
 }
 
@@ -210,11 +236,11 @@
 }
 
 .customTimeRangeApplyBtn {
-	background: #545BEB;
+	background: #545beb;
 	color: white;
 
 	&:hover {
-		background: #FC466B;
+		background: #fc466b;
 	}
 }
 
@@ -263,8 +289,6 @@
 	white-space: nowrap;
 }
 
-
-
 .modeContainer {
 	width: 5rem;
 	height: 100%;
@@ -301,7 +325,7 @@
 	overflow: hidden;
 	border-radius: rem(8px);
 	align-items: center;
-	height: 1.6rem
+	height: 1.6rem;
 }
 
 .timeRangeCtrlIcon {
@@ -310,7 +334,7 @@
 	justify-content: center;
 
 	&:hover {
-		background-color: #E0E0E0;
+		background-color: #e0e0e0;
 		color: black;
 	}
 
@@ -350,4 +374,4 @@
 	background-color: var(--mantine-color-gray-5);
 	color: white;
 	border-radius: 0.15rem;
-}
+}
diff --git a/src/components/Misc/CreatableSelect.tsx b/src/components/Misc/CreatableSelect.tsx
@@ -75,6 +75,7 @@ export function CreatableSelect(props: Props) {
 			}}>
 			<Combobox.Target>
 				<InputBase
+					size="lg"
 					rightSection={<Combobox.Chevron />}
 					value={search}
 					onChange={(event) => {

diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/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 value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
+							<TextInput size="lg" value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
 						</>
 					)}
 
@@ -109,13 +109,14 @@ const DeleteOrResetModal = ({
 				{/* Action buttons */}
 				<Stack className={classes.actionButtonsContainer}>
 					<Box>
-						<Button variant="outline" onClick={closeModal}>
+						<Button variant="outline" size="lg" 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'}

diff --git a/src/components/Misc/styles/DeleteOrResetModal.module.css b/src/components/Misc/styles/DeleteOrResetModal.module.css
@@ -9,20 +9,89 @@
 }
 
 .headerText {
-	font-size: 0.9rem;
 	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;
+	}
 }
 
 .warningText {
 	margin-top: 0.4rem;
-	font-size: 0.7rem;
 	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;
+	}
 }
 
 .confirmationText {
-	font-size: 0.7rem;
 	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;
+	}
 }
 
 .confirmationTextHighlight {

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