Skip to content

Commit 1b17707

Browse files
atyrodeatyrode
committed
style: update AuthDialog and BackupsDialog styles for improved UI consistency
- Refined styles in AuthDialog.scss to enhance the layout and structure of the authentication modal. - Expanded BackupsDialog.scss with new styles for better padding, margins, and hover effects, ensuring a cohesive design. - Adjusted BackupsModal component size for improved user interaction and visual appeal.
1 parent 2f5619d commit 1b17707

File tree

3 files changed

+73
-85
lines changed

3 files changed

+73
-85
lines changed

‎src/frontend/src/styles/AuthDialog.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* Auth Modal Styles */
22

33
.excalidraw .Dialog--fullscreen {
4-
&.auth-modal, .auth-modal {
4+
&.auth-modal {
55
.Dialog__close {
66
display: none;
77
}
@@ -26,10 +26,12 @@
2626
}
2727
}
2828

29-
.Island {
30-
height: 100%;
31-
display: flex;
32-
flex-direction: column;
29+
&.auth-modal {
30+
.Island {
31+
height: 100%;
32+
display: flex;
33+
flex-direction: column;
34+
}
3335
}
3436
}
3537

‎src/frontend/src/styles/BackupsDialog.scss‎

Lines changed: 65 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
1+
/* Backups Modal Styles */
2+
3+
.excalidraw .Dialog--fullscreen {
4+
&.backups-modal {
5+
.Dialog {
6+
&__content {
7+
margin-top: 0 !important;
8+
}
9+
}
10+
.Island {
11+
padding-left: 8px !important;
12+
padding-right: 10px !important;
13+
}
14+
}
15+
}
16+
117
.backups-modal {
18+
219
.Island {
320
padding-top: 15px !important;
421
padding-bottom: 20px !important;
@@ -20,7 +37,18 @@
2037
align-items: center;
2138
}
2239

40+
&__title {
41+
margin: 0 auto;
42+
font-size: 1.5rem;
43+
font-weight: 600;
44+
color: white;
45+
text-align: center;
46+
}
47+
2348
&__content {
49+
display: flex;
50+
flex-direction: column;
51+
align-items: center;
2452
padding: 20px;
2553
max-height: 80vh;
2654
overflow-y: auto;
@@ -31,6 +59,7 @@
3159
justify-content: space-between;
3260
align-items: center;
3361
margin-bottom: 1rem;
62+
width: 100%;
3463
}
3564

3665
&__close-button {
@@ -53,26 +82,17 @@
5382
}
5483
}
5584

56-
&__title {
57-
margin: 0;
58-
font-size: 1.2rem;
59-
font-weight: 500;
60-
color: #ffffff;
61-
text-align: center;
62-
opacity: 0.9;
63-
}
64-
6585
&__loading,
6686
&__error,
6787
&__empty {
6888
display: flex;
6989
align-items: center;
7090
justify-content: center;
7191
padding: 2rem;
72-
color: #ffffff;
92+
color: #a0a0a9;
7393
font-style: italic;
74-
opacity: 0.9;
75-
animation: fadeIn 0.5s ease-in-out;
94+
font-size: 18px;
95+
animation: fadeIn 0.5s cubic-bezier(0.00, 1.26, 0.64, 0.95) forwards;
7696
}
7797

7898
&__error {
@@ -83,8 +103,9 @@
83103
list-style: none;
84104
padding: 0;
85105
margin: 0;
86-
max-height: 60vh;
106+
max-height: 100%;
87107
overflow-y: auto;
108+
width: 100%;
88109
}
89110

90111
&__item {
@@ -93,34 +114,18 @@
93114
justify-content: space-between;
94115
padding: 12px 15px;
95116
margin-bottom: 8px;
96-
background-color: #32373c;
97-
border-radius: 10px;
117+
background-color: #464652;
118+
border: 2px solid #727279;
119+
border-radius: 6px;
98120
cursor: pointer;
99-
transition: all 0.3s ease;
121+
transition: all 0.2s ease;
100122
position: relative;
101123
overflow: hidden;
102124

103-
&::after {
104-
content: '';
105-
position: absolute;
106-
top: 0;
107-
left: 0;
108-
right: 0;
109-
bottom: 0;
110-
background-color: rgba(255, 255, 255, 0);
111-
transition: background-color 0.3s ease;
112-
pointer-events: none;
113-
border-radius: 10px;
114-
}
115-
116-
&:hover::after {
117-
background-color: rgba(255, 255, 255, 0.1);
125+
&:hover {
126+
border: 2px solid #cc6d24;
118127
}
119128

120-
&:active::after {
121-
background-color: rgba(255, 255, 255, 0.05);
122-
}
123-
124129
&:last-child {
125130
margin-bottom: 0;
126131
}
@@ -135,8 +140,8 @@
135140
&__number {
136141
font-size: 0.9rem;
137142
font-weight: 600;
138-
color: #cc6d24;
139-
background-color: rgba(106, 122, 255, 0.1);
143+
color: #fa8933;
144+
background-color: rgba(250, 137, 51, 0.1);
140145
padding: 4px 8px;
141146
border-radius: 4px;
142147
min-width: 28px;
@@ -146,21 +151,21 @@
146151
&__timestamp {
147152
font-size: 0.9rem;
148153
color: #ffffff;
149-
opacity: 0.9;
150154
}
151155

152156
&__restore-button {
153157
background-color: transparent;
154158
border: none;
155-
color: #cc6d24;
159+
color: #fa8933;
156160
font-size: 0.9rem;
161+
font-weight: 500;
157162
cursor: pointer;
158163
padding: 0.25rem 0.5rem;
159164
border-radius: 4px;
160165
transition: all 0.2s ease;
161166

162167
&:hover {
163-
background-color: rgba(106, 122, 255, 0.1);
168+
background-color: rgba(250, 137, 51, 0.1);
164169
}
165170
}
166171

@@ -170,12 +175,14 @@
170175
align-items: center;
171176
justify-content: center;
172177
padding: 20px;
173-
background-color: #32373c;
174-
border-radius: 10px;
175-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
178+
background-color: #464652;
179+
border: 2px solid #727279;
180+
border-radius: 6px;
176181
text-align: center;
177182
color: #ffffff;
178-
animation: fadeIn 0.4s ease-in-out;
183+
animation: fadeIn 0.4s cubic-bezier(0.00, 1.26, 0.64, 0.95) forwards;
184+
width: 80%;
185+
max-width: 500px;
179186
}
180187

181188
&__warning {
@@ -187,56 +194,35 @@
187194
&__actions {
188195
display: flex;
189196
gap: 1rem;
197+
margin-top: 20px;
190198
}
191199

192200
&__button {
201+
display: flex;
202+
align-items: center;
203+
justify-content: center;
193204
padding: 10px 16px;
194-
border: none;
195-
border-radius: 7px;
205+
height: 44px;
206+
border-radius: 6px;
207+
border: 2px solid #727279;
208+
font-size: 15px;
196209
font-weight: 500;
210+
transition: all 0.2s ease;
197211
cursor: pointer;
198-
transition: all 0.3s ease;
199-
position: relative;
200-
overflow: hidden;
212+
min-width: 120px;
201213

202-
&::after {
203-
content: '';
204-
position: absolute;
205-
top: 0;
206-
left: 0;
207-
right: 0;
208-
bottom: 0;
209-
background-color: rgba(255, 255, 255, 0);
210-
transition: background-color 0.3s ease;
211-
pointer-events: none;
212-
border-radius: 7px;
213-
}
214-
215-
&:hover::after {
216-
background-color: rgba(255, 255, 255, 0.1);
217-
}
218-
219-
&:active::after {
220-
background-color: rgba(255, 255, 255, 0.05);
214+
&:hover {
215+
border: 2px solid #cc6d24;
221216
}
222217

223218
&--restore {
224-
background-color: #cc6d24;
225-
border: 1px solid #cecece00;
219+
background-color: #464652;
226220
color: white;
227-
228-
&:hover {
229-
border: 1px solid #cecece;
230-
}
231221
}
232222

233223
&--cancel {
234-
background-color: #4a4a54;
224+
background-color: #464652;
235225
color: #ffffff;
236-
237-
&:hover {
238-
background-color: #3a3a44;
239-
}
240226
}
241227
}
242228
}

‎src/frontend/src/ui/BackupsDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const BackupsModal: React.FC<BackupsModalProps> = ({
109109
<div className="backups-modal__wrapper">
110110
<Dialog
111111
className="backups-modal"
112-
size="regular"
112+
size="small"
113113
onCloseRequest={handleClose}
114114
title={
115115
<div className="backups-modal__title-container">

0 commit comments

Comments
 (0)