finish register special

resources/sass/app.scss

@@ -11,5 +11,7 @@
 @import "components/main";
 @import "components/nav";
 @import "components/sidebar";
+@import "components/avatar";
+@import "components/alert_box";
 
 @import "pages/auth";

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;
+    }
+}

resources/sass/setup/_colors.scss

@@ -17,7 +17,8 @@ $light: #D6CE15;
 $primary: $mediumDark;
 $secondary: #000;
 $interactive: #000;
-$error: #000;
+$success: green;
+$error: red;
 $disabled: #000;
 
 $font: $black;

resources/sass/setup/_positions.scss

@@ -29,7 +29,7 @@ $base: 1rem;
 
 .flex-center {
     display: flex;
-    align-items: center;
+    justify-content: center;
 }
 
 .flex-end {
@@ -56,7 +56,7 @@ $base: 1rem;
     padding-right: auto;
 }
 
-@for $i from 1 through 5 {
+@for $i from 0 through 5 {
     .m-#{$i} {
         margin: $i * $base;
     }

resources/sass/setup/_reset.scss

@@ -4,10 +4,12 @@ body {
     margin: 0;
 }
 
-div,
-input,
-nav,
-aside {
+* {
     box-sizing: border-box;
 }
 
+@for $i from 1 through 6 {
+    h#{$i} {
+        margin: 0;
+    }
+}