oauth/inbox: use native ordered list; explicit severity fallback (P2-45, P2-48)
This commit is contained in:
1 parent
2286d70758
commit
cd85419d1d
3 files changed
+28
-32
No files matched your search
@@ -9,7 +9,7 @@ import {
|
||||
import type { InboxItem, InboxItemType, SectionId } from "@shared/types";
|
||||
import { timeAgo } from "../../lib/formatters";
|
||||
import { useT } from "../../i18n";
|
||||
import { typeConfig, severityColors } from "./inbox-helpers";
|
||||
import { typeConfig, severityBorderClass } from "./inbox-helpers";
|
||||
|
||||
interface InboxProps {
|
||||
items: InboxItem[];
|
||||
@@ -115,7 +115,7 @@ export function Inbox({ items, onNavigate }: InboxProps) {
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
className={`group flex items-center gap-3 rounded-lg border border-l-[3px] border-border bg-card px-4 py-3 transition duration-150 hover:border-border hover:shadow-md hover:-translate-y-px ${severityColors[item.severity] ?? ""}`}
|
||||
className={`group flex items-center gap-3 rounded-lg border border-l-[3px] border-border bg-card px-4 py-3 transition duration-150 hover:border-border hover:shadow-md hover:-translate-y-px ${severityBorderClass(item.severity)}`}
|
||||
>
|
||||
<div
|
||||
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
|
||||
|
||||
@@ -25,6 +25,11 @@ export const severityColors: Record<string, string> = {
|
||||
low: "border-l-[color:var(--border)]",
|
||||
};
|
||||
|
||||
export function severityBorderClass(severity: string | null | undefined): string {
|
||||
if (!severity) return "border-l-[color:var(--border)]";
|
||||
return severityColors[severity] ?? "border-l-[color:var(--border)]";
|
||||
}
|
||||
|
||||
export function CompactMetric({ label, value, tone = "default", subtitle }: {
|
||||
label: string;
|
||||
value: string | number;
|
||||
|
||||
@@ -102,37 +102,28 @@ export function OAuthPromptDialog() {
|
||||
</div>
|
||||
|
||||
{isManualCode ? (
|
||||
<div className="mb-5 space-y-3 text-[13px] leading-relaxed text-muted-foreground">
|
||||
<ol className="space-y-2 pl-0">
|
||||
<li className="flex gap-2">
|
||||
<span className="font-mono text-[11px] text-muted-foreground/70">1</span>
|
||||
<span>
|
||||
{pending.authUrl ? (
|
||||
<>
|
||||
Open{" "}
|
||||
<a
|
||||
href={pending.authUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-foreground underline decoration-dotted underline-offset-4 hover:text-accent-foreground"
|
||||
>
|
||||
the authorization page
|
||||
</a>{" "}
|
||||
and click <strong className="text-foreground">Authorize</strong>.
|
||||
</>
|
||||
) : (
|
||||
<>Complete authorization in the browser window that opened.</>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex gap-2">
|
||||
<span className="font-mono text-[11px] text-muted-foreground/70">2</span>
|
||||
<span>Copy the authorization code shown on the confirmation page.</span>
|
||||
</li>
|
||||
<li className="flex gap-2">
|
||||
<span className="font-mono text-[11px] text-muted-foreground/70">3</span>
|
||||
<span>Paste it below and press <strong className="text-foreground">Submit</strong>.</span>
|
||||
<div className="mb-5 text-[13px] leading-relaxed text-muted-foreground">
|
||||
<ol className="list-decimal space-y-2 pl-5 marker:text-[11px] marker:font-mono marker:text-muted-foreground/70">
|
||||
<li>
|
||||
{pending.authUrl ? (
|
||||
<>
|
||||
Open{" "}
|
||||
<a
|
||||
href={pending.authUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-foreground underline decoration-dotted underline-offset-4 hover:text-accent-foreground"
|
||||
>
|
||||
the authorization page
|
||||
</a>{" "}
|
||||
and click <strong className="text-foreground">Authorize</strong>.
|
||||
</>
|
||||
) : (
|
||||
<>Complete authorization in the browser window that opened.</>
|
||||
)}
|
||||
</li>
|
||||
<li>Copy the authorization code shown on the confirmation page.</li>
|
||||
<li>Paste it below and press <strong className="text-foreground">Submit</strong>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Reference in new issue
Block a user