Skip to content

Commit a9078f5

Browse files
ComputelessComputerComputelessComputer
committed
change gray to neutral
1 parent 549c703 commit a9078f5

File tree

30 files changed

+230
-226
lines changed

30 files changed

+230
-226
lines changed

‎apps/desktop/src/components/chat/message/normal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function NormalMessage({ message, handleReload }: { message: HyprUIMessag
3838
)}
3939
</MessageBubble>
4040
{shouldShowTimestamp && message.metadata?.createdAt && (
41-
<div className="text-xs text-gray-400 mt-1 px-2">
41+
<div className="text-xs text-neutral-400 mt-1 px-2">
4242
{formatDistanceToNow(message.metadata.createdAt, { addSuffix: true })}
4343
</div>
4444
)}
@@ -81,7 +81,7 @@ function Reasoning({ part }: { part: Extract<Part, { type: "reasoning" }> }) {
8181
title={title}
8282
disabled={streaming}
8383
>
84-
<div className="text-sm text-gray-500 whitespace-pre-wrap">
84+
<div className="text-sm text-neutral-500 whitespace-pre-wrap">
8585
{part.text}
8686
</div>
8787
</Disclosure>

‎apps/desktop/src/components/chat/message/shared.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ export function MessageBubble({
3535
<div
3636
className={cn([
3737
"rounded-2xl px-3 py-1 text-sm",
38-
variant === "user" && "bg-blue-100 text-gray-800",
39-
variant === "assistant" && "bg-gray-100 text-gray-800",
40-
variant === "loading" && "bg-gray-100 text-gray-800",
38+
variant === "user" && "bg-blue-100 text-neutral-800",
39+
variant === "assistant" && "bg-neutral-100 text-neutral-800",
40+
variant === "loading" && "bg-neutral-100 text-neutral-800",
4141
variant === "error" && "bg-red-50 text-red-600 border border-red-200",
4242
withActionButton && "relative group",
4343
])}
@@ -68,8 +68,8 @@ export function ActionButton({
6868
"transition-opacity",
6969
"p-1 rounded-full",
7070
variant === "default" && [
71-
"bg-gray-200 hover:bg-gray-300",
72-
"text-gray-600 hover:text-gray-800",
71+
"bg-neutral-200 hover:bg-neutral-300",
72+
"text-neutral-600 hover:text-neutral-800",
7373
],
7474
variant === "error" && [
7575
"bg-red-100 hover:bg-red-200",
@@ -99,13 +99,13 @@ export function Disclosure(
9999
<details
100100
className={cn([
101101
"group px-2 py-1 my-2 border rounded-md transition-colors",
102-
"cursor-pointer border-gray-200 hover:border-gray-300",
102+
"cursor-pointer border-neutral-200 hover:border-neutral-300",
103103
])}
104104
>
105105
<summary
106106
className={cn([
107107
"w-full",
108-
"text-xs text-gray-500",
108+
"text-xs text-neutral-500",
109109
"select-none list-none marker:hidden",
110110
"flex items-center gap-2",
111111
])}
@@ -122,7 +122,7 @@ export function Disclosure(
122122
</span>
123123
<ChevronRight className="w-3 h-3 flex-shrink-0 transition-transform group-open:rotate-90" />
124124
</summary>
125-
<div className="mt-1 pt-2 px-1 border-t border-gray-200">
125+
<div className="mt-1 pt-2 px-1 border-t border-neutral-200">
126126
{children}
127127
</div>
128128
</details>

‎apps/desktop/src/components/chat/message/tool/search.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,16 @@ function RenderContent({ part }: { part: Part }) {
6868
<CarouselContent className="-ml-2">
6969
{results.map((result: any, index: number) => (
7070
<CarouselItem key={result.id || index} className="pl-1 basis-full sm:basis-1/2 lg:basis-1/3">
71-
<Card className="h-full bg-gray-50">
71+
<Card className="h-full bg-neutral-50">
7272
<CardContent className="px-2 py-0.5">
7373
<RenderSession sessionId={result.id} />
7474
</CardContent>
7575
</Card>
7676
</CarouselItem>
7777
))}
7878
</CarouselContent>
79-
<CarouselPrevious className="-left-4 h-6 w-6 bg-gray-100 hover:bg-gray-200" />
80-
<CarouselNext className="-right-4 h-6 w-6 bg-gray-100 hover:bg-gray-200" />
79+
<CarouselPrevious className="-left-4 h-6 w-6 bg-neutral-100 hover:bg-neutral-200" />
80+
<CarouselNext className="-right-4 h-6 w-6 bg-neutral-100 hover:bg-neutral-200" />
8181
</Carousel>
8282
</div>
8383
);

‎apps/desktop/src/components/main/body/contacts/details.tsx‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ function EditPersonForm({
192192

193193
return (
194194
<div className="flex-1 flex flex-col">
195-
<div className="px-6 py-4 border-b border-gray-200">
195+
<div className="px-6 py-4 border-b border-neutral-200">
196196
<div className="flex items-center justify-between">
197197
<h3 className="text-lg font-semibold">Edit Contact</h3>
198198
<div className="flex gap-2">
@@ -201,15 +201,15 @@ function EditPersonForm({
201201
variant="ghost"
202202
size="sm"
203203
onClick={onCancel}
204-
className="hover:bg-gray-100 text-gray-700"
204+
className="hover:bg-neutral-100 text-neutral-700"
205205
>
206206
Cancel
207207
</Button>
208208
<Button
209209
onClick={onSave}
210210
variant="ghost"
211211
size="sm"
212-
className="bg-gray-100 hover:bg-gray-200 text-gray-700"
212+
className="bg-neutral-100 hover:bg-neutral-200 text-neutral-700"
213213
>
214214
Save
215215
</Button>
@@ -219,19 +219,19 @@ function EditPersonForm({
219219

220220
<div className="flex-1 overflow-y-auto">
221221
<div className="flex flex-col items-center py-6">
222-
<div className="w-24 h-24 mb-3 bg-gray-200 rounded-full flex items-center justify-center">
223-
<span className="text-xl font-semibold text-gray-600">
222+
<div className="w-24 h-24 mb-3 bg-neutral-200 rounded-full flex items-center justify-center">
223+
<span className="text-xl font-semibold text-neutral-600">
224224
{getInitials(personData.name as string || "?")}
225225
</span>
226226
</div>
227227
</div>
228228

229-
<div className="border-t border-gray-200">
229+
<div className="border-t border-neutral-200">
230230
<EditPersonNameField personId={personId} />
231231
<EditPersonJobTitleField personId={personId} />
232232

233-
<div className="flex items-center px-4 py-3 border-b border-gray-200">
234-
<div className="w-28 text-sm text-gray-500">Company</div>
233+
<div className="flex items-center px-4 py-3 border-b border-neutral-200">
234+
<div className="w-28 text-sm text-neutral-500">Company</div>
235235
<div className="flex-1">
236236
<EditPersonOrganizationSelector personId={personId} />
237237
</div>
@@ -258,8 +258,8 @@ function EditPersonNameField({ personId }: { personId: string }) {
258258
);
259259

260260
return (
261-
<div className="flex items-center px-4 py-3 border-b border-gray-200">
262-
<div className="w-28 text-sm text-gray-500">Name</div>
261+
<div className="flex items-center px-4 py-3 border-b border-neutral-200">
262+
<div className="w-28 text-sm text-neutral-500">Name</div>
263263
<div className="flex-1">
264264
<Input
265265
value={(value as string) || ""}
@@ -285,8 +285,8 @@ function EditPersonJobTitleField({ personId }: { personId: string }) {
285285
);
286286

287287
return (
288-
<div className="flex items-center px-4 py-3 border-b border-gray-200">
289-
<div className="w-28 text-sm text-gray-500">Job Title</div>
288+
<div className="flex items-center px-4 py-3 border-b border-neutral-200">
289+
<div className="w-28 text-sm text-neutral-500">Job Title</div>
290290
<div className="flex-1">
291291
<Input
292292
value={(value as string) || ""}
@@ -312,8 +312,8 @@ function EditPersonEmailField({ personId }: { personId: string }) {
312312
);
313313

314314
return (
315-
<div className="flex items-center px-4 py-3 border-b border-gray-200">
316-
<div className="w-28 text-sm text-gray-500">Email</div>
315+
<div className="flex items-center px-4 py-3 border-b border-neutral-200">
316+
<div className="w-28 text-sm text-neutral-500">Email</div>
317317
<div className="flex-1">
318318
<Input
319319
type="email"
@@ -340,8 +340,8 @@ function EditPersonLinkedInField({ personId }: { personId: string }) {
340340
);
341341

342342
return (
343-
<div className="flex items-center px-4 py-3 border-b border-gray-200">
344-
<div className="w-28 text-sm text-gray-500">LinkedIn</div>
343+
<div className="flex items-center px-4 py-3 border-b border-neutral-200">
344+
<div className="w-28 text-sm text-neutral-500">LinkedIn</div>
345345
<div className="flex-1">
346346
<Input
347347
value={(value as string) || ""}
@@ -380,9 +380,9 @@ function EditPersonOrganizationSelector({ personId }: { personId: string }) {
380380
? (
381381
<div className="flex items-center">
382382
<span className="text-base">{organization.name}</span>
383-
<span className="ml-2 text-gray-400 group">
383+
<span className="ml-2 text-neutral-400 group">
384384
<CircleMinus
385-
className="size-4 cursor-pointer text-gray-400 hover:text-red-600"
385+
className="size-4 cursor-pointer text-neutral-400 hover:text-red-600"
386386
onClick={(e) => {
387387
e.stopPropagation();
388388
handleRemoveOrganization();
@@ -391,7 +391,7 @@ function EditPersonOrganizationSelector({ personId }: { personId: string }) {
391391
</span>
392392
</div>
393393
)
394-
: <span className="text-gray-500 text-base">Select organization</span>}
394+
: <span className="text-neutral-500 text-base">Select organization</span>}
395395
</div>
396396
</PopoverTrigger>
397397

@@ -439,12 +439,12 @@ function OrganizationControl({
439439

440440
return (
441441
<div className="flex flex-col gap-3 max-w-[450px]">
442-
<div className="text-sm font-medium text-gray-700">Organization</div>
442+
<div className="text-sm font-medium text-neutral-700">Organization</div>
443443

444444
<form onSubmit={handleSubmit}>
445445
<div className="flex flex-col gap-2">
446-
<div className="flex items-center w-full px-2 py-1.5 gap-2 rounded bg-gray-50 border border-gray-200">
447-
<span className="text-gray-500 flex-shrink-0">
446+
<div className="flex items-center w-full px-2 py-1.5 gap-2 rounded bg-neutral-50 border border-neutral-200">
447+
<span className="text-neutral-500 flex-shrink-0">
448448
<SearchIcon className="size-4" />
449449
</span>
450450
<input
@@ -453,20 +453,20 @@ function OrganizationControl({
453453
onChange={(e) => setSearchTerm(e.target.value)}
454454
onKeyDown={handleKeyDown}
455455
placeholder="Search or add company"
456-
className="w-full bg-transparent text-sm focus:outline-none placeholder:text-gray-400 focus-visible:ring-0 focus-visible:ring-offset-0"
456+
className="w-full bg-transparent text-sm focus:outline-none placeholder:text-neutral-400 focus-visible:ring-0 focus-visible:ring-offset-0"
457457
/>
458458
</div>
459459

460460
{searchTerm.trim() && (
461-
<div className="flex flex-col w-full rounded border border-gray-200 overflow-hidden">
461+
<div className="flex flex-col w-full rounded border border-neutral-200 overflow-hidden">
462462
{organizations.map((org: any) => (
463463
<button
464464
key={org.id}
465465
type="button"
466-
className="flex items-center px-3 py-2 text-sm text-left hover:bg-gray-100 transition-colors w-full"
466+
className="flex items-center px-3 py-2 text-sm text-left hover:bg-neutral-100 transition-colors w-full"
467467
onClick={() => selectOrganization(org.id)}
468468
>
469-
<span className="flex-shrink-0 size-5 flex items-center justify-center mr-2 bg-gray-100 rounded-full">
469+
<span className="flex-shrink-0 size-5 flex items-center justify-center mr-2 bg-neutral-100 rounded-full">
470470
<Building2 className="size-3" />
471471
</span>
472472
<span className="font-medium truncate">{org.name}</span>
@@ -476,15 +476,15 @@ function OrganizationControl({
476476
{organizations.length === 0 && (
477477
<button
478478
type="button"
479-
className="flex items-center px-3 py-2 text-sm text-left hover:bg-gray-100 transition-colors w-full"
479+
className="flex items-center px-3 py-2 text-sm text-left hover:bg-neutral-100 transition-colors w-full"
480480
onClick={() => {}}
481481
>
482-
<span className="flex-shrink-0 size-5 flex items-center justify-center mr-2 bg-gray-200 rounded-full">
482+
<span className="flex-shrink-0 size-5 flex items-center justify-center mr-2 bg-neutral-200 rounded-full">
483483
<span className="text-xs">+</span>
484484
</span>
485-
<span className="flex items-center gap-1 font-medium text-gray-600">
485+
<span className="flex items-center gap-1 font-medium text-neutral-600">
486486
Create
487-
<span className="text-gray-900 truncate max-w-[140px]">
487+
<span className="text-neutral-900 truncate max-w-[140px]">
488488
&quot;{searchTerm.trim()}&quot;
489489
</span>
490490
</span>
@@ -494,15 +494,15 @@ function OrganizationControl({
494494
)}
495495

496496
{!searchTerm.trim() && organizations.length > 0 && (
497-
<div className="flex flex-col w-full rounded border border-gray-200 overflow-hidden max-h-[40vh] overflow-y-auto custom-scrollbar">
497+
<div className="flex flex-col w-full rounded border border-neutral-200 overflow-hidden max-h-[40vh] overflow-y-auto custom-scrollbar">
498498
{organizations.map((org: any) => (
499499
<button
500500
key={org.id}
501501
type="button"
502-
className="flex items-center px-3 py-2 text-sm text-left hover:bg-gray-100 transition-colors w-full"
502+
className="flex items-center px-3 py-2 text-sm text-left hover:bg-neutral-100 transition-colors w-full"
503503
onClick={() => selectOrganization(org.id)}
504504
>
505-
<span className="flex-shrink-0 size-5 flex items-center justify-center mr-2 bg-gray-100 rounded-full">
505+
<span className="flex-shrink-0 size-5 flex items-center justify-center mr-2 bg-neutral-100 rounded-full">
506506
<Building2 className="size-3" />
507507
</span>
508508
<span className="font-medium truncate">{org.name}</span>

‎apps/desktop/src/components/main/body/search.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ export function Search() {
6969
>
7070
<div className="relative flex items-center w-full h-full">
7171
{showLoading
72-
? <Loader2Icon className={cn(["h-4 w-4 absolute left-3 text-gray-400 animate-spin"])} />
73-
: <SearchIcon className={cn(["h-4 w-4 absolute left-3 text-gray-400"])} />}
72+
? <Loader2Icon className={cn(["h-4 w-4 absolute left-3 text-neutral-400 animate-spin"])} />
73+
: <SearchIcon className={cn(["h-4 w-4 absolute left-3 text-neutral-400"])} />}
7474
<input
7575
ref={inputRef}
7676
type="text"
@@ -83,8 +83,8 @@ export function Search() {
8383
"text-sm",
8484
"w-full pl-9 h-full",
8585
query ? "pr-9" : "pr-4",
86-
"rounded-lg bg-gray-100 border border-transparent",
87-
"focus:outline-none focus:bg-gray-200 focus:border-black",
86+
"rounded-lg bg-neutral-100 border border-transparent",
87+
"focus:outline-none focus:bg-neutral-200 focus:border-black",
8888
])}
8989
/>
9090
{query && (
@@ -93,7 +93,7 @@ export function Search() {
9393
className={cn([
9494
"absolute right-3",
9595
"h-4 w-4",
96-
"text-gray-400 hover:text-gray-600",
96+
"text-neutral-400 hover:text-neutral-600",
9797
"transition-colors",
9898
])}
9999
aria-label="Clear search"

‎apps/desktop/src/components/main/body/sessions/floating/listen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ function DuringMeetingButton() {
136136
? "Stop listening"
137137
: (
138138
<div className="flex flex-row items-center gap-4">
139-
<span className="text-gray-500 text-sm">{formatTime(seconds)}</span>
139+
<span className="text-neutral-500 text-sm">{formatTime(seconds)}</span>
140140
<SoundIndicator value={[amplitude.mic, amplitude.speaker]} color="#ef4444" />
141141
</div>
142142
)}

‎apps/desktop/src/components/main/body/sessions/note-input/raw.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const PlaceHolderInner = () => {
100100
<span className="text-[#e5e5e5]">You can also upload/drop an</span>
101101
<button
102102
type="button"
103-
className="text-gray-400 hover:text-gray-600 transition-colors underline decoration-dotted hover:decoration-solid"
103+
className="text-neutral-400 hover:text-neutral-600 transition-colors underline decoration-dotted hover:decoration-solid"
104104
onClick={handleFileSelect}
105105
>
106106
audio file or transcript file.

‎apps/desktop/src/components/main/sidebar/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,13 @@ export function LeftSidebar() {
3333
</Button>
3434
</header>
3535

36-
<div className="flex flex-col flex-1 overflow-hidden gap-1">
36+
<div className="flex flex-col flex-1 overflow-hidden gap-1 relative">
3737
<div className="flex-1 min-h-0 overflow-hidden">
3838
{showSearchResults ? <SearchResults /> : <TimelineView />}
3939
</div>
40-
<ProfileSection />
40+
<div className="relative z-30">
41+
<ProfileSection />
42+
</div>
4143
</div>
4244
</div>
4345
);

‎apps/desktop/src/components/main/sidebar/profile/banner.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export function TryProBanner({ isDismissed, onDismiss }: { isDismissed: boolean;
2121
opacity: 0,
2222
height: 0,
2323
y: 20,
24-
scale: 0.95,
2524
transition: { duration: 0.3, ease: "easeInOut" },
2625
}}
2726
className={cn([
@@ -33,7 +32,7 @@ export function TryProBanner({ isDismissed, onDismiss }: { isDismissed: boolean;
3332
className={cn([
3433
"relative group overflow-hidden rounded-lg",
3534
"flex flex-col gap-3",
36-
"bg-white border border-gray-200 shadow-sm p-4",
35+
"bg-white border border-neutral-200 shadow-sm p-4",
3736
])}
3837
>
3938
<Button
@@ -48,7 +47,7 @@ export function TryProBanner({ isDismissed, onDismiss }: { isDismissed: boolean;
4847

4948
<div className="flex items-center gap-4">
5049
<img src="/assets/hyprnote-pro.png" alt="Hyprnote Pro" className="size-6" />
51-
<h3 className="text-lg font-bold text-gray-900">
50+
<h3 className="text-lg font-bold text-neutral-900">
5251
Try Hyprnote Pro
5352
</h3>
5453
</div>

0 commit comments

Comments
 (0)