Skip to content

Commit cc479e3

Browse files
devarshishimpidevarshishimpi
authored
Merge pull request #12 from devarshishimpi/bug/file-review-status-bar-dashboard
Enhance file review status UI, improve error handling, and strengthen test coverage
2 parents 8556b82 + 2b2df7d commit cc479e3

27 files changed

Lines changed: 1895 additions & 696 deletions

‎package-lock.json‎

Lines changed: 413 additions & 359 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/client/app.css‎

Lines changed: 194 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
--success: oklch(64% 0.24 115);
5656
--success-bg: oklch(98% 0.04 115);
5757
--success-border: oklch(85% 0.15 115);
58-
--warning: oklch(82% 0.18 65);
58+
--warning: oklch(56% 0.18 65);
5959
--warning-bg: oklch(98% 0.04 65);
6060
--warning-border: oklch(90% 0.12 65);
6161
--danger: oklch(62% 0.22 25);
@@ -550,9 +550,9 @@
550550
}
551551

552552
@utility badge-warning {
553-
background-color: #fffbeb;
554-
color: #d97706;
555-
border-color: #fcd34d;
553+
background-color: var(--warning-bg);
554+
color: var(--warning);
555+
border-color: var(--warning-border);
556556

557557
.dark & {
558558
background-color: var(--warning-bg);
@@ -599,14 +599,14 @@
599599

600600
&.pending { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); }
601601
&.running {
602-
@apply bg-info shadow-[0_0_0_3px_color-mix(in_oklch,var(--info)_25%,transparent)] animate-[pulse-ring_1.5s_var(--ease-out-quart)_infinite];
602+
@apply bg-info;
603603
}
604604
&.done { @apply bg-success; }
605605
&.failed { @apply bg-danger; }
606606
}
607607

608608
@utility pulsing-dot {
609-
@apply w-[7px] h-[7px] rounded-full bg-info inline-block animate-[pulse-ring_1.5s_var(--ease-out-quart)_infinite];
609+
@apply w-[7px] h-[7px] rounded-full bg-info inline-block;
610610
}
611611

