Improving all forms

3 files changed, 183 insertions, 186 deletions

diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
index 3a5a743c0..f29cdb326 100644
--- a/app/assets/images/logo.png
+++ b/app/assets/images/logo.png
Binary files differdiff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index ac21c809f..05a309365 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -189,192 +189,6 @@ body {
   }
 }
 
-.form-container {
-  max-width: 400px;
-  margin: 0 auto;
-  padding: 20px;
-
-  .field {
-    margin-bottom: 15px;
-  }
-
-  .file-field {
-    padding: 15px 0;
-
-    label {
-      font-family: 'Roboto';
-      font-size: 16px;
-      color: #fff;
-      width: 100px;
-      display: inline-block;
-    }
-
-    input[type=file] {
-      width: 280px;
-    }
-  }
-
-  .fields-group {
-    margin-bottom: 25px;
-  }
-
-  .boolean-field {
-    margin-bottom: 5px;
-
-    label {
-      font-family: 'Roboto';
-      font-size: 14px;
-      color: #9baec8;
-    }
-
-    input[type=checkbox] {
-      display: inline-block;
-      margin-bottom: -13px;
-    }
-  }
-
-  input[type=text], input[type=email], input[type=password], textarea {
-    background: transparent;
-    border: 0;
-    border-bottom: 2px solid #9baec8;
-    padding: 7px 0;
-    font-size: 16px;
-    color: #fff;
-    display: block;
-    width: 100%;
-    outline: 0;
-    font-family: 'Roboto';
-
-    &:invalid {
-      box-shadow: none;
-    }
-
-    &:focus:invalid {
-      border-bottom-color: #df405a;
-    }
-
-    &:required:valid {
-      border-bottom-color: #79bd9a;
-    }
-
-    &:active, &:focus {
-      border-bottom-color: #2b90d9;
-    }
-  }
-
-  .field_with_error {
-    input[type=text], input[type=email], input[type=password] {
-      border-bottom-color: #df405a;
-    }
-  }
-
-  .prompt {
-    font-size: 16px;
-    color: #9baec8;
-    text-align: center;
-
-    .prompt-highlight {
-      font-weight: 500;
-      color: #fff;
-    }
-  }
-
-  code.copypasteable {
-    display: block;
-    font-family: 'Roboto Mono', monospace;
-    font-weight: 400;
-    font-size: 12px;
-    margin-top: 20px;
-    background: #282c37;
-    border-radius: 4px;
-    padding: 2px;
-    word-wrap: break-word;
-  }
-
-  .actions {
-    margin-top: 30px;
-
-    button {
-      display: block;
-      width: 100%;
-      border: 0;
-      border-radius: 4px;
-      background: #2b90d9;
-      color: #fff;
-      font-size: 18px;
-      padding: 10px;
-      text-transform: uppercase;
-      cursor: pointer;
-      font-weight: 500;
-      outline: 0;
-      margin-bottom: 10px;
-
-      &:hover {
-        background-color: lighten(#2b90d9, 5%);
-      }
-
-      &:active, &:focus {
-        position: relative;
-        top: 1px;
-        background-color: darken(#2b90d9, 5%);
-      }
-
-      &.negative {
-        background: #df405a;
-
-        &:hover {
-          background-color: lighten(#df405a, 5%);
-        }
-
-        &:active, &:focus {
-          background-color: darken(#df405a, 5%);
-        }
-      }
-    }
-  }
-
-  .flash-message {
-    text-align: center;
-    font-size: 14px;
-    margin-bottom: 30px;
-    font-weight: 500;
-  }
-
-  .form-footer {
-    margin-top: 30px;
-    text-align: center;
-
-    a {
-      color: #9baec8;
-      text-decoration: none;
-
-      &:hover {
-        color: #d9e1e8;
-        text-decoration: underline;
-      }
-    }
-  }
-
-  #error_explanation {
-    background: #282c37;
-    color: #9baec8;
-    border-radius: 4px;
-    padding: 15px 10px;
-    margin-bottom: 30px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-
-    h2 {
-      font-weight: 500;
-      margin-bottom: 5px;
-    }
-
-    li {
-      margin-left: 15px;
-      list-style: circle;
-    }
-  }
-}
-
 .no-list {
   list-style: none;
 
@@ -415,6 +229,7 @@ body {
   }
 }
 
+@import 'forms';
 @import 'accounts';
 @import 'stream_entries';
 @import 'components';
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
new file mode 100644
index 000000000..8abbbdaee
--- /dev/null
+++ b/app/assets/stylesheets/forms.scss
@@ -0,0 +1,182 @@
+.form-container {
+  max-width: 400px;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+.simple_form {
+  .input {
+    margin-bottom: 15px;
+  }
+
+  .input.file {
+    padding: 15px 0;
+    margin-bottom: 0;
+
+    label {
+      font-family: 'Roboto';
+      font-size: 16px;
+      color: #fff;
+      width: 100px;
+      display: inline-block;
+    }
+
+    input[type=file] {
+      width: 280px;
+    }
+  }
+
+  .fields-group {
+    margin-bottom: 25px;
+  }
+
+  .input.boolean {
+    margin-bottom: 5px;
+
+    label {
+      font-family: 'Roboto';
+      font-size: 14px;
+      color: #9baec8;
+    }
+
+    input[type=checkbox] {
+      display: inline-block;
+      margin-bottom: -13px;
+    }
+  }
+
+  input[type=text], input[type=email], input[type=password], textarea {
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid #9baec8;
+    padding: 7px 0;
+    font-size: 16px;
+    color: #fff;
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: 'Roboto';
+
+    &:invalid {
+      box-shadow: none;
+    }
+
+    &:focus:invalid {
+      border-bottom-color: #df405a;
+    }
+
+    &:required:valid {
+      border-bottom-color: #79bd9a;
+    }
+
+    &:active, &:focus {
+      border-bottom-color: #2b90d9;
+    }
+  }
+
+  .input.field_with_errors {
+    input[type=text], input[type=email], input[type=password] {
+      border-bottom-color: #df405a;
+    }
+
+    .error {
+      font-weight: 500;
+      color: #df405a;
+    }
+  }
+
+  .prompt {
+    font-size: 16px;
+    color: #9baec8;
+    text-align: center;
+
+    .prompt-highlight {
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+
+  code.copypasteable {
+    display: block;
+    font-family: 'Roboto Mono', monospace;
+    font-weight: 400;
+    font-size: 12px;
+    margin-top: 20px;
+    background: #282c37;
+    border-radius: 4px;
+    padding: 2px;
+    word-wrap: break-word;
+  }
+
+  .actions {
+    margin-top: 30px;
+
+    button {
+      display: block;
+      width: 100%;
+      border: 0;
+      border-radius: 4px;
+      background: #2b90d9;
+      color: #fff;
+      font-size: 18px;
+      padding: 10px;
+      text-transform: uppercase;
+      cursor: pointer;
+      font-weight: 500;
+      outline: 0;
+      margin-bottom: 10px;
+
+      &:hover {
+        background-color: lighten(#2b90d9, 5%);
+      }
+
+      &:active, &:focus {
+        position: relative;
+        top: 1px;
+        background-color: darken(#2b90d9, 5%);
+      }
+
+      &.negative {
+        background: #df405a;
+
+        &:hover {
+          background-color: lighten(#df405a, 5%);
+        }
+
+        &:active, &:focus {
+          background-color: darken(#df405a, 5%);
+        }
+      }
+    }
+  }
+}
+
+.flash-message {
+  background: #282c37;
+  color: #9baec8;
+  border-radius: 4px;
+  padding: 15px 10px;
+  margin-bottom: 30px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  text-align: center;
+
+  strong {
+    font-weight: 500;
+  }
+}
+
+.form-footer {
+  margin-top: 30px;
+  text-align: center;
+
+  a {
+    color: #9baec8;
+    text-decoration: none;
+
+    &:hover {
+      color: #d9e1e8;
+      text-decoration: underline;
+    }
+  }
+}
+