Add Wunderlist migration (#46)

Complete migration flow

Add migration in progress animation

Add handling wunderlist migration flow

Basic migration init structure

Add migrator structure

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/46

src/styles/components/_all.scss

@@ -11,3 +11,4 @@
 @import 'taskRelations';
 @import 'tasks';
 @import 'teams';
+@import 'migrator';

src/styles/components/migrator.scss

@@ -0,0 +1,69 @@
+.migration-services-overview {
+  text-align: center;
+
+  a {
+    display: inline-block;
+    width: 100px;
+
+    img {
+      display: block;
+    }
+  }
+}
+
+.migration-in-progress-container {
+  max-width: 400px;
+  margin: 4em auto 0;
+  text-align: center;
+}
+
+.migration-in-progress {
+  text-align: center;
+  display: flex;
+  max-width: 400px;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2em;
+
+  img {
+    display: block;
+    max-height: 100px;
+  }
+
+  .progress-dots {
+    height: 40px;
+    width: 140px;
+    overflow: visible;
+
+    span {
+      transition: all 500ms ease;
+      background: $grey;
+      height: 10px;
+      width: 10px;
+      display: inline-block;
+      border-radius: 10px;
+      animation: wave 2s ease infinite;
+      margin-right: 5px;
+
+      &:nth-child(1){  animation-delay: 0; }
+      &:nth-child(2){  animation-delay: 100ms; }
+      &:nth-child(3){  animation-delay: 200ms; }
+      &:nth-child(4){  animation-delay: 300ms; }
+      &:nth-child(5){  animation-delay: 400ms; }
+      &:nth-child(6){  animation-delay: 500ms; }
+      &:nth-child(7){  animation-delay: 600ms; }
+      &:nth-child(8){  animation-delay: 700ms; }
+    }
+  }
+
+  @keyframes wave{
+    0%, 40%, 100% {
+      transform: translate(0, 0);
+      background-color: $primary;
+    }
+    10% {
+      transform: translate(0, -15px);
+      background-color: $primary-dark;
+    }
+  }
+}