Updates to styles; misc bugfixes

src/pages/settings/components/Applications/Applications.tsx

@@ -15,6 +15,7 @@ import {
 } from '@mantine/core';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { AppItem } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
@@ -25,7 +26,6 @@ import type { Application } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
 import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
-import AppSettingsItem from './AppSettingsItem';
 import DebouncedApplication from './DebouncedApplication';
 
 const ApplicationSettings = () => {
@@ -267,7 +267,11 @@ const ApplicationSettings = () => {
 				}
 			/>
 			<DragDropContext onDragEnd={onDragEnd}>
-				<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
+				<Stack
+					mt={isMobile ? '10rem' : '6rem'}
+					mb={isMobile ? '6rem' : '1rem'}
+					align='center'
+				>
 					{applications.length > 0 ? (
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
@@ -303,12 +307,14 @@ const ApplicationSettings = () => {
 																>
 																	#{index + 1}
 																</Text>
-																<AppSettingsItem
+																<AppItem
+																	key={application.name}
+																	name={application.name}
 																	url={application.url}
 																	icon={application.icon}
-																	name={application.name}
 																	enabled={application.enabled}
-																	allIcons={allIcons}
+																	scale={2}
+																	linksActive={false}
 																/>
 															</Box>
 														</Box>
@@ -331,12 +337,14 @@ const ApplicationSettings = () => {
 																e.stopPropagation();
 															}}
 														>
-															<AppSettingsItem
+															<AppItem
+																key={application.name}
+																name={application.name}
 																url={application.url}
 																icon={application.icon}
-																name={application.name}
 																enabled={application.enabled}
-																allIcons={allIcons}
+																scale={2}
+																linksActive={false}
 															/>
 														</Box>
 													</Popover.Target>