Skip to content

Commit 9b69b24

Browse files
Copilotcubap
Copilot
and
cubap
authored
Wrap Manage Collaborators interface in tpen-page component (#378)
* Initial plan * Wrap Manage Collaborators in tpen-page and use CSS variables Co-authored-by: cubap <1119165+cubap@users.noreply.github.com> * Update collaborators styles and move HTML file Added grid-column styling for tpen-card in collaborators CSS. Renamed collaborators.html to manage-project/collaborators.html for better organization. * Update collaborators.html * Update collaborators.html --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: cubap <1119165+cubap@users.noreply.github.com> Co-authored-by: Patrick Cuba <cubap@slu.edu>
1 parent da97b39 commit 9b69b24

3 files changed

Lines changed: 86 additions & 168 deletions

File tree

‎css/collaborators/index.css‎

Lines changed: 51 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -4,111 +4,33 @@
44
box-sizing: border-box;
55
}
66

7-
body {
8-
font-family: Arial, sans-serif;
9-
background: #69ACC9 url(https://t-pen.org/TPEN/images/tpen_badgeEmergeClear.png) bottom right no-repeat fixed;
10-
color: #333;
11-
margin: 0;
12-
padding: 0;
13-
width: 100%;
14-
}
15-
16-
.tagline {
17-
text-align: center;
18-
font-size: 1.25rem;
19-
color: black;
20-
margin: 0 auto;
21-
margin-top: 20px;
22-
width: 70%;
23-
}
24-
25-
.manage-interface {
26-
width: 70%;
27-
margin: 10px auto;
28-
padding: 20px;
29-
display: flex;
30-
flex-direction: column;
31-
align-items: center;
32-
padding: 15px;
33-
background-color: #ffebb9;
34-
border-radius: 8px;
35-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
36-
}
37-
38-
.title h1 {
39-
font-size: 2rem;
40-
margin: 0;
41-
color: #b14628;
42-
text-align: center;
43-
}
44-
45-
.title p {
46-
font-size: 1.025rem;
47-
color: #555;
48-
text-align: center;
49-
margin-top: 10px;
50-
}
51-
52-
#content{
53-
width: 100%;
54-
border-radius: 8px;
55-
padding: 20px;
56-
}
57-
58-
.collaborators-container .member {
59-
width: 100%;
60-
}
61-
62-
.default-btn.return-btn {
63-
background: none;
64-
background-color: #69acc9;
65-
color: white;
66-
padding: 12px 25px;
67-
border: none;
68-
border-radius: 4px;
69-
cursor: pointer;
70-
display: flex;
71-
align-items: center;
72-
justify-content: center;
73-
width: 50%;
74-
margin: auto;
75-
}
76-
77-
.default-btn.return-btn .btn-icon {
78-
margin-left: 10px;
79-
}
80-
81-
.default-btn.return-btn:hover {
82-
background-color: #0056b3;
83-
}
84-
85-
.return-btn {
86-
position: relative;
7+
tpen-card {
8+
grid-column: span 2;
879
}
8810

8911
project-collaborators::part(group-title) {
90-
background-color: white;
12+
background-color: var(--white);
9113
padding: 10px;
9214
border-radius: 5px;
9315
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
9416
}
9517

9618
project-collaborators::part(project-title-h1) {
9719
font-size: 1.75rem;
98-
color: #333;
20+
color: var(--text-primary);
9921
margin: 0;
10022
}
10123

10224
project-collaborators::part(project-title) {
10325
font-weight: bold;
104-
color: #007BFF;
26+
color: var(--primary-color);
10527
}
10628

10729
project-collaborators::part(group-members-title) {
10830
font-size: 20px;
10931
margin: 20px 0;
11032
font-weight: 500;
111-
color : #b14628;
33+
color: var(--accent);
11234
padding: 0 20px;
11335
}
11436

@@ -120,7 +42,7 @@ project-collaborators::part(group-members) {
12042
}
12143

12244
project-collaborators::part(member) {
123-
background-color: #f9f9f9;
45+
background-color: var(--light-gray);
12446
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
12547
margin: auto;
12648
margin-bottom: 10px;
@@ -134,7 +56,7 @@ project-collaborators::part(member) {
13456

13557
project-collaborators::part(member-info) {
13658
font-size: 1rem;
137-
color: #333;
59+
color: var(--text-primary);
13860
display: flex;
13961
justify-content: flex-start;
14062
align-items: center;
@@ -143,52 +65,52 @@ project-collaborators::part(member-info) {
14365

14466
project-collaborators::part(role) {
14567
font-weight: bold;
146-
color: #555;
68+
color: var(--text-secondary);
14769
display: flex;
14870
justify-content: center;
14971
align-items: center;
15072
gap: 10px;
15173
}
15274

15375
project-collaborators::part(leader) {
154-
color: white;
76+
color: var(--white);
15577
padding: 5px;
156-
background-color: #28a745;
78+
background-color: var(--success-color);
15779
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
158-
border: 1px solid #28a745;
80+
border: 1px solid var(--success-color);
15981
border-radius: 5px;
16082
}
16183

16284
project-collaborators::part(owner) {
163-
color: white;
85+
color: var(--white);
16486
padding: 5px;
165-
background-color: #007BFF;
87+
background-color: var(--primary-color);
16688
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
167-
border: 1px solid #007BFF;
89+
border: 1px solid var(--primary-color);
16890
border-radius: 5px;
16991
}
17092

17193
project-collaborators::part(default-roles) {
172-
color: white;
94+
color: var(--white);
17395
padding: 5px;
174-
background-color: #6c757d;
96+
background-color: var(--gray);
17597
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
176-
border: 1px solid #6c757d;
98+
border: 1px solid var(--gray);
17799
border-radius: 5px;
178100
}
179101

180102
project-collaborators::part(custom-role) {
181-
color: white;
103+
color: var(--white);
182104
padding: 5px;
183-
background-color: #6c757d;
105+
background-color: var(--gray);
184106
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
185-
border: 1px solid #6c757d;
107+
border: 1px solid var(--gray);
186108
border-radius: 5px;
187109
}
188110

189111
project-collaborators::part(manage-roles-button) {
190-
background-color: #007BFF;
191-
color: white;
112+
background-color: var(--primary-color);
113+
color: var(--white);
192114
border: none;
193115
padding: 8px 15px;
194116
border-radius: 4px;
@@ -199,7 +121,7 @@ project-collaborators::part(manage-roles-button) {
199121
}
200122

201123
project-collaborators::part(manage-roles-button:hover) {
202-
background-color: #0056b3;
124+
background-color: var(--primary-light);
203125
}
204126

205127
project-collaborators::part(role-management-buttons){
@@ -210,60 +132,60 @@ project-collaborators::part(role-management-buttons){
210132
}
211133

212134
project-collaborators::part(transfer-ownership-button){
213-
background-color: #28a745;
135+
background-color: var(--success-color);
214136
padding: 8px;
215137
font-size: 0.875rem;
216-
color: white;
138+
color: var(--white);
217139
border: none;
218140
border-radius: 4px;
219141
cursor: pointer;
220142
}
221143

222144
project-collaborators::part(make-leader-button){
223-
background-color: #007BFF;
145+
background-color: var(--primary-color);
224146
padding: 8px;
225147
font-size: 0.875rem;
226-
color: white;
148+
color: var(--white);
227149
border: none;
228150
border-radius: 4px;
229151
cursor: pointer;
230152
}
231153

232154
project-collaborators::part(demote-leader-button){
233-
background-color: #17a2b8;
155+
background-color: var(--primary-light);
234156
padding: 8px;
235157
font-size: 0.875rem;
236-
color: white;
158+
color: var(--white);
237159
border: none;
238160
border-radius: 4px;
239161
cursor: pointer;
240162
}
241163

242164
project-collaborators::part(set-to-viewer-button){
243-
background-color:#0056b3;
165+
background-color: var(--interface-primary);
244166
padding: 8px;
245167
font-size: 0.875rem;
246-
color: white;
168+
color: var(--white);
247169
border: none;
248170
border-radius: 4px;
249171
cursor: pointer;
250172
}
251173

252174
project-collaborators::part(set-role-button){
253-
background-color: #6c757d;
175+
background-color: var(--gray);
254176
padding: 8px;
255177
font-size: 0.875rem;
256-
color: white;
178+
color: var(--white);
257179
border: none;
258180
border-radius: 4px;
259181
cursor: pointer;
260182
}
261183

262184
project-collaborators::part(remove-button){
263-
background-color: #dc3545;
185+
background-color: var(--error-color);
264186
padding: 8px;
265187
font-size: 0.875rem;
266-
color: white;
188+
color: var(--white);
267189
border: none;
268190
border-radius: 4px;
269191
cursor: pointer;
@@ -272,26 +194,24 @@ project-collaborators::part(remove-button){
272194

273195
invite-member::part(invite-section-container) {
274196
padding: 20px;
275-
/* background-color: #ffebb9; */
276197
border-radius: 5px;
277198
display: flex;
278199
flex-direction: column;
279200
justify-content: center;
280201
align-items: flex-start;
281202
margin: 0 auto;
282-
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
283203
}
284204

285205
invite-member::part(title) {
286206
font-size: 20px;
287207
margin: 10px 0 20px;
288208
font-weight: 500;
289-
color : #b14628;
209+
color: var(--accent);
290210
}
291211

292212
invite-member::part(description) {
293213
font-size: 0.875rem;
294-
color: #333;
214+
color: var(--text-primary);
295215
}
296216

297217
invite-member::part(invite-form) {
@@ -304,41 +224,41 @@ invite-member::part(invite-form) {
304224

305225
invite-member::part(email-label) {
306226
font-size: 0.9rem;
307-
color: black;
227+
color: var(--text-primary);
308228
}
309229

310230
invite-member::part(email-input) {
311231
padding: 8px;
312232
font-size: 1rem;
313-
border: 1px solid #ccc;
233+
border: 1px solid var(--gray);
314234
border-radius: 4px;
315235
width: 30%;
316236
}
317237

318238
invite-member::part(submit-button) {
319239
padding: 10px 15px;
320240
font-size: 1rem;
321-
background-color: #69acc9;
322-
color: white;
241+
background-color: var(--primary-color);
242+
color: var(--white);
323243
border: none;
324244
border-radius: 4px;
325245
cursor: pointer;
326246
}
327247

328248
invite-member::part(submit-button):hover {
329-
background-color: #0056b3;
249+
background-color: var(--primary-light);
330250
}
331251

332252
invite-member::part(error-message) {
333-
color: red;
253+
color: var(--error-color);
334254
font-size: 0.875rem;
335255
display: none;
336256
}
337257

338258
invite-member::part(error) {
339-
color: white;
259+
color: var(--white);
340260
font-size: 0.9rem;
341-
background-color: #f87563;
261+
background-color: var(--error-color);
342262
border-radius: 5px;
343263
margin: auto;
344264
margin-bottom: 10px;
@@ -347,7 +267,7 @@ invite-member::part(error) {
347267
}
348268

349269
roles-handler::part(modal-content) {
350-
background: #fff;
270+
background: var(--white);
351271
padding: 20px;
352272
border-radius: 8px;
353273
max-width: 500px;
@@ -362,17 +282,17 @@ roles-handler::part(modal-actions) {
362282
}
363283

364284
roles-handler::part(modal-buttons-confirm) {
365-
background-color: #28a745;
366-
color: white;
285+
background-color: var(--success-color);
286+
color: var(--white);
367287
padding: 10px 20px;
368288
border: none;
369289
border-radius: 4px;
370290
cursor: pointer;
371291
}
372292

373293
roles-handler::part(modal-buttons-cancel) {
374-
background-color: #dc3545;
375-
color: white;
294+
background-color: var(--error-color);
295+
color: var(--white);
376296
padding: 10px 20px;
377297
border: none;
378298
border-radius: 4px;

0 commit comments

Comments
 (0)