feat:Change styles on dashboard, add animations

src/app/modules/dashboard/dashboard.component.html

@@ -1,54 +1,57 @@
 <!--
   ~ Copyright (C) 2022 StApps
-  ~  This program is free software: you can redistribute it and/or modify it
-  ~  under the terms of the GNU General Public License as published by the Free
-  ~  Software Foundation, version 3.
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
   ~
-  ~  This program is distributed in the hope that it will be useful, but WITHOUT
-  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-  ~  more details.
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
   ~
-  ~  You should have received a copy of the GNU General Public License along with
-  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
-
 <ion-header>
-  <div class="schedule">
-    <a [routerLink]="['/schedule/recurring']">
-      <ion-icon size="40" weight="300" name="grid_view"></ion-icon>
-      <ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
-    </a>
-    <a
-      *ngIf="nextEvent && nextEvent.event"
-      [routerLink]="['/data-detail', nextEvent.event.uid]"
-      class="schedule-item-button"
-    >
-      <ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>
-      <ion-label>
-        {{ nextEvent.dates | nextDateInList | amDateFormat: 'll, HH:mm' }}
-        {{ 'timeSuffix' | translate }}
-      </ion-label>
-      <ion-label>{{ nextEvent.event.name }}</ion-label>
-    </a>
-    <a
-      *ngIf="!nextEvent || !nextEvent.event"
-      [routerLink]="['/schedule/recurring']"
-      class="schedule-item-button"
-    >
-      <ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>
-      <ion-label>{{ 'dashboard.schedule.noEvent' | translate }}</ion-label>
-      <ion-label>{{ 'dashboard.schedule.noEventLink' | translate }}</ion-label>
-    </a>
-  </div>
+  <ion-toolbar #toolbar class="ion-hide-md-up">
+    <ion-label slot="start">{{
+      'dashboard.header.title' | daytimeKey | translate
+    }}</ion-label>
+    <ion-img src="assets/imgs/logo.png" class="logo"></ion-img>
+  </ion-toolbar>
 </ion-header>
+<div #schedule class="schedule">
+  <a [routerLink]="['/schedule/recurring']">
+    <ion-icon size="40" weight="300" name="grid_view"></ion-icon>
+    <ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
+  </a>
+  <a
+    *ngIf="nextEvent && nextEvent.event"
+    [routerLink]="['/data-detail', nextEvent.event.uid]"
+    class="schedule-item-button"
+  >
+    <ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>
+    <ion-label>
+      {{ nextEvent.dates | nextDateInList | amDateFormat: 'll, HH:mm' }}
+      {{ 'timeSuffix' | translate }}
+    </ion-label>
+    <ion-label>{{ nextEvent.event.name }}</ion-label>
+  </a>
+  <a
+    *ngIf="!nextEvent || !nextEvent.event"
+    [routerLink]="['/schedule/recurring']"
+    class="schedule-item-button"
+  >
+    <ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>
+    <ion-label>{{ 'dashboard.schedule.noEvent' | translate }}</ion-label>
+    <ion-label>{{ 'dashboard.schedule.noEventLink' | translate }}</ion-label>
+  </a>
+</div>
 
-<ion-content>
-  <div class="scrollable-container">
-    <stapps-navigation-section></stapps-navigation-section>
-    <stapps-search-section></stapps-search-section>
-    <stapps-news-section></stapps-news-section>
-    <stapps-mensa-section></stapps-mensa-section>
-    <stapps-favorites-section></stapps-favorites-section>
-  </div>
+<ion-content fullscreen="true" #ionContent>
+  <stapps-navigation-section></stapps-navigation-section>
+  <stapps-search-section></stapps-search-section>
+  <stapps-news-section></stapps-news-section>
+  <stapps-mensa-section></stapps-mensa-section>
+  <stapps-favorites-section></stapps-favorites-section>
 </ion-content>