From 8ea156d0ac8d72080de87760fc7f546a2dc0f364 Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Tue, 14 May 2024 11:21:50 +0530
Subject: [PATCH] [UPDT] BASE: Updated forms in settings page by adding extra
 style class

---
 .../base/audit_tag/audit_tag_form.html        |  82 ++++++++----
 base/templates/base/company/company_form.html |  15 ++-
 .../base/department/department_form.html      |  45 +++----
 .../base/job_position/job_position_form.html  |  46 +++----
 .../base/job_role/job_role_form.html          |  47 ++++---
 .../htmx/rotating_work_type_form.html         |  37 ++++--
 .../rotating_work_type.html                   |  25 +---
 .../rotating_work_type_view.html              |   4 +-
 base/templates/base/tags/tags.html            | 122 +++++++++---------
 .../base/work_type/work_type_form.html        |  47 ++++---
 .../department_managers_form.html             |  17 +--
 11 files changed, 244 insertions(+), 243 deletions(-)

diff --git a/base/templates/base/audit_tag/audit_tag_form.html b/base/templates/base/audit_tag/audit_tag_form.html
index 885329cf7..3145c2392 100644
--- a/base/templates/base/audit_tag/audit_tag_form.html
+++ b/base/templates/base/audit_tag/audit_tag_form.html
@@ -1,31 +1,57 @@
 {% load i18n %}
-{% if form.errors %}
-<!-- form errors  -->
-    <div class="oh-wrapper">
-        <div class="oh-alert-container">
-            {% for error in form.non_field_errors %}
-            <div class="oh-alert oh-alert--animated oh-alert--danger">
-                {{ error }}
-            </div>
-            {% endfor %}
+<div class="oh-modal__dialog-header pb-0">
+  <h2 class="oh-modal__dialog-title" id="createModalTitle">
+    {% if tag_id %}
+        {% trans "Audit Tag Update" %}
+    {% else %}
+        {% trans "Create Audit Tag" %}
+    {% endif %}
+  </h2>
+  <button class="oh-modal__close" aria-label="Close">
+    <ion-icon name="close-outline"></ion-icon>
+  </button>
+</div>
+<div class="oh-modal__dialog-body">
+  {% if form.errors %}
+  <!-- form errors  -->
+  <div class="oh-wrapper">
+    <div class="oh-alert-container">
+      {% for error in form.non_field_errors %}
+      <div class="oh-alert oh-alert--animated oh-alert--danger">
+        {{ error }}
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+  <form
+    {% if tag_id %}
+        hx-post="{% url 'audit-tag-update' tag_id %}"
+        hx-target="#audittagEditForm"
+    {% else %}
+        hx-post="{% url 'audit-tag-create' %}"
+        hx-target="#audittagForm"
+    {% endif %}
+    hx-encoding="multipart/form-data"
+    class="oh-profile-section"
+  >
+    {% csrf_token %}
+    <div class="oh-input__group ">
+        <label class="oh-input__label" for="{{form.title.id_for_label}}">{% trans "Title" %}</label>
+        {{form.title}}
+        {{form.title.errors}}
+    </div>
+    <div class="oh-input__group ">
+        <label class="oh-input__label" for="{{form.highlight.id_for_label}}">{% trans "Highlight" %}</label>
+        <div class="oh-switch">
+            {{form.highlight}}
+            {{form.highlight.errors}}
         </div>
     </div>
-{% endif %}
-<form
-    {% if tag_id %}
-    hx-post="{% url 'audit-tag-update' tag_id %}"
-    {% else	%}
-    hx-post="{% url 'audit-tag-create' %}"
-    {% endif %}
-    hx-target="#audittagForm"
-    method="post"
-    hx-encoding="multipart/form-data">
-    {% csrf_token %}
-    {{form.as_p}}
-    <button
-		type="submit"
-		class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
-	>
-		{% trans "Save" %}
-	</button>
-</form>
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+        <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow" >
+            {% trans "Save" %}
+        </button>
+    </div>
+  </form>
+</div>
diff --git a/base/templates/base/company/company_form.html b/base/templates/base/company/company_form.html
index 15d388099..b1561333d 100644
--- a/base/templates/base/company/company_form.html
+++ b/base/templates/base/company/company_form.html
@@ -6,8 +6,8 @@
 		hx-post="{% url 'company-create' %}"
 	{% endif %}
 	hx-target="#companyForm"
