Skip to content

Commit f91f382

Browse files
atyrodeatyrode
committed
style: update CanvasBackups
- Changed title from "Recent Canvas Backups" to "Canvas Backups" for clarity. - Enhanced backup restoration confirmation message to include backup index. - Updated styles for improved visual consistency, including background colors, padding, and hover effects. - Added new elements for displaying backup numbers alongside timestamps. - Improved overall layout and animations for a better user experience.
1 parent fb90e1f commit f91f382

File tree

2 files changed

+111
-37
lines changed

2 files changed

+111
-37
lines changed

‎src/frontend/src/pad/backups/CanvasBackups.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@ export const CanvasBackups: React.FC<CanvasBackupsProps> = ({
5959

6060
return (
6161
<div className="canvas-backups">
62-
<h2 className="canvas-backups__title">Recent Canvas Backups</h2>
62+
<h2 className="canvas-backups__title">Canvas Backups</h2>
6363

6464
{selectedBackup ? (
6565
<div className="canvas-backups__confirmation">
66-
<p>Restore canvas from backup created on {formatDate(selectedBackup.timestamp)}?</p>
66+
<p>Restore canvas from backup #{data.backups.findIndex(b => b.id === selectedBackup.id) + 1} created on {formatDate(selectedBackup.timestamp)}?</p>
6767
<p className="canvas-backups__warning">This will replace your current canvas!</p>
6868
<div className="canvas-backups__actions">
6969
<button
@@ -82,13 +82,16 @@ export const CanvasBackups: React.FC<CanvasBackupsProps> = ({
8282
</div>
8383
) : (
8484
<ul className="canvas-backups__list">
85-
{data.backups.map((backup) => (
85+
{data.backups.map((backup, index) => (
8686
<li
8787
key={backup.id}
8888
className="canvas-backups__item"
8989
onClick={() => handleBackupSelect(backup)}
9090
>
91-
<span className="canvas-backups__timestamp">{formatDate(backup.timestamp)}</span>
91+
<div className="canvas-backups__item-content">
92+
<span className="canvas-backups__number">#{index + 1}</span>
93+
<span className="canvas-backups__timestamp">{formatDate(backup.timestamp)}</span>
94+
</div>
9295
<button className="canvas-backups__restore-button">Restore</button>
9396
</li>
9497
))}

‎src/frontend/src/pad/styles/CanvasBackups.scss‎

Lines changed: 104 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@
33
flex-direction: column;
44
height: 100%;
55
width: 100%;
6-
padding: 1rem;
6+
padding: 12px;
77
overflow-y: auto;
8-
background-color: #f5f5f5;
9-
border-radius: 4px;
10-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
11-
font-family: 'Roboto', sans-serif;
8+
background-color: transparent;
9+
border-radius: 7px;
10+
font-family: Arial, sans-serif;
11+
box-sizing: border-box;
12+
transition: all 0.3s ease-in-out;
1213

1314
&--loading,
1415
&--error,
@@ -17,20 +18,23 @@
1718
align-items: center;
1819
justify-content: center;
1920
height: 100%;
20-
color: #666;
21+
color: #ffffff;
2122
font-style: italic;
23+
opacity: 0.9;
24+
animation: fadeIn 0.5s ease-in-out;
2225
}
2326

2427
&--error {
25-
color: #d32f2f;
28+
color: #f44336;
2629
}
2730

2831
&__title {
2932
margin: 0 0 1rem;
3033
font-size: 1.2rem;
3134
font-weight: 500;
32-
color: #333;
35+
color: #ffffff;
3336
text-align: center;
37+
opacity: 0.9;
3438
}
3539

3640
&__list {
@@ -45,40 +49,76 @@
4549
display: flex;
4650
align-items: center;
4751
justify-content: space-between;
48-
padding: 0.75rem;
49-
margin-bottom: 0.5rem;
50-
background-color: white;
51-
border-radius: 4px;
52-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
52+
padding: 12px 15px;
53+
margin-bottom: 8px;
54+
background-color: #32373c;
55+
border-radius: 10px;
5356
cursor: pointer;
54-
transition: background-color 0.2s ease;
55-
56-
&:hover {
57-
background-color: #f0f0f0;
57+
transition: all 0.3s ease;
58+
position: relative;
59+
overflow: hidden;
60+
61+
&::after {
62+
content: '';
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
right: 0;
67+
bottom: 0;
68+
background-color: rgba(255, 255, 255, 0);
69+
transition: background-color 0.3s ease;
70+
pointer-events: none;
71+
border-radius: 10px;
72+
}
73+
74+
&:hover::after {
75+
background-color: rgba(255, 255, 255, 0.1);
76+
}
77+
78+
&:active::after {
79+
background-color: rgba(255, 255, 255, 0.05);
5880
}
5981

6082
&:last-child {
6183
margin-bottom: 0;
6284
}
6385
}
6486

87+
&__item-content {
88+
display: flex;
89+
align-items: center;
90+
gap: 10px;
91+
}
92+
93+
&__number {
94+
font-size: 0.9rem;
95+
font-weight: 600;
96+
color: #cc6d24;
97+
background-color: rgba(106, 122, 255, 0.1);
98+
padding: 4px 8px;
99+
border-radius: 4px;
100+
min-width: 28px;
101+
text-align: center;
102+
}
103+
65104
&__timestamp {
66105
font-size: 0.9rem;
67-
color: #555;
106+
color: #ffffff;
107+
opacity: 0.9;
68108
}
69109

70110
&__restore-button {
71111
background-color: transparent;
72112
border: none;
73-
color: #2196f3;
113+
color: #cc6d24;
74114
font-size: 0.9rem;
75115
cursor: pointer;
76116
padding: 0.25rem 0.5rem;
77117
border-radius: 4px;
78-
transition: background-color 0.2s ease;
118+
transition: all 0.2s ease;
79119

80120
&:hover {
81-
background-color: rgba(33, 150, 243, 0.1);
121+
background-color: rgba(106, 122, 255, 0.1);
82122
}
83123
}
84124

@@ -87,11 +127,13 @@
87127
flex-direction: column;
88128
align-items: center;
89129
justify-content: center;
90-
padding: 1rem;
91-
background-color: white;
92-
border-radius: 4px;
93-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
130+
padding: 20px;
131+
background-color: #32373c;
132+
border-radius: 10px;
133+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
94134
text-align: center;
135+
color: #ffffff;
136+
animation: fadeIn 0.4s ease-in-out;
95137
}
96138

97139
&__warning {
@@ -106,29 +148,58 @@
106148
}
107149

108150
&__button {
109-
padding: 0.5rem 1rem;
151+
padding: 10px 16px;
110152
border: none;
111-
border-radius: 4px;
153+
border-radius: 7px;
112154
font-weight: 500;
113155
cursor: pointer;
114-
transition: background-color 0.2s ease;
156+
transition: all 0.3s ease;
157+
position: relative;
158+
overflow: hidden;
159+
160+
&::after {
161+
content: '';
162+
position: absolute;
163+
top: 0;
164+
left: 0;
165+
right: 0;
166+
bottom: 0;
167+
background-color: rgba(255, 255, 255, 0);
168+
transition: background-color 0.3s ease;
169+
pointer-events: none;
170+
border-radius: 7px;
171+
}
172+
173+
&:hover::after {
174+
background-color: rgba(255, 255, 255, 0.1);
175+
}
176+
177+
&:active::after {
178+
background-color: rgba(255, 255, 255, 0.05);
179+
}
115180

116181
&--restore {
117-
background-color: #2196f3;
182+
background-color: #cc6d24;
183+
border: 1px solid #cecece00;
118184
color: white;
119185

120186
&:hover {
121-
background-color: #1976d2;
187+
border: 1px solid #cecece;
122188
}
123189
}
124190

125191
&--cancel {
126-
background-color: #e0e0e0;
127-
color: #333;
192+
background-color: #4a4a54;
193+
color: #ffffff;
128194

129195
&:hover {
130-
background-color: #d5d5d5;
196+
background-color: #3a3a44;
131197
}
132198
}
133199
}
134200
}
201+
202+
@keyframes fadeIn {
203+
from { opacity: 0; transform: translateY(10px); }
204+
to { opacity: 1; transform: translateY(0); }
205+
}

0 commit comments

Comments
 (0)