[B5] Internal project pages

corehq/apps/domain/static/domain/js/internal_calculations.js

@@ -21,7 +21,7 @@ hqDefine("domain/js/internal_calculations", [
                 $btn.addClass('btn-danger');
                 $error.html(data.error);
             }
-            $btn.html('Reload Data').removeClass('btn-primary');
+            $btn.html('Reload Data').removeClass('btn-primary').addClass('btn-outline-primary');
         });
     }
 

corehq/apps/domain/templates/domain/bootstrap5/activate_transfer_domain.html → corehq/apps/domain/templates/domain/activate_transfer_domain.html

@@ -5,7 +5,7 @@
 {% block content %}
   <div class="container" id="hq-content">
     <div class="row">
-      <div class="page-header">  {# todo B5: css-page-header #}
+      <div class="mt-5">
         <h1>{% trans "Transfer project ownership" %}</h1>
       </div>
       <div class="col-lg-8 col-sm-12">

corehq/apps/domain/templates/domain/admin/bootstrap5/flags_and_privileges.html → corehq/apps/domain/templates/domain/admin/flags_and_privileges.html

@@ -4,6 +4,20 @@
 
 {% js_entry 'domain/js/bootstrap5/toggles' %}
 
+{% block stylesheets %}
+  <style>
+    .success > td {
+      background-color: var(--bssuccess-bg-subtle);
+    }
+    .warning > td {
+      background-color: var(--bswarning-bg-subtle);
+    }
+    .bg-default, .bg-release {
+      background-color: rgba(var(--bssecondary-rgb), 1);
+    }
+  </style>
+{% endblock %}
+
 {% block page_content %}
 
   {% initial_page_data 'domain' domain %}
@@ -80,7 +94,7 @@ <h1>Feature Flags</h1>
         <tbody data-bind="foreach: toggles">
         <tr>
           <td>
-                            <span data-bind="css: ('label-' + tagCssClass),
+                            <span data-bind="css: ('bg-' + tagCssClass),
                                              text: tag"
                                   class="badge"></span>
           </td>
@@ -90,13 +104,13 @@ <h1>Feature Flags</h1>
           </td>
 
           <td data-bind="css: {'text-body-secondary': !isEnabled()}" >
-            <div class="row clickable" data-bind="click: showHideDescription">
-              <!--ko text: badge --><!--/ko-->
+            <div class="clickable" data-bind="click: showHideDescription">
+              <!--ko text: label --><!--/ko-->
 
               <span data-bind="visible: description || helpLink">&hellip;</span>
             </div>
 
-            <div class="row" data-bind="slideVisible: expanded()">
+            <div data-bind="slideVisible: expanded()">
               <br />
               <p data-bind="visible: description, html: description"></p>
               <span data-bind="visible: helpLink">
@@ -105,7 +119,7 @@ <h1>Feature Flags</h1>
 
               <hr data-bind="visible: description || helpLink" />
 
-              <span data-bind="css: ('label-' + tagCssClass),
+              <span data-bind="css: ('bg-' + tagCssClass),
                                                     text: tag"
                     class="badge"></span>
               <span data-bind="html: tagDescription"></span>

corehq/apps/domain/templates/domain/admin/transfer_domain.html

@@ -0,0 +1,15 @@
+{% extends "hqwebapp/bootstrap5/base_section.html" %}
+{% load hq_shared_tags %}
+{% load crispy_forms_tags %}
+{% load i18n %}
+
+
+{% block page_content %}
+  <h3>
+    {% blocktrans %}
+      Use this to transfer your project to another user.
+    {% endblocktrans %}
+  </h3>
+  {% crispy form %}
+{% endblock %}
+

corehq/apps/domain/templates/domain/bootstrap5/internal_calculations.html → corehq/apps/domain/templates/domain/internal_calculations.html

@@ -10,11 +10,10 @@
     <p><button type="button" id="load-all-btn" class="btn btn-primary">{% trans 'Load EVERYTHING' %}</button></p>
     <hr />
     {% for calc_tag in order %}
-      <div class="form-group calc-group">  {# todo B5: css-form-group #}
+      <div class="row calc-group mb-3">
         <label class="form-label col-md-2">{{ calcs|dict_lookup:calc_tag }}</label>
-        <div class="col-md-8">
-          <div id="calc-{{ calc_tag }}"
-               class="card well-small calc-display"></div>  {# todo B5: css-well #}
+        <div class="card text-bg-light col-md-8">
+          <div id="calc-{{ calc_tag }}" class="card-body"></div>
         </div>
         <div class="col-md-2">
           <button class="btn btn-primary load-calc-btn" data-calc-tag="{{ calc_tag }}">