Add styles

src/assets/styles/index.scss

@@ -24,14 +24,15 @@ h1, h2 ,h3 ,h4 ,h5 ,h6 {
 .page-container {
   margin: auto;
   max-width: 1200px;
-
   &.home main {
     margin: 0 auto;
-
     @media #{$desktop} {
       max-width: 800px;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
     }
-
     @media #{$tablet} {
       max-width: 600px;
     }

src/components/Card.vue

@@ -17,6 +17,7 @@ export default {
     padding: 30px 20px;
     margin: 0 5px;
     text-align: center;
+    height: 400px;
     @include shadow(30);
   }
 </style>

src/components/RegistrationForm.vue

@@ -49,52 +49,48 @@ export default {
 <style lang="scss" scoped>
   .registation-form {
     &__heading {
+      font-size: 40px;
       margin: 0 0 15px;
     }
-
     &__input {
       border: none;
       padding: 5px 28px 5px 5px;
       border-radius: 20px;
       font-style: italic;
       text-align: center;
       box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
+      outline: none;
     }
-
     &__button {
       border: none;
       border-radius: 100%;
       background: #8FCDC1;
       color: #fff;
       width: 28px;
-      height: 28px;
+      height: 29px;
       margin-left: -28px;
     }
-
     &__info {
       max-width: 300px;
-
       @media #{$desktop} {
         max-width: 400px;
       }
     }
-
     .plus-icon {
       vertical-align: middle;
       margin-top: -3px;
       filter: invert(100%)
         sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
     }
   }
-
   .info {
     margin: 0 auto;
-
     &__heading {
+      font-size: 40px;
       margin: 0 0 15px;
     }
-
     &__text {
+      font-size: 16px;
       margin-bottom: 20px;
     }
   }

src/store/index.js

@@ -72,6 +72,7 @@ export default new Vuex.Store({
     unassignedTasks: (state) => state.tasks.filter((task) => task.status === 'UNASSIGNED'),
     inProgressTasks: (state) => state.tasks.filter((task) => task.status === 'PROGRESS'),
     filteredTasks: (state) => state.filteredTasks,
+    isLoading: (state) => state.isLoading,
   },
   modules: {},
 });

src/views/AllTasks.vue

@@ -3,6 +3,7 @@
     <h2 class="listings-content__title">
       {{ $t('dashboard.open_requests')}}
     </h2>
+    <div class="listings-content__loading" v-if="isLoading">Lade Anfragen...</div>
     <IssueCard
       v-for="task in filteredTasks" :key="task.id"
       :taskId="task.id"
@@ -25,6 +26,7 @@ export default {
   computed: {
     ...mapGetters([
       'filteredTasks',
+      'isLoading',
     ]),
   },
 };

src/views/Dashboard.vue

@@ -167,6 +167,11 @@ export default {
       padding: 0;
       font-size: 36px;
     }
+
+    &__loading {
+      font-size: 20px;
+      margin-top: 50px;
+    }
   }
   .filter {
     display: inline-block;

src/views/Home.vue

@@ -37,31 +37,29 @@ export default {
     margin: 50px auto;
     padding: 0;
     max-width: 300px;
-
     @media #{$desktop} {
-      max-width: 400px;
+      max-width: 600px;
     }
-
     &__logo {
       flex: 1 1 100%;
       display: flex;
       justify-content: center;
     }
-
     &__text {
       flex: 1 1 100%;
       text-align: center;
+      font-size: 20px;
+      line-height: 1.5;
+      margin-top: 40px;
     }
   }
-
   .logo {
     margin-bottom: 10px;
-
     &__image {
       max-width: 50%;
-
       @media #{$desktop} {
-        max-width: 100%;
+        width: 100%;
+        max-width: 400px;
       }
     }
   }