-	method="post"
 	hx-encoding="multipart/form-data"
+	class="oh-profile-section"
 >
 	{% csrf_token %}
 	<div class="oh-inner-sidebar-content__body">
@@ -16,8 +16,10 @@
 			{{form.company}} {{form.company.errors}}
 		</div>
 		<div class="oh-input-group mb-2">
-			<label for="id_{{form.hq.name}}" class="settings-label mb-1">{% trans "Hq" %}</label>
-			{{form.hq}}
+			<div class="oh-switch">
+			<label for="id_{{form.hq.name}}" class="settings-label mb-1 mr-3" style="padding-right: 15px;">{% trans "Hq" %}</label>
+				{{form.hq}}
+			</div>
 		</div>
 		<div class="oh-input-group mb-2">
 			<label for="id_{{form.address.name}}" class="settings-label mb-1">{% trans "Address" %}</label>
@@ -54,12 +56,11 @@
 			{{form.icon}} {{form.icon.errors}}
 		</div>
 	</div>
-	<div class="d-flex flex-row-reverse mt-3">
-		<button type="submit" class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp">
-		{% trans "Save" %}
+	<div class="oh-modal__dialog-footer p-0 mt-3">
+		<button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow" >
+			{% trans "Save" %}
 		</button>
 	</div>
-	<div class="oh-inner-sidebar-content__footer"></div>
 </form>
 
 <script>
diff --git a/base/templates/base/department/department_form.html b/base/templates/base/department/department_form.html
index c1eeaeefd..d21c24acc 100644
--- a/base/templates/base/department/department_form.html
+++ b/base/templates/base/department/department_form.html
@@ -1,25 +1,25 @@
 {% load i18n %}
-<div class="oh-modal__dialog-header">
-  <span class="oh-modal__dialog-title" id="createModalLabel"
-    >{% if department.id %}
-      {% trans "Department Update" %}
+<div class="oh-modal__dialog-header pb-0">
+  <span class="oh-modal__dialog-title" id="createModalLabel">
+    {% if department.id %}
+      {% trans "Update Department" %}
     {% else %}
       {% trans "Create Department" %}
-    {% endif %}</span
-  >
+    {% endif %}
+  </span>
   <button class="oh-modal__close" aria-label="Close">
     <ion-icon name="close-outline"></ion-icon>
   </button>
 </div>
-<form
-  {% if department.id %}
-    hx-post="{% url 'department-update' department.id %}"
-  {% else %}
-    hx-post="{% url 'department-creation' %}?dynamic={{dynamic}}"
-  {% endif %}
-    method="post"
+<div class="oh-modal__dialog-body">
+  <form
+    {% if department.id %}
+      hx-post="{% url 'department-update' department.id %}"
+    {% else %}
+      hx-post="{% url 'department-creation' %}?dynamic={{dynamic}}"
+    {% endif %}
+    class="oh-profile-section"
   >
-  <div class="oh-modal__dialog-body pb-0">
     {% csrf_token %} {{form.non_field_errors}}
     <div class="oh-inner-sidebar-content__body">
       <label class="settings-label mb-1" for="id_{{form.department.name}}">
@@ -36,13 +36,10 @@
         {{form.company_id.errors}} {{form.company_id}}
       </div>
     </div>
-  </div>
-  <div class="oh-modal__dialog-footer">
-    <button
-      type="submit"
-      class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
-    >
-      {% trans "Save Changes" %}
-    </button>
-  </div>
-</form>
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow" >
+          {% trans "Save" %}
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/base/templates/base/job_position/job_position_form.html b/base/templates/base/job_position/job_position_form.html
index 8cb159139..06084c031 100644
--- a/base/templates/base/job_position/job_position_form.html
+++ b/base/templates/base/job_position/job_position_form.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="oh-modal__dialog-header">
+<div class="oh-modal__dialog-header pb-0">
   <span class="oh-modal__dialog-title" id="editModal1ModalLabel"
     >{% trans "Job Position" %}</span
   >
