Skip to content

Commit 8ecb7ec

Browse files
Shayan1375Shayan1375
committed
added styling to snackbar #447 
1 parent 1c3f901 commit 8ecb7ec

File tree

2 files changed

+248
-27
lines changed

2 files changed

+248
-27
lines changed

‎src/app/shared/components/snack-bar/snackbar.component.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<div
22
*ngIf="isVisible"
3-
fxLayout="row"
4-
fxLayoutAlign="start center"
5-
[ngClass]="{ 'error-snackbar': color === 'red', 'info-snackbar': color === 'green' }"
63
class="snackbar"
4+
[ngClass]="{
5+
'error-snackbar': color === 'red',
6+
'info-snackbar': color === 'green',
7+
'snackbar-enter': isVisible
8+
}"
9+
role="alert"
10+
[attr.aria-live]="color === 'red' ? 'assertive' : 'polite'"
11+
aria-atomic="true"
712
>
8-
<div fxFlex="95" class="message-display">{{ message | translate }}</div>
9-
<div fxFlex="5">
10-
<fa-icon (click)="closeSnackbar()" class="close-icon" size="lg" icon="times"> </fa-icon>
13+
<div class="message-display">
14+
<span>{{ message | translate }}</span>
1115
</div>
1216
</div>

‎src/app/shared/components/snack-bar/snackbar.component.scss‎

Lines changed: 238 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,254 @@
1+
// Modern Snackbar Design
12
.snackbar {
2-
width: 100%;
3-
height: 50px;
3+
position: fixed;
4+
top: 20px;
5+
left: 50%;
6+
transform: translateX(-50%);
7+
width: calc(100% - 40px);
8+
max-width: 600px;
9+
min-height: 56px;
410
display: flex;
511
justify-content: center;
6-
/* Center text horizontally */
712
align-items: center;
8-
/* Center text vertically */
9-
padding: 0 10px;
10-
color: white;
13+
padding: 12px 24px;
14+
border-radius: 12px;
15+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
16+
backdrop-filter: blur(10px);
17+
border: 1px solid rgba(255, 255, 255, 0.1);
18+
overflow: hidden;
19+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
20+
animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
21+
z-index: 9999;
22+
23+
// Subtle gradient overlay
24+
&::before {
25+
content: '';
26+
position: absolute;
27+
top: 0;
28+
left: 0;
29+
right: 0;
30+
bottom: 0;
31+
background: linear-gradient(
32+
135deg,
33+
rgba(255, 255, 255, 0.1) 0%,
34+
rgba(255, 255, 255, 0.05) 100%
35+
);
36+
pointer-events: none;
37+
}
38+
39+
// Hover effect - adjusted for fixed positioning
40+
&:hover {
41+
transform: translateX(-50%) translateY(-2px);
42+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
43+
}
1144
}
1245

