Merge pull request #8182 from cfpb/tccp-cleanup

Tidy up TCCP form styles
cfpb · Mar 4, 2024 · f9bdb73 · f9bdb73
2 parents a2d0060 + 56008a1
commit f9bdb73
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/cfgov/tccp/jinja2/tccp/landing_page.html b/cfgov/tccp/jinja2/tccp/landing_page.html
@@ -6,16 +6,21 @@
     {{ title }} | Consumer Financial Protection Bureau
 {%- endblock title %}
 
+{% block css %}
+{{ super() }}
+<link rel="stylesheet" href="{{ static('apps/tccp/css/main.css') }}">
+{% endblock %}
+
 {% block content_main %}
 
 <div class="content_wrapper">
     <div class="block block__sub">
         <h1>{{ heading }}</h1>
-        <div class="lead-paragraph u-readable-width">
+        <p class="lead-paragraph">
             We know people use credit cards for many reasons.
             Our database of {{ num_cards or "" }}
             cards can help you find ones that are best for you.
-        </div>
+        </p>
     </div>
 
     <div class="block block__sub">
@@ -50,24 +55,15 @@ <h1>{{ heading }}</h1>
                 </fieldset>
             </div>
 
-            <button
-                type="submit"
-                class="a-btn a-btn__full-on-xs"
-                title="See cards for your situation"
-            >
-                See cards for your situation
-            </button>
+            <div class="m-btn-group">
+                <button class="a-btn a-btn__full-on-xs" title="See cards for your situation">See cards for your situation</button>
+                <div class="u-btn-helper">
+                    Or <a href="{{ url('tccp:cards') }}">see all cards</a> in our database
+                </div>
+            </div>
 
         </form>
     </div>
-
-    <div class="block block__sub block__flush-top u-text-centered">
-        <p>
-            Or
-            <a href="{{ url('tccp:cards') }}">see all cards</a>
-            in our database
-        </p>
-    </div>
 </div>
 
 {% endblock content_main %}

diff --git a/cfgov/unprocessed/apps/tccp/css/main.less b/cfgov/unprocessed/apps/tccp/css/main.less
@@ -1,5 +1,28 @@
 @import (reference) '../../../css/main.less';
 
+.respond-to-min(@bp-sm-min, {
+  .o-form_group {
+    max-width: unit((380px / @base-font-size-px), em);
+  }
+});
+
+.m-btn-group {
+  .u-btn-helper {
+    width: 100%;
+    margin-top: unit((15px / @base-font-size-px), em);
+    text-align: center;
+    a {
+      border-bottom-width: 1px;
+    }
+    .respond-to-min(@bp-sm-min, {
+      display: inline-block;
+      width: auto;
+      margin-top: 0;
+      margin-left: unit((6px / @btn-font-size), em);
+    });
+  }
+}
+
 .o-table__stack-on-small-hybrid {
   // We don't want responsive table styles applied to the `print` media type
   // so we're not using .respond-to-max(@bp-xs-max ) here.