Style updates

src/hooks/useCommonHooks.ts

@@ -11,7 +11,7 @@ export function useCommonHooks() {
 	const [theme, setTheme] = useAtom(appTheme);
 	const [themeName, setThemeName] = useLocalStorage<string>({
 		key: 'theme',
-		defaultValue: 'blackboard',
+		defaultValue: 'random',
 	});
 	const [appFilter, setAppFilter] = useLocalStorage<string[]>({
 		key: 'appFilter',
@@ -35,11 +35,11 @@ export function useCommonHooks() {
 	});
 	const [bookmarkDensity, setBookmarkDensity] = useLocalStorage<number>({
 		key: 'bookmarkDensity',
-		defaultValue: 5,
+		defaultValue: 6,
 	});
 	const [currentTheme, setCurrentTheme] = useLocalStorage<string>({
 		key: 'theme',
-		defaultValue: 'blackboard',
+		defaultValue: 'random',
 	});
 	const [currentThemePlaylist, setCurrentThemePlaylist] = useLocalStorage<string>({
 		key: 'themePlaylist',

src/pages/settings/components/Theming/ThemeModal.tsx

@@ -14,7 +14,7 @@ import {
 import { useCommonHooks } from 'hooks';
 import { useEffect, useRef, useState } from 'react';
 import { FiSave, FiX } from 'react-icons/fi';
-import { modalClasses, textClasses, textInputClasses } from 'styles';
+import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
 import type { Theme } from 'types';
 import ThemeModalContent from './ThemeModalContent';
 
@@ -56,7 +56,8 @@ function ThemeModal({
 	);
 
 	const re = /(?:\.([^.]+))?$/;
-	const items = filtered.map((item: string, index: number) => (
+	const items = filtered.map((item: string, index: number) => {
+		return (
 			<UnstyledButton
 				data-list-item
 				key={item}
@@ -64,11 +65,11 @@ function ThemeModal({
 					width: '100%',
 					height: '75px',
 					background:
-					item !== 'none'
+						item !== 'none' && item !== 'None'
 							? index === hovered
 								? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(../../api/backgroundImages/${item})`
 								: `no-repeat center url(../../api/backgroundImages/${item})`
-						: undefined,
+							: 'repeating-linear-gradient(45deg, #33333366, #33333366 10px, #88888866 10px, #88888866 20px)',
 					backgroundSize: item !== 'none' ? 'cover' : undefined,
 					backgroundColor: item === 'none' ? '#00000088' : undefined,
 					paddingLeft: '.5rem',
@@ -112,7 +113,8 @@ function ThemeModal({
 					)}
 				</Group>
 			</UnstyledButton>
-	));
+		);
+	});
 
 	useEffect(() => {
 		if (selectedTheme) {
@@ -393,6 +395,8 @@ function ThemeModal({
 							</Group>
 							<ScrollArea.Autosize
 								viewportRef={viewportRef}
+								className={scrollAreaClasses.default}
+								classNames={scrollAreaClasses}
 								style={{
 									height: 150,
 									width: '90%',

src/pages/settings/components/Theming/ThemePlaylistCard.tsx

@@ -77,7 +77,7 @@ function ThemePlaylistCard({
 					color:
 						theme.borderColor === theme.primaryColor
 							? 'var(--mantine-color-accent-0)'
-							: 'var(--mantine-color-background-0)',
+							: 'var(--mantine-color-primary-0)',
 					zIndex: 3,
 				}}
 			>
@@ -96,7 +96,7 @@ function ThemePlaylistCard({
 						color:
 							theme.borderColor === theme.primaryColor
 								? 'var(--mantine-color-accent-0)'
-								: 'var(--mantine-color-background-0)',
+								: 'var(--mantine-color-primary-0)',
 						zIndex: 3,
 					}}
 					onClick={() => {
@@ -119,7 +119,7 @@ function ThemePlaylistCard({
 						color:
 							theme.borderColor === theme.primaryColor
 								? 'var(--mantine-color-accent-0)'
-								: 'var(--mantine-color-background-0)',
+								: 'var(--mantine-color-red-6)',
 						zIndex: 3,
 					}}
 					onClick={() => {

src/pages/settings/components/Theming/ThemePlaylists.tsx

@@ -128,7 +128,7 @@ function ThemePlaylists() {
 											color:
 												theme.borderColor === theme.primaryColor
 													? 'var(--mantine-color-accent-0)'
-													: 'var(--mantine-color-background-0)',
+													: 'var(--mantine-color-primary-0)',
 										}}
 									/>
 								)}

src/styles/Button.module.css

@@ -52,7 +52,7 @@
 		padding: .5rem;
 		margin: 0;
 		background-color: var(--mantine-color-search-0);
-		color: var(--mantine-color-accent-0);
+		color: var(--mantine-color-primary-0);
 	}
 	&:hover {
 		background-color: var(--mantine-color-primary-0) !important;