Skip to content
This repository was archived by the owner on Apr 24, 2026. It is now read-only.

Commit 5d47a85

Browse files
renderghostrenderghost
authored
Merge pull request #69 from renderghost/feature/issue-68-doi-success-alert
Feature #68: Improve DOI resolution success message visibility
2 parents 4f6a013 + 529b18c commit 5d47a85

2 files changed

Lines changed: 127 additions & 108 deletions

File tree

‎src/app/globals.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,4 +305,27 @@
305305
color: var(--color-yellow-vivid-500);
306306
}
307307
}
308+
309+
/* DOI Success Alert styling */
310+
.doi-success-alert {
311+
background-color: var(--color-purple-vivid-500);
312+
color: var(--color-purple-vivid-500);
313+
border-color: var(--color-purple-vivid-500);
314+
}
315+
316+
.doi-success-alert * {
317+
color: var(--color-purple-vivid-500);
318+
}
319+
320+
@media (prefers-color-scheme: dark) {
321+
.doi-success-alert {
322+
background: var(--color-yellow-vivid-500);
323+
color: var(--color-yellow-vivid-500);
324+
border-color: var(--color-yellow-vivid-500);
325+
}
326+
327+
.doi-success-alert * {
328+
color: var(--color-yellow-vivid-500);
329+
}
330+
}
308331
}

‎src/components/research/ResearchForm.tsx‎

