django-spire 0.16.10__py3-none-any.whl → 0.16.11__py3-none-any.whl

django_spire/ai/chat/templates/django_spire/ai/chat/dropdown/ellipsis_dropdown.html

@@ -11,8 +11,8 @@
 {% endblock %}
 
 {% block dropdown_content %}
-    {% include 'django_spire/dropdown/element/dropdown_link_element.html' with x_click="enable_rename_chat()" link_text='Rename' %}
+    {% include 'django_spire/dropdown/element/dropdown_link_element.html' with x_click="enable_rename_chat()" link_text='Rename' link_css='text-start' %}
 
     {% url 'django_spire:ai:chat:template:confirm_delete' pk=recent_chat.id as delete_url %}
-    {% include 'django_spire/dropdown/element/ellipsis_dropdown_modal_link_element.html' with view_url=delete_url link_text='Delete' link_css='text-app-danger' %}
+    {% include 'django_spire/dropdown/element/ellipsis_dropdown_modal_link_element.html' with view_url=delete_url link_text='Delete' link_css='text-app-danger text-start' %}
 {% endblock %}

django_spire/ai/chat/templates/django_spire/ai/chat/widget/search_chat_widget.html

@@ -30,7 +30,7 @@
                 @keydown.up="$focus.wrap().previous()"
                 x-show="expanded && search_query.trim() !== ''"
 
-                class="position-absolute overflow-auto top-100 start-0 w-100 bg-white border border-bottom-2 rounded-bottom-1 shadow p-0 m-0"
+                class="position-absolute overflow-auto top-100 start-0 w-100 border border-bottom-2 rounded-bottom-1 shadow p-0 m-0"
                 style="z-index: 1100;"
                 x-ref="search_results">
 

django_spire/auth/group/templates/django_spire/auth/group/element/group_perm_element.html

@@ -1,40 +1,58 @@
-<div x-data="{
-               current_permission: '{{ perm_data.level_verbose }}',
-               permission_choices: ['None', 'View', 'Add', 'Change', 'Delete'],
-               loading: false,
-               error_message: '',
-               show_dropdown: false,
-                 async update(perm) {
-                   this.show_dropdown = false
-                   this.error_message = null
-                   if(this.current_permission !== perm) {
-                       this.loading = true
-                       let response = await ajax_request(
-                           'POST',
-                           '{% url "django_spire:auth:group:json:group_permission_ajax" app_name=perm_data.app_name pk=group.pk %}',
-                           {'perm_level': perm}
-                       )
-                       this.loading = false
-                       let status = response.data.status
-                       if (status === 200){
-                           this.current_permission = perm
-                       } else {
-                           this.error_message = response.data.message
-                       }
-                   }
-               }
-        }">
+<div
+    x-data="{
+        current_permission: '{{ perm_data.level_verbose }}',
+        permission_choices: ['None', 'View', 'Add', 'Change', 'Delete'],
+        loading: false,
+        error_message: '',
+        show_dropdown: false,
+
+        async update(perm) {
+            this.show_dropdown = false
+            this.error_message = null
+
+            if(this.current_permission !== perm) {
+                this.loading = true
+                let response = await ajax_request(
+                    'POST',
+                    '{% url "django_spire:auth:group:json:group_permission_ajax" app_name=perm_data.app_name pk=group.pk %}',
+                    {'perm_level': perm}
+                )
+                this.loading = false
+                let status = response.data.status
+                if (status === 200){
+                    this.current_permission = perm
+                } else {
+                    this.error_message = response.data.message
+                }
+            }
+        }
+    }"
+>
     <div class="position-relative">
         <div @click="show_dropdown = true" class="btn btn-sm border dropdown-toggle">
             <span x-text="current_permission"></span>
         </div>
-        <div @click.outside="show_dropdown = false" x-show="show_dropdown" style="width: 80px; z-index: 2"
-             class="card position-absolute bg-app-layer-three mt-1">
+        <div
+            style="width: 80px; z-index: 2"
+            class="card position-absolute bg-app-layer-one mt-1 border"
+            x-show="show_dropdown"
+            @click.outside="show_dropdown = false"
+        >
             <template x-for="perm in permission_choices">
