Skip to content

Commit 26e19a4

Browse files
authored
chore: Posthogify the UI (#1346)
1 parent 15b79b1 commit 26e19a4

69 files changed

Lines changed: 418 additions & 363 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.
Lines changed: 66 additions & 0 deletions
Loading
Lines changed: 15 additions & 0 deletions
Loading

apps/code/src/renderer/components/ThemeWrapper.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function ThemeWrapper({ children }: { children: React.ReactNode }) {
2626
accentColor={isDarkMode ? "yellow" : "orange"}
2727
grayColor="slate"
2828
panelBackground="solid"
29-
radius="none"
29+
radius="medium"
3030
scaling="105%"
3131
>
3232
{children}

apps/code/src/renderer/components/ui/combobox/Combobox.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
}
6161

6262
.combobox-content.size-1 [cmdk-input] {
63-
font-size: 12px;
63+
font-size: 13px;
6464
line-height: var(--line-height-1);
6565
}
6666

@@ -135,7 +135,7 @@
135135
}
136136

137137
.combobox-content.size-1 [cmdk-group-heading] {
138-
font-size: 12px;
138+
font-size: 13px;
139139
letter-spacing: var(--letter-spacing-1);
140140
line-height: var(--line-height-1);
141141
}
@@ -192,7 +192,7 @@
192192
}
193193

194194
.combobox-content.size-1 [cmdk-item] {
195-
font-size: 12px;
195+
font-size: 13px;
196196
line-height: var(--line-height-1);
197197
letter-spacing: var(--letter-spacing-1);
198198
border-radius: var(--radius-1);
@@ -310,7 +310,7 @@
310310
overflow: hidden;
311311
min-width: 0;
312312
font-weight: 400;
313-
font-size: 12px;
313+
font-size: 13px;
314314
line-height: var(--line-height-1);
315315
letter-spacing: var(--letter-spacing-1);
316316
border-radius: var(--radius-1);
@@ -364,7 +364,7 @@
364364
overflow: hidden;
365365
text-overflow: ellipsis;
366366
white-space: nowrap;
367-
font-family: var(--font-mono);
367+
font-family: var(--default-font-family);
368368
}
369369

