resolve conflicts

frontend/src/assets/scss/gradido-template-dark.scss

@@ -0,0 +1,19 @@
+$dark: #171717;
+$mode-toggle-bg: #262626;
+
+// _dark-mode.scss
+#app {
+  &.dark-mode {
+      background-color:  black;
+      color: #fff;
+  }
+}
+
+#app a,
+.navbar-light,
+.navbar-nav,
+.nav-link {
+    &.dark-mode {
+        color: #a7ffa9;
+    }
+ }

frontend/src/assets/scss/gradido-template.scss

@@ -1,6 +1,8 @@
 html,
 body {
+  background-color: #fff;
   height: 100%;
+  transition: background-color .5s ease, color .5s ease;
 }
 
 .pointer {

frontend/src/assets/scss/gradido.scss

@@ -52,3 +52,4 @@
 // Bootstrap-vue (2.21.1) scss
 @import "~bootstrap-vue/src/index";
 @import "gradido-template";
+@import "gradido-template-dark";

frontend/src/components/Menu/SidebarNew.vue

@@ -10,7 +10,7 @@
           </b-nav-item>
           <b-nav-item to="/storys" class="mb-3">
             <b-icon icon="card-heading" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.top_stories') }}</span>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
           </b-nav-item>
           <b-nav-item to="/favourites" class="mb-3">
             <b-icon icon="bookmark" aria-hidden="true"></b-icon>
@@ -36,9 +36,19 @@
         </b-nav>
         <hr />
         <b-nav vertical class="w-100">
-          <b-nav-item to="#" class="mb-3">
-            <b-icon icon="toggle-off" aria-hidden="true"></b-icon>
+          <b-nav-item
+            @click="
+              lightmode = !lightmode
+              $emit('modeToggle')
+            "
+            class="mb-3"
+          >
+            <b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
             <span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
+            <label for="checkbox" class="switch-label">
+              <span v-if="lightmode">{{ $t('navigation.moon') }}</span>
+              <span v-else>{{ $t('navigation.sun') }}</span>
+            </label>
           </b-nav-item>
           <b-nav-item to="/settings" class="mb-3">
             <b-icon icon="gear" aria-hidden="true"></b-icon>
@@ -60,6 +70,11 @@
 <script>
 export default {
   name: 'sidebar',
+  data() {
+    return {
+      lightmode: false,
+    }
+  },
 }
 </script>
 <style>

frontend/src/layouts/DashboardLayout.vue

@@ -1,6 +1,47 @@
 <template>
-  <div class="main-page bg-default">
-    <div class="position-absolute w-100 h-100 bg-default">
+  <div class="main-page bg-default h-100">
+    <div v-if="skeleton">
+      <b-row class="text-center">
+        <b-col>
+          <b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
+        </b-col>
+        <b-col cols="6">
+          <b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
+        </b-col>
+        <b-col>
+          <div class="b-right m-4">
+            <b-row>
+              <b-col><b-skeleton type="avatar"></b-skeleton></b-col>
+              <b-col>
+                <b-skeleton></b-skeleton>
+                <b-skeleton></b-skeleton>
+              </b-col>
+            </b-row>
+          </div>
+        </b-col>
+      </b-row>
+      <b-row class="text-center mt-5">
+        <b-col>
+          <b-skeleton animation="wave" width="85%"></b-skeleton>
+          <b-skeleton animation="wave" width="55%"></b-skeleton>
+          <b-skeleton animation="wave" width="70%"></b-skeleton>
+        </b-col>
+        <b-col cols="6">
+          <b-skeleton animation="wave" width="85%"></b-skeleton>
+          <b-skeleton animation="wave" width="55%"></b-skeleton>
+          <b-skeleton animation="wave" width="70%"></b-skeleton>
+          <b-skeleton animation="wave" width="85%"></b-skeleton>
+          <b-skeleton animation="wave" width="55%"></b-skeleton>
+          <b-skeleton animation="wave" width="70%"></b-skeleton>
+        </b-col>
+        <b-col>
+          <b-skeleton animation="wave" width="85%"></b-skeleton>
+          <b-skeleton animation="wave" width="55%"></b-skeleton>
+          <b-skeleton animation="wave" width="70%"></b-skeleton>
+        </b-col>
+      </b-row>
+    </div>
+    <div v-else class="position-absolute w-100 h-100 bg-default">
       <!--<navbar
         class="main-navbar"
         :balance="balance"
@@ -35,7 +76,12 @@
               @admin="admin"
               @logout="logout"
             /> -->
-            <sidebar-new class="main-sidebar" @admin="admin" @logout="logout" />
+            <sidebar-new
+              class="main-sidebar"
+              @admin="admin"
+              @logout="logout"
+              @modeToggle="modeToggle"
+            />
           </b-col>
           <b-col
             cols="12"
@@ -119,6 +165,8 @@ export default {
       visible: false,
       tunneledEmail: null,
       hamburger: true,
+      darkMode: false,
+      skeleton: true,
     }
   },
   provide() {
@@ -126,6 +174,11 @@ export default {
       getTunneledEmail: () => this.tunneledEmail,
     }
   },
