(styles) - Adjust maj toaster + style day selector

Author: robinlopez

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

@@ -40,12 +40,11 @@ watch([needRefresh], async ([_needRefresh]) => {
             position: 'top',
             buttons: [{
                 text: LL.value.Reload(),
-                side: 'end',
-                icon: reload,
+                side: 'bottom',
                 role: 'reload',
                 handler: () => updateServiceWorker(true),
             }],
-            color: 'primary'
+            cssClass: 'majNotification',
         })
         await toast.present()
     }

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

@@ -170,18 +170,21 @@ function findDayByLocalDate(localDate: string) {
       }
     }
 
-  .dayList  {
-    display: flex;
-    overflow-x: auto;
-    margin-left: -27px;
-    margin-right: -14px;
-    padding: 0;
-    background: var(--background);
-    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
+    .dayList  {
+      display: flex;
+      overflow-x: auto;
+      overflow-y: hidden;
+      margin-left: -27px;
+      margin-right: -24px;
+      padding: 0;
+      background: rgba(white, 0.6);
+      backdrop-filter: blur(30px) saturate(120%);
+      box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
 
-    @media (prefers-color-scheme: dark) {
-      background: rgba(var(--app-medium-contrast-rgb), 0.5);
-    }
+      @media (prefers-color-scheme: dark) {
+        border-bottom: 1px solid var(--app-line-contrast);
+        background: rgba(var(--app-medium-contrast-rgb), 0.5);
+      }
 
     &-content {
       display: flex;

mobile/src/components/PwaReloadPrompt.vue

@@ -24,6 +24,7 @@
 @import "@/styles/vendors/ionic/customs/_custom-ion-list.scss";
 @import "@/styles/vendors/ionic/customs/_custom-ion-action-sheet.scss";
 @import "@/styles/vendors/ionic/customs/custom-ion-tabs.scss";
+@import "@/styles/vendors/ionic/customs/custom-ion-toast.scss";
 @import "@/styles/vendors/ionic/metrics-ionic-variables.scss";
 @import "@/styles/vendors/ionic/theme-ionic-variables.scss";
 @import "@/styles/vendors/font.scss";

mobile/src/components/schedule/DaySelector.vue

@@ -0,0 +1,67 @@
+ion-toast {
+  font-weight: bold;
+}
+
+/* ==== Specifics Toast ==== */
+
+.majNotification {
+  --border-radius: 16px;
+  --background: rgba(0, 0, 0, 0.94);
+  --color: var(--app-white);
+  --button-color: var(--app-white);
+  --box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+
+  @media (prefers-color-scheme: dark) {
+    --background: rgba(255, 255, 255, 0.94);
+    --color: var(--app-primary);
+    --button-color: var(--app-primary);
+  }
+
+  &::part(container) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 4px 12px 4px 4px;
+
+    &:after {
+      position: absolute;
+      bottom: -23px;
+      right: -16px;
+      height: 160px;
+      width: 160px;
+      transform: rotate(45deg);
+      background-image: url("../../../assets/images/svg/illu-refresh-white.svg");
+      background-repeat: no-repeat;
+      content: '';
+      z-index: -1;
+      opacity: 0.4;
+
+      @media (prefers-color-scheme: dark) {
+        opacity: 0.1;
+        background-image: url("../../../assets/images/svg/illu-refresh-primary.svg");
+      }
+    }
+  }
+
+  &::part(message) {
+    line-height: 1.2;
+  }
+
+  &::part(button) {
+    display: flex;
+    border-radius: 54px;
+    background: var(--app-white);
+    color: var(--app-primary);
+    font-weight: 900;
+    justify-content: center;
+
+    @media (prefers-color-scheme: dark) {
+      background: var(--app-primary);
+      color: var(--app-white);
+    }
+  }
+}
+
+.toast-button {
+  display: none;
+}