Skip to content

Commit a962044

Browse files
ds300ds300
authored
Add delete user button to admin dashboard (tldraw#6560)
1. Get cursor to spruce up the admin panel. Some of the styling was fucked. 2. Add a 'delete user' button to the dashboard. User deletions might take some time, especially if the user has a lot of files. So it reports progress via server-sent events. ### Change type - [x] `other`
1 parent 5dac57c commit a962044

4 files changed

Lines changed: 787 additions & 86 deletions

File tree

‎apps/dotcom/client/src/pages/admin.module.css‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
.adminContainer {
2+
display: flex;
3+
flex-direction: column;
4+
height: 100vh;
5+
overflow: auto;
6+
background-color: var(--tla-color-sidebar);
7+
color: var(--tla-color-text-1);
8+
font-family: var(--tla-font-ui);
9+
max-width: 100vw;
10+
}
11+
12+
.adminHeader {
13+
padding: 24px 32px 16px 32px;
14+
border-bottom: 1px solid var(--tla-color-border);
15+
background-color: var(--tla-color-panel);
16+
}
17+
18+
.adminContent {
19+
flex: 1;
20+
padding: 24px 32px;
21+
display: flex;
22+
flex-direction: column;
23+
gap: 32px;
24+
overflow: auto;
25+
}
26+
27+
.adminSection {
28+
display: flex;
29+
flex-direction: column;
30+
gap: 16px;
31+
}
32+
33+
.searchContainer {
34+
display: flex;
35+
gap: 12px;
36+
align-items: center;
37+
}
38+
39+
.searchInput {
40+
height: 32px;
41+
padding: 0 12px;
42+
border: 1px solid var(--tla-color-border);
43+
border-radius: var(--tla-radius-2);
44+
background-color: var(--tla-color-contrast);
45+
color: var(--tla-color-text-1);
46+
font-family: var(--tla-font-ui);
47+
font-size: 12px;
48+
font-weight: 500;
49+
outline: none;
50+
}
51+
52+
.searchInput:focus {
53+
border-color: var(--tla-color-primary);
54+
}
55+
56+
.errorMessage {
57+
color: var(--tla-color-warning);
58+
font-size: 12px;
59+
font-weight: 500;
60+
padding: 8px 12px;
61+
background-color: var(--tla-color-secondary);
62+
border-radius: var(--tla-radius-2);
63+
border: 1px solid var(--tla-color-warning);
64+
}
65+
66+
.successMessage {
67+
color: var(--tla-color-accent-3);
68+
font-size: 12px;
69+
font-weight: 500;
70+
padding: 8px 12px;
71+
background-color: var(--tla-color-secondary);
72+
border-radius: var(--tla-radius-2);
73+
border: 1px solid var(--tla-color-accent-3);
74+
}
75+
76+
.userActions {
77+
display: flex;
78+
gap: 12px;
79+
align-items: center;
80+
}
81+
82+
.dataDisplay {
83+
background-color: var(--tla-color-low);
84+
border: 1px solid var(--tla-color-border);
85+
border-radius: var(--tla-radius-2);
86+
padding: 16px;
87+
font-family: 'IBMPlexMono', monospace;
88+
font-size: 11px;
89+
line-height: 1.4;
90+
color: var(--tla-color-text-1);
91+
overflow: auto;
92+
max-height: 400px;
93+
user-select: text;
94+
}
95+
96+
.fileOperations {
97+
display: flex;
98+
flex-direction: column;
99+
gap: 16px;
100+
}
101+
102+
.fileOperation {
103+
display: flex;
104+
flex-direction: column;
105+
gap: 12px;
106+
padding: 16px;
107+
background-color: var(--tla-color-panel);
108+
border: 1px solid var(--tla-color-border);
109+
border-radius: var(--tla-radius-2);
110+
}
111+
112+
.downloadContainer {
113+
display: flex;
114+
gap: 12px;
115+
align-items: center;
116+
}
117+
118+
.dangerZone {
119+
display: flex;
120+
flex-direction: column;
121+
gap: 12px;
122+
padding: 16px;
123+
background-color: var(--tla-color-panel);
124+
border: 1px solid var(--tla-color-warning);
125+
border-radius: var(--tla-radius-2);
126+
}
127+
128+
.deleteContainer {
129+
display: flex;
130+
gap: 12px;
131+
align-items: center;
132+
}
133+
134+
.deleteButton {
135+
border: 2px solid var(--tla-color-warning) !important;
136+
}
137+
138+
/* Progress Log */
139+
.progressLog {
140+
margin-top: 16px;
141+
padding: 16px;
142+
background-color: var(--tla-color-low);
143+
border: 1px solid var(--tla-color-border);
144+
border-radius: var(--tla-radius-2);
145+
}
146+
147+
.progressLog h5 {
148+
margin: 0 0 12px 0;
149+
font-size: 12px;
150+
font-weight: 600;
151+
color: var(--tla-color-text-2);
152+
text-transform: uppercase;
153+
letter-spacing: 0.5px;
154+
}
155+
156+
.logContainer {
157+
max-height: 200px;
158+
overflow-y: auto;
159+
font-family: 'IBMPlexMono', monospace;
160+
font-size: 11px;
161+
line-height: 1.4;
162+
color: var(--tla-color-text-1);
163+
background-color: var(--tla-color-contrast);
164+
border: 1px solid var(--tla-color-border);
165+
border-radius: var(--tla-radius-2);
166+
padding: 8px;
167+
}
168+
169+
.logEntry {
170+
margin-bottom: 4px;
171+
padding: 2px 0;
172+
border-bottom: 1px solid var(--tla-color-border);
173+
}
174+
175+
.logEntry:last-child {
176+
border-bottom: none;
177+
margin-bottom: 0;
178+
}
179+
180+
/* Structured Data Display */
181+
.structuredData {
182+
position: relative;
183+
display: flex;
184+
flex-direction: column;
185+
gap: 12px;
186+
}
187+
188+
.copyButton {
189+
position: absolute;
190+
top: 8px;
191+
right: 8px;
192+
z-index: 10;
193+
}
194+
195+
/* User Summary */
196+
.userSummary {
197+
padding: 16px;
198+
background-color: var(--tla-color-panel);
199+
border: 1px solid var(--tla-color-border);
200+
border-radius: var(--tla-radius-2);
201+
}
202+
203+
.summaryGrid {
204+
display: grid;
205+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
206+
gap: 12px;
207+
}
208+
209+
.summaryItem {
210+
display: flex;
211+
flex-direction: column;
212+
gap: 4px;
213+
}
214+
215+
.fieldLabel {
216+
font-size: 11px;
217+
font-weight: 600;
218+
color: var(--tla-color-text-3);
219+
text-transform: uppercase;
220+
letter-spacing: 0.5px;
221+
}
222+
223+
.fieldValue {
224+
font-size: 12px;
225+
font-weight: 500;
226+
color: var(--tla-color-text-1);
227+
word-break: break-word;
228+
}
229+
230+
/* Responsive adjustments */
231+
@media (max-width: 768px) {
232+
.adminHeader {
233+
padding: 16px 20px 12px 20px;
234+
}
235+
236+
.adminContent {
237+
padding: 16px 20px;
238+
gap: 24px;
239+
}
240+
241+
.searchContainer,
242+
.downloadContainer,
243+
.deleteContainer {
244+
flex-direction: column;
245+
align-items: stretch;
246+
}
247+
248+
.userActions {
249+
flex-direction: column;
250+
align-items: stretch;
251+
}
252+
253+
.summaryGrid {
254+
grid-template-columns: 1fr;
255+
}
256+
}

0 commit comments

Comments
 (0)