@@ -7,20 +7,19 @@
     <ion-icon name="close-outline"></ion-icon>
   </button>
 </div>
-<form
-  {% if job_position.id %}
-    hx-post="{% url 'job-position-update' job_position.id %}"
-  {% else %}
-    hx-post="{% url 'job-position-creation' %}?dynamic={{dynamic}}"
-  {% endif %}
-  {% if dynamic%}
-    hx-target="#dynamicCreateModalBody"
-  {% else %}
-    hx-target="#jobPositionForm"
-  {% endif %}
-  method="post"
->
-  <div class="oh-modal__dialog-body pb-0">
+<div class="oh-modal__dialog-body">
+  <form
+    {% if job_position.id %}
+      hx-post="{% url 'job-position-update' job_position.id %}"
+    {% else %}
+      hx-post="{% url 'job-position-creation' %}?dynamic={{dynamic}}"
+    {% endif %}
+    {% if dynamic%}
+      hx-target="#dynamicCreateModalBody"
+    {% else %}
+      hx-target="#jobPositionForm"
+    {% endif %}
+    class="oh-profile-section">
     {% csrf_token %}
     <div class="oh-inner-sidebar-content__body">
       <div class="oh-input-group mb-2">
@@ -36,13 +35,10 @@
         {{form.job_position}} {{form.job_position.errors}}
       </div>
     </div>
-  </div>
-  <div class="oh-modal__dialog-footer">
-    <button
-      type="submit"
-      class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
-    >
-      {% trans "Save Changes" %}
-    </button>
-  </div>
-</form>
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow" >
+          {% trans "Save" %}
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/base/templates/base/job_role/job_role_form.html b/base/templates/base/job_role/job_role_form.html
index 593974490..5597f6c58 100644
--- a/base/templates/base/job_role/job_role_form.html
+++ b/base/templates/base/job_role/job_role_form.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="oh-modal__dialog-header">
+<div class="oh-modal__dialog-header pb-0">
   <span class="oh-modal__dialog-title" id="confirmModalLabel"
     >{% trans "Job Role" %}</span
   >
@@ -7,20 +7,20 @@
     <ion-icon name="close-outline"></ion-icon>
   </button>
 </div>
-<form
-  {% if job_role.id %}
-    hx-post="{% url 'job-role-update' job_role.id %}"
-  {% else %}
-    hx-post="{% url 'job-role-create' %}?dynamic={{dynamic}}"
-  {%  endif %}
-  {% if dynamic %}
-    hx-target="#dynamicCreateModalBody"
-  {% else %}
-    hx-target="#jobRoleForm"
-  {%endif%}
-    method="post"
->
-  <div class="oh-modal__dialog-body pb-0">
+<div class="oh-modal__dialog-body">
+  <form
+    {% if job_role.id %}
+      hx-post="{% url 'job-role-update' job_role.id %}"
+    {% else %}
+      hx-post="{% url 'job-role-create' %}?dynamic={{dynamic}}"
+    {% endif %}
+    {% if dynamic %}
+      hx-target="#dynamicCreateModalBody"
+    {% else %}
+      hx-target="#jobRoleForm"
+    {%endif%}
+    class="oh-profile-section"
+    >
     {% csrf_token %} {{form.non_field_errors}}
     <div class="oh-inner-sidebar-content__body">
       <div class="oh-input-group mb-2">
@@ -32,13 +32,10 @@
         {{form.job_role.errors}} {{form.job_role}}
       </div>
     </div>
-  </div>
-  <div class="oh-modal__dialog-footer">
-    <button
-      type="submit"
-      class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
-    >
-      {% trans "Save Changes" %}
-    </button>
-  </div>
-</form>
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+        {% trans "Save" %}
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/base/templates/base/rotating_work_type/htmx/rotating_work_type_form.html b/base/templates/base/rotating_work_type/htmx/rotating_work_type_form.html
index 183373334..70c3febb3 100644
--- a/base/templates/base/rotating_work_type/htmx/rotating_work_type_form.html
+++ b/base/templates/base/rotating_work_type/htmx/rotating_work_type_form.html
@@ -1,19 +1,28 @@
 {% load i18n %}