+  created() {
+    setTimeout(() => {
+      this.skeleton = false
+    }, 1500)
+  },
   methods: {
     async logout() {
       this.$apollo
@@ -187,10 +240,37 @@ export default {
       this.$refs.sideMenu.classList.toggle('d-none')
       this.hamburger ? (this.hamburger = false) : (this.hamburger = true)
     },
+    dark() {
+      document.getElementById('app').classList.add('dark-mode')
+      document.querySelector('#app a').classList.add('dark-mode')
+      this.darkMode = true
+    },
+
+    light() {
+      document.getElementById('app').classList.remove('dark-mode')
+      document.querySelector('#app a').classList.remove('dark-mode')
+      this.darkMode = false
+    },
+
+    modeToggle() {
+      if (this.darkMode || document.getElementById('app').classList.contains('dark-mode')) {
+        this.light()
+      } else {
+        this.dark()
+      }
+    },
+  },
+  computed: {
+    darkDark() {
+      return this.darkMode && 'darkmode-toggled'
+    },
   },
 }
 </script>
 <style>
+.b-right {
+  text-align: -webkit-right;
+}
 .content-gradido {
   display: inline-flex;
   width: 100%;

frontend/src/locales/de.json

@@ -94,6 +94,7 @@
     "session-expired": "Die Sitzung wurde aus Sicherheitsgründen beendet.",
     "unknown-error": "Unbekannter Fehler: "
   },
+  "favourites": "Favouriten",
   "followUs": "folge uns:",
   "footer": {
     "app_version": "App version {version}",
@@ -234,12 +235,14 @@
     "lightmode": "Lightmode",
     "logout": "Abmelden",
     "members": "Mitglieder",
+    "moon": "🌙",
     "overview": "Übersicht",
     "profile": "Mein Profil",
     "send": "Senden",
     "settings": "Einstellung",
+    "sun": "☀️",
     "support": "Support",
-    "top_stories": "Top Stories",
+    "topStories": "Top Stories",
     "transactions": "Transaktionen"
   },
   "qrCode": "QR Code",

frontend/src/locales/en.json

@@ -94,6 +94,7 @@
     "session-expired": "The session was closed for security reasons.",
     "unknown-error": "Unknown error: "
   },
+  "favourites": "Favourites",
   "followUs": "follow us:",
   "footer": {
     "app_version": "App version {version}",
@@ -234,12 +235,14 @@
     "lightmode": "Lightmode",
     "logout": "Logout",
     "members": "Members",
+    "moon": "🌙",
     "overview": "Overview",
     "profile": "My profile",
     "send": "Send",
     "settings": "Settings",
+    "sun": "☀️",
     "support": "Support",
-    "top_stories": "Top Stories",
+    "topStories": "Top Stories",
     "transactions": "Transactions"
   },
   "qrCode": "QR Code",

frontend/src/pages/Favourites.vue

@@ -1,8 +1,28 @@
 <template>
-  <div>Favourites.vue</div>
+  <div>
+    <b-card v-if="skeleton">
+      {{ $t('favourites') }}
+      <b-skeleton animation="wave" width="85%"></b-skeleton>
+      <b-skeleton animation="wave" width="55%"></b-skeleton>
+      <b-skeleton animation="wave" width="70%"></b-skeleton>
+    </b-card>
+    <b-card v-else>
+      {{ $t('favourites') }}
+    </b-card>
+  </div>
 </template>
 <script>
 export default {
   name: 'Favourites',
+  data() {
+    return {
+      skeleton: true,
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.skeleton = false
+    }, 1500)
+  },
 }
 </script>

frontend/src/pages/Settings.vue

@@ -1,8 +1,28 @@
 <template>
-  <div>Settings.vue</div>
+  <div>
+    <b-card v-if="skeleton">
+      {{ $t('navigation.settings') }}
+      <b-skeleton animation="wave" width="85%"></b-skeleton>
+      <b-skeleton animation="wave" width="55%"></b-skeleton>
+      <b-skeleton animation="wave" width="70%"></b-skeleton>
+    </b-card>
+    <b-card v-else>
+      {{ $t('navigation.settings') }}
+    </b-card>
+  </div>
 </template>
 <script>
 export default {
   name: 'Settings',
+  data() {
+    return {
+      skeleton: true,
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.skeleton = false
+    }, 1500)
+  },
 }
 </script>

frontend/src/pages/TopStorys.vue

@@ -1,8 +1,28 @@
 <template>
-  <div>Top Storys</div>
+  <div>
+    <b-card v-if="skeleton">
+      {{ $t('navigation.topStories') }}
+      <b-skeleton animation="wave" width="85%"></b-skeleton>
+      <b-skeleton animation="wave" width="55%"></b-skeleton>
+      <b-skeleton animation="wave" width="70%"></b-skeleton>
+    </b-card>
+    <b-card v-else>
+      {{ $t('navigation.topStories') }}
+    </b-card>
+  </div>
 </template>
 <script>
 export default {
   name: 'TopStorys',
+  data() {
+    return {
+      skeleton: true,
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.skeleton = false
+    }, 1500)
+  },
 }
 </script>