rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task #729: darker borders in booking details card + bigger centered attendees heading

Browse Source 
- Expanded booking details card in protocol.tsx: outer frame slate-200 →
  slate-400; header/grid row and column dividers slate-100/200 → slate-300
  so the grid reads as a real table.
- AttendeesTable: border darkening is flush-mode only (flush top border,
  header row slate-300, body rows slate-200); dialog (non-flush) keeps its
  previous lighter shades per architect review fix.
- "أبرز الحضور" heading: text-center text-base font-bold text-slate-900
  (was text-sm text-slate-800).
- UI-only; tsc --noEmit clean; architect issue addressed.
This commit is contained in:
Replit Agent
2026-07-09 08:50:59 +00:00
parent 4eec0bf43a
commit 5d30535955
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/protocol.tsx
+16 -8
View File
@@ -1220,8 +1220,8 @@ export default function ProtocolPage() {
{expanded && ( {expanded && (
<TableRow key={`${b.id}-details`} className="bg-slate-50/80"> <TableRow key={`${b.id}-details`} className="bg-slate-50/80">
<TableCell colSpan={detailColSpan} className="p-3"> <TableCell colSpan={detailColSpan} className="p-3">
<div className="overflow-hidden rounded-lg border border-slate-200 bg-white"> <div className="overflow-hidden rounded-lg border border-slate-400 bg-white">
<div className="border-b border-slate-200 bg-slate-50 px-4 py-2.5"> <div className="border-b border-slate-300 bg-slate-50 px-4 py-2.5">
<span className="text-[11px] text-slate-400"> <span className="text-[11px] text-slate-400">
{t("protocol.bookings.table.title")} {t("protocol.bookings.table.title")}
</span> </span>
@@ -1229,7 +1229,7 @@ export default function ProtocolPage() {
{b.title} {b.title}
</div> </div>
</div> </div>
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 divide-x divide-x-reverse divide-slate-100 border-b border-slate-200"> <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 divide-x divide-x-reverse divide-slate-300 border-b border-slate-300">
{( {(
[ [
[t("protocol.bookings.requester"), b.requesterName], [t("protocol.bookings.requester"), b.requesterName],
@@ -1267,7 +1267,7 @@ export default function ProtocolPage() {
).map(([label, value], i) => ( ).map(([label, value], i) => (
<div <div
key={i} key={i}
className="border-b border-slate-100 px-4 py-2" className="border-b border-slate-300 px-4 py-2"
> >
<div className="text-[11px] text-slate-400"> <div className="text-[11px] text-slate-400">
{label} {label}
@@ -1279,7 +1279,7 @@ export default function ProtocolPage() {
))} ))}
</div> </div>
<div> <div>
<div className="px-4 pt-3 pb-2 text-center text-sm font-bold text-slate-800"> <div className="px-4 pt-3 pb-2 text-center text-base font-bold text-slate-900">
{t("protocol.bookings.keyAttendees")} {t("protocol.bookings.keyAttendees")}
</div> </div>
{b.keyAttendees && b.keyAttendees.length > 0 ? ( {b.keyAttendees && b.keyAttendees.length > 0 ? (
@@ -2488,13 +2488,18 @@ function AttendeesTable({
className={cn( className={cn(
"overflow-x-auto", "overflow-x-auto",
flush flush
? "border-t border-slate-200" ? "border-t border-slate-300"
: "rounded-xl border border-slate-200 shadow-sm", : "rounded-xl border border-slate-200 shadow-sm",
)} )}
> >
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-b border-slate-200 bg-slate-100/80 hover:bg-slate-100/80"> <TableRow
className={cn(
"border-b bg-slate-100/80 hover:bg-slate-100/80",
flush ? "border-slate-300" : "border-slate-200",
)}
>
<TableHead className="h-10 w-10 whitespace-nowrap px-4 text-center text-xs font-bold uppercase tracking-wide text-slate-600"> <TableHead className="h-10 w-10 whitespace-nowrap px-4 text-center text-xs font-bold uppercase tracking-wide text-slate-600">
# #
</TableHead> </TableHead>
@@ -2512,7 +2517,10 @@ function AttendeesTable({
{attendees.map((a, i) => ( {attendees.map((a, i) => (
<TableRow <TableRow
key={i} key={i}
className="border-b border-slate-100 last:border-b-0 even:bg-slate-50/60" className={cn(
"border-b last:border-b-0 even:bg-slate-50/60",
flush ? "border-slate-200" : "border-slate-100",
)}
> >
<TableCell className="w-10 px-4 py-2.5 text-center"> <TableCell className="w-10 px-4 py-2.5 text-center">
<span className="mx-auto flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600"> <span className="mx-auto flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">