refractor: login module (#283)

* Refractor components.
* Shift language and footer component to shared module.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes #284

src/app/login/login.component.scss

@@ -1,100 +1,56 @@
 .cover {
   background: url("../../assets/images/cover_image.jpg") no-repeat center center;
   background-size: cover;
-  // opacity: 0.4
   position: relative;
-  z-index: 0;;
+  z-index: 0;
   max-width: 70vw;
-}
 
-.cover::after {
-  content: '';
-  opacity: 0.4;
-  background: linear-gradient(black, black);
-  width: 100%;
-  height: 100%;
-  opacity: 0.6;
-  top: 0;
-  left: 0;
-  display: block;
-  z-index: 1;
-  position: absolute;
-}
+  &::after {
+    content: "";
+    opacity: 0.5;
+    background: linear-gradient(#000, #000);
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: block;
+    z-index: 1;
+    position: absolute;
+  }
 
-.cover-content {
-  display: block;
-  max-width: 80%;
-  margin: 100px;
-  color: white;
-  text-align: justify;
-  z-index: 2;
+  .cover-content {
+    display: block;
+    max-width: 80%;
+    margin: 100px;
+    color: #fff;
+    text-align: justify;
+    z-index: 2;
 
-  p {
-    a {
-      text-decoration: underline;
-      color: white;
-     }
+    .cover-title {
+      border-bottom: 2px solid #fff;
+      margin: 0 0 20px;
+      padding-bottom: 10px;
+    }
 
-     a:hover {
-       color: lightgray;
-     }
+    .cover-description {
+      .cover-link {
+        text-decoration: underline;
+        color: #fff;
+
+        &:hover {
+          color: #d3d3d3;
+        }
+      }
+    }
   }
 }
 
-.cover-title {
-  border-bottom: 2px solid white;
-  margin: 0 0 20px;
-  padding-bottom: 10px;
-}
-
 .login-container {
-  box-shadow: 1px 1px 50px black;
+  box-shadow: 1px 1px 50px #000;
   height: 100vh;
   overflow: auto;
+
+  .img-container {
+    max-width: 18rem;
+  }
 }
-
-.language-selector {
-  max-width: 4rem;
-}
-
-.img-container {
-  max-width: 18rem;
-}
-
-p {
-  margin: 0;
-}
-
-.divider {
-  margin: 10px 30px;
-}
-
-// @import "../../theme/theme-variables";
-// @import "~bootstrap/scss/mixins/_breakpoints";
-
-// .login-container {
-//   position: absolute;
-//   top: 0;
-//   bottom: 0;
-//   left: 0;
-//   right: 0;
-// }
-
-// .login-box {
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-//   align-items: center;
-//   width: 100%;
-//   min-height: 100%;
-// }
-
-// .ng-invalid.ng-touched:not(form) {
-//   border-left: 4px solid theme-color("danger");
-// }
-
-// @include media-breakpoint-down(xs) {
-//   .container {
-//     width: 100%;
-//   }
-// }