Skip to content

Commit ae84d5a

Browse files
jayairjayair
committed
ignore: zen
1 parent cd53770 commit ae84d5a

13 files changed

+676
-680
lines changed

‎cloud/app/src/component/workspace/billing-section.module.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
.root {
2+
[data-slot="section-content"] {
3+
display: flex;
4+
flex-direction: column;
5+
gap: var(--space-3);
6+
}
7+
8+
[data-slot="reload-error"] {
9+
display: flex;
10+
align-items: center;
11+
justify-content: space-between;
12+
gap: var(--space-4);
13+
padding: var(--space-4);
14+
border: 1px solid var(--color-border);
15+
border-radius: var(--border-radius-sm);
16+
17+
p {
18+
color: var(--color-danger);
19+
font-size: var(--font-size-sm);
20+
line-height: 1.4;
21+
margin: 0;
22+
flex: 1;
23+
}
24+
25+
[data-slot="create-form"] {
26+
display: flex;
27+
gap: var(--space-2);
28+
margin: 0;
29+
flex-shrink: 0;
30+
}
31+
}
32+
[data-slot="payment"] {
33+
display: flex;
34+
flex-direction: column;
35+
gap: var(--space-3);
36+
padding: var(--space-4);
37+
border: 1px solid var(--color-border);
38+
border-radius: var(--border-radius-sm);
39+
min-width: 14.5rem;
40+
width: fit-content;
41+
42+
[data-slot="credit-card"] {
43+
padding: var(--space-3-5) var(--space-4);
44+
background-color: var(--color-bg-surface);
45+
border-radius: var(--border-radius-sm);
46+
display: flex;
47+
align-items: center;
48+
justify-content: space-between;
49+
50+
[data-slot="card-icon"] {
51+
display: flex;
52+
align-items: center;
53+
}
54+
55+
[data-slot="card-details"] {
56+
display: flex;
57+
align-items: baseline;
58+
gap: var(--space-1);
59+
60+
[data-slot="secret"] {
61+
position: relative;
62+
bottom: 2px;
63+
font-size: var(--font-size-lg);
64+
color: var(--color-text-muted);
65+
font-weight: 400;
66+
}
67+
68+
[data-slot="number"] {
69+
font-size: var(--font-size-3xl);
70+
font-weight: 500;
71+
color: var(--color-text);
72+
}
73+
}
74+
}
75+
76+
[data-slot="button-row"] {
77+
display: flex;
78+
gap: var(--space-2);
79+
align-items: center;
80+
81+
[data-slot="create-form"] {
82+
margin: 0;
83+
}
84+
85+
/* Make Enable Billing button full width when it's the only button */
86+
> button {
87+
flex: 1;
88+
}
89+
}
90+
}
91+
[data-slot="usage"] {
92+
p {
93+
font-size: var(--font-size-sm);
94+
line-height: 1.5;
95+
color: var(--color-text-secondary);
96+
b {
97+
font-weight: 600;
98+
}
99+
}
100+
}
101+
}
102+

‎cloud/app/src/component/workspace/billing-section.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
33
import { Billing } from "@opencode/cloud-core/billing.js"
44
import { withActor } from "~/context/auth.withActor"
55
import { IconCreditCard } from "~/component/icon"
6+
import styles from "./billing-section.module.css"
67

