apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-17 18:35:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: improve spacing and layout in ApprovalCard component

Browse source
This commit is contained in:
Anish Sarkar 2026-03-20 18:13:53 +05:30
parent 151dcd26e1
commit 6d1c7731f0
1 changed files with 38 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

75
surfsense_web/components/tool-ui/linear/create-linear-issue.tsx
View file

@ -272,13 +272,13 @@ function ApprovalCard({
{!decided && ( {!decided && (
<> <>
<div className="mx-5 h-px bg-border/50" /> <div className="mx-5 h-px bg-border/50" />
<div className="px-5 py-4 space-y-4 select-none"> <div className="px-5 py-3 space-y-3 select-none">
{interruptData.context?.error ? ( {interruptData.context?.error ? (
<p className="text-sm text-destructive">{interruptData.context.error}</p> <p className="text-sm text-destructive">{interruptData.context.error}</p>
) : ( ) : (
<> <>
{workspaces.length > 0 && ( {workspaces.length > 0 && (
<div className="space-y-2"> <div className="space-y-1.5">
<p className="text-xs font-medium text-muted-foreground"> <p className="text-xs font-medium text-muted-foreground">
Linear Account <span className="text-destructive">*</span> Linear Account <span className="text-destructive">*</span>
</p> </p>
@ -317,7 +317,7 @@ function ApprovalCard({
{selectedWorkspace && ( {selectedWorkspace && (
<> <>
<div className="space-y-2"> <div className="space-y-1.5">
<p className="text-xs font-medium text-muted-foreground"> <p className="text-xs font-medium text-muted-foreground">
Team <span className="text-destructive">*</span> Team <span className="text-destructive">*</span>
</p> </p>
@ -346,7 +346,7 @@ function ApprovalCard({
{selectedTeam && ( {selectedTeam && (
<> <>
<div className="space-y-2"> <div className="space-y-1.5">
<p className="text-xs font-medium text-muted-foreground">State</p> <p className="text-xs font-medium text-muted-foreground">State</p>
<Select value={selectedStateId} onValueChange={setSelectedStateId}> <Select value={selectedStateId} onValueChange={setSelectedStateId}>
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
@ -362,43 +362,44 @@ function ApprovalCard({
</Select> </Select>
</div> </div>
<div className="space-y-2"> <div className="grid grid-cols-2 gap-3">
<p className="text-xs font-medium text-muted-foreground">Assignee</p> <div className="space-y-1.5">
<Select value={selectedAssigneeId} onValueChange={setSelectedAssigneeId}> <p className="text-xs font-medium text-muted-foreground">Assignee</p>
<SelectTrigger className="w-full"> <Select value={selectedAssigneeId} onValueChange={setSelectedAssigneeId}>
<SelectValue placeholder="Unassigned" /> <SelectTrigger className="w-full">
</SelectTrigger> <SelectValue placeholder="Unassigned" />
<SelectContent> </SelectTrigger>
<SelectItem value="__none__">Unassigned</SelectItem> <SelectContent>
{selectedTeam.members <SelectItem value="__none__">Unassigned</SelectItem>
.filter((m) => m.active) {selectedTeam.members
.map((m) => ( .filter((m) => m.active)
<SelectItem key={m.id} value={m.id}> .map((m) => (
{m.name} ({m.email}) <SelectItem key={m.id} value={m.id}>
{m.name} ({m.email})
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-1.5">
<p className="text-xs font-medium text-muted-foreground">Priority</p>
<Select value={selectedPriority} onValueChange={setSelectedPriority}>
<SelectTrigger className="w-full">
<SelectValue placeholder="No priority" />
</SelectTrigger>
<SelectContent>
{selectedWorkspace.priorities.map((p) => (
<SelectItem key={p.priority} value={String(p.priority)}>
{p.label}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground">Priority</p>
<Select value={selectedPriority} onValueChange={setSelectedPriority}>
<SelectTrigger className="w-full">
<SelectValue placeholder="No priority" />
</SelectTrigger>
<SelectContent>
{selectedWorkspace.priorities.map((p) => (
<SelectItem key={p.priority} value={String(p.priority)}>
{p.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
{selectedTeam.labels.length > 0 && ( {selectedTeam.labels.length > 0 && (
<div className="space-y-2"> <div className="space-y-1.5">
<p className="text-xs font-medium text-muted-foreground">Labels</p> <p className="text-xs font-medium text-muted-foreground">Labels</p>
<ToggleGroup <ToggleGroup
type="multiple" type="multiple"
@ -481,7 +482,7 @@ function ApprovalCard({
{!decided && ( {!decided && (
<> <>
<div className="mx-5 h-px bg-border/50" /> <div className="mx-5 h-px bg-border/50" />
<div className="px-5 py-4 flex items-center gap-2 select-none"> <div className="px-5 py-3 flex items-center gap-2 select-none">
{allowedDecisions.includes("approve") && ( {allowedDecisions.includes("approve") && (
<Button <Button
size="sm" size="sm"