-                <div @click="update(perm)" class="py-1 ps-2 cursor-pointer text-app-primary-hover"
-                     x-bind:class="{ 'border-bottom': perm !== 'Delete' }">
-                    <span class="fs--1" x-bind:class="{ 'text-app-secondary': perm === current_permission }"
-                          x-text="perm"></span>
+                <div
+                    class="py-1 ps-2 cursor-pointer bg-app-layer-three-hover"
+                    :class="{ 'border-bottom': perm !== 'Delete' }"
+                    :style="
+                        perm === 'None' ? 'border-top-left-radius: 0.30rem !important; border-top-right-radius: 0.30rem !important;' :
+                        perm === 'Delete' ? 'border-bottom-left-radius: 0.30rem !important; border-bottom-right-radius: 0.30rem !important;' : ''
+                    "
+                    @click="update(perm)"
+                >
+                    <span
+                        class="fs--1"
+                        :class="{ 'text-app-secondary': perm === current_permission }"
+                        x-text="perm"
+                    ></span>
                 </div>
             </template>
         </div>

django_spire/auth/group/templates/django_spire/auth/group/element/group_special_role_element.html

@@ -1,43 +1,60 @@
-<div x-data="{
-                has_access: '{{ special_role.has_access }}' === 'True',
-                get has_access_verbose() { return this.has_access ? 'Yes' : 'No' },
-                codename: '{{ special_role.codename }}',
-                permission_choices: ['No', 'Yes'],
-                loading: false,
-                error_message: '',
-                show_dropdown: false,
-                  async update(perm) {
-                    this.show_dropdown = false
-                    this.error_message = null
-                    this.loading = true
-                    let response = await ajax_request(
-                        'POST',
-                        '{% url "django_spire:auth:group:json:group_special_role_ajax" app_name=perm_data.app_name pk=group.pk %}',
-                        {
-                            'codename': this.codename,
-                            'grant_special_role_access': perm === 'Yes'
-                        }
-                    )
-                    this.loading = false
-                    let status = response.data.status
-                    if (status === 200){
-                        this.has_access = perm === 'Yes'
-                    } else {
-                        this.error_message = response.data.message
-                    }
+<div
+    x-data="{
+        has_access: '{{ special_role.has_access }}' === 'True',
+        get has_access_verbose() { return this.has_access ? 'Yes' : 'No' },
+        codename: '{{ special_role.codename }}',
+        permission_choices: ['No', 'Yes'],
+        loading: false,
+        error_message: '',
+        show_dropdown: false,
+
+        async update(perm) {
+            this.show_dropdown = false
+            this.error_message = null
+            this.loading = true
+            let response = await ajax_request(
+                'POST',
+                '{% url "django_spire:auth:group:json:group_special_role_ajax" app_name=perm_data.app_name pk=group.pk %}',
+                {
+                'codename': this.codename,
+                'grant_special_role_access': perm === 'Yes'
                 }
-            }">
+            )
+            this.loading = false
+            let status = response.data.status
+            if (status === 200){
+                this.has_access = perm === 'Yes'
+            } else {
+                this.error_message = response.data.message
+            }
+        }
+    }"
+>
     <div class="position-relative">
         <div @click="show_dropdown = true" class="btn btn-sm btn-app-primary-outlined dropdown-toggle">
             <span x-text="has_access_verbose"></span>
         </div>
-        <div @click.outside="show_dropdown = false" x-show="show_dropdown" style="width: 80px; z-index: 2"
-             class="card position-absolute bg-white mt-1">
+        <div
+            style="width: 80px; z-index: 2"
+            class="card position-absolute bg-app-layer-one mt-1 border"
+            x-show="show_dropdown"
+            @click.outside="show_dropdown = false"
+        >
             <template x-for="perm in permission_choices">
-                <div @click="update(perm)" class="py-1 ps-2 cursor-pointer bg-soft-primary-hover"
-                     x-bind:class="{ 'border-bottom': perm !== 'Yes' }">
-                    <span class="fs--1" x-bind:class="{ 'text-app-secondary': has_access_verbose === perm }"
-                          x-text="perm"></span>
+                <div
+                    class="py-1 ps-2 cursor-pointer bg-app-layer-three-hover"
+                    :class="{ 'border-bottom': perm !== 'Yes' }"
+                    :style="
+                        perm === 'No' ? 'border-top-left-radius: 0.30rem !important; border-top-right-radius: 0.30rem !important;' :
+                        perm === 'Yes' ? 'border-bottom-left-radius: 0.30rem !important; border-bottom-right-radius: 0.30rem !important;' : ''
+                    "
+                    @click="update(perm)"
+                >
+                    <span
+                        class="fs--1"
+                        :class="{ 'text-app-secondary': has_access_verbose === perm }"
+                        x-text="perm"
+                    ></span>
                 </div>
             </template>
         </div>