78
const createCheckoutUrl = action(async (workspaceID: string, successUrl: string, cancelUrl: string) => {
89
"use server"
@@ -50,7 +51,7 @@ export function BillingSection() {
5051
})
5152

5253
return (
53-
<section data-component="billing-section">
54+
<section class={styles.root}>
5455
<div data-slot="section-title">
5556
<h2>Billing</h2>
5657
<p>

‎cloud/app/src/component/workspace/key-section.module.css‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
.root {
2+
[data-slot="create-form"] {
3+
display: flex;
4+
flex-direction: column;
5+
gap: var(--space-3);
6+
padding: var(--space-4);
7+
border: 1px solid var(--color-border);
8+
border-radius: var(--border-radius-sm);
9+
10+
[data-slot="input-container"] {
11+
display: flex;
12+
flex-direction: column;
13+
gap: var(--space-1);
14+
}
15+
16+
@media (max-width: 30rem) {
17+
gap: var(--space-2);
18+
}
19+
20+
input {
21+
flex: 1;
22+
padding: var(--space-2) var(--space-3);
23+
border: 1px solid var(--color-border);
24+
border-radius: var(--border-radius-sm);
25+
background-color: var(--color-bg);
26+
color: var(--color-text);
27+
font-size: var(--font-size-sm);
28+
font-family: var(--font-mono);
29+
30+
&:focus {
31+
outline: none;
32+
border-color: var(--color-accent);
33+
}
34+
35+
&::placeholder {
36+
color: var(--color-text-disabled);
37+
}
38+
}
39+
40+
[data-slot="form-actions"] {
41+
display: flex;
42+
gap: var(--space-2);
43+
}
44+
45+
[data-slot="form-error"] {
46+
color: var(--color-danger);
47+
font-size: var(--font-size-sm);
48+
margin-top: var(--space-1);
49+
line-height: 1.4;
50+
}
51+
}
52+
53+
[data-slot="api-keys-table"] {
54+
overflow-x: auto;
55+
}
56+
57+
[data-slot="api-keys-table-element"] {
58+
width: 100%;
59+
border-collapse: collapse;
60+
font-size: var(--font-size-sm);
61+
62+
thead {
63+
border-bottom: 1px solid var(--color-border);
64+
}
65+
66+
th {
67+
padding: var(--space-3) var(--space-4);
68+
text-align: left;
69+
font-weight: normal;
70+
color: var(--color-text-muted);
71+
text-transform: uppercase;
72+
}
73+
74+
td {
75+
padding: var(--space-3) var(--space-4);
76+
border-bottom: 1px solid var(--color-border-muted);
77+
color: var(--color-text-muted);
78+
font-family: var(--font-mono);
79+
80+
&[data-slot="key-name"] {
81+
color: var(--color-text);
82+
font-family: var(--font-sans);
83+
font-weight: 500;
84+
}
85+
86+
&[data-slot="key-value"] {
87+
font-family: var(--font-mono);
88+
89+
button {
90+
display: flex;
91+
align-items: center;
92+
gap: var(--space-2);
93+
padding: var(--space-2) var(--space-3);
94+
font-size: var(--font-size-sm);
95+
font-weight: 400;
96+
border: none;
97+
background-color: transparent;
98+
color: var(--color-text-muted);
99+
font-family: var(--font-mono);
100+
border-radius: var(--border-radius-sm);
101+
cursor: pointer;
102+
transition: all 0.15s ease;
103+
text-transform: none;
104+
105+
&:hover:not(:disabled) {
106+
background-color: var(--color-bg-surface);
107+
color: var(--color-text);
108+
}
109+
110+
&:disabled {
111+
cursor: default;
112+
color: var(--color-text);
113+
}
114+
115+
span {
116+
font-family: inherit;
117+
}
118+
}
119+
}
120+
121+
&[data-slot="key-date"] {
122+
color: var(--color-text);
123+
}
124+
125+
&[data-slot="key-actions"] {
126+
font-family: var(--font-sans);
127+
}
128+
}
129+
130+
tbody tr {
131+
&:last-child td {
132+
border-bottom: none;
133+
}
134+
}
135+
136+
@media (max-width: 40rem) {
137+
th,
138+
td {
139+
padding: var(--space-2) var(--space-3);
140+
font-size: var(--font-size-xs);
141+
}
142+
143+
th {
144+
&:nth-child(3) /* Date */ {
145+
display: none;
146+
}
147+
}
148+
149+
td {
150+
&:nth-child(3) /* Date */ {
151+
display: none;
152+
}
153+
}
154+
}
155+
}
156+
}

‎cloud/app/src/component/workspace/key-section.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Key } from "@opencode/cloud-core/key.js"
55
import { withActor } from "~/context/auth.withActor"
66
import { createStore } from "solid-js/store"
77
import { formatDateUTC, formatDateForTable } from "./common"
8+
import styles from "./key-section.module.css"
89

910
const removeKey = action(async (form: FormData) => {
1011
"use server"
@@ -109,7 +110,7 @@ export function KeySection() {
109110
}
110111

111112
return (
112-
<section data-component="api-keys-section">
113+
<section class={styles.root}>
113114
<div data-slot="section-title">
114115
<h2>API Keys</h2>
115116
<p>Manage your API keys for accessing opencode services.</p>

‎cloud/app/src/component/workspace/monthly-limit-section.module.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.root {
2+
[data-slot="section-content"] {
3+
display: flex;
4+
flex-direction: column;
5+
gap: var(--space-3);
6+
}
7+
8+
[data-slot="balance"] {
9+
display: flex;
10+
flex-direction: column;
11+
gap: var(--space-3);
12+
padding: var(--space-4);
13+
border: 1px solid var(--color-border);
14+
border-radius: var(--border-radius-sm);
15+
min-width: 15rem;
16+
width: fit-content;
17+
18+
[data-slot="amount"] {
19+
padding: var(--space-3-5) var(--space-4);
20+
background-color: var(--color-bg-surface);
21+
border-radius: var(--border-radius-sm);
22+
display: flex;
23+
align-items: baseline;
24+
gap: var(--space-1);
25+
justify-content: flex-end;
26+
27+
[data-slot="currency"] {
28+
position: relative;
29+
bottom: 2px;
30+
font-size: var(--font-size-lg);
31+
color: var(--color-text-muted);
32+
font-weight: 400;
33+
}
34+
35+
[data-slot="value"] {
36+
font-size: var(--font-size-3xl);
37+
font-weight: 500;
38+
color: var(--color-text);
39+
}
40+
}
41+
42+
[data-slot="create-form"] {
43+
display: flex;
44+
flex-direction: column;
45+
gap: var(--space-3);
46+
margin-top: var(--space-1);
47+
48+
[data-slot="input-container"] {
49+
display: flex;
50+
flex-direction: column;
51+
gap: var(--space-1);
52+
}
53+
54+
@media (max-width: 30rem) {
55+
gap: var(--space-2);
56+
}
57+
58+
input {
59+
flex: 1;
60+
padding: var(--space-2) var(--space-3);
61+
border: 1px solid var(--color-border);
62+
border-radius: var(--border-radius-sm);
63+
background-color: var(--color-bg);
64+
color: var(--color-text);
65+
font-size: var(--font-size-sm);
66+
font-family: var(--font-mono);
67+
68+
&:focus {
69+
outline: none;
70+
border-color: var(--color-accent);
71+
}
72+
73+
&::placeholder {
74+
color: var(--color-text-disabled);
75+
}
76+
}
77+
78+
[data-slot="form-actions"] {
79+
display: flex;
80+
gap: var(--space-2);
81+
justify-content: flex-end;
82+
}
83+
84+
[data-slot="form-error"] {
85+
color: var(--color-danger);
86+
font-size: var(--font-size-sm);
87+
margin-top: var(--space-1);
88+
line-height: 1.4;
89+
}
90+
}
91+
}
92+
93+
[data-slot="usage-status"] {
94+
font-size: var(--font-size-sm);
95+
color: var(--color-text-secondary);
96+
margin: 0;
97+
line-height: 1.4;
98+
}
99+
}

0 commit comments

Comments
 (0)