feat(online-demo): ✨ show 'no matches' when filter list is empty and …

…refine text color ver
cjinhuo · Aug 22, 2024 · c3aa304 · c3aa304
1 parent 968426c
commit c3aa304
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/app/online-demo/src/components/LightedText/index.tsx b/app/online-demo/src/components/LightedText/index.tsx
@@ -9,7 +9,7 @@ interface ILightedFuncProps {
 const LightedText: FC<ILightedFuncProps> = memo(({ text, ranges, className }) => {
 	// If there is no scope, return directly to the original text
 	if (!ranges || ranges.length === 0) {
-		return <span>{text}</span>
+		return <span className='text-skin-neutral-3'>{text}</span>
 	}
 
 	// Sort the ranges to ensure they are processed in order
@@ -38,7 +38,7 @@ const LightedText: FC<ILightedFuncProps> = memo(({ text, ranges, className }) =>
 		result.push(<span key={`text-${lastIndex}`}>{text.slice(lastIndex)}</span>)
 	}
 
-	return <>{result}</>
+	return <div className='text-skin-neutral-3'>{result}</div>
 })
 
 export default memo(LightedText)
diff --git a/app/online-demo/src/components/ListSearch/index.tsx b/app/online-demo/src/components/ListSearch/index.tsx
@@ -129,7 +129,7 @@ const ListSearch = () => {
 						found {count} matches in {searchTime.toFixed(2)} milliseconds
 					</span>
 				</Typography>
-				{filteredList.length && (
+				{filteredList.length ? (
 					<List
 						sx={(theme) => ({
 							[theme.breakpoints.down('sm')]: {
@@ -172,6 +172,8 @@ const ListSearch = () => {
 							</ListItem>
 						))}
 					</List>
+				) : (
+					<div className='text-center text-skin-neutral-5'>No Matches Found</div>
 				)}
 				<Typography variant='h6' component='div' gutterBottom>
 					Add Data

diff --git a/app/online-demo/src/components/base-layout/skin.css b/app/online-demo/src/components/base-layout/skin.css
@@ -39,7 +39,7 @@ html {
   --color-normal-bg-reverse: rgb(230, 236, 242);
 
   --color-linear-bg-start: rgb(6, 12, 18);
-  --color-linear-bg-end: rgba(69, 69, 69, 0.6);
+  --color-linear-bg-end: rgba(36, 36, 36, 0.8);
   --color-link-href: rgb(90, 160, 223);
 
   --color-highlight-bg:#A68800;

diff --git a/app/online-demo/src/components/header/logo.tsx b/app/online-demo/src/components/header/logo.tsx
@@ -15,7 +15,7 @@ export default function Logo() {
 				name={IconParkNames['text-search']}
 				size='2.5rem'
 			/>
-			<div className='text-skin-neutral-3 font-medium text-3xl'>TexSearch</div>
+			<div className='text-skin-neutral-3 font-medium text-3xl'>Text Search Engine</div>
 		</div>
 	)
 }