Lines changed: 104 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -149,9 +149,9 @@ export default function ResearchForm({ mode, initialData }: ResearchFormProps) {
149149
return (
150150
<form id="research-form" onSubmit={handleSubmit}>
151151
<Card>
152-
<CardContent className="pt-6 space-y-4">
152+
<CardContent className="p-6 space-y-4">
153153
<div className="space-y-2">
154-
<Label htmlFor="doi">DOI *</Label>
154+
<Label htmlFor="doi">Add DOI</Label>
155155
<div className="flex gap-2">
156156
<Input
157157
id="doi"
@@ -191,64 +191,60 @@ export default function ResearchForm({ mode, initialData }: ResearchFormProps) {
191191
</div>
192192

193193
{resolvedMetadata && (
194-
<Alert className="border-primary/50 bg-primary/5">
195-
<CheckCircle2 className="h-4 w-4 text-primary" />
194+
<Alert className="doi-success-alert">
195+
<CheckCircle2 className="h-4 w-4" />
196196
<AlertDescription className="ml-2">
197-
<p className="font-medium mb-2">DOI Resolved Successfully</p>
198-
<div className="space-y-1 text-sm">
199-
{resolvedMetadata.title && (
200-
<p>
201-
<strong>Title:</strong> {resolvedMetadata.title}
202-
</p>
203-
)}
204-
{resolvedMetadata.authors && (
205-
<p>
206-
<strong>Authors:</strong>{' '}
207-
{resolvedMetadata.authors.join(', ')}
208-
</p>
209-
)}
210-
{resolvedMetadata.journal && (
211-
<p>
212-
<strong>Venue:</strong> {resolvedMetadata.journal}
213-
</p>
214-
)}
215-
{resolvedMetadata.publicationDate && (
216-
<p>
217-
<strong>Published:</strong>{' '}
218-
{new Date(resolvedMetadata.publicationDate).getFullYear()}
219-
</p>
220-
)}
221-
{resolvedMetadata.type && (
222-
<p>
223-
<strong>Type:</strong>{' '}
224-
{formatWorkType(resolvedMetadata.type)}
225-
</p>
226-
)}
227-
{resolvedMetadata.abstract && (
228-
<p>
229-
<strong>Abstract:</strong>{' '}
230-
{resolvedMetadata.abstract.substring(0, 200)}
231-
{resolvedMetadata.abstract.length > 200 ? '...' : ''}
232-
</p>
233-
)}
234-
{resolvedMetadata.url && (
235-
<p>
236-
<strong>URL:</strong>{' '}
237-
<a
238-
href={resolvedMetadata.url}
239-
target="_blank"
240-
rel="noopener noreferrer"
241-
className="underline hover:text-primary"
242-
>
243-
{resolvedMetadata.url}
244-
</a>
245-
</p>
246-
)}
247-
</div>
197+
<p className="font-bold mb-1 leading-normal">DOI Resolved Successfully</p>
248198
</AlertDescription>
249199
</Alert>
250200
)}
251201

202+
{resolvedMetadata && (
203+
<div className="space-y-1 text-sm">
204+
{resolvedMetadata.title && (
205+
<p className="leading-normal">
206+
<strong>Title:</strong> {resolvedMetadata.title}
207+
</p>
208+
)}
209+
{resolvedMetadata.authors && (
210+
<p className="leading-normal">
211+
<strong>Authors:</strong>{' '}
212+
{resolvedMetadata.authors.join(', ')}
213+
</p>
214+
)}
215+
{resolvedMetadata.journal && (
216+
<p className="leading-normal">
217+
<strong>Venue:</strong> {resolvedMetadata.journal}
218+
</p>
219+
)}
220+
{resolvedMetadata.publicationDate && (
221+
<p className="leading-normal">
222+
<strong>Published:</strong>{' '}
223+
{new Date(resolvedMetadata.publicationDate).getFullYear()}
224+
</p>
225+
)}
226+
{resolvedMetadata.type && (
227+
<p className="leading-normal">
228+
<strong>Type:</strong>{' '}
229+
{formatWorkType(resolvedMetadata.type)}
230+
</p>
231+
)}
232+
{resolvedMetadata.url && (
233+
<p className="leading-normal">
234+
<strong>URL:</strong>{' '}
235+
<a
236+
href={resolvedMetadata.url}
237+
target="_blank"
238+
rel="noopener noreferrer"
239+
className="underline"
240+
>
241+
{resolvedMetadata.url}
242+
</a>
243+
</p>
244+
)}
245+
</div>
246+
)}
247+
252248
{mode === 'edit' && initialData && (
253249
<Alert>
254250
<AlertDescription>
@@ -308,66 +304,66 @@ export default function ResearchForm({ mode, initialData }: ResearchFormProps) {
308304
</AlertDescription>
309305
</Alert>
310306
)}
311-
</CardContent>
312-
</Card>
313307

314-
{error && (
315-
<Alert variant="destructive" className="mt-4">
316-
<AlertCircle className="h-4 w-4" />
317-
<AlertDescription className="ml-2">
318-
<p>{error}</p>
319-
{showDuplicateWarning && (
308+
{error && (
309+
<Alert variant="destructive">
310+
<AlertCircle className="h-4 w-4" />
311+
<AlertDescription className="ml-2">
312+
<p>{error}</p>
313+
{showDuplicateWarning && (
314+
<Button
315+
type="button"
316+
variant="link"
317+
size="sm"
318+
onClick={handleAddDuplicate}
319+
disabled={loading}
320+
className="p-0 h-auto text-destructive-foreground underline"
321+
>
322+
Add anyway
323+
</Button>
324+
)}
325+
</AlertDescription>
326+
</Alert>
327+
)}
328+
329+
<div className="flex flex-col gap-3 pt-2">
330+
{mode === 'create' && (
331+
<Button type="submit" disabled={loading} className="w-full">
332+
{loading ? (
333+
<>
334+
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
335+
Adding...
336+
</>
337+
) : (
338+
'Add Research'
339+
)}
340+
</Button>
341+
)}
342+
343+
<Button
344+
type="button"
345+
variant="outline"
346+
onClick={() => router.push('/dashboard/research')}
347+
disabled={loading}
348+
className="w-full"
349+
>
350+
{mode === 'edit' ? 'Back' : 'Cancel'}
351+
</Button>
352+
353+
{mode === 'edit' && (
320354
<Button
321355
type="button"
322-
variant="link"
323-
size="sm"
324-
onClick={handleAddDuplicate}
356+
variant="ghost"
357+
onClick={handleDelete}
325358
disabled={loading}
326-
className="p-0 h-auto text-destructive-foreground underline"
359+
className="w-full text-destructive hover:text-destructive hover:bg-destructive/10"
327360
>
328-
Add anyway
361+
Delete Research
329362
</Button>
330363
)}
331-
</AlertDescription>
332-
</Alert>
333-
)}
334-
335-
<div className="flex flex-col gap-3 mt-6">
336-
{mode === 'create' && (
337-
<Button type="submit" disabled={loading} className="w-full">
338-
{loading ? (
339-
<>
340-
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
341-
Adding...
342-
</>
343-
) : (
344-
'Add Research'
345-
)}
346-
</Button>
347-
)}
348-
349-
<Button
350-
type="button"
351-
variant="outline"
352-
onClick={() => router.push('/dashboard/research')}
353-
disabled={loading}
354-
className="w-full"
355-
>
356-
{mode === 'edit' ? 'Back' : 'Cancel'}
357-
</Button>
358-
359-
{mode === 'edit' && (
360-
<Button
361-
type="button"
362-
variant="ghost"
363-
onClick={handleDelete}
364-
disabled={loading}
365-
className="w-full text-destructive hover:text-destructive hover:bg-destructive/10"
366-
>
367-
Delete Research
368-
</Button>
369-
)}
370-
</div>
364+
</div>
365+
</CardContent>
366+
</Card>
371367
</form>
372368
);
373369
}

0 commit comments

Comments
 (0)