370370
.combobox-trigger-icon {

apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -120,15 +120,13 @@ export function ArchivedTasksViewPresentation({
120120
{isLoading ? (
121121
<Flex align="center" justify="center" gap="2" py="8">
122122
<DotsCircleSpinner size={16} className="text-gray-10" />
123-
<Text className="font-mono text-[12px] text-gray-10">
123+
<Text className="text-[13px] text-gray-10">
124124
Loading archived tasks...
125125
</Text>
126126
</Flex>
127127
) : items.length === 0 ? (
128128
<Flex align="center" justify="center" py="8">
129-
<Text className="font-mono text-[12px] text-gray-10">
130-
No archived tasks
131-
</Text>
129+
<Text className="text-[13px] text-gray-10">No archived tasks</Text>
132130
</Flex>
133131
) : (
134132
<Table.Root
@@ -137,13 +135,13 @@ export function ArchivedTasksViewPresentation({
137135
>
138136
<Table.Header>
139137
<Table.Row>
140-
<Table.ColumnHeaderCell className="font-mono font-normal text-[12px] text-gray-11">
138+
<Table.ColumnHeaderCell className="font-normal text-[13px] text-gray-11">
141139
Title
142140
</Table.ColumnHeaderCell>
143-
<Table.ColumnHeaderCell className="font-mono font-normal text-[12px] text-gray-11">
141+
<Table.ColumnHeaderCell className="font-normal text-[13px] text-gray-11">
144142
Created
145143
</Table.ColumnHeaderCell>
146-
<Table.ColumnHeaderCell className="font-mono font-normal text-[12px] text-gray-11">
144+
<Table.ColumnHeaderCell className="font-normal text-[13px] text-gray-11">
147145
Repository
148146
</Table.ColumnHeaderCell>
149147
<Table.ColumnHeaderCell />
@@ -159,18 +157,18 @@ export function ArchivedTasksViewPresentation({
159157
<Table.Cell>
160158
<Flex align="center" gap="2">
161159
<ModeIcon mode={item.archived.mode} />
162-
<Text className="block max-w-[600px] truncate font-mono text-[12px]">
160+
<Text className="block max-w-[600px] truncate text-[13px]">
163161
{item.task?.title ?? "Unknown task"}
164162
</Text>
165163
</Flex>
166164
</Table.Cell>
167165
<Table.Cell>
168-
<Text className="block whitespace-nowrap font-mono text-[12px] text-gray-11">
166+
<Text className="block whitespace-nowrap text-[13px] text-gray-11">
169167
{formatRelativeDate(item.task?.created_at)}
170168
</Text>
171169
</Table.Cell>
172170
<Table.Cell>
173-
<Text className="block max-w-[300px] truncate font-mono text-[12px] text-gray-11">
171+
<Text className="block max-w-[300px] truncate text-[13px] text-gray-11">
174172
{getRepoName(item.task?.repository)}
175173
</Text>
176174
</Table.Cell>
@@ -248,7 +246,7 @@ export function ArchivedTasksView() {
248246
const queryClient = useQueryClient();
249247

250248
useSetHeaderContent(
251-
<Text size="1" weight="medium" className="font-mono text-[12px]">
249+
<Text size="1" weight="medium" className="text-[13px]">
252250
Archived tasks
253251
</Text>,
254252
);

apps/code/src/renderer/features/auth/components/AuthScreen.tsx

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { DraggableTitleBar } from "@components/DraggableTitleBar";
22
import { ZenHedgehog } from "@components/ZenHedgehog";
33
import { useAuthStore } from "@features/auth/stores/authStore";
44
import { Callout, Flex, Spinner, Text, Theme } from "@radix-ui/themes";
5-
import posthogIcon from "@renderer/assets/images/posthog-icon.svg";
6-
import phWordmark from "@renderer/assets/images/wordmark.svg";
5+
import codeLogo from "@renderer/assets/images/code.svg";
6+
import logomark from "@renderer/assets/images/logomark.svg";
77
import { trpcClient } from "@renderer/trpc/client";
88
import { REGION_LABELS } from "@shared/constants/oauth";
99
import type { CloudRegion } from "@shared/types/oauth";
@@ -85,7 +85,7 @@ export function AuthScreen() {
8585
const errorMessage = getErrorMessage(error);
8686

8787
return (
88-
<Theme appearance="light" accentColor="orange">
88+
<Theme appearance="light" accentColor="orange" radius="medium">
8989
<Flex height="100vh" style={{ position: "relative", overflow: "hidden" }}>
9090
<DraggableTitleBar />
9191

@@ -138,10 +138,10 @@ export function AuthScreen() {
138138
>
139139
{/* Logo */}
140140
<img
141-
src={phWordmark}
141+
src={codeLogo}
142142
alt="PostHog"
143143
style={{
144-
height: "48px",
144+
height: "30px",
145145
objectFit: "contain",
146146
alignSelf: "center",
147147
}}
@@ -197,11 +197,7 @@ export function AuthScreen() {
197197
{isPending ? (
198198
<Spinner size="1" />
199199
) : (
200-
<img
201-
src={posthogIcon}
202-
alt=""
203-
style={{ width: "20px", height: "20px" }}
204-
/>
200+
<img src={logomark} alt="" style={{ height: "14px" }} />
205201
)}
206202
{isPending
207203
? "Cancel"
@@ -251,7 +247,7 @@ export function AuthScreen() {
251247
fontSize: "inherit",
252248
}}
253249
>
254-
create one
250+
Create one
255251
</button>
256252
</>
257253
) : (
@@ -277,7 +273,7 @@ export function AuthScreen() {
277273
fontSize: "inherit",
278274
}}
279275
>
280-
sign in
276+
Sign in
281277
</button>
282278
</>
283279
)}

apps/code/src/renderer/features/auth/components/InviteCodeScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function InviteCodeScreen() {
2525
const errorMessage = redeemMutation.error?.message ?? null;
2626

2727
return (
28-
<Theme appearance="light" accentColor="orange">
28+
<Theme appearance="light" accentColor="orange" radius="medium">
2929
<Flex height="100vh" style={{ position: "relative", overflow: "hidden" }}>
3030
<DraggableTitleBar />
3131

0 commit comments

Comments
 (0)