Merge pull request #566 from torchbox/fix/password-required-page-styles

Update password required page styles

tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html

@@ -4,25 +4,29 @@
 
 {% block body_class %}template-password-required{% endblock %}
 
+{% block theme_class %}theme--light{% endblock %}
+
 {% block content %}
-    <h1>Password required</h1>
+    <div class="password-required">
+        <h1 class="password-required__title">Password required</h1>
 
-    <p class="heading--2">Please enter the password to proceed.</p>
+        <p>Please enter the password to proceed.</p>
 
-    <form action="{{ action_url }}" method="post">
-        <div>
-            {% csrf_token %}
+        <form class="password-required__form" action="{{ action_url }}" method="post">
+            <div>
+                {% csrf_token %}
 
-            {{ form.non_field_errors }}
+                {{ form.non_field_errors }}
 
-            {{ form.password.errors }}
-            {{ form.password.label_tag }}
-            {{ form.password }}
+                {{ form.password.errors }}
+                {{ form.password.label_tag }}
+                {{ form.password }}
 
-            {% for field in form.hidden_fields %}
-                {{ field }}
-            {% endfor %}
-            <input type="submit" value="Continue" />
-        </div>
-    </form>
+                {% for field in form.hidden_fields %}
+                    {{ field }}
+                {% endfor %}
+            </div>
+            <input class="button password-required__submit-button" type="submit" value="Continue" />
+        </form>
+    </div>
 {% endblock %}

tbx/static_src/sass/components/_password-required.scss

@@ -0,0 +1,31 @@
+.password-required {
+    padding: $grid;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+
+    &__title {
+        margin: 0 0 $grid 0;
+    }
+
+    &__form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    &__submit-button {
+        width: max-content;
+        margin-top: $grid;
+        margin-bottom: $grid * 4;
+        padding: 10px 16px;
+        border: none;
+        cursor: pointer;
+
+        @include media-query(large) {
+            margin-top: $grid * 2;
+            margin-bottom: $grid * 6;
+        }
+    }
+}

tbx/static_src/sass/main.scss

@@ -60,6 +60,7 @@
 @import 'components/page';
 @import 'components/paragraph-with-image';
 @import 'components/paragraph-with-quote';
+@import 'components/password-required';
 @import 'components/post';
 @import 'components/posts-grid';
 @import 'components/primary-nav';