remote-support: Add specific class for support section headers.

corporate/tests/test_support_views.py

@@ -243,11 +243,11 @@ class TestRemoteServerSupportEndpoint(ZulipTestCase):
         def check_legacy_plan_with_upgrade(result: "TestHttpResponse") -> None:
             self.assert_in_success_response(
                 [
-                    "<h4>📅 Current plan information:</h4>",
+                    "📅 Current plan information:",
                     "<b>Plan name</b>: Free (legacy plan)<br />",
                     "<b>Status</b>: New plan scheduled<br />",
                     "<b>End date</b>: 01 February 2050<br />",
-                    "<h4>⏱️ Next plan information:</h4>",
+                    "⏱️ Next plan information:",
                     "<b>Plan name</b>: Zulip Basic<br />",
                     "<b>Status</b>: Never started<br />",
                     "<b>Start date</b>: 01 February 2050<br />",
@@ -262,7 +262,7 @@ class TestRemoteServerSupportEndpoint(ZulipTestCase):
         def check_legacy_plan_without_upgrade(result: "TestHttpResponse") -> None:
             self.assert_in_success_response(
                 [
-                    "<h4>📅 Current plan information:</h4>",
+                    "📅 Current plan information:",
                     "<b>Plan name</b>: Free (legacy plan)<br />",
                     "<b>Status</b>: Active<br />",
                     "<b>End date</b>: 01 February 2050<br />",
@@ -271,7 +271,7 @@ class TestRemoteServerSupportEndpoint(ZulipTestCase):
             )
             self.assert_not_in_success_response(
                 [
-                    "<h4>⏱️ Next plan information:</h4>",
+                    "⏱️ Next plan information:",
                 ],
                 result,
             )

templates/corporate/support/current_plan_details.html

@@ -1,5 +1,5 @@
 <div class="current-plan-information">
-    <h4>📅 Current plan information:</h4>
+    <p class="support-section-header">📅 Current plan information:</p>
     {% if plan_data.warning %}
     <div class="current-plan-data-missing">
         {{ plan_data.warning }}

templates/corporate/support/next_plan_details.html

@@ -1,5 +1,5 @@
 <div class="next-plan-information">
-    <h4>⏱️ Next plan information:</h4>
+    <p class="support-section-header">⏱️ Next plan information:</p>
     <b>Plan name</b>: {{ plan_data.next_plan.name }}<br />
     <b>Status</b>: {{ plan_data.next_plan.get_plan_status_as_text() }}<br />
     {% if plan_data.next_plan.price_per_license %}

templates/corporate/support/next_plan_forms_support.html

@@ -1,4 +1,4 @@
-<h4>⏱️ Schedule fixed price plan:</h4>
+<p class="support-section-header">⏱️ Schedule fixed price plan:</p>
 <form method="POST" class="remote-form">
     <b>Fixed price</b><br />
     {% if not is_current_plan_billable %}

templates/corporate/support/remote_realm_details.html

@@ -3,19 +3,19 @@
         <span class="label">remote realm</span>
         <h3>{{ remote_realm.name }}</h3>
         {% if remote_realm.realm_locally_deleted %}
-            <h4>Remote realm is locally deleted 🛑</h4>
+            <p class="support-section-header">Remote realm is locally deleted 🛑</p>
         {% endif %}
         {% if remote_realm.registration_deactivated %}
-            <h4>Remote realm registration deactivated 🛑</h4>
+            <p class="support-section-header">Remote realm registration deactivated 🛑</p>
         {% endif %}
         {% if remote_realm.realm_deactivated %}
-            <h4>Remote realm is deactivated on remote server 🛑</h4>
+            <p class="support-section-header">Remote realm is deactivated on remote server 🛑</p>
         {% endif %}
         {% if remote_realm.plan_type == SPONSORED_PLAN_TYPE %}
-            <h4>On 100% sponsored Zulip Community plan 🎉</h4>
+            <p class="support-section-header">On 100% sponsored Zulip Community plan 🎉</p>
         {% endif %}
         {% if support_data[remote_realm.id].sponsorship_data.default_discount %}
-            <h4>Has a discount 💸</h4>
+            <p class="support-section-header">Has a discount 💸</p>
         {% endif %}
         <b>Remote realm host:</b> {{ remote_realm.host }}<br />
         <b>Date created</b>: {{ support_data[remote_realm.id].date_created.strftime('%d %B %Y') }}<br />

templates/corporate/support/remote_server_support.html

@@ -39,10 +39,10 @@
                     <span class="label">remote server</span>
                     <h3>{{ remote_server.hostname }} {{ server_analytics_link(remote_server.id ) }}</h3>
                     {% if remote_server.plan_type == SPONSORED_PLAN_TYPE %}
-                        <h4>On 100% sponsored Zulip Community plan 🎉</h4>
+                        <p class="support-section-header">On 100% sponsored Zulip Community plan 🎉</p>
                     {% endif %}
                     {% if remote_servers_support_data[remote_server.id].sponsorship_data.default_discount %}
-                        <h4>Has a discount 💸</h4>
+                        <p class="support-section-header">Has a discount 💸</p>
                     {% endif %}
                     <b>Contact email</b>: {{ remote_server.contact_email }}
                     <a title="Copy email" class="copy-button" data-copytext="{{ remote_server.contact_email }}">

templates/corporate/support/sponsorship_forms_support.html

@@ -64,7 +64,7 @@
 
 {% if sponsorship_data.sponsorship_pending %}
 <div class="">
-    <h4>Sponsorship request information:</h4>
+    <p class="support-section-header">Sponsorship request information:</p>
     {% if sponsorship_data.latest_sponsorship_request %}
     <ul>
         <li><b>Organization type</b>: {{ sponsorship_data.latest_sponsorship_request.org_type }}</li>

web/styles/portico/activity.css

@@ -269,7 +269,14 @@ tr.admin td:first-child {
 .realm-support-information,
 .remote-server-information,
 .remote-realm-information {
-    padding-bottom: 15px;
+    margin-bottom: 10px;
+}
+
+.support-section-header {
+    font-size: 1.2em;
+    font-weight: bold;
+    line-height: 20px;
+    margin: 0 0 8px;
 }
 
 .support-realm-icon {