Style updates

src/components/WeatherModal/WeatherGraphs.tsx

@@ -69,6 +69,19 @@ export default function WeatherGraphs({
 					/>
 					<CartesianGrid stroke='#f5f5f522' />
 					<Tooltip content={<CustomTooltip />} />
+					<Line
+						unit={'°F'}
+						type='monotone'
+						name='Temperature'
+						dataKey='temperature'
+						stroke={'var(--mantine-color-primary-0)'}
+						strokeWidth={2}
+						dot={{
+							stroke: 'var(--mantine-color-primary-0)',
+							strokeWidth: 0,
+							fill: 'var(--mantine-color-primary-0)',
+						}}
+					/>
 					<Line
 						unit={'°F'}
 						type='monotone'
@@ -84,19 +97,6 @@ export default function WeatherGraphs({
 							fill: 'var(--mantine-color-accent-0)',
 						}}
 					/>
-					<Line
-						unit={'°F'}
-						type='monotone'
-						name='Temperature'
-						dataKey='temperature'
-						stroke={'var(--mantine-color-primary-0)'}
-						strokeWidth={2}
-						dot={{
-							stroke: 'var(--mantine-color-primary-0)',
-							strokeWidth: 0,
-							fill: 'var(--mantine-color-primary-0)',
-						}}
-					/>
 					<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
 				</ComposedChart>
 			</ResponsiveContainer>
@@ -148,22 +148,6 @@ export default function WeatherGraphs({
 						dataKey={(data: HourlyForecast) => {
 							return data.relativeHumidity.value;
 						}}
-						stroke={'var(--mantine-color-accent-0)'}
-						strokeWidth={2}
-						fill={'url(#colorHumidity)'}
-						dot={{
-							stroke: 'var(--mantine-color-accent-0)',
-							strokeWidth: 0,
-							fill: 'var(--mantine-color-accent-0)',
-						}}
-					/>
-					<Area
-						unit={'%'}
-						type='monotone'
-						name='Precipitation'
-						dataKey={(data: HourlyForecast) => {
-							return data.probabilityOfPrecipitation.value;
-						}}
 						stroke={'var(--mantine-color-primary-0)'}
 						strokeWidth={2}
 						fill={'url(#colorPrecipitation)'}
@@ -173,6 +157,22 @@ export default function WeatherGraphs({
 							fill: 'var(--mantine-color-primary-0)',
 						}}
 					/>
+					<Area
+						unit={'%'}
+						type='monotone'
+						name='Precipitation'
+						dataKey={(data: HourlyForecast) => {
+							return data.probabilityOfPrecipitation.value;
+						}}
+						stroke={'var(--mantine-color-accent-0)'}
+						strokeWidth={2}
+						fill={'url(#colorHumidity)'}
+						dot={{
+							stroke: 'var(--mantine-color-accent-0)',
+							strokeWidth: 0,
+							fill: 'var(--mantine-color-accent-0)',
+						}}
+					/>
 					<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
 				</AreaChart>
 			</ResponsiveContainer>

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

@@ -9,7 +9,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
-	const { isMobile, appSort, appDensity } = useCommonHooks();
+	const { appSort, appDensity } = useCommonHooks();
 	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
@@ -53,9 +53,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 							display: 'grid',
 							gridColumnGap: '5px',
 							gridRowGap: '5px',
-							gridTemplateColumns: isMobile
+							gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
-								? '1fr 1fr 1fr'
-								: `repeat(${appDensity}, 1fr)`,
 							gridTemplateRows: '64px',
 						}}
 					>

src/pages/homepage/components/Bookmarks/BookmarkItem.tsx

@@ -9,6 +9,11 @@ function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
 			classNames={textClasses}
 			component='a'
 			href={bookmark.url}
+			style={{
+				textOverflow: 'ellipsis',
+				overflow: 'hidden',
+				width: '100%',
+			}}
 		>
 			{bookmark.name}
 		</Text>

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -12,7 +12,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/bookmarkCategories',
 	});
-	const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks();
+	const { bookmarkSort, bookmarkDensity } = useCommonHooks();
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -38,13 +38,11 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 							if (a.id && b.id) {
 								return a.id < b.id ? 1 : -1;
 							}
-
 							return -1;
 						case 'Oldest':
 							if (a.id && b.id) {
 								return a.id > b.id ? 1 : -1;
 							}
-
 							return -1;
 						case 'Custom':
 							return a.categoryIndex > b.categoryIndex ? 1 : -1;
@@ -70,9 +68,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 								flexWrap: 'nowrap',
 								gridColumnGap: '20px',
 								gridRowGap: '0px',
-								gridTemplateColumns: isMobile
+								gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
-									? '1fr 1fr'
-									: `repeat(${bookmarkDensity}, 1fr)`,
 								gridTemplateRows: 'auto',
 							}}
 						>

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -266,8 +266,11 @@ function SettingsButton() {
 									labelProps={{ display: 'none' }}
 									placeholder='Pick a playlist...'
 									value={currentThemePlaylist}
-									data={
+									data={[
-										themePlaylistData
+										'All',
+										'Backgrounds',
+										'No Backgrounds',
+										...(themePlaylistData
 											?.map((playlist: ThemePlaylist) => {
 												return {
 													value: playlist.name,
@@ -276,8 +279,8 @@ function SettingsButton() {
 											})
 											.toSorted((a: ComboboxItem, b: ComboboxItem) =>
 												a.label.localeCompare(b.label),
-											) ?? []
+											) ?? []),
-									}
+									]}
 									w='92%'
 									classNames={{
 										root: selectClasses.menuSelectRoot,