help icon added and new icon on add button

admin/templates/states_panel.html

@@ -8,14 +8,14 @@
   </div>
   <div class="col text-end">
     <button type="button" class="btn btn-green-admin" data-bs-toggle="modal" data-bs-target="#addStateModal">
-      {% trans "Add State Definition" %}
+      <i class="fas fa-plus text-secondary align-center p-1"></i>
+      {% trans "Add" %}
     </button>
   </div>
 </div>
 
-<div class="row mt-4">
+<div class="row mt-5">
   <div class="col">
-    <h4>{% trans "State Definitions" %}</h4>
     {% if state_definitions %}
       <table class="table table-hover table-border">
         <caption>{% trans 'Move and drag state definitions to reorder' %}</caption>

admin/views.py

@@ -139,14 +139,15 @@ class StateDefinitionContextMixin(ContextMixin):
         context = super().get_context_data(**kwargs)
         context.update({
             "state_definitions": StateDefinition.objects.filter(institution=self.request.user.institution).order_by('order'),
+            "help_text": _('State definitions are the custom finite states that a device can be in.'),
         })
         return context
 
 
 class StatesPanelView(AdminView, StateDefinitionContextMixin, TemplateView):
     template_name = "states_panel.html"
-    title = _("States")
-    breadcrumb = _("admin / States") + " /"
+    title = _("States Panel")
+    breadcrumb = _("admin / States Panel") + " /"
 
 
 class AddStateDefinitionView(AdminView, StateDefinitionContextMixin, CreateView):

dashboard/templates/base.html

@@ -184,9 +184,15 @@
             {% endfor %}
           {% endblock messages %}
           <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2">
-            <h1 class="h2">{{ title }}</h1>
-
-	    <form method="post" action="{% url 'dashboard:search' %}">
+            <h1 class="h2">{{ title }}
+              {% if help_text %}
+              <span class="ms-1" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ help_text }}">
+                <i class="fas fa-question-circle text-secondary h6 align-top"></i>
+              </span> 
+            {% endif %}
+            </h1>
+             
+	          <form method="post" action="{% url 'dashboard:search' %}">
               {% csrf_token %}
               <div class="input-group rounded">
                 <input type="search" name="search" class="form-control rounded" placeholder="Search your device..." aria-label="Search" aria-describedby="search-addon" />
@@ -227,4 +233,13 @@
     {% block extrascript %}{% endblock %}
     {% endblock %}
   </body>
+
+  <script>
+     //If help_text is passed to the view as context, a hover-able help icon is displayed 
+      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+      });
+  </script>
+
 </html>