Animate modals & improve layout on mobile (#1675)

ui/scss/component/_button.scss

@@ -751,7 +751,10 @@ svg + .button__label {
     width: 100%;
     text-align: center;
     border-radius: var(--border-radius);
-    border: 1px solid var(--color-border);
+    // border: 1px solid var(--color-border);
+    &:not(.button-toggle--active) {
+      border-right: 2px solid var(--color-border) !important;
+    }
 
     &:not(:first-of-type) {
       margin-top: var(--spacing-s);

ui/scss/component/_header.scss

@@ -471,8 +471,29 @@
 }
 
 .ReactModal__Overlay {
+  .ReactModal__Content {
+    transform: scale(0);
+    transition: transform 0.2s;
+  }
   .button--close {
     margin: 0;
+    @media (max-width: $breakpoint-small) {
+      width: var(--height-input);
+      height: var(--height-input);
+      margin: var(--spacing-s);
+      background: var(--color-primary);
+      .button__content {
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.ReactModal__Overlay--after-open {
+  .ReactModal__Content {
+    transform: scale(1);
+    transition: transform 0.4s;
   }
 }
 

ui/scss/component/_modal.scss

@@ -25,7 +25,25 @@
   z-index: 9999;
 
   @media (max-width: $breakpoint-small) {
-    background-color: rgba(var(--color-header-background-base), 0.95);
+    // background-color: rgba(var(--color-header-background-base), 0.95);
+    background-color: rgba(var(--color-header-background-base), 0.4);
+    padding: var(--spacing-s);
+    // // border:
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    // border: 2px solid black;
+
+    .ReactModal__Content {
+      border: 2px solid black;
+      border-radius: var(--border-radius);
+      .card {
+        padding: var(--spacing-m);
+        border: unset;
+        .card__title {
+          margin-top: var(--spacing-s);
+        }
+      }
+    }
   }
 }
 
@@ -102,13 +120,25 @@
     .card__main-actions {
       .section__actions {
         .button {
+          margin-top: var(--spacing-m);
           margin-right: var(--spacing-m);
+          padding: 0;
           .button__content {
             .button__label {
               font-size: var(--font-small);
             }
           }
         }
+        .button--primary {
+          .button__content {
+            .icon {
+              margin-left: var(--spacing-s);
+            }
+            .button__label {
+              margin-right: var(--spacing-s);
+            }
+          }
+        }
       }
       .help {
         font-size: var(--font-small);

ui/scss/component/_wunderbar.scss

@@ -29,7 +29,9 @@
     background-color: transparent;
     color: var(--color-text);
     border-radius: 0;
-    margin-right: var(--spacing-l);
+    // margin-right: var(--spacing-l);
+    margin-top: 5px;
+    margin-right: 64px;
 
     &:focus {
       box-shadow: none;