support: Have distinct labels for remote vs Cloud support views.

corporate/tests/test_support_views.py

@@ -176,7 +176,7 @@ def assert_server_details_in_response(
         ) -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">remote server</span>',
+                    '<span class="remote-label">Remote server</span>',
                     f"<h3>{hostname} <a",
                     f"<b>Contact email</b>: admin@{hostname}",
                     "<b>Billing users</b>:",
@@ -196,7 +196,7 @@ def assert_realm_details_in_response(
         ) -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">remote realm</span>',
+                    '<span class="remote-label">Remote realm</span>',
                     f"<h3>{name}</h3>",
                     f"<b>Remote realm host:</b> {host}<br />",
                     "<b>Date created</b>: 01 December 2023",
@@ -214,7 +214,7 @@ def check_deactivated_server(result: "TestHttpResponse", hostname: str) -> None:
             )
             self.assert_in_success_response(
                 [
-                    '<span class="label">remote server: deactivated</span>',
+                    '<span class="remote-label">Remote server: deactivated</span>',
                     f"<h3>{hostname} <a",
                     f"<b>Contact email</b>: admin@{hostname}",
                     "<b>Billing users</b>:",
@@ -428,7 +428,10 @@ def check_for_billing_users_emails(result: "TestHttpResponse") -> None:
         unknown_uuid = uuid.uuid4()
         result = self.client_get("/activity/remote/support", {"q": f"{unknown_uuid}"})
         self.assert_not_in_success_response(
-            ['<span class="label">remote server</span>', '<span class="label">remote realm</span>'],
+            [
+                '<span class="remote-label">Remote server</span>',
+                '<span class="remote-label">Remote realm</span>',
+            ],
             result,
         )
 
@@ -680,7 +683,7 @@ def assert_user_details_in_html_response(
         ) -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">user</span>\n',
+                    '<span class="cloud-label">Cloud user</span>\n',
                     f"<h3>{full_name}</h3>",
                     f"<b>Email</b>: {email}",
                     "<b>Is active</b>: True<br />",
@@ -786,7 +789,7 @@ def check_preregistration_user_query_result(
         ) -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">confirmation</span>\n',
+                    '<span class="cloud-label">Cloud confirmation</span>\n',
                     f"<b>Email</b>: {email}",
                 ],
                 result,
@@ -814,7 +817,7 @@ def check_preregistration_user_query_result(
         def check_realm_creation_query_result(result: "TestHttpResponse", email: str) -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">confirmation</span>\n',
+                    '<span class="cloud-label">Cloud confirmation</span>\n',
                     "<h3>Realm creation</h3>\n",
                     "<b>Link</b>: http://testserver/accounts/do_confirm/",
                     "<b>Expires in</b>: 1\xa0day",
@@ -825,7 +828,7 @@ def check_realm_creation_query_result(result: "TestHttpResponse", email: str) ->
         def check_multiuse_invite_link_query_result(result: "TestHttpResponse") -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">confirmation</span>\n',
+                    '<span class="cloud-label">Cloud confirmation</span>\n',
                     "<h3>Multiuse invite</h3>\n",
                     "<b>Link</b>: http://zulip.testserver/join/",
                     "<b>Expires in</b>: 1\xa0week, 3\xa0days",
@@ -836,7 +839,7 @@ def check_multiuse_invite_link_query_result(result: "TestHttpResponse") -> None:
         def check_realm_reactivation_link_query_result(result: "TestHttpResponse") -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">confirmation</span>\n',
+                    '<span class="cloud-label">Cloud confirmation</span>\n',
                     "<h3>Realm reactivation</h3>\n",
                     "<b>Link</b>: http://zulip.testserver/reactivate/",
                     "<b>Expires in</b>: 1\xa0day",

templates/corporate/support/realm_details.html

@@ -1,5 +1,5 @@
 <div class="realm-support-information">
-    <span class="label">realm</span>
+    <span class="cloud-label">Cloud realm</span>
     <h3><img src="{{ realm_icon_url(realm) }}" class="support-realm-icon" /> {{ realm.name }}</h3>
     <b>URL</b>: <a target="_blank" rel="noopener noreferrer" href="{{ realm.uri }}">{{ realm.uri }}</a> |
     <a target="_blank" rel="noopener noreferrer" href="/stats/realm/{{ realm.string_id }}/">stats</a> |

templates/corporate/support/remote_realm_details.html

@@ -1,6 +1,6 @@
 <div class="remote-realm-container">
     <div class="remote-realm-information">
-        <span class="label">remote realm</span>
+        <span class="remote-label">Remote realm</span>
         <h3>{{ remote_realm.name }}</h3>
         {% if remote_realm.realm_locally_deleted %}
             <p class="support-section-header">Remote realm is locally deleted 🛑</p>

templates/corporate/support/remote_server_support.html

@@ -41,7 +41,7 @@
         <div class="{{ remote_server_query_result_class }}">
             <div class="remote-server-section">
                 <div class="remote-server-information">
-                    <span class="label">remote server{% if remote_server.deactivated %}: deactivated{% endif %}</span>
+                    <span class="remote-label">Remote server{% if remote_server.deactivated %}: deactivated{% endif %}</span>
                     <h3>{{ remote_server.hostname }} {{ server_analytics_link(remote_server.id ) }}</h3>
                     {% if remote_server.plan_type == SPONSORED_PLAN_TYPE %}
                         <p class="support-section-header">On 100% sponsored Zulip Community plan 🎉</p>
@@ -166,7 +166,7 @@ <h3>{{ remote_server.hostname }} {{ server_analytics_link(remote_server.id ) }}<
             <div class="remote-realms-section">
                 {% if remote_realms[remote_server.id] == [] %}
                 <div>
-                    <span class="label">remote realm</span>
+                    <span class="remote-label">Remote realm</span>
                     <h3>None</h3>
                 </div>
                 {% else %}

templates/corporate/support/support.html

@@ -35,7 +35,7 @@
         {% set realm = user.realm %}
         <div class="support-query-result user-support-container">
             <div class="user-information-section">
-                <span class="label">user</span>
+                <span class="cloud-label">Cloud user</span>
                 <h3>{{ user.full_name }}</h3>
                 <b>Email</b>: {{ user.delivery_email }}<br />
                 <b>Date joined</b>: {{ user.date_joined|timesince }} ago<br />
@@ -72,7 +72,7 @@ <h3>{{ user.full_name }}</h3>
         {% set object = confirmation.object %}
         <div class="support-query-result confirmation-container">
             <div class="confirmation-information-section">
-                <span class="label">confirmation</span>
+                <span class="cloud-label">Cloud confirmation</span>
                 {% if confirmation.type == Confirmation.USER_REGISTRATION %}
                 <h3>Pre-registration user</h3>
                 {% set email = object.email %}
@@ -116,10 +116,10 @@ <h3>Realm reactivation</h3>
                         {% include "corporate/support/realm_details.html" %}
                     {% endwith %}
                 {% elif realm %}
-                    <span class="label">realm</span>
+                    <span class="cloud-label">Cloud realm</span>
                     <h3>{{ realm.string_id }}</h3>
                 {% else %}
-                    <span class="label">realm</span>
+                    <span class="cloud-label">Cloud realm</span>
                     <h3>N/A</h3>
                 {% endif %}
             </div>

web/styles/portico/activity.css

@@ -159,16 +159,23 @@ tr.admin td:first-child {
         }
     }
 
-    .label {
-        padding: 2px 4px;
-        font-size: 11.844px;
+    .cloud-label,
+    .remote-label {
+        padding: 2px 8px;
+        font-size: 0.9em;
         font-weight: bold;
-        line-height: 14px;
         color: hsl(0deg 0% 100%);
         text-shadow: 0 -1px 0 hsla(0deg 0% 0% / 25%);
-        background-color: hsl(0deg 0% 60%);
         border-radius: 3px;
     }
+
+    .cloud-label {
+        background-color: hsl(280deg 100% 40%);
+    }
+
+    .remote-label {
+        background-color: hsl(186deg 76% 36%);
+    }
 }
 
 .reactivate-remote-server-button,