fix(feedback): improve design of feedback flow, correct several logic issues

src/sass/views/feedback/complete.scss

@@ -3,8 +3,9 @@
   .close-button {
     color: $dark-gray;
     position: absolute;
-    top: 10px;
-    right: 15px;
+    top: 5px;
+    right: 10px;
+    padding: 15px;
     font-size: 36px;
   }
   .complete-layout {
@@ -13,11 +14,22 @@
     height: 100%;
     &__expand {
       display: flex;
+      flex-direction: column;
       flex-grow: 1;
       align-items: center;
       justify-content: center;
+      text-align: center;
+      opacity: 0;
+      transition: opacity .3s;
+      &.fade-in {
+        opacity: 1;
+      }
     }
   }
+  .share-the-love-illustration {
+    width: 5rem;
+    margin: 1rem;
+  }
   .title {
     font-size: 20px;
     font-weight: bold;
@@ -45,14 +57,23 @@
     height: 50px;
   }
   .share-buttons {
-    padding: 50px 10px;
+    padding: 50px 10px 30px;
     background-color: $subtle-gray;
     text-align: center;
+    transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1) .2s, opacity .5s ease-in .2s;
+    transform: translateY(100%);
+    opacity: 0;
+    &.slide-up {
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
   .share-buttons__action {
     display: inline-block;
     color: #667;
     font-size: .9rem;
     width: 90px;
+    height: 90px;
+    margin-bottom: 20px;
   }
 }

src/sass/views/feedback/send.scss

@@ -28,9 +28,11 @@
   }
   .user-feedback {
     border-top: 1px solid $subtle-gray;
+    border-bottom: 1px solid $subtle-gray;
     padding: 20px;
     width: 100%;
     margin-bottom: 20px;
+    -webkit-appearance: none;
   }
   .send-feedback-star {
     height: 1rem;