frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🖌️ Cleaned up the form

Browse Source
This commit is contained in:
Rishi Ghan
2024-01-04 09:17:35 -05:00
parent 4b40f7e9c2
commit ad12c05514
2 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/client/components/ComicDetail/ComicVineMatchPanel.tsx
View File

@@ -21,7 +21,22 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
comicObjectId={comicObjectId} comicObjectId={comicObjectId}
/> />
) : ( ) : (
<div className="text-md my-5">{comicvine.scrapingStatus}</div> <>
<article
role="alert"
className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600 text-sm"
>
<div>
<p>ComicVine match results are an approximation.</p>
<p>
Auto-matching is not available yet. If you see no results or
poor quality ones, you can override the search query
parameters to get better ones.
</p>
</div>
</article>
<div className="text-md my-5">{comicvine.scrapingStatus}</div>
</>
)} )}
</div> </div>
</> </>

10
src/client/components/ComicDetail/ComicVineSearchForm.tsx
View File

@@ -45,7 +45,7 @@ export const ComicVineSearchForm = (data) => {
{(props) => ( {(props) => (
<input <input
{...props.input} {...props.input}
className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 w-full rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300" className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-full rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Type the issue name" placeholder="Type the issue name"
/> />
)} )}
@@ -57,8 +57,8 @@ export const ComicVineSearchForm = (data) => {
{(props) => ( {(props) => (
<input <input
{...props.input} {...props.input}
className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 w-14 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300" className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-14 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Type the issue number" placeholder="#"
/> />
)} )}
</Field> </Field>
@@ -69,8 +69,8 @@ export const ComicVineSearchForm = (data) => {
{(props) => ( {(props) => (
<input <input
{...props.input} {...props.input}
className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 w-20 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300" className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-20 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Type the issue year" placeholder="1984"
/> />
)} )}
</Field> </Field>