1 files changed, 54 insertions, 61 deletions

diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 8ae2b5bd8..ef0ca1fcd 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -6,9 +6,10 @@ code {
 }
 
 .form-container {
-  max-width: 400px;
+  max-width: 450px;
   padding: 20px;
-  margin: 0 auto;
+  padding-bottom: 50px;
+  margin: 50px auto;
 }
 
 .indicator-icon {
@@ -123,10 +124,22 @@ code {
   }
 
   .title {
-    color: #d9e1e8;
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 400;
+    font-size: 28px;
+    line-height: 33px;
+    font-weight: 700;
+    margin-bottom: 15px;
+  }
+
+  .lead {
+    font-size: 17px;
+    line-height: 22px;
+    color: $secondary-text-color;
+    margin-bottom: 30px;
+  }
+
+  .rules-list {
+    font-size: 17px;
+    line-height: 22px;
     margin-bottom: 30px;
   }
 
@@ -231,7 +244,7 @@ code {
 
     & > label {
       font-family: inherit;
-      font-size: 16px;
+      font-size: 14px;
       color: $primary-text-color;
       display: block;
       font-weight: 500;
@@ -268,6 +281,20 @@ code {
     .input:last-child {
       margin-bottom: 0;
     }
+
+    &__thumbnail {
+      display: block;
+      margin: 0;
+      margin-bottom: 10px;
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+      background: url("images/void.png");
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .fields-row {
@@ -368,6 +395,7 @@ code {
   input[type=email],
   input[type=password],
   input[type=url],
+  input[type=datetime-local],
   textarea {
     box-sizing: border-box;
     font-size: 16px;
@@ -408,7 +436,8 @@ code {
   input[type=text],
   input[type=number],
   input[type=email],
-  input[type=password] {
+  input[type=password],
+  input[type=datetime-local] {
     &:focus:invalid:not(:placeholder-shown),
     &:required:invalid:not(:placeholder-shown) {
       border-color: lighten($error-red, 12%);
@@ -424,6 +453,7 @@ code {
     input[type=number],
     input[type=email],
     input[type=password],
+    input[type=datetime-local],
     textarea,
     select {
       border-color: lighten($error-red, 12%);
@@ -451,6 +481,11 @@ code {
     }
   }
 
+  .stacked-actions {
+    margin-top: 30px;
+    margin-bottom: 15px;
+  }
+
   button,
   .button,
   .block-button {
@@ -502,6 +537,16 @@ code {
     }
   }
 
+  .button.button-tertiary {
+    padding: 9px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      padding: 10px;
+    }
+  }
+
   select {
     appearance: none;
     box-sizing: border-box;
@@ -556,41 +601,6 @@ code {
       }
     }
   }
-
-  &__overlay-area {
-    position: relative;
-
-    &__blurred form {
-      filter: blur(2px);
-    }
-
-    &__overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: rgba($ui-base-color, 0.65);
-      border-radius: 4px;
-      margin-left: -4px;
-      margin-top: -4px;
-      padding: 4px;
-
-      &__content {
-        text-align: center;
-
-        &.rich-formatting {
-          &,
-          p {
-            color: $primary-text-color;
-          }
-        }
-      }
-    }
-  }
 }
 
 .block-icon {
@@ -861,24 +871,7 @@ code {
   }
 }
 
-.table-form {
-  p {
-    margin-bottom: 15px;
-
-    strong {
-      font-weight: 500;
-
-      @each $lang in $cjk-langs {
-        &:lang(#{$lang}) {
-          font-weight: 700;
-        }
-      }
-    }
-  }
-}
-
-.simple_form,
-.table-form {
+.simple_form {
   .warning {
     box-sizing: border-box;
     background: rgba($error-value-color, 0.5);