django_spire/auth/templates/django_spire/auth/page/login_page.html

@@ -1,11 +1,14 @@
 {% extends 'django_spire/auth/page/auth_page.html' %}
 
 {% block authentication_page_content %}
-
-    <form x-data="{
-        username: new GlueCharField('username', {required: true}),
-        password: new GlueCharField('password', {required: true})
-    }" method="post" class="text-app-secondary">
+    <form
+        class="text-app-secondary"
+        method="post"
+        x-data="{
+            username: new GlueCharField('username', {required: true, label: {% block username_label %}'Email Address'{% endblock %}}),
+            password: new GlueCharField('password', {required: true})
+        }"
+    >
         {% csrf_token %}
         <div class="row">
             <div class="col">
@@ -30,8 +33,4 @@
             Forgot my password
         </a>
     </div>
-
 {% endblock %}
-
-
-

django_spire/auth/templates/django_spire/auth/page/logout_page.html

@@ -15,7 +15,7 @@
         <div class="col px-4">
             <form method="post" action="{% url 'django_spire:auth:redirect:logout' %}" class="text-app-secondary">
                 {% csrf_token %}
-                <button type="submit" class="d-block mx-auto bg-light-primary shadow-sm text-white btn my-4 w-100">Logout</button>
+                <button type="submit" class="d-block mx-auto shadow-sm btn my-4 w-100">Logout</button>
             </form>
         </div>
     </div>

django_spire/auth/templates/django_spire/auth/page/password_set_form_page.html

@@ -13,7 +13,7 @@
         </div>
         <div class="row mt-2">
             <div class="col">
-                <button type="submit" class="w-100 btn btn-blue mt-2">Submit</button>
+                <button type="submit" class="w-100 btn btn-app-success mt-2">Submit</button>
             </div>
         </div>
     </form>

django_spire/comment/templates/django_spire/comment/element/comment_button_element.html

@@ -122,7 +122,7 @@
 
             {% elif button_text %}
                 <button @click="toggle_show_comment_dropdown()"
-                        class="btn bg-white text-business-base-blue rounded border-1 border-business-base-blue btn-sm px-2"
+                        class="btn text-business-base-blue rounded border-1 border-business-base-blue btn-sm px-2"
                         type="button" data-display="static"
                         aria-haspopup="true" aria-expanded="false">
                     {{ button_text }}
@@ -143,7 +143,7 @@
 
                             <div style="max-height: 100px; overflow-x: hidden; overflow-y: auto"
                                  x-show="show_user_list_dropdown" @click.outside="show_user_list_dropdown = false"
-                                 class="text-business-base-blue bg-white fs-0 w-75 ms-3 border rounded position-absolute top-25 start-0">
+                                 class="text-business-base-blue fs-0 w-75 ms-3 border rounded position-absolute top-25 start-0">
                                 <template x-for="(user, index) in filtered_users" :key="user.username">
                                     <a class="text-decoration-none text-business-base-blue" href="#">
                                         <li @click="add_user_to_comment(user)"
@@ -153,7 +153,7 @@
                                 </template>
                             </div>
 
-                            <button @click="$store.page_state.toggle_page_loading_state()" class="btn btn-primary btn-sm w-100 mt-1"
+                            <button @click="$store.page_state.toggle_page_loading_state()" class="btn btn-app-primary btn-sm w-100 mt-1"
                                     type="submit">Submit
                             </button>
                         </form>
@@ -162,4 +162,4 @@
             </div>
         </div>
     </div>
-{% endif %}
+{% endif %}

django_spire/comment/templates/django_spire/comment/element/comment_textarea_element.html

@@ -101,7 +101,7 @@
         </form>
 
         <div style="max-height: 125px; z-index: 2; overflow-x: hidden; overflow-y: auto" x-show="show_user_list" @click.outside="show_user_list=false" x-transition
-             class="bg-white text-900 w-100 shadow border rounded position-absolute top-50 start-0">
+             class="text-900 w-100 shadow border rounded position-absolute top-50 start-0">
             <template x-if="filtered_users.length > 0">
                 <template x-for="user in filtered_users" :key="user.id">
                         <div @click="add_user_to_comment(user)"

