[#75] added option to test s3 connection and send test emails

ui/src/scss/_animations.scss

@@ -25,7 +25,6 @@
     }
 }
 
-
 @keyframes fadeIn {
     0% {
         opacity: 0;
@@ -51,3 +50,47 @@
         transform: scale(1);
     }
 }
+
+@keyframes entranceLeft {
+    0% {
+        opacity: 0;
+        transform: translateX(-5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes entranceRight {
+    0% {
+        opacity: 0;
+        transform: translateX(5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes entranceTop {
+    0% {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes entranceBottom {
+    0% {
+        opacity: 0;
+        transform: translateY(5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

ui/src/scss/_base.scss

@@ -692,3 +692,17 @@ a,
         }
     }
 }
+
+// base entrance animations
+.entrance-top {
+    animation: entranceTop var(--entranceAnimationSpeed);
+}
+.entrance-bottom {
+    animation: entranceBottom var(--entranceAnimationSpeed);
+}
+.entrance-left {
+    animation: entranceLeft var(--entranceAnimationSpeed);
+}
+.entrance-right {
+    animation: entranceRight var(--entranceAnimationSpeed);
+}

ui/src/scss/_form.scss

@@ -628,11 +628,16 @@ select {
     input[type="radio"] {
         & ~ label:before {
             border-radius: 50%;
-            font-size: 0.5rem;
+            font-size: 1rem;
         }
-        &:checked ~ label:before {
-            content: '\eb7c';
-            color: #fff;
+    }
+
+    .form-field-block {
+        @extend %block;
+        position: relative;
+        margin: 0 0 var(--xsSpacing);
+        &:last-child {
+            margin-bottom: 0;
         }
     }
 
@@ -1046,5 +1051,8 @@ select {
         .cm-selectionMatch {
             background: var(--infoAltColor);
         }
+        &.cm-focused .cm-matchingBracket {
+            background-color: rgba(50, 140, 130, 0.1);
+        }
     }
 }

ui/src/scss/_vars.scss

@@ -62,6 +62,7 @@
 
     --baseAnimationSpeed: 150ms;
     --activeAnimationSpeed: 70ms;
+    --entranceAnimationSpeed: 250ms;
 
     --baseRadius: 3px;
     --lgRadius:   12px;