-
-<form
+<div class="oh-modal__dialog-header pb-0">
+  <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
+    {% trans "Rotating Work Type" %}
+  </h2>
+  <button class="oh-modal__close" aria-label="Close">
+    <ion-icon name="close-outline"></ion-icon>
+  </button>
+</div>
+<div class="oh-modal__dialog-body">
+  <form
     {% if r_type.id %}
-    hx-post="{% url 'rotating-work-type-update' r_type.id %}"
+        hx-post="{% url 'rotating-work-type-update' r_type.id %}"
+        hx-target="#objectUpdateModalTarget"
     {% else %}
-    hx-post="{% url 'rotating-work-type-create' %}"
+        hx-post="{% url 'rotating-work-type-create' %}"
+        hx-target="#objectCreateModalTarget"
     {% endif %}
-    hx-target="#RotatingWorkTypeForm"
-    method="post"
-    class="settings-label mb-1">
-	{% csrf_token %} {{form}}
-    <div class="d-flex flex-row-reverse w-100 align-items-right mt-4">
-        <button type="submit" class="oh-btn oh-btn--secondary pl-5 pr-5">
-          {% trans "Save" %}
-        </button>
+    class="oh-profile-section"
+  >
+    {% csrf_token %} {{form.as_p}}
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+        {% trans "Save" %}
+      </button>
     </div>
-	<div class="oh-inner-sidebar-content__footer"></div>
-</form>
+  </form>
+</div>
diff --git a/base/templates/base/rotating_work_type/rotating_work_type.html b/base/templates/base/rotating_work_type/rotating_work_type.html
index d4bfc3f7a..2735fd2f2 100644
--- a/base/templates/base/rotating_work_type/rotating_work_type.html
+++ b/base/templates/base/rotating_work_type/rotating_work_type.html
@@ -10,9 +10,9 @@
         <button
             class="oh-btn oh-btn--secondary oh-btn--shadow"
             data-toggle="oh-modal-toggle"
-            data-target="#RotatingWorkTypeModal"
+            data-target="#objectCreateModal"
             hx-get="{% url 'rotating-work-type-create' %}"
-            hx-target="#RotatingWorkTypeForm"
+            hx-target="#objectCreateModalTarget"
         >
             <ion-icon name="add-outline" class="me-1"></ion-icon>
             {% trans "Create" %}
@@ -30,25 +30,4 @@
     {% endif %}
 
 </div>
-
-<div
-	class="oh-modal"
-	id="RotatingWorkTypeModal"
-	role="dialog"
-	aria-labelledby="RotatingWorkTypeModal"
-	aria-hidden="true"
->
-	<div class="oh-modal__dialog">
-		<div class="oh-modal__dialog-header">
-			<h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
-				{% trans "Rotating Work Type" %}
-			</h2>
-			<button class="oh-modal__close" aria-label="Close">
-				<ion-icon name="close-outline"></ion-icon>
-			</button>
-		</div>
-		<div class="oh-modal__dialog-body" id="RotatingWorkTypeForm"></div>
-	</div>
-</div>
-
 {% endblock settings %}
diff --git a/base/templates/base/rotating_work_type/rotating_work_type_view.html b/base/templates/base/rotating_work_type/rotating_work_type_view.html
index 7c80d7615..52eccd16f 100644
--- a/base/templates/base/rotating_work_type/rotating_work_type_view.html
+++ b/base/templates/base/rotating_work_type/rotating_work_type_view.html
@@ -23,9 +23,9 @@
 							{% if perms.base.change_rotatingworktype %}
 							<a
 								data-toggle="oh-modal-toggle"
-								data-target="#RotatingWorkTypeModal"
+								data-target="#objectUpdateModal"
 								hx-get="{% url 'rotating-work-type-update' rwork.id %}"
-								hx-target="#RotatingWorkTypeForm"
+								hx-target="#objectUpdateModalTarget"
 								type="button"
 								class="oh-btn oh-btn--light-bkg w-50"
 								title="{% trans 'Edit' %}"
