update password required page styles

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

@@ -5,11 +5,12 @@
 {% block body_class %}template-password-required{% 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">
+    <form class="password-required__form" action="{{ action_url }}" method="post">
         <div>
             {% csrf_token %}
 
@@ -22,7 +23,8 @@ <h1>Password required</h1>
             {% for field in form.hidden_fields %}
                 {{ field }}
             {% endfor %}
-            <input type="submit" value="Continue" />
         </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';