Updates to styles; misc bugfixes

src/pages/homepage/components/Applications/AppItem.tsx

@@ -1,80 +0,0 @@
-import { Box, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
-import { useState } from 'react';
-import * as fa6 from 'react-icons/fa6';
-import * as si from 'react-icons/si';
-import * as vsc from 'react-icons/vsc';
-import { boxClasses, textClasses } from 'styles';
-
-function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
-	const allIcons: any = { ...fa6, ...vsc, ...si };
-	const Icon = allIcons[icon];
-	const { isMobile } = useCommonHooks();
-	const [textDecoration, setTextDecoration] = useState<string>('none');
-	const [hover, setHover] = useState<boolean>(false);
-	const validUrl =
-		url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
-	return (
-		<Box
-			component='a'
-			href={validUrl}
-			onMouseOver={() => {
-				setTextDecoration('underline');
-				setHover(true);
-			}}
-			onMouseOut={() => {
-				setTextDecoration('none');
-				setHover(false);
-			}}
-			className={boxClasses.appItemBox}
-			h={'64px'}
-		>
-			{hover && (
-				<svg
-					style={{ position: 'absolute', borderRadius: '6px' }}
-					height='100%'
-					width='100%'
-					xmlns='http://www.w3.org/2000/svg'
-				>
-					<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
-				</svg>
-			)}
-			<Stack
-				align={isMobile ? 'center' : undefined}
-				justify={isMobile ? 'center' : undefined}
-				style={{
-					width: isMobile ? '100%' : undefined,
-					marginRight: isMobile ? 0 : '1rem',
-					marginLeft: isMobile ? 0 : '1rem',
-					paddingTop: isMobile ? 0 : '1rem',
-				}}
-			>
-				{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
-			</Stack>
-			<Stack
-				justify='center'
-				style={{
-					overflow: 'hidden',
-					whiteSpace: 'nowrap',
-					gap: 0,
-					flex: 1,
-				}}
-			>
-				<Text className={textClasses.appName} classNames={textClasses}>
-					{name}
-				</Text>
-				<Text
-					className={textClasses.appUrl}
-					classNames={textClasses}
-					style={{
-						textDecoration: textDecoration,
-					}}
-				>
-					{url}
-				</Text>
-			</Stack>
-		</Box>
-	);
-}
-
-export default AppItem;

src/pages/homepage/components/Applications/Applications.tsx

@@ -1,15 +1,15 @@
 import { Stack, Text } from '@mantine/core';
+import { AppItem } from 'components';
 import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import type { Application } from 'types';
-import AppItem from './AppItem';
 
 function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
-	const { appSort, appDensity } = useCommonHooks();
+	const { appSort, appDensity, appScale } = useCommonHooks();
 	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
@@ -42,7 +42,11 @@ function Applications({ contentType }: { contentType: string[] }) {
 		<>
 			{applications.length > 0 && contentType.length > 0 && (
 				<Stack gap={0}>
-					<Text className={textClasses.sectionTitle} classNames={textClasses}>
+					<Text
+						fz={appScale * 20}
+						className={textClasses.sectionTitle}
+						classNames={textClasses}
+					>
 						Applications
 					</Text>
 					<Stack
@@ -65,6 +69,9 @@ function Applications({ contentType }: { contentType: string[] }) {
 										name={application.name}
 										url={application.url}
 										icon={application.icon}
+										enabled={application.enabled}
+										scale={appScale}
+										linksActive
 									/>
 								);
 							})}