django_spire/comment/templates/django_spire/comment/widget/tagging_widget.html

@@ -108,7 +108,7 @@
              @keydown.up.prevent.stop="$focus.wrap().prev()"
              @keydown.tab.prevent.stop="$focus.wrap().next()"
              @keydown.esc.prevent.stop="document.getElementById(id).focus()"
-             class="bg-white w-100 shadow border border-1 rounded position-absolute top-100 start-0 mt-1">
+             class="w-100 shadow border border-1 rounded position-absolute top-100 start-0 mt-1">
             <template x-if="filtered_users.length > 0">
                 <template x-for="user in filtered_users" :key="user.id">
                         <button

django_spire/consts.py

@@ -1,4 +1,4 @@
-__VERSION__ = '0.16.10'
+__VERSION__ = '0.16.11'
 
 
 AI_CHAT_WORKFLOW_SENDER_SETTINGS_NAME = 'AI_CHAT_WORKFLOW_NAME'

django_spire/contrib/form/templates/django_spire/contrib/form/button/form_submit_button.html

@@ -36,7 +36,7 @@
         x-cloak
     >
         <div
-            class="spinner-border text-white spinner-border-sm"
+            class="spinner-border spinner-border-sm"
             role="status"
             x-transition
         >

django_spire/contrib/help/templates/django_spire/contrib/help/help_modal.html

@@ -1,5 +1,5 @@
 <div
-    class="modal fade text-dark"
+    class="modal fade"
     id="{{ help_id }}"
     tabindex="-1"
     aria-labelledby="exampleModalLabel"
@@ -38,4 +38,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

django_spire/core/context_processors.py

@@ -20,9 +20,6 @@ def django_spire(request: WSGIRequest) -> dict[str, Any]:
 
     return {
         'DJANGO_SPIRE_VERSION': __VERSION__,
-        'app_bootstrap_icon': {
-            'help_desk': 'bi bi-headset'
-        },
         'AuthController': auth_controller_dict
     }
 

django_spire/core/static/django_spire/css/app-default.css