diff --git a/base/templates/base/tags/tags.html b/base/templates/base/tags/tags.html
index 7ec1e7d59..f77aa0663 100644
--- a/base/templates/base/tags/tags.html
+++ b/base/templates/base/tags/tags.html
@@ -1,80 +1,78 @@
-{% extends 'settings.html' %}
-{% load i18n %}
-{% block settings %}{% load static %}
-
+{% extends 'settings.html' %} {% load i18n %} {% block settings %}
+{% load static %}
 
 <!-- ******************* AUDIT TAGS ******************* -->
 
 <div class="oh-inner-sidebar-content">
-    {% if perms.horilla_audit.view_audittag %}
-        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-            <h2 class="oh-inner-sidebar-content__title">{% trans "Audit Tags" %}</h2>
-			{% if perms.horilla_audit.add_audittag %}
-				<button
-					class="oh-btn oh-btn--secondary oh-btn--shadow"
-					data-toggle="oh-modal-toggle"
-					data-target="#audittagModal"
-					hx-get="{% url 'audit-tag-create' %}"
-					hx-target="#audittagForm"
-				>
-					<ion-icon name="add-outline" class="me-1"></ion-icon>
-					{% trans "Create" %}
-				</button>
-			{% endif %}
-        </div>
-		{% if audittags %}
-			{% include 'base/audit_tag/audit_tag_view.html' %}
-		{% else %}
-			<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-				<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/price-tag.png' %}" class="" alt="Page not found. 404." />
-				<h5 class="oh-404__subtitle">{% trans "There is no audit tags at this moment." %}</h5>
-			</div>
-		{% endif %}
+  {% if perms.horilla_audit.view_audittag %}
+  <div
+    class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
+  >
+    <h2 class="oh-inner-sidebar-content__title">{% trans "Audit Tags" %}</h2>
+    {% if perms.horilla_audit.add_audittag %}
+    	<button
+    	  class="oh-btn oh-btn--secondary oh-btn--shadow"
+    	  data-toggle="oh-modal-toggle"
+    	  data-target="#audittagModal"
+    	  hx-get="{% url 'audit-tag-create' %}"
+    	  hx-target="#audittagForm"
+    		>
+    	  <ion-icon name="add-outline" class="me-1"></ion-icon>
+    	  {% trans "Create" %}
+    	</button>
     {% endif %}
-
+  </div>
+  {% if audittags %}
+  	{% include 'base/audit_tag/audit_tag_view.html' %}
+  {% else %}
+  <div
+    style="
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    "
+  >
+    <img
+      style="
+        display: block;
+        width: 15%;
+        margin: 20px auto;
+        filter: opacity(0.5);
+      "
+      src="{% static 'images/ui/price-tag.png' %}"
+      class=""
+      alt="Page not found. 404."
+    />
+    <h5 class="oh-404__subtitle">
+      {% trans "There is no audit tags at this moment." %}
+    </h5>
+  </div>
+  {% endif %} {% endif %}
 </div>
 
-
 <!-- start of create modal -->
 <div
-	class="oh-modal"
-	id="audittagModal"
-	role="dialog"
-	aria-labelledby="audittagModal"
-	aria-hidden="true"
+  class="oh-modal"
+  id="audittagModal"
+  role="dialog"
+  aria-labelledby="audittagModal"
+  aria-hidden="true"
 >
-	<div class="oh-modal__dialog">
-		<div class="oh-modal__dialog-header">
-			<h2 class="oh-modal__dialog-title" id="createModalTitle">
-				{% trans "Create Audit Tag" %}
-			</h2>
-			<button class="oh-modal__close" aria-label="Close">
-				<ion-icon name="close-outline"></ion-icon>
-			</button>
-		</div>
-		<div class="oh-modal__dialog-body" id="audittagForm"></div>
-	</div>
+  <div class="oh-modal__dialog" id="audittagForm"></div>
 </div>
 <!-- end of create modal -->
+
 <!-- start of edit modal -->
 <div
-	class="oh-modal"
-	id="audittagEditModal"
-	role="dialog"
-	aria-labelledby="audittagEditModal"
-	aria-hidden="true"
+  class="oh-modal"
+  id="audittagEditModal"
+  role="dialog"
+  aria-labelledby="audittagEditModal"
+  aria-hidden="true"
 >
