Skip to content

Commit d7e5258

Browse files
claudfuenclaudfuen
authored
Merge pull request #860 from trycompai/claudio/ui-tweaks
[dev] [claudfuen] claudio/ui-tweaks
2 parents 05daca6 + a49cc0b commit d7e5258

92 files changed

Lines changed: 814 additions & 844 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/app/src/app/(app)/[orgId]/frameworks/components/AddFrameworkModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export function AddFrameworkModal({
117117
key={frameworkId}
118118
htmlFor={`add-framework-${frameworkId}`}
119119
className={cn(
120-
"relative flex flex-col p-4 border rounded-xs cursor-pointer transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 w-full text-left",
120+
"relative flex flex-col p-4 border rounded-sm cursor-pointer transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 w-full text-left",
121121
field.value.includes(frameworkId) &&
122122
"border-primary bg-primary/5",
123123
)}

‎apps/app/src/app/(app)/[orgId]/frameworks/components/FrameworkCard.tsx‎

Lines changed: 43 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
CardHeader,
1111
CardTitle,
1212
} from "@comp/ui/card";
13+
import { Progress } from "@comp/ui/progress";
1314
import { cn } from "@comp/ui/cn";
1415
import { ClipboardCheck, ClipboardList, Clock } from "lucide-react";
1516
import Link from "next/link";
@@ -28,40 +29,26 @@ export function FrameworkCard({
2829
tasks,
2930
}: FrameworkCardProps) {
3031
const { orgId } = useParams<{ orgId: string }>();
31-
const getComplianceColor = (score: number) => {
32-
if (score >= 80) return "text-green-500";
33-
if (score >= 50) return "text-yellow-500";
34-
return "text-red-500";
35-
};
36-
37-
const getComplianceProgressColor = (score: number) => {
38-
if (score >= 80) return "bg-green-500";
39-
if (score >= 50) return "bg-yellow-500";
40-
return "bg-red-500";
41-
};
4232

4333
const getStatusBadge = (score: number) => {
4434
if (score >= 95)
4535
return {
4636
label: "Compliant",
47-
color:
48-
"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
37+
variant: "default" as const,
4938
};
5039
if (score >= 80)
5140
return {
5241
label: "Nearly Compliant",
53-
color:
54-
"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
42+
variant: "secondary" as const,
5543
};
5644
if (score >= 50)
5745
return {
5846
label: "In Progress",
59-
color:
60-
"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
47+
variant: "outline" as const,
6148
};
6249
return {
6350
label: "Needs Attention",
64-
color: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
51+
variant: "destructive" as const,
6552
};
6653
};
6754

@@ -118,85 +105,71 @@ export function FrameworkCard({
118105
href={`/${orgId}/frameworks/${frameworkInstance.id}`}
119106
className="block"
120107
>
121-
<Card className="select-none hover:bg-muted/40 transition-colors duration-200 overflow-hidden h-full flex flex-col">
122-
<CardHeader className="shrink-0">
123-
<CardTitle className="flex items-center">
124-
{frameworkDetails.name}
125-
<Badge variant="outline" className="ml-2 text-xs font-normal">
126-
{frameworkDetails.version}
108+
<Card className="h-full flex flex-col hover:bg-accent/50 transition-colors">
109+
<CardHeader>
110+
<CardTitle className="flex items-center justify-between">
111+
<span className="truncate">{frameworkDetails.name}</span>
112+
<Badge
113+
variant={statusBadge.variant}
114+
className="hidden md:block shrink-0"
115+
>
116+
{statusBadge.label}
127117
</Badge>
128118
</CardTitle>
129-
<CardDescription>
130-
<div className="flex items-start justify-between gap-2">
131-
<p className="text-sm text-muted-foreground line-clamp-2">
132-
{frameworkDetails.description}
133-
</p>
134-
<Badge className={cn("hidden md:block", statusBadge.color)}>
135-
{statusBadge.label}
136-
</Badge>
137-
</div>
119+
<CardDescription className="flex items-start justify-between gap-4">
120+
<p className="line-clamp-2 flex-1">
121+
{frameworkDetails.description}
122+
</p>
123+
138124
</CardDescription>
139125
</CardHeader>
140-
<CardContent className="flex-grow flex flex-col gap-4">
141-
<div className="flex flex-col gap-3">
142-
<div className="space-y-1.5">
143-
<div className="flex items-center justify-between text-sm">
144-
<span className="text-muted-foreground">{"Status"}</span>
145-
<span
146-
className={cn(
147-
"font-medium",
148-
getComplianceColor(complianceScore),
149-
)}
150-
>
151-
{complianceScore}%
152-
</span>
153-
</div>
154-
<div className="relative h-2 w-full bg-secondary overflow-hidden">
155-
<div
156-
className={cn(
157-
"h-full transition-all",
158-
getComplianceProgressColor(complianceScore),
159-
)}
160-
style={{ width: `${complianceScore}%` }}
161-
/>
162-
</div>
126+
127+
<CardContent className="flex-1 space-y-4">
128+
<div className="space-y-2">
129+
<div className="flex items-center justify-between text-sm">
130+
<span className="text-muted-foreground">Status</span>
131+
<span className="font-medium">
132+
{complianceScore}%
133+
</span>
163134
</div>
135+
<Progress value={complianceScore} className="h-2" />
164136
</div>
165137

166-
<div className="grid grid-cols-3 gap-4 mt-1">
167-
<div className="flex flex-col items-start gap-1 border-r pr-3">
138+
<div className="grid grid-cols-3 gap-4">
139+
<div className="space-y-1">
168140
<div className="flex items-center text-muted-foreground">
169-
<ClipboardList className="h-3.5 w-3.5 mr-1" />
170-
<span className="text-xs">{"Controls"}</span>
141+
<ClipboardList className="h-4 w-4 mr-1" />
142+
<span className="text-xs">Controls</span>
171143
</div>
172144
<p className="font-medium text-sm">
173-
{controlsCount} {"Tasks"}
145+
{controlsCount}
174146
</p>
175147
</div>
176-
<div className="flex flex-col items-start gap-1 border-r pr-3">
148+
<div className="space-y-1">
177149
<div className="flex items-center text-muted-foreground">
178-
<ClipboardCheck className="h-3.5 w-3.5 mr-1" />
179-
<span className="text-xs">{"Completed"}</span>
150+
<ClipboardCheck className="h-4 w-4 mr-1" />
151+
<span className="text-xs">Completed</span>
180152
</div>
181153
<p className="font-medium text-sm">
182154
{compliantControlsCount} / {controlsCount}
183155
</p>
184156
</div>
185-
<div className="flex flex-col items-start gap-1">
157+
<div className="space-y-1">
186158
<div className="flex items-center text-muted-foreground">
187-
<Clock className="h-3.5 w-3.5 mr-1" />
188-
<span className="text-xs">{"In Progress"}</span>
159+
<Clock className="h-4 w-4 mr-1" />
160+
<span className="text-xs">In Progress</span>
189161
</div>
190162
<p className="font-medium text-sm">
191163
{inProgressCount} / {controlsCount}
192164
</p>
193165
</div>
194166
</div>
195167
</CardContent>
196-
<CardFooter className="text-xs text-muted-foreground flex justify-between mt-auto shrink-0">
168+
169+
<CardFooter className="text-xs text-muted-foreground">
197170
<div className="flex items-center">
198-
<Clock className="h-3.5 w-3.5 mr-1.5" />
199-
{"Last Updated"}: {lastActivityDate}
171+
<Clock className="h-4 w-4 mr-2" />
172+
Last Updated: {lastActivityDate}
200173
</div>
201174
</CardFooter>
202175
</Card>

‎apps/app/src/app/(app)/[orgId]/frameworks/components/FrameworksOverview.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useState } from "react";
1010
import { AddFrameworkModal } from "./AddFrameworkModal";
1111
import { useParams } from 'next/navigation';
1212
import { Dialog } from "@comp/ui/dialog";
13+
import { PlusIcon } from "lucide-react";
1314

1415
export interface FrameworksOverviewProps {
1516
frameworksWithControls: FrameworkInstanceWithControls[];
@@ -31,17 +32,17 @@ export function FrameworksOverview({
3132

3233
return (
3334
<div className="space-y-4">
34-
<div className="flex justify-between items-center">
35-
<h1 className="text-2xl font-semibold">{"Frameworks"}</h1>
36-
<Button onClick={() => setIsAddFrameworkModalOpen(true)}>
37-
{"Add Framework"}
38-
</Button>
39-
</div>
35+
4036
<div className="grid gap-4 md:grid-cols-1 select-none w-full">
4137
<FrameworkList
4238
frameworksWithControls={frameworksWithControls}
4339
tasks={tasks}
4440
/>
41+
<div className="flex justify-center items-center">
42+
<Button onClick={() => setIsAddFrameworkModalOpen(true)} variant="outline">
43+
{"Add Framework"} <PlusIcon className="w-4 h-4" />
44+
</Button>
45+
</div>
4546
</div>
4647
<Dialog open={isAddFrameworkModalOpen} onOpenChange={setIsAddFrameworkModalOpen}>
4748
{isAddFrameworkModalOpen && (

‎apps/app/src/app/(app)/[orgId]/people/all/loading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default async function Loading() {
1212
return (
1313
<div className="space-y-4 sm:space-y-8">
1414
<Tabs defaultValue="members">
15-
<TabsList className="bg-transparent border-b-[1px] w-full justify-start rounded-xs mb-1 p-0 h-auto pb-4">
15+
<TabsList className="bg-transparent border-b-[1px] w-full justify-start rounded-sm mb-1 p-0 h-auto pb-4">
1616
<TabsTrigger value="members" className="p-0 m-0 mr-4">
1717
{"Members"}
1818
</TabsTrigger>

‎apps/app/src/app/(app)/[orgId]/policies/(overview)/components/policy-status-chart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const StatusTooltip = ({ active, payload }: any) => {
4747
if (active && payload && payload.length) {
4848
const data = payload[0].payload;
4949
return (
50-
<div className="rounded-xs border bg-background p-2 shadow-md">
50+
<div className="rounded-sm border bg-background p-2 shadow-md">
5151
<p className="text-xs font-medium">{data.name}</p>
5252
<p className="text-xs">
5353
Count: <span className="font-medium">{data.value}</span>

‎apps/app/src/app/(app)/[orgId]/policies/[policyId]/editor/components/PolicyHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function PolicyHeader({ saveStatus }: PolicyHeaderProps) {
88
return (
99
<div className="mx-auto w-full">
1010
<div className="flex justify-end">
11-
<div className="flex items-center gap-1 bg-accent/60 px-2 py-1 rounded-xs">
11+
<div className="flex items-center gap-1 bg-accent/60 px-2 py-1 rounded-sm">
1212
<span className="text-muted-foreground text-xs">{saveStatus}</span>
1313
</div>
1414
</div>

‎apps/app/src/app/(app)/[orgId]/settings/api-keys/components/CreateApiKeyDialog.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export function CreateApiKeyDialog({
167167
<p className="text-sm font-medium">{"API Key"}</p>
168168
<div className="flex items-center">
169169
<div className="relative w-full">
170-
<div className="rounded-xs bg-muted p-3 pr-10 overflow-hidden">
170+
<div className="rounded-sm bg-muted p-3 pr-10 overflow-hidden">
171171
<div className="overflow-x-auto">
172172
<code className="text-sm break-all">{createdApiKey}</code>
173173
</div>
@@ -207,7 +207,7 @@ export function CreateApiKeyDialog({
207207
if (isDesktop) {
208208
return (
209209
<Sheet open={open} onOpenChange={handleClose}>
210-
<SheetContent stack className="rounded-xs">
210+
<SheetContent stack className="rounded-sm">
211211
<SheetHeader className="mb-8 flex flex-col gap-2">
212212
<div className="flex justify-between items-center">
213213
<SheetTitle>
@@ -216,7 +216,7 @@ export function CreateApiKeyDialog({
216216
<Button
217217
size="icon"
218218
variant="ghost"
219-
className="p-0 m-0 size-auto hover:bg-transparent rounded-xs"
219+
className="p-0 m-0 size-auto hover:bg-transparent rounded-sm"
220220
onClick={handleClose}
221221
>
222222
<X className="h-5 w-5" />
@@ -241,7 +241,7 @@ export function CreateApiKeyDialog({
241241
}
242242
return (
243243
<Drawer open={open} onOpenChange={handleClose}>
244-
<DrawerContent className="p-6 rounded-xs">
244+
<DrawerContent className="p-6 rounded-sm">
245245
<DrawerHeader>
246246
<DrawerTitle>
247247
{createdApiKey ? "API Key Created" : "New API Key"}

‎apps/app/src/app/(app)/[orgId]/settings/api-keys/components/table/ApiKeysTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function ApiKeysTable({ apiKeys }: { apiKeys: ApiKey[] }) {
3333
<DataTable table={table}>
3434
<DataTableToolbar table={table}>
3535
<Button
36-
className="flex items-center gap-1 rounded-xs"
36+
className="flex items-center gap-1 rounded-sm"
3737
onClick={() => setOpenSheet("true")}
3838
>
3939
<Plus className="h-4 w-4" />

‎apps/app/src/app/(app)/[orgId]/settings/context-hub/ContextTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const ContextTable = ({
3939
<DataTable table={table}>
4040
<DataTableToolbar table={table}>
4141
<Button
42-
className="flex items-center gap-1 rounded-xs"
42+
className="flex items-center gap-1 rounded-sm"
4343
onClick={() => setOpenSheet("true")}
4444
>
4545
<Plus className="h-4 w-4" />

‎apps/app/src/app/(app)/[orgId]/settings/context-hub/components/CreateContextSheet.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@ export function CreateContextSheet() {
3232
if (isDesktop) {
3333
return (
3434
<Sheet open={isOpen} onOpenChange={handleOpenChange}>
35-
<SheetContent stack className="rounded-xs">
35+
<SheetContent stack className="rounded-sm">
3636
<SheetHeader className="mb-8 flex flex-col gap-2">
3737
<div className="flex justify-between items-center">
3838
<SheetTitle>Add Context Entry</SheetTitle>
3939
<Button
4040
size="icon"
4141
variant="ghost"
42-
className="p-0 m-0 size-auto hover:bg-transparent rounded-xs"
42+
className="p-0 m-0 size-auto hover:bg-transparent rounded-sm"
4343
onClick={() => setOpen(null)}
4444
>
4545
<X className="h-5 w-5" />
@@ -58,7 +58,7 @@ export function CreateContextSheet() {
5858
}
5959
return (
6060
<Drawer open={isOpen} onOpenChange={handleOpenChange}>
61-
<DrawerContent className="p-6 rounded-xs">
61+
<DrawerContent className="p-6 rounded-sm">
6262
<DrawerHeader>
6363
<DrawerTitle>Add Context Entry</DrawerTitle>
6464
<DrawerDescription>

0 commit comments

Comments
 (0)