Improve ImageUploader UI

recipes/src/components/ImageUploader/styles.scss

@@ -2,8 +2,11 @@
 
 .cbk-img-uploader {
   position: relative;
-  @include solidBoxShadow();
+  @include box();
   
+  &:hover {
+    @include shadow();
+  }
 
   input {
     display: none;
@@ -17,13 +20,15 @@
     background-size: cover;
     background-position: center;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
+    justify-content: end;
+    align-items: flex-end;
 
     button {
       opacity: .5;
       i.material-icons {
-        text-shadow: 0px 0px 1px white;
+        text-shadow: 2px 2px 1px $black;
+        color: $red;
       }
       &:hover {
         opacity: 1;

recipes/src/styles/_colors.scss

@@ -15,6 +15,8 @@ $grey-900: #212121;
 
 $pink: #e89d93;
 
+$red: #F25F5C;
+
 $yellow: #eec71a;
 $yellow-dark: #d0ae16;
 

recipes/src/styles/_ui.scss

@@ -66,6 +66,10 @@ $phone: "(max-width: 839px)";
   }
 }
 
+@mixin shadow($color: #eec71a) {
+  box-shadow: 4px 4px 0 0 $color;
+}
+
 @mixin solidBoxShadow($color: #eec71a) {
   border: 3px solid #000;
   box-shadow: 4px 4px 0 0 $color;