Skip to content

Commit 541e494

Browse files
committed
(styles) - Adjust maj toaster + style day selector
1 parent 357bf42 commit 541e494

File tree

6 files changed

+508
-14
lines changed

6 files changed

+508
-14
lines changed

mobile/public/assets/images/svg/illu-refresh-primary.svg

Lines changed: 212 additions & 0 deletions
Loading

mobile/public/assets/images/svg/illu-refresh-white.svg

Lines changed: 212 additions & 0 deletions
Loading

mobile/src/components/PwaReloadPrompt.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,11 @@ watch([needRefresh], async ([_needRefresh]) => {
4040
position: 'top',
4141
buttons: [{
4242
text: LL.value.Reload(),
43-
side: 'end',
44-
icon: reload,
43+
side: 'bottom',
4544
role: 'reload',
4645
handler: () => updateServiceWorker(true),
4746
}],
48-
color: 'primary'
47+
cssClass: 'majNotification',
4948
})
5049
await toast.present()
5150
}

mobile/src/components/schedule/DaySelector.vue

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -170,18 +170,21 @@ function findDayByLocalDate(localDate: string) {
170170
}
171171
}
172172
173-
.dayList {
174-
display: flex;
175-
overflow-x: auto;
176-
margin-left: -27px;
177-
margin-right: -14px;
178-
padding: 0;
179-
background: var(--background);
180-
box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
173+
.dayList {
174+
display: flex;
175+
overflow-x: auto;
176+
overflow-y: hidden;
177+
margin-left: -27px;
178+
margin-right: -24px;
179+
padding: 0;
180+
background: rgba(white, 0.6);
181+
backdrop-filter: blur(30px) saturate(120%);
182+
box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
181183
182-
@media (prefers-color-scheme: dark) {
183-
background: rgba(var(--app-medium-contrast-rgb), 0.5);
184-
}
184+
@media (prefers-color-scheme: dark) {
185+
border-bottom: 1px solid var(--app-line-contrast);
186+
background: rgba(var(--app-medium-contrast-rgb), 0.5);
187+
}
185188
186189
&-content {
187190
display: flex;

mobile/src/styles/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
@import "@/styles/vendors/ionic/customs/_custom-ion-list.scss";
2525
@import "@/styles/vendors/ionic/customs/_custom-ion-action-sheet.scss";
2626
@import "@/styles/vendors/ionic/customs/custom-ion-tabs.scss";
27+
@import "@/styles/vendors/ionic/customs/custom-ion-toast.scss";
2728
@import "@/styles/vendors/ionic/metrics-ionic-variables.scss";
2829
@import "@/styles/vendors/ionic/theme-ionic-variables.scss";
2930
@import "@/styles/vendors/font.scss";
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
ion-toast {
2+
font-weight: bold;
3+
}
4+
5+
/* ==== Specifics Toast ==== */
6+
7+
.majNotification {
8+
--border-radius: 16px;
9+
--background: rgba(0, 0, 0, 0.94);
10+
--color: var(--app-white);
11+
--button-color: var(--app-white);
12+
--box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
13+
14+
@media (prefers-color-scheme: dark) {
15+
--background: rgba(255, 255, 255, 0.94);
16+
--color: var(--app-primary);
17+
--button-color: var(--app-primary);
18+
}
19+
20+
&::part(container) {
21+
position: relative;
22+
display: flex;
23+
align-items: center;
24+
padding: 4px 12px 4px 4px;
25+
26+
&:after {
27+
position: absolute;
28+
bottom: -23px;
29+
right: -16px;
30+
height: 160px;
31+
width: 160px;
32+
transform: rotate(45deg);
33+
background-image: url("../../../assets/images/svg/illu-refresh-white.svg");
34+
background-repeat: no-repeat;
35+
content: '';
36+
z-index: -1;
37+
opacity: 0.4;
38+
39+
@media (prefers-color-scheme: dark) {
40+
opacity: 0.1;
41+
background-image: url("../../../assets/images/svg/illu-refresh-primary.svg");
42+
}
43+
}
44+
}
45+
46+
&::part(message) {
47+
line-height: 1.2;
48+
}
49+
50+
&::part(button) {
51+
display: flex;
52+
border-radius: 54px;
53+
background: var(--app-white);
54+
color: var(--app-primary);
55+
font-weight: 900;
56+
justify-content: center;
57+
58+
@media (prefers-color-scheme: dark) {
59+
background: var(--app-primary);
60+
color: var(--app-white);
61+
}
62+
}
63+
}
64+
65+
.toast-button {
66+
display: none;
67+
}

0 commit comments

Comments
 (0)