Skip to content

Commit ca771bd

Browse files
andrewkminandrewkmin
committed
minor redesign
1 parent 7ac558c commit ca771bd

File tree

6 files changed

+556
-260
lines changed

6 files changed

+556
-260
lines changed

‎examples/wallet-export-sign/src/components/Export.module.css‎

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
.container {
2+
margin-top: 32px;
3+
display: flex;
4+
flex-direction: column;
5+
gap: 28px;
6+
width: 100%;
7+
max-width: 100%;
8+
font-family:
9+
Inter,
10+
system-ui,
11+
-apple-system,
12+
"Segoe UI",
13+
Roboto,
14+
"Helvetica Neue",
15+
Arial,
16+
sans-serif;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
21+
.card {
22+
padding: 0;
23+
border-radius: 12px;
24+
border: 1px solid #e5e7eb;
25+
background: #ffffff;
26+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
27+
transition: all 0.2s ease;
28+
width: 100%;
29+
box-sizing: border-box;
30+
overflow: hidden;
31+
}
32+
33+
.card:hover {
34+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
35+
border-color: #d1d5db;
36+
}
37+
38+
.cardHeader {
39+
display: flex;
40+
justify-content: space-between;
41+
align-items: center;
42+
padding: 20px 24px;
43+
background: linear-gradient(to bottom, #fafbfc, #f8f9fa);
44+
border-bottom: 1px solid #e5e7eb;
45+
gap: 16px;
46+
}
47+
48+
.cardTitle {
49+
font-size: 15px;
50+
font-weight: 600;
51+
color: #111827;
52+
margin: 0;
53+
letter-spacing: -0.01em;
54+
}
55+
56+
.cardSubtitle {
57+
font-size: 12px;
58+
color: #6b7280;
59+
font-weight: 500;
60+
white-space: nowrap;
61+
text-transform: uppercase;
62+
letter-spacing: 0.03em;
63+
}
64+
65+
.cardBody {
66+
padding: 20px;
67+
}
68+
69+
.textarea {
70+
width: 100%;
71+
min-height: 110px;
72+
padding: 14px 16px;
73+
font-family:
74+
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
75+
monospace;
76+
font-size: 14px;
77+
line-height: 1.6;
78+
border: 1px solid #d1d5db;
79+
border-radius: 8px;
80+
resize: none;
81+
transition:
82+
border-color 0.2s ease,
83+
box-shadow 0.2s ease,
84+
background-color 0.2s ease;
85+
background: #fafafa;
86+
box-sizing: border-box;
87+
}
88+
89+
.textarea:focus {
90+
outline: none;
91+
border-color: #2563eb;
92+
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
93+
background: #ffffff;
94+
}
95+
96+
.textarea::placeholder {
97+
color: #9ca3af;
98+
}
99+
100+
.buttonGroup {
101+
display: flex;
102+
gap: 12px;
103+
margin-top: 16px;
104+
flex-wrap: wrap;
105+
}
106+
107+
.button {
108+
padding: 11px 20px;
109+
font-size: 14px;
110+
font-weight: 500;
111+
border-radius: 8px;
112+
border: 1px solid #d1d5db;
113+
background: #ffffff;
114+
color: #374151;
115+
cursor: pointer;
116+
transition: all 0.15s ease;
117+
font-family: Inter, system-ui, sans-serif;
118+
letter-spacing: -0.01em;
119+
}
120+
121+
.button:hover:not(:disabled) {
122+
background: #f9fafb;
123+
border-color: #9ca3af;
124+
}
125+
126+
.button:active:not(:disabled) {
127+
transform: translateY(1px);
128+
}
129+
130+
.button:disabled {
131+
opacity: 0.5;
132+
cursor: not-allowed;
133+
}
134+
135+
.buttonPrimary {
136+
background: #050a0b;
137+
color: #ffffff;
138+
border-color: #050a0b;
139+
}
140+
141+
.buttonPrimary:hover:not(:disabled) {
142+
background: #1a1f23;
143+
border-color: #1a1f23;
144+
}
145+
146+
.outputSection {
147+
margin-top: 24px;
148+
padding: 20px;
149+
background: #f9fafb;
150+
border-radius: 8px;
151+
border: 1px solid #e5e7eb;
152+
}
153+
154+
.outputLabel {
155+
font-size: 12px;
156+
font-weight: 600;
157+
color: #6b7280;
158+
margin-bottom: 12px;
159+
letter-spacing: 0.03em;
160+
text-transform: uppercase;
161+
}
162+
163+
.monoBox {
164+
font-family:
165+
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
166+
monospace;
167+
font-size: 12px;
168+
padding: 14px 16px;
169+
border-radius: 6px;
170+
background: #ffffff;
171+
border: 1px solid #e5e7eb;
172+
word-break: break-all;
173+
white-space: pre-wrap;
174+
color: #1f2937;
175+
line-height: 1.7;
176+
max-height: 140px;
177+
overflow-y: auto;
178+
box-sizing: border-box;
179+
}
180+
181+
.monoBox::-webkit-scrollbar {
182+
width: 8px;
183+
height: 8px;
184+
}
185+
186+
.monoBox::-webkit-scrollbar-track {
187+
background: #f1f3f5;
188+
border-radius: 4px;
189+
}
190+
191+
.monoBox::-webkit-scrollbar-thumb {
192+
background: #cbd5e0;
193+
border-radius: 4px;
194+
}
195+
196+
.monoBox::-webkit-scrollbar-thumb:hover {
197+
background: #a0aec0;
198+
}
199+
200+
.copyButton {
201+
padding: 8px 14px;
202+
font-size: 12px;
203+
font-weight: 500;
204+
border-radius: 6px;
205+
border: 1px solid #d1d5db;
206+
background: #ffffff;
207+
color: #374151;
208+
cursor: pointer;
209+
transition: all 0.15s ease;
210+
margin-top: 12px;
211+
letter-spacing: -0.01em;
212+
}
213+
214+
.copyButton:hover {
215+
background: #f9fafb;
216+
border-color: #9ca3af;
217+
}
218+
219+
.copyButton:active {
220+
transform: translateY(1px);
221+
}
222+
223+
.iframeContainer {
224+
margin-bottom: 20px;
225+
}
226+
227+
@media (min-width: 640px) {
228+
.cardBody {
229+
padding: 24px;
230+
}
231+
232+
.textarea {
233+
min-height: 120px;
234+
}
235+
}
236+
237+
@media (min-width: 768px) {
238+
.cardHeader {
239+
padding: 24px 28px;
240+
}
241+
242+
.cardBody {
243+
padding: 28px;
244+
}
245+
246+
.cardTitle {
247+
font-size: 16px;
248+
}
249+
250+
.textarea {
251+
font-size: 14px;
252+
padding: 16px 18px;
253+
min-height: 130px;
254+
}
255+
256+
.container {
257+
gap: 32px;
258+
}
259+
}
260+
261+
@media (min-width: 1024px) {
262+
.cardHeader {
263+
padding: 24px 32px;
264+
}
265+
266+
.cardBody {
267+
padding: 32px;
268+
}
269+
}

0 commit comments

Comments
 (0)