@@ -13,4 +13,5 @@ a:visited:hover {
 
 body {
     color: var(--app-default-text-color);
+    scrollbar-color: var(--app-bg-secondary) transparent;
 }

django_spire/core/static/django_spire/css/bootstrap-extension.css

@@ -26,6 +26,21 @@ h1, h2, h3, h4, h5, h6 {
     box-shadow: rgba(0, 0, 0, 0.1) 0 0.25rem 0.375rem -0.0625rem, rgba(0, 0, 0, 0.06) 0 0.125rem 0.25rem -0.0625rem !important;
 }
 
+.dropdown-item {
+    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+}
+
+.dropdown-item:first-child {
+    border-top-left-radius: 0.30rem !important;
+    border-top-right-radius: 0.30rem !important;
+}
+
+.dropdown-item:last-child {
+    border-bottom: 0;
+    border-bottom-left-radius: 0.30rem !important;
+    border-bottom-right-radius: 0.30rem !important;
+}
+
 .cursor-pointer {
     cursor: pointer !important;
 }

django_spire/core/templates/django_spire/badge/accent_badge.html

@@ -1,3 +1,3 @@
 {% extends 'django_spire/badge/base_badge.html' %}
 
-{% block badge_class %}bg-app-accent text-white{% endblock %}
+{% block badge_class %}bg-app-accent{% endblock %}

django_spire/core/templates/django_spire/badge/primary_badge.html

@@ -1,3 +1,3 @@
 {% extends 'django_spire/badge/base_badge.html' %}
 
-{% block badge_class %}bg-app-primary text-white{% endblock %}
+{% block badge_class %}bg-app-primary{% endblock %}

django_spire/core/templates/django_spire/badge/secondary_badge.html

@@ -1,3 +1,3 @@
 {% extends 'django_spire/badge/base_badge.html' %}
 
-{% block badge_class %}bg-app-secondary text-white{% endblock %}
+{% block badge_class %}bg-app-secondary{% endblock %}

django_spire/core/templates/django_spire/badge/warning_badge.html

@@ -1,3 +1,3 @@
 {% extends 'django_spire/badge/base_badge.html' %}
 
-{% block badge_class %}bg-app-warning text-dark{% endblock %}
+{% block badge_class %}bg-app-warning {% endblock %}

django_spire/core/templates/django_spire/card/delete_confirmation_form_card.html

@@ -18,7 +18,7 @@
             <input hidden id="delete_confirmation_should_delete" value="false" name="should_delete" type="text">
 
             <div class="col-auto me-3">
-                {% include 'django_spire/button/danger_dark_button.html' with x_button_click='submit_value(true)' button_text='Delete' %}
+                {% include 'django_spire/button/danger_button.html' with x_button_click='submit_value(true)' button_text='Delete' %}
             </div>
             <div class="col-auto">
                 {% include 'django_spire/button/secondary_button.html' with x_button_click='submit_value(false)' button_text='Cancel' %}

django_spire/core/templates/django_spire/card/title_card.html

@@ -17,8 +17,7 @@
                 </div>
             </div>
             <div class="col-auto d-flex">
-                {% block card_button %}
-                {% endblock %}
+                {% block card_button %}{% endblock %}
             </div>
         </div>
         <div x-show="card_title_dropdown" x-cloak x-collapse>

django_spire/core/templates/django_spire/dropdown/dropdown.html

@@ -5,7 +5,7 @@
     {% endblock %}
     <div
         style="{% block dropdown_style %}{% endblock  %} z-index: 4;"
-        class="position-absolute shadow-lg card border-1 mt-1 {% block dropdown_position %}top-100{% endblock %}"
+        class="position-absolute shadow-lg card border border-bott mt-1 {% block dropdown_position %}top-100{% endblock %}"
         x-bind="dialogue"
         x-cloak
     >

django_spire/core/templates/django_spire/dropdown/element/dropdown_link_element.html

@@ -1,17 +1,17 @@
-<a
-    class="fs--1 p-0 cursor-pointer text-decoration-none border-bottom text-app-default-text-color"
-    {% if link_url %}href="{{ link_url }}"{% endif %}
-    {% if x_link_url %}
-        x-show="{{ x_link_url }} ? true : false"
-        :href="{{ x_link_url }}"
-    {% endif %}
-    @click="() => {
-        toggle_dropdown()
-        {% if x_click %}{{ x_click }}{% endif %}
-    }"
->
-    {# Background colours must be applied outside 'a' tag #}
-    <div class="bg-app-layer-one bg-app-layer-three-hover">
+{# Background colours must be applied outside 'a' tag #}
+<div class="bg-app-layer-one bg-app-layer-three-hover dropdown-item">
+    <a
+        class="fs--1 p-0 cursor-pointer text-decoration-none text-app-default-text-color"
+        {% if link_url %}href="{{ link_url }}"{% endif %}
+        {% if x_link_url %}
+            x-show="{{ x_link_url }} ? true : false"
+            :href="{{ x_link_url }}"
+        {% endif %}
+        @click="() => {
+            toggle_dropdown()
+            {% if x_click %}{{ x_click }}{% endif %}
+        }"
+    >
         {% block link_content %}
             <div class="px-3 py-1 text-nowrap {{ link_css }}">
                 {% if link_text %}
@@ -21,5 +21,5 @@
                 {% endif %}
             </div>
         {% endblock %}
-    </div>
-</a>
+    </a>
+</div>

django_spire/core/templates/django_spire/dropdown/element/ellipsis_dropdown_modal_link_element.html

@@ -1,8 +1,11 @@
-<a
-    @click="dispatch_modal_view('{{ view_url }}'); toggle_dropdown();"
-    class="border-bottom fs--1 p-0 cursor-pointer text-decoration-none border-bottom bg-app-layer-one bg-app-layer-three-hover text-app-default-text-color"
->
-    <div class="px-3 py-1 text-nowrap {{ link_css }}">
-        {{ link_text }}
-    </div>
-</a>
+{# Background colours must be applied outside 'a' tag #}
+<div class="bg-app-layer-one bg-app-layer-three-hover dropdown-item">
+    <a
+        @click="dispatch_modal_view('{{ view_url }}'); toggle_dropdown();"
+        class="border-bottom fs--1 p-0 cursor-pointer text-decoration-none text-app-default-text-color"
+    >
+        <div class="px-3 py-1 text-nowrap {{ link_css }}">
+            {{ link_text }}
+        </div>
+    </a>
+</div>

django_spire/core/templates/django_spire/filtering/form/base_session_filter_form.html

@@ -14,14 +14,14 @@
                     type="submit"
                     name="action"
                     value="Filter"
-                    class="btn btn-sm btn-primary float-end"
+                    class="btn btn-sm btn-app-primary float-end"
                 >
 
                 <input
                     type="submit"
                     name="action"
                     value="Clear"
-                    class="btn btn-sm btn-secondary me-2 float-end"
+                    class="btn btn-sm btn-app-secondary me-2 float-end"
                 >
             </div>
         {% endblock %}

django_spire/core/templates/django_spire/modal/content/dispatch_modal_delete_confirmation_content.html

@@ -21,7 +21,7 @@
         {% include 'django_glue/form/field/input_field.html' with glue_field='should_delete' %}
 
         <div class="d-flex mt-3">
-            {% include 'django_spire/contrib/form/button/form_submit_button.html' with button_text='Delete' button_class='btn-danger btn-sm shadow-sm' %}
+            {% include 'django_spire/contrib/form/button/form_submit_button.html' with button_text='Delete' button_class='btn-app-danger btn-sm shadow-sm' %}
             <span class="ms-2" @click="close_modal()" >
                 {% include 'django_spire/button/secondary_button.html' with button_text='Cancel' %}
             </span>

django_spire/core/templates/django_spire/navigation/accordion/nav_accordion.html

@@ -3,7 +3,6 @@
 {% block accordion_toggle %}
     <div
         class="d-flex justify-content-center align-items-baseline cursor-pointer text-app-link-side-navigation mb-1 ps-1 pe-0"
-        :class="{'text-app-primary': show_accordion, 'text-white': !show_accordion}"
         style="width: 150px"
     >
         <i class="fs-6 me-2 {% block nav_icon %}{% endblock %}"></i>

django_spire/core/templates/django_spire/navigation/top_navigation.html

@@ -24,12 +24,25 @@
 
         <div class="col-auto d-flex">
             {% block top_navigation_icons %}
+                {% if AuthController.help_desk.can_view %}
+                    {% block help_desk_icon %}
+                        {% include 'django_spire/help_desk/element/icon.html' %}
+                    {% endblock %}
+                {% endif %}
+
+
                 {% block theme_selector %}
                     <div>
                         {% include 'django_spire/theme/element/theme_selector.html' with icon_size='fs-2' %}
                     </div>
                 {% endblock %}
 
+                {% block notification_icon %}
+                    <div>
+                        {% include 'django_spire/notification/app/element/notification_bell.html' %}
+                    </div>
+                {% endblock %}
+
                 <div class="dropdown">
                     <i
                         class="bi bi-person-circle fs-2 mx-2 cursor-pointer"

django_spire/core/templates/django_spire/page/center_card_page.html

@@ -6,7 +6,7 @@
     <div class="rounded-3 p-3">
         <div class="row ps-3 mt-5">
             <div class="col-10 col-md-8 col-lg-6 col-xl-4 mx-auto">
-                <div class="card bg-dark p-5 shadow-lg">
+                <div class="card p-5 shadow-lg">
                     <div class="text-center mb-4">
                         <img height="50px" src="{% static '' %}" alt="">
                     </div>

django_spire/core/templates/django_spire/wizard/wizard.html

@@ -30,7 +30,7 @@
     {% block wizard_pagination %}
         <div class="wizard-footer d-flex justify-content-between align-items-center pt-4">
             {% block wizard_back_button %}
-                <button type="button" class="btn btn-secondary" @click="previous_page()" :disabled="current_page === 1">
+                <button type="button" class="btn btn-app-secondary" @click="previous_page()" :disabled="current_page === 1">
                     Back
                 </button>
             {% endblock %}
@@ -43,13 +43,13 @@
 
             {% block wizard_next_button %}
                 <template x-if="current_page < total_pages">
-                    <button type="button" class="btn btn-primary" @click="next_page()">Next</button>
+                    <button type="button" class="btn btn-app-primary" @click="next_page()">Next</button>
                 </template>
             {% endblock %}
 
             {% block wizard_submit_button %}
                 <template x-if="current_page === total_pages">
-                    <button type="button" class="btn btn-success">Submit</button>
+                    <button type="button" class="btn btn-app-success">Submit</button>
                 </template>
             {% endblock %}
         </div>
@@ -57,7 +57,7 @@
         {% block wizard_progress_bar %}
             <div class="progress my-2" style="height: 5px;">
                 <div
-                    class="progress-bar"
+                    class="progress-bar bg-app-primary"
                     :style="{ width: (current_page / total_pages * 100) + '%' }"
                 ></div>
             </div>