-	<div class="oh-modal__dialog">
-		<div class="oh-modal__dialog-header">
-			<h2 class="oh-modal__dialog-title" id="editModaltitle">
-				{% trans "Audit Tag Update" %}
-			</h2>
-			<button class="oh-modal__close" aria-label="Close">
-				<ion-icon name="close-outline"></ion-icon>
-			</button>
-		</div>
-		<div class="oh-modal__dialog-body" id="audittagEditForm"></div>
-	</div>
+  <div class="oh-modal__dialog" id="audittagEditForm"></div>
 </div>
 <!-- end of edit modal -->
 
diff --git a/base/templates/base/work_type/work_type_form.html b/base/templates/base/work_type/work_type_form.html
index 062939993..ee7dcb1ac 100644
--- a/base/templates/base/work_type/work_type_form.html
+++ b/base/templates/base/work_type/work_type_form.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="oh-modal__dialog-header">
+<div class="oh-modal__dialog-header pb-0">
   <span class="oh-modal__dialog-title" id="createModalLabel"
     >{% trans "Work Type" %}</span
   >
@@ -7,20 +7,20 @@
     <ion-icon name="close-outline"></ion-icon>
   </button>
 </div>
-<form
-  {% if work_type.id %}
-    hx-post="{% url 'work-type-update' work_type.id %}"
-  {%  else  %}
-    hx-post="{% url 'work-type-create' %}?dynamic={{dynamic}}"
-  {%  endif %}
-  {% if dynamic %}
-    hx-target="#dynamicCreateModal"
-  {% else %}
-    hx-target="#workTypeForm"
-  {% endif %}
-  method="post"
->
-  <div class="oh-modal__dialog-body pb-0">
+<div class="oh-modal__dialog-body">
+  <form
+    {% if work_type.id %}
+      hx-post="{% url 'work-type-update' work_type.id %}"
+    {% else %}
+      hx-post="{% url 'work-type-create' %}?dynamic={{dynamic}}"
+    {% endif %}
+    {% if dynamic %}
+      hx-target="#dynamicCreateModal"
+    {% else %}
+      hx-target="#workTypeForm"
+    {% endif %}
+    class="oh-profile-section"
+  >
     {% csrf_token %} {{form.non_field_errors}}
     <div class="oh-inner-sidebar-content__body">
       <div class="oh-input-group mb-2">
@@ -38,13 +38,10 @@
         {{form.company_id.errors}} {{form.company_id}}
       </div>
     </div>
-  </div>
-  <div class="oh-modal__dialog-footer">
-    <button
-      type="submit"
-      class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
-    >
-      {% trans "Save Changes" %}
-    </button>
-  </div>
-</form>
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+        {% trans "Save" %}
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/helpdesk/templates/department_managers/department_managers_form.html b/helpdesk/templates/department_managers/department_managers_form.html
index d85856921..98642f17d 100644
--- a/helpdesk/templates/department_managers/department_managers_form.html
+++ b/helpdesk/templates/department_managers/department_managers_form.html
@@ -1,12 +1,12 @@
 {% load i18n %}
 
 <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header">
+    <div class="oh-modal__dialog-header pb-0">
         <h2 class="oh-modal__dialog-title" id="createModalTitle">
             {% if dep_id %}
-            {% trans "Update department manager" %}
+                {% trans "Update Department Manager" %}
             {% else %}
-            {% trans "Create department manager" %}
+                {% trans "Create Department Manager" %}
             {% endif %}
         </h2>
         <button class="oh-modal__close" aria-label="Close">
@@ -28,13 +28,14 @@
         {% endif %}
         <form
             {% if dep_id %}
-            hx-post="{% url 'department-manager-update' dep_id %}"
+                hx-post="{% url 'department-manager-update' dep_id %}"
             {% else	%}
-            hx-post="{% url 'department-manager-create' %}"
+                hx-post="{% url 'department-manager-create' %}"
             {% endif %}
-            hx-target="#deparmentManagersForm"
-            method="post"
-            hx-encoding="multipart/form-data">
+                hx-target="#deparmentManagersForm"
+            hx-encoding="multipart/form-data"
+            class="oh-profile-section"
+            >
             {% csrf_token %}
             {{form.as_p}}
             <div class="d-flex flex-row-reverse mt-3">