Merge branch 'feature/journal-dispatchers' into development

src/styles/JournalSection.scss

@@ -0,0 +1,84 @@
+@import 'responsive.scss';
+
+// Animations
+.warning {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 200ms ease-in-out;
+  }
+
+  &-leave-active {
+    transition: all 200ms ease-in-out;
+  }
+}
+
+.journal-list-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+//Styles
+.journal-wrapper {
+  width: 1350px;
+  padding: 1em 0;
+}
+
+.journal_warning {
+  text-align: center;
+  font-size: 1.3em;
+
+  &.error {
+    background-color: var(--clr-error);
+  }
+}
+
+.schedule-dates > * {
+  margin-right: 0.25em;
+}
+
+.journal_item,
+.journal_warning {
+  background: #202020;
+  padding: 1em;
+  margin: 1em 0;
+}
+
+.journal_loading {
+  margin-top: 2em;
+
+  img {
+    margin: 0 auto;
+    display: block;
+
+    width: 8em;
+  }
+
+  text-align: center;
+
+  .loading-label {
+    background: #333;
+    color: white;
+
+    padding: 0.5em 0.5em;
+    font-size: 1.3em;
+
+    border-radius: 1em;
+  }
+}
+
+@include smallScreen() {
+  .journal-wrapper {
+    font-size: 1.25em;
+  }
+}

src/styles/global.scss

@@ -211,6 +211,11 @@ ul {
     &:hover, &:focus {
       color: $accentCol;
     }
+
+    &.checked {
+      color: var(--clr-primary);
+      font-weight: bold;
+    }
   }
 
   &--image {
@@ -238,4 +243,37 @@ ul {
       background-color: #3c3c3c;
     }
   }
+}
+
+.return-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: fixed;
+  right: 0;
+  bottom: 0;
+
+  z-index: 100;
+
+  margin: 0 1em 1em 0;
+
+  width: 2em;
+  height: 2em;
+
+  font-size: 1.7em;
+
+  background-color: #333;
+  color: white;
+
+  border-radius: 50%;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #3c3c3c;
+  }
+
+  img {
+    width: 1.3em;
+  }
 }