46+
// Error snackbar with modern red gradient
1347
.error-snackbar {
14-
background-color: rgb(255 172 172 / 50%);
48+
background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
49+
color: white;
50+
border-left: 4px solid #ff3d3d;
51+
52+
&::after {
53+
content: '';
54+
position: absolute;
55+
top: 0;
56+
left: 0;
57+
width: 4px;
58+
height: 100%;
59+
background: linear-gradient(180deg, #ff3d3d 0%, #ff6b6b 100%);
60+
border-radius: 2px 0 0 2px;
61+
}
1562
}
1663

64+
// Success snackbar with modern green gradient
1765
.info-snackbar {
18-
background-color: var(--num-color--primary-green);
19-
/* Info color */
20-
}
66+
background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
67+
color: white;
68+
border-left: 4px solid #43a047;
2169

22-
.close-icon {
23-
margin-left: auto;
24-
/* Pushes the close button to the right */
25-
color: black;
70+
&::after {
71+
content: '';
72+
position: absolute;
73+
top: 0;
74+
left: 0;
75+
width: 4px;
76+
height: 100%;
77+
background: linear-gradient(180deg, #43a047 0%, #4caf50 100%);
78+
border-radius: 2px 0 0 2px;
79+
}
2680
}
2781

82+
// Modern message styling
2883
.message-display {
29-
padding-left: 13%;
30-
font-size: larger;
31-
color: rgba(171, 42, 42, 1);
84+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
85+
sans-serif;
86+
font-size: 1.25em;
3287
font-weight: 500;
33-
font-style: Medium;
34-
font-size: large;
35-
line-height: 100%;
36-
letter-spacing: 0%;
88+
line-height: 1.4;
89+
letter-spacing: 0.01em;
90+
margin: 0;
91+
padding: 0;
92+
color: white;
93+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
94+
95+
// Ensure text is readable
96+
display: flex;
97+
align-items: center;
98+
flex: 1;
99+
}
100+
101+
// Smooth animations - updated for top positioning
102+
@keyframes slideInDown {
103+
from {
104+
transform: translateX(-50%) translateY(-100%);
105+
opacity: 0;
106+
}
107+
to {
108+
transform: translateX(-50%) translateY(0);
109+
opacity: 1;
110+
}
111+
}
112+
113+
@keyframes slideOutUp {
114+
from {
115+
transform: translateX(-50%) translateY(0);
116+
opacity: 1;
117+
}
118+
to {
119+
transform: translateX(-50%) translateY(-100%);
120+
opacity: 0;
121+
}
122+
}
123+
124+
// Animation classes for entry/exit
125+
.snackbar-enter {
126+
animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
127+
}
128+
129+
.snackbar-leave {
130+
animation: slideOutUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
131+
}
132+
133+
// Responsive design
134+
@media (max-width: 768px) {
135+
.snackbar {
136+
top: 10px;
137+
left: 10px;
138+
right: 10px;
139+
width: auto;
140+
transform: none;
141+
padding: 16px 20px;
142+
border-radius: 16px;
143+
144+
// Mobile-specific animations
145+
&.snackbar-enter {
146+
animation: slideInDownMobile 0.4s cubic-bezier(0.4, 0, 0.2, 1);
147+
}
148+
149+
&:hover {
150+
transform: translateY(-2px);
151+
}
152+
}
153+
154+
.message-display {
155+
font-size: 14px;
156+
}
157+
}
158+
159+
// Mobile-specific animations
160+
@keyframes slideInDownMobile {
161+
from {
162+
transform: translateY(-100%);
163+
opacity: 0;
164+
}
165+
to {
166+
transform: translateY(0);
167+
opacity: 1;
168+
}
169+
}
170+
171+
@keyframes slideOutUpMobile {
172+
from {
173+
transform: translateY(0);
174+
opacity: 1;
175+
}
176+
to {
177+
transform: translateY(-100%);
178+
opacity: 0;
179+
}
180+
}
181+
182+
// Dark mode support (if needed)
183+
@media (prefers-color-scheme: dark) {
184+
.snackbar {
185+
border: 1px solid rgba(255, 255, 255, 0.08);
186+
187+
&::before {
188+
background: linear-gradient(
189+
135deg,
190+
rgba(255, 255, 255, 0.05) 0%,
191+
rgba(255, 255, 255, 0.02) 100%
192+
);
193+
}
194+
}
195+
}
196+
197+
// Additional snackbar variants
198+
.warning-snackbar {
199+
background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
200+
color: white;
201+
border-left: 4px solid #f57c00;
202+
203+
&::after {
204+
content: '';
205+
position: absolute;
206+
top: 0;
207+
left: 0;
208+
width: 4px;
209+
height: 100%;
210+
background: linear-gradient(180deg, #f57c00 0%, #ff9800 100%);
211+
border-radius: 2px 0 0 2px;
212+
}
213+
}
214+
215+
// Subtle info variant (for less critical messages)
216+
.info-light-snackbar {
217+
background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%);
218+
color: white;
219+
border-left: 4px solid #1976d2;
220+
221+
&::after {
222+
content: '';
223+
position: absolute;
224+
top: 0;
225+
left: 0;
226+
width: 4px;
227+
height: 100%;
228+
background: linear-gradient(180deg, #1976d2 0%, #2196f3 100%);
229+
border-radius: 2px 0 0 2px;
230+
}
231+
}
232+
233+
// Loading state (if needed)
234+
.snackbar-loading {
235+
.message-display::after {
236+
content: '';
237+
width: 16px;
238+
height: 16px;
239+
margin-left: 12px;
240+
border: 2px solid rgba(255, 255, 255, 0.3);
241+
border-top: 2px solid white;
242+
border-radius: 50%;
243+
animation: spin 1s linear infinite;
244+
}
245+
}
246+
247+
@keyframes spin {
248+
0% {
249+
transform: rotate(0deg);
250+
}
251+
100% {
252+
transform: rotate(360deg);
253+
}
37254
}

0 commit comments

Comments
 (0)