improve search

packages/app/src/components/Searcher/index.jsx

@@ -33,20 +33,20 @@ const ResultsTypeDecorators = {
 		},
 	},
 	tracks: {
-		icon: "FiAlbum",
+		icon: "MdAlbum",
 		label: "Tracks",
 		renderItem: (props) => {
 			const { item, onClick } = props
 
 			return (
-				<div className="suggestion" onClick={onClick}>
-					<MusicTrack track={item} />
+				<div className="suggestion">
+					<MusicTrack track={item} onClick={onClick} />
 				</div>
 			)
 		},
 	},
 	playlists: {
-		icon: "FiAlbum",
+		icon: "MdPlaylistPlay",
 		label: "Playlists",
 		renderItem: (props) => {
 			return (
@@ -83,18 +83,6 @@ const Results = (props) => {
 		return results[key].items.length > 0
 	})
 
-	if (groupsKeys.length === 0) {
-		return (
-			<div className="searcher no_results">
-				<antd.Result
-					status="info"
-					title="No results"
-					subTitle="We are sorry, but we could not find any results for your search."
-				/>
-			</div>
-		)
-	}
-
 	const handleClick = async (decorator, data) => {
 		if (typeof decorator.onClick === "function") {
 			await decorator.onClick(data)
@@ -105,6 +93,26 @@ const Results = (props) => {
 		}
 	}
 
+	if (props.loading) {
+		return (
+			<div className="searcher_results">
+				<antd.Skeleton active />
+			</div>
+		)
+	}
+
+	if (groupsKeys.length === 0) {
+		return (
+			<div className="searcher_results no_results">
+				<antd.Result
+					status="info"
+					title="No results"
+					subTitle="We are sorry, but we could not find any results for your search."
+				/>
+			</div>
+		)
+	}
+
 	return (
 		<div
 			className={classnames("searcher_results", {
@@ -121,12 +129,12 @@ const Results = (props) => {
 				return (
 					<div className="searcher_results_category" key={index}>
 						<div className="searcher_results_category_header">
-							<h1>
+							<h2>
 								{createIconRender(decorator.icon)}
 								<Translation>
 									{(t) => t(decorator.label)}
 								</Translation>
-							</h1>
+							</h2>
 						</div>
 
 						<div
@@ -150,7 +158,7 @@ const Results = (props) => {
 	)
 }
 
-export default (props) => {
+const Searcher = (props) => {
 	const [loading, setLoading] = React.useState(false)
 	const [searchResult, setSearchResult] = React.useState(null)
 	const [searchValue, setSearchValue] = React.useState("")
@@ -253,13 +261,14 @@ export default (props) => {
 			/>
 
 			{searchResult && props.renderResults && (
-				<div className="results">
-					{loading && <antd.Skeleton active />}
-					{!loading && (
-						<Results results={searchResult} onClose={props.close} />
-					)}
-				</div>
+				<Results
+					loading={loading}
+					results={searchResult}
+					onClose={props.close}
+				/>
 			)}
 		</div>
 	)
 }
+
+export default Searcher

packages/app/src/components/Searcher/index.less

@@ -61,15 +61,8 @@ html {
 
 	gap: 10px;
 
-    .results {
-        border-radius: 10px;
-
 	width: 100%;
 
-        overflow-x: hidden;
-        overflow-y: overlay;
-    }
-
 	&.small {
 		.ant-input-affix-wrapper {
 			padding: 7px;
@@ -107,6 +100,8 @@ html {
 
 		padding: 0 10px;
 
+		background-color: var(--background-color-primary);
+
 		.ant-input-prefix {
 			font-size: 2rem;
 
@@ -131,7 +126,23 @@ html {
 	flex-direction: row;
 	flex-wrap: wrap;
 
+	width: 100%;
 	gap: 10px;
+	padding: 20px;
+
+	border-radius: 12px;
+
+	overflow-x: hidden;
+	overflow-y: overlay;
+
+	color: var(--text-color);
+	background-color: var(--background-color-primary);
+
+	.ant-result,
+	.ant-result-title,
+	.ant-result-subtitle {
+		color: var(--text-color);
+	}
 
 	&.one_column {
 		grid-template-columns: 1fr;
@@ -146,10 +157,6 @@ html {
 	}
 
 	.searcher_results_category {
-        background-color: var(--background-color-primary);
-
-        padding: 20px;
-
 		border-radius: 8px;
 
 		height: fit-content;
@@ -158,6 +165,12 @@ html {
 		gap: 20px;
 
 		.searcher_results_category_header {
+			background-color: var(--background-color-accent);
+			border-radius: 8px;
+			padding: 5px 10px;
+
+			width: fit-content;
+
 			h1 {
 				margin: 0;
 			}