612612
/* ─────────────────────────────────────────────────────
@@ -865,3 +865,191 @@
865865
& a { @apply text-primary underline underline-offset-2; }
866866
& hr { @apply border-border my-[1.5em]; }
867867
}
868+
869+
/* ─────────────────────────────────────────────────────
870+
Sonner Toast — Premium overrides
871+
───────────────────────────────────────────────────── */
872+
873+
/* ── Outer list / viewport ───────────────────────── */
874+
[data-sonner-toaster] {
875+
--offset: 1.25rem !important;
876+
--width: min(22rem, calc(100vw - 2rem)) !important;
877+
font-family: var(--font-sans) !important;
878+
}
879+
880+
/* ── Base toast shell ─────────────────────────────── */
881+
.codra-toast {
882+
display: flex !important;
883+
align-items: flex-start !important;
884+
gap: 0.625rem !important;
885+
padding: 0.75rem 0.875rem !important;
886+
border-radius: 0.625rem !important;
887+
border-width: 1px !important;
888+
border-style: solid !important;
889+
font-family: var(--font-sans) !important;
890+
font-size: 0.8125rem !important;
891+
line-height: 1.45 !important;
892+
box-shadow:
893+
0 4px 16px oklch(0% 0 0 / 0.10),
894+
0 1px 4px oklch(0% 0 0 / 0.06),
895+
inset 0 1px 0 oklch(100% 0 0 / 0.05) !important;
896+
897+
/* light defaults (overridden per-variant below) */
898+
background: oklch(99.5% 0.004 115) !important;
899+
border-color: oklch(88% 0.008 115) !important;
900+
color: oklch(15% 0.02 115) !important;
901+
902+
/* smooth entrance */
903+
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
904+
}
905+
906+
.dark .codra-toast {
907+
background: oklch(13% 0.018 115) !important;
908+
border-color: oklch(22% 0.022 115) !important;
909+
color: oklch(94% 0.006 115) !important;
910+
box-shadow:
911+
0 6px 24px oklch(0% 0 0 / 0.5),
912+
0 1px 6px oklch(0% 0 0 / 0.3),
913+
inset 0 1px 0 oklch(100% 0 0 / 0.04) !important;
914+
}
915+
916+
/* ── Title ────────────────────────────────────────── */
917+
.codra-toast-title {
918+
font-size: 0.8125rem !important;
919+
font-weight: 600 !important;
920+
letter-spacing: 0.005em !important;
921+
line-height: 1.35 !important;
922+
}
923+
924+
/* ── Description ──────────────────────────────────── */
925+
.codra-toast-description {
926+
font-size: 0.74rem !important;
927+
font-weight: 400 !important;
928+
opacity: 0.72 !important;
929+
margin-top: 0.15rem !important;
930+
line-height: 1.5 !important;
931+
}
932+
933+
/* ── Icon wrapper ─────────────────────────────────── */
934+
.codra-toast-icon {
935+
margin-top: 0.05rem !important;
936+
flex-shrink: 0 !important;
937+
}
938+
939+
/* ── Close button ─────────────────────────────────── */
940+
.codra-toast-close {
941+
top: 0.55rem !important;
942+
right: 0.55rem !important;
943+
width: 1.25rem !important;
944+
height: 1.25rem !important;
945+
border-radius: 0.3rem !important;
946+
background: oklch(88% 0.006 115 / 0.6) !important;
947+
border: 1px solid oklch(82% 0.008 115 / 0.8) !important;
948+
color: oklch(40% 0.015 115) !important;
949+
transition: background 150ms, opacity 150ms !important;
950+
}
951+
952+
.dark .codra-toast-close {
953+
background: oklch(22% 0.018 115 / 0.7) !important;
954+
border-color: oklch(30% 0.02 115 / 0.8) !important;
955+
color: oklch(65% 0.012 115) !important;
956+
}
957+
958+
.codra-toast-close:hover {
959+
background: oklch(82% 0.010 115) !important;
960+
opacity: 1 !important;
961+
}
962+
963+
.dark .codra-toast-close:hover {
964+
background: oklch(28% 0.022 115) !important;
965+
}
966+
967+
/* ── SUCCESS ─────────────────────────────────────── */
968+
.codra-toast-success {
969+
background: oklch(98.5% 0.045 115) !important;
970+
border-color: oklch(82% 0.16 115) !important;
971+
color: oklch(28% 0.10 115) !important;
972+
}
973+
974+
.dark .codra-toast-success {
975+
background: oklch(16% 0.08 115) !important;
976+
border-color: oklch(32% 0.14 115) !important;
977+
color: oklch(90% 0.18 115) !important;
978+
}
979+
980+
.codra-toast-success .codra-toast-description {
981+
color: oklch(38% 0.10 115) !important;
982+
opacity: 0.85 !important;
983+
}
984+
985+
.dark .codra-toast-success .codra-toast-description {
986+
color: oklch(72% 0.12 115) !important;
987+
opacity: 0.9 !important;
988+
}
989+
990+
/* ── ERROR ───────────────────────────────────────── */
991+
.codra-toast-error {
992+
background: oklch(98.5% 0.03 25) !important;
993+
border-color: oklch(80% 0.14 25) !important;
994+
color: oklch(32% 0.14 25) !important;
995+
}
996+
997+
.dark .codra-toast-error {
998+
background: oklch(15% 0.07 25) !important;
999+
border-color: oklch(35% 0.14 25) !important;
1000+
color: oklch(85% 0.08 25) !important;
1001+
}
1002+
1003+
.codra-toast-error .codra-toast-description {
1004+
color: oklch(42% 0.12 25) !important;
1005+
opacity: 0.85 !important;
1006+
}
1007+
1008+
.dark .codra-toast-error .codra-toast-description {
1009+
color: oklch(68% 0.10 25) !important;
1010+
opacity: 0.9 !important;
1011+
}
1012+
1013+
/* ── LOADING ─────────────────────────────────────── */
1014+
.codra-toast-loading {
1015+
background: oklch(98% 0.004 115) !important;
1016+
border-color: oklch(86% 0.010 115) !important;
1017+
color: oklch(20% 0.020 115) !important;
1018+
}
1019+
1020+
.dark .codra-toast-loading {
1021+
background: oklch(14% 0.020 115) !important;
1022+
border-color: oklch(24% 0.025 115) !important;
1023+
color: oklch(88% 0.008 115) !important;
1024+
}
1025+
1026+
/* spinner inherits accent color */
1027+
.codra-toast-loader svg {
1028+
color: var(--primary) !important;
1029+
}
1030+
1031+
/* ── WARNING ─────────────────────────────────────── */
1032+
.codra-toast-warning {
1033+
background: oklch(98.5% 0.04 65) !important;
1034+
border-color: oklch(82% 0.13 65) !important;
1035+
color: oklch(35% 0.12 65) !important;
1036+
}
1037+
1038+
.dark .codra-toast-warning {
1039+
background: oklch(16% 0.08 65) !important;
1040+
border-color: oklch(35% 0.14 65) !important;
1041+
color: oklch(82% 0.14 65) !important;
1042+
}
1043+
1044+
/* ── INFO ────────────────────────────────────────── */
1045+
.codra-toast-info {
1046+
background: oklch(98.5% 0.03 250) !important;
1047+
border-color: oklch(80% 0.12 250) !important;
1048+
color: oklch(30% 0.12 250) !important;
1049+
}
1050+
1051+
.dark .codra-toast-info {
1052+
background: oklch(15% 0.07 250) !important;
1053+
border-color: oklch(33% 0.12 250) !important;
1054+
color: oklch(80% 0.12 250) !important;
1055+
}

‎src/client/components/features/dashboard/updates-email-prompt.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ export function UpdatesEmailPrompt() {
3535
try {
3636
const response = await api.subscribeUpdates(email);
3737
setStatus(response);
38-
toast.success('Updates email saved', {
39-
description: 'You will only get important Codra release and security notes.',
38+
toast.success('You’re subscribed', {
39+
description: 'We’ll only reach out for important releases and security notices.',
4040
});
4141
} catch (error) {
42-
toast.error('Could not save updates email', {
43-
description: error instanceof Error ? error.message : 'Please try again.',
42+
toast.error('Subscription failed', {
43+
description: 'We couldn’t save your email. Please check it and try again.',
4444
});
4545
} finally {
4646
setSubmitting(false);

‎src/client/components/features/job-detail/job-findings-list.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export function JobFindingsList({ job }: JobFindingsListProps) {
2121
<div className="flex items-center gap-2.5">
2222
<FileText size={14} strokeWidth={1.75} className="text-primary" />
2323
<h2 className="text-sm font-semibold text-foreground">Findings</h2>
24-
{job.status === 'running' && <span className="pulsing-dot" />}
2524
</div>
2625
<div className="flex items-center gap-2">
2726
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60">View by</span>

0 commit comments

Comments
 (0)