finish register special

resources/sass/components/alert_box.scss

@@ -0,0 +1,21 @@
+.alert-box {
+    border: 1px solid $medium;
+    color: $medium;
+    font-weight: bold;
+    border-radius: 3px;
+
+}
+
+.alert-success {
+    @extend .alert-box;
+    border-color: $success;
+    background-color: $success;
+    color: $white;
+}
+
+.alert-error {
+    @extend .alert-box;
+    border-color: $error;
+    background-color: $error;
+    color: $white;
+}

resources/sass/components/avatar.scss

@@ -0,0 +1,31 @@
+.avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $dark;
+    border-radius: 50%;
+    color: $light;
+    font-weight: bold;
+    text-underline: none;
+
+    &-small {
+        $size: 3rem;
+        width: $size;
+        height: $size;
+        font-size: $size *2/3;
+    }
+
+    &-medium {
+        $size: 5rem;
+        width: $size;
+        height: $size;
+        font-size: $size *2/3;
+    }
+
+    &-large {
+        $size: 8rem;
+        width: $size;
+        height: $size;
+        font-size: $size *2/3;
+    }
+}