Skip to content

Commit 3b2b993

Browse files
maycon-mellomaycon-mello
committed
update web wallet to match with angular examples
1 parent 61df665 commit 3b2b993

3 files changed

Lines changed: 978 additions & 1008 deletions

File tree

‎examples/web-example/src/App.css‎

Lines changed: 329 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,349 @@
1+
/* Main container */
12
.App {
3+
min-height: 100vh;
4+
background-color: #282c34;
5+
padding: 20px;
6+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
7+
}
8+
9+
/* Header */
10+
.App-header {
211
text-align: center;
12+
margin-bottom: 40px;
13+
padding: 0;
314
}
415

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
16+
.App-header h1 {
17+
color: white;
18+
font-size: 36px;
19+
font-weight: 700;
20+
margin: 0;
21+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
822
}
923

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
24+
/* Loading state */
25+
.loading-container {
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
height: 100vh;
30+
color: white;
31+
font-size: 24px;
1432
}
1533

16-
.App-header {
17-
background-color: #282c34;
34+
/* Setup container */
35+
.setup-container {
36+
max-width: 500px;
37+
margin: 100px auto;
38+
background: white;
39+
padding: 40px;
40+
border-radius: 16px;
41+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
42+
text-align: center;
43+
}
44+
45+
.setup-container h2 {
46+
color: #333;
47+
margin-bottom: 16px;
48+
font-size: 28px;
49+
font-weight: 600;
50+
}
51+
52+
.setup-container p {
53+
color: #666;
54+
margin-bottom: 32px;
55+
font-size: 16px;
56+
}
57+
58+
.setup-buttons {
1859
display: flex;
1960
flex-direction: column;
61+
gap: 16px;
62+
}
63+
64+
.error {
65+
background: #fee;
66+
color: #c53030;
67+
padding: 12px;
68+
border-radius: 8px;
69+
margin-bottom: 20px;
70+
border: 1px solid #fed7d7;
71+
}
72+
73+
/* Main wallet container */
74+
.wallet-container {
75+
max-width: 1200px;
76+
margin: 0 auto;
77+
}
78+
79+
/* Action buttons */
80+
.action-buttons {
81+
display: flex;
82+
gap: 16px;
83+
justify-content: center;
84+
flex-wrap: wrap;
85+
margin-bottom: 40px;
86+
}
87+
88+
/* DID section */
89+
.did-section {
90+
background: rgba(255, 255, 255, 0.95);
91+
border-radius: 12px;
92+
padding: 24px;
93+
margin-bottom: 40px;
94+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
95+
}
96+
97+
.create-did {
98+
text-align: center;
99+
}
100+
101+
.did-display {
102+
text-align: center;
103+
}
104+
105+
.did-info {
106+
display: flex;
20107
align-items: center;
21108
justify-content: center;
22-
font-size: calc(10px + 2vmin);
109+
flex-wrap: wrap;
110+
gap: 12px;
111+
}
112+
113+
.did-value {
114+
font-family: 'Monaco', 'Consolas', monospace;
115+
background: #f7fafc;
116+
padding: 8px 12px;
117+
border-radius: 6px;
118+
font-size: 14px;
119+
word-break: break-all;
120+
}
121+
122+
/* Credentials section */
123+
.credentials-section {
124+
background: rgba(255, 255, 255, 0.95);
125+
border-radius: 12px;
126+
padding: 24px;
127+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
128+
}
129+
130+
.credentials-section h3 {
131+
margin: 0 0 20px 0;
132+
color: #2d3748;
133+
font-size: 24px;
134+
font-weight: 600;
135+
}
136+
137+
.no-credentials {
138+
text-align: center;
139+
color: #718096;
140+
font-style: italic;
141+
padding: 40px;
142+
}
143+
144+
.credentials-list {
145+
display: grid;
146+
gap: 16px;
147+
}
148+
149+
.credential-card {
150+
background: white;
151+
border: 1px solid #e2e8f0;
152+
border-radius: 8px;
153+
padding: 20px;
154+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
155+
transition: all 0.2s ease;
156+
}
157+
158+
.credential-card:hover {
159+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
160+
transform: translateY(-1px);
161+
}
162+
163+
.credential-card.selectable {
164+
cursor: pointer;
165+
}
166+
167+
.credential-card.selectable:hover {
168+
border-color: #4c51bf;
169+
}
170+
171+
.credential-card.selected {
172+
border-color: #4c51bf;
173+
background: #f7faff;
174+
}
175+
176+
.credential-id {
177+
font-size: 12px;
178+
color: #a0aec0;
179+
font-family: 'Monaco', 'Consolas', monospace;
180+
margin-bottom: 8px;
181+
word-break: break-all;
182+
}
183+
184+
.credential-type {
185+
font-size: 18px;
186+
font-weight: 600;
187+
color: #2d3748;
188+
margin-bottom: 12px;
189+
}
190+
191+
.credential-subject {
192+
background: #f7fafc;
193+
border-radius: 6px;
194+
padding: 12px;
195+
overflow-x: auto;
196+
}
197+
198+
.credential-subject pre {
199+
margin: 0;
200+
font-size: 14px;
201+
color: #4a5568;
202+
white-space: pre-wrap;
203+
word-wrap: break-word;
204+
}
205+
206+
/* Modal styles */
207+
.modal-overlay {
208+
position: fixed;
209+
top: 0;
210+
left: 0;
211+
right: 0;
212+
bottom: 0;
213+
background: rgba(0, 0, 0, 0.5);
214+
display: flex;
215+
justify-content: center;
216+
align-items: center;
217+
z-index: 1000;
218+
padding: 20px;
219+
}
220+
221+
.modal-content {
222+
background: white;
223+
border-radius: 12px;
224+
padding: 32px;
225+
max-width: 600px;
226+
width: 100%;
227+
max-height: 80vh;
228+
overflow-y: auto;
229+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
230+
}
231+
232+
.modal-content h2 {
233+
margin: 0 0 24px 0;
234+
color: #2d3748;
235+
font-size: 24px;
236+
font-weight: 600;
237+
}
238+
239+
.form-group {
240+
margin-bottom: 24px;
241+
}
242+
243+
.form-group label {
244+
display: block;
245+
margin-bottom: 8px;
246+
color: #4a5568;
247+
font-weight: 500;
248+
}
249+
250+
.modal-buttons {
251+
display: flex;
252+
gap: 16px;
253+
justify-content: flex-end;
254+
margin-top: 32px;
255+
}
256+
257+
.credential-selection {
258+
display: grid;
259+
gap: 12px;
260+
max-height: 400px;
261+
overflow-y: auto;
262+
margin-bottom: 24px;
263+
}
264+
265+
/* Custom button styles */
266+
.btn {
267+
padding: 12px 24px;
268+
border: none;
269+
border-radius: 8px;
270+
font-size: 16px;
271+
font-weight: 600;
272+
cursor: pointer;
273+
transition: all 0.2s ease;
274+
text-decoration: none;
275+
display: inline-block;
276+
text-align: center;
277+
min-width: 120px;
278+
}
279+
280+
.btn.primary {
281+
background: #4c51bf;
23282
color: white;
24283
}
25284

26-
.App-link {
27-
color: #61dafb;
285+
.btn.primary:hover {
286+
background: #434190;
287+
transform: translateY(-1px);
288+
}
289+
290+
.btn.secondary {
291+
background: #e2e8f0;
292+
color: #4a5568;
293+
}
294+
295+
.btn.secondary:hover {
296+
background: #cbd5e0;
297+
transform: translateY(-1px);
298+
}
299+
300+
.btn.small {
301+
padding: 8px 16px;
302+
font-size: 14px;
303+
min-width: 80px;
304+
}
305+
306+
.btn:disabled {
307+
opacity: 0.5;
308+
cursor: not-allowed;
309+
transform: none;
28310
}
29311

30-
@keyframes App-logo-spin {
31-
from {
32-
transform: rotate(0deg);
312+
/* Responsive design */
313+
@media (max-width: 768px) {
314+
.App {
315+
padding: 10px;
33316
}
34-
to {
35-
transform: rotate(360deg);
317+
318+
.setup-container {
319+
margin: 50px auto;
320+
padding: 30px 20px;
321+
}
322+
323+
.action-buttons {
324+
flex-direction: column;
325+
align-items: center;
326+
}
327+
328+
.did-info {
329+
flex-direction: column;
330+
text-align: center;
331+
}
332+
333+
.did-value {
334+
max-width: 100%;
335+
}
336+
337+
.modal-content {
338+
padding: 24px 20px;
339+
margin: 20px;
340+
}
341+
342+
.modal-buttons {
343+
flex-direction: column;
344+
}
345+
346+
.App-header h1 {
347+
font-size: 28px;
36348
}
37349
}

0 commit comments

Comments
 (0)