From 441f7a172928205284af7165ae8abec38bc39462 Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Wed, 7 Feb 2024 17:28:14 +0530
Subject: [PATCH] [UPDT] GENERAL: Reduces white space between quick filters and
 nav

---
 .../own_attendance/attendances.html           | 10 ++--
 employee/templates/employee_nav.html          |  2 +-
 .../employee_personal_info/employee_card.html |  6 +--
 .../employee_personal_info/employee_list.html |  6 +--
 .../templates/helpdesk/ticket/ticket_nav.html |  2 +-
 .../helpdesk/ticket/ticket_view.html          | 12 ++---
 .../leave_allocation_request_view.html        |  8 +--
 .../leave/leave_request/leave_requests.html   | 10 ++--
 .../leave/user_leave/user_requests.html       | 10 ++--
 .../payroll/allowance/view_allowance.html     | 11 ++--
 .../payroll/contract/contract_view.html       | 10 ++--
 .../payroll/deduction/view_deduction.html     | 11 ++--
 payroll/templates/payroll/loan/records.html   |  8 +--
 .../payslip/payslips_quick_filter.html        | 14 ++---
 .../templates/payroll/reimbursement/nav.html  |  2 +-
 .../reimbursement/reimbursement_list.html     |  8 +--
 pms/templates/feedback/feedback_list.html     | 12 ++---
 pms/templates/okr/objective_list.html         | 12 ++---
 templates/index.html                          |  6 +++
 templates/sidebar.html                        | 54 +++++++++----------
 20 files changed, 109 insertions(+), 105 deletions(-)

diff --git a/attendance/templates/attendance/own_attendance/attendances.html b/attendance/templates/attendance/own_attendance/attendances.html
index cdccdae25..cd7c23db7 100644
--- a/attendance/templates/attendance/own_attendance/attendances.html
+++ b/attendance/templates/attendance/own_attendance/attendances.html
@@ -17,9 +17,9 @@
     border-radius: 5px;
   }
 </style>
-<div class="d-flex flex-row-reverse">
+<div class="d-flex flex-row-reverse mb-2">
   <span
-    class="m-3"
+    class="me-3"
     style="cursor: pointer"
     hx-get='{% url "filter-own-attendance" %}?is_validate_request_approved=true'
     hx-swap="innerHTML"
@@ -32,7 +32,7 @@
     {% trans "Approved request" %}
   </span>
   <span
-    class="m-3"
+    class="me-3"
     style="cursor: pointer"
     hx-get='{% url "filter-own-attendance" %}?is_validate_request=true'
     hx-swap="innerHTML"
@@ -45,7 +45,7 @@
     {% trans "Requested" %}
   </span>
   <span
-    class="m-3"
+    class="me-3"
     style="cursor: pointer"
     hx-get='{% url "filter-own-attendance" %}?attendance_validated=false'
     hx-swap="innerHTML"
@@ -58,7 +58,7 @@
     {% trans "Not validated" %}
   </span>
   <span
-    class="m-3"
+    class="me-3"
     style="cursor: pointer"
     hx-get='{% url "filter-own-attendance" %}?attendance_validated=true'
     hx-swap="innerHTML"
diff --git a/employee/templates/employee_nav.html b/employee/templates/employee_nav.html
index 685d862c2..a6f729049 100644
--- a/employee/templates/employee_nav.html
+++ b/employee/templates/employee_nav.html
@@ -167,7 +167,7 @@
   </div>
 </div>
 
-<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
+<section class="oh-wrapper oh-main__topbar pb-3" x-data="{searchShow: false}">
   <div class="oh-main__titlebar oh-main__titlebar--left">
     <a
       href="{% url 'employee-view' %}"
diff --git a/employee/templates/employee_personal_info/employee_card.html b/employee/templates/employee_personal_info/employee_card.html
index 79de97af6..d0154060e 100644
--- a/employee/templates/employee_personal_info/employee_card.html
+++ b/employee/templates/employee_personal_info/employee_card.html
@@ -5,12 +5,12 @@
 
 
 
-<div class="d-flex flex-row-reverse">
-  <span class="m-3" onclick="$('[name=working_today]').val('false'); $('[name=working_today]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;">
+<div class="d-flex flex-row-reverse m-2">
+  <span class="" onclick="$('[name=working_today]').val('false'); $('[name=working_today]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;">
     <span class="oh-dot oh-dot--small me-1" style="background-color:rgba(128, 128, 128, 0.482)"></span>
     {% trans "Offline" %}
   </span>
-  <span class="m-3" onclick="$('[name=working_today]').val('true'); $('[name=working_today]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;">
+  <span class="me-3" onclick="$('[name=working_today]').val('true'); $('[name=working_today]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;">
     <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
     {% trans "Online" %}
   </span>
diff --git a/employee/templates/employee_personal_info/employee_list.html b/employee/templates/employee_personal_info/employee_list.html
index e4ed116c4..602a42239 100644
--- a/employee/templates/employee_personal_info/employee_list.html
+++ b/employee/templates/employee_personal_info/employee_list.html
@@ -8,12 +8,12 @@
 </div>
 {% endif %} 
 
-<div class="d-flex flex-row-reverse p-0 mb-1">
-  <span class="ml-3 mr-3" onclick="$('[name=working_today]').val('false'); $('[name=working_today]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;">
+<div class="d-flex flex-row-reverse p-0 m-2">
+  <span class="" onclick="$('[name=working_today]').val('false'); $('[name=working_today]').first().change(); $('.filterButton').click()" style="cursor: pointer;">
     <span class="oh-dot oh-dot--small me-1" style="background-color:rgba(128, 128, 128, 0.482)"></span>
     {% trans "Offline" %}
   </span>
-  <span class="ml-3 mr-3" onclick="$('[name=working_today]').val('true'); $('[name=working_today]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;">
+  <span class="me-3" onclick="$('[name=working_today]').val('true'); $('[name=working_today]').first().change(); $('.filterButton').click()" style="cursor: pointer;">
     <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
     {% trans "Online" %}
   </span>
diff --git a/helpdesk/templates/helpdesk/ticket/ticket_nav.html b/helpdesk/templates/helpdesk/ticket/ticket_nav.html
index 149f53db1..35b50530c 100644
--- a/helpdesk/templates/helpdesk/ticket/ticket_nav.html
+++ b/helpdesk/templates/helpdesk/ticket/ticket_nav.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}" style="padding-bottom: 7px;">
+<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
 	<div class="oh-main__titlebar oh-main__titlebar--left">
 		<h1 class="oh-main__titlebar-title fw-bold">
 			{% trans "Tickets" %}
diff --git a/helpdesk/templates/helpdesk/ticket/ticket_view.html b/helpdesk/templates/helpdesk/ticket/ticket_view.html
index 0fe29c044..120e7883f 100644
--- a/helpdesk/templates/helpdesk/ticket/ticket_view.html
+++ b/helpdesk/templates/helpdesk/ticket/ticket_view.html
@@ -40,9 +40,9 @@
 <div class="oh-wrapper" id="ticketContainer">
 	{% if my_tickets or allocated_tickets or all_tickets %}
 		<!-- start of Quick filters  -->
-		<div class="d-flex flex-row-reverse">
+		<div class="d-flex flex-row-reverse mb-2">
 			<span
-				class="m-1 review_ongoing"
+				class="me-3 review_ongoing"
 				onclick="$('[name=status]').val('canceled');$('[name=status]').first().change();$('.filterButton').click()"
 				style="cursor: pointer"
 			>
@@ -53,7 +53,7 @@
 				{% trans "Canceled" %}
 			</span>
 			<span
-				class="m-1 confirmed"
+				class="me-3 confirmed"
 				onclick="$('[name=status]').val('resolved');$('[name=status]').first().change();$('.filterButton').click()"
 				style="cursor: pointer"
 			>
@@ -64,7 +64,7 @@
 				{% trans "Resolved" %}
 			</span>
 			<span
-				class="m-1 paid"
+				class="me-3 paid"
 				onclick="$('[name=status]').val('on_hold');$('[name=status]').first().change();$('.filterButton').click()"
 				style="cursor: pointer"
 			>
@@ -75,7 +75,7 @@
 				{% trans "On Hold" %}
 			</span>
 			<span
-				class="m-1 paid"
+				class="me-3 paid"
 				onclick="$('[name=status]').val('in_progress');$('[name=status]').first().change();$('.filterButton').click()"
 				style="cursor: pointer"
 			>
@@ -86,7 +86,7 @@
 				{% trans "In Progress" %}
 			</span>
 			<span
-				class="m-1 confirmed"
+				class="me-3 confirmed"
 				onclick="$('[name=status]').val('new');$('[name=status]').first().change();$('.filterButton').click()"
 				style="cursor: pointer"
 			>
diff --git a/leave/templates/leave/leave_allocation_request/leave_allocation_request_view.html b/leave/templates/leave/leave_allocation_request/leave_allocation_request_view.html
index 2dfef8606..9d2d4e6b9 100644
--- a/leave/templates/leave/leave_allocation_request/leave_allocation_request_view.html
+++ b/leave/templates/leave/leave_allocation_request/leave_allocation_request_view.html
@@ -226,9 +226,9 @@
 <div class="oh-wrapper" id="userRequest">
 	{% if leave_allocation_requests or my_leave_allocation_requests %}
 	<!-- start of Quick filters  -->
-	<div class="d-flex flex-row-reverse">
+	<div class="d-flex flex-row-reverse mb-2">
 		<span
-			class="m-3 review_ongoing"
+			class="me-3 review_ongoing"
 			onclick="$('[name=status]').val('rejected');$('[name=status]').first().change();$('.filterButton').click()"
 			style="cursor: pointer"
 		>
@@ -239,7 +239,7 @@
 			{% trans "Rejected" %}
 		</span>
 		<span
-			class="m-3 confirmed"
+			class="me-3 confirmed"
 			onclick="$('[name=status]').val('requested');$('[name=status]').first().change();$('.filterButton').click()"
 			style="cursor: pointer"
 		>
@@ -250,7 +250,7 @@
 			{% trans "Requested" %}
 		</span>
 		<span
-			class="m-3 paid"
+			class="me-3 paid"
 			onclick="$('[name=status]').val('approved');$('[name=status]').first().change();$('.filterButton').click()"
 			style="cursor: pointer"
 		>
diff --git a/leave/templates/leave/leave_request/leave_requests.html b/leave/templates/leave/leave_request/leave_requests.html
index ca5f48398..6131878ff 100644
--- a/leave/templates/leave/leave_request/leave_requests.html
+++ b/leave/templates/leave/leave_request/leave_requests.html
@@ -4,20 +4,20 @@
 {% load attendancefilters %}
 {% include 'filter_tags.html' %}
 {% if not request.GET.dashboard %}
-<div class="d-flex flex-row-reverse">
-    <span class="m-3 review_ongoing" onclick="$('[name=status]').val('rejected');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+<div class="d-flex flex-row-reverse mb-2">
+    <span class="me-3 review_ongoing" onclick="$('[name=status]').val('rejected');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
         <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
         {% trans "Rejected" %}
     </span>
-    <span class="m-3 review_ongoing" onclick="$('[name=status]').val('cancelled');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+    <span class="me-3 review_ongoing" onclick="$('[name=status]').val('cancelled');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
       <span class="oh-dot oh-dot--small me-1" style="background-color:grey"></span>
       {% trans "Cancelled" %}
     </span>
-    <span class="m-3 paid" onclick="$('[name=status]').val('approved');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+    <span class="me-3 paid" onclick="$('[name=status]').val('approved');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
       <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
       {% trans "Approved" %}
     </span>
-    <span class="m-3 confirmed" onclick="$('[name=status]').val('requested');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+    <span class="me-3 confirmed" onclick="$('[name=status]').val('requested');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
       <span class="oh-dot oh-dot--small me-1" style="background-color:orange"></span>
       {% trans "Requested" %}
     </span>
diff --git a/leave/templates/leave/user_leave/user_requests.html b/leave/templates/leave/user_leave/user_requests.html
index 7d75c374f..a2f98e893 100644
--- a/leave/templates/leave/user_leave/user_requests.html
+++ b/leave/templates/leave/user_leave/user_requests.html
@@ -2,20 +2,20 @@
 {% load static %}   
 
 {% include 'filter_tags.html' %}
-<div class="d-flex flex-row-reverse">
-    <span class="m-3" style="cursor:pointer;" onclick="$('[name=status]').val('rejected');$('[name=status]').first().change();$('.filterButton').click()">
+<div class="d-flex flex-row-reverse mb-2">
+    <span class="me-3" style="cursor:pointer;" onclick="$('[name=status]').val('rejected');$('[name=status]').first().change();$('.filterButton').click()">
         <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
         {% trans "Rejected" %}
     </span>
-    <span class="m-3" style="cursor:pointer;" onclick="$('[name=status]').val('cancelled');$('[name=status]').first().change();$('.filterButton').click()">
+    <span class="me-3" style="cursor:pointer;" onclick="$('[name=status]').val('cancelled');$('[name=status]').first().change();$('.filterButton').click()">
         <span class="oh-dot oh-dot--small me-1" style="background-color:gray"></span>
         {% trans "Cancelled" %}
     </span>
-    <span class="m-3" style="cursor:pointer;" onclick="$('[name=status]').val('approved');$('[name=status]').first().change();$('.filterButton').click()">
+    <span class="me-3" style="cursor:pointer;" onclick="$('[name=status]').val('approved');$('[name=status]').first().change();$('.filterButton').click()">
         <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
         {% trans "Approved" %}
     </span>
-    <span class="m-3" style="cursor:pointer;" onclick="$('[name=status]').val('requested');$('[name=status]').first().change();$('.filterButton').click()">
+    <span class="me-3" style="cursor:pointer;" onclick="$('[name=status]').val('requested');$('[name=status]').first().change();$('.filterButton').click()">
         <span class="oh-dot oh-dot--small me-1" style="background-color:orange;"></span>
         {% trans "Requested" %}
     </span>
diff --git a/payroll/templates/payroll/allowance/view_allowance.html b/payroll/templates/payroll/allowance/view_allowance.html
index f19846387..a9422688f 100644
--- a/payroll/templates/payroll/allowance/view_allowance.html
+++ b/payroll/templates/payroll/allowance/view_allowance.html
@@ -11,7 +11,6 @@
   }
 </style>
 <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}"
-  style="padding-bottom: 10px;"
 >
   <div class="oh-main__titlebar oh-main__titlebar--left">
     <h1 class="oh-main__titlebar-title fw-bold">{% trans "Allowances" %}</h1>
@@ -113,9 +112,9 @@
 </section>
 <div class="oh-wrapper">
 <!-- start of Quick filters  -->
-<div class="d-flex flex-row-reverse" style="height:50px;">
+<div class="d-flex flex-row-reverse mb-2">
   <span
-    class="m-3"
+    class="me-3"
     onclick="$('[name=is_taxable]').val('true');$('[name=is_fixed]').val('unknown');$('.filterButton').click()"
     style="cursor: pointer"
   >
@@ -126,7 +125,7 @@
     {% trans "Taxable" %}
   </span>
   <span
-    class="m-3"
+    class="me-3"
     style="cursor: pointer"
     onclick="$('[name=is_taxable]').val('false');$('[name=is_fixed]').val('unknown');$('.filterButton').click()"
   >
@@ -137,7 +136,7 @@
     {% trans "Non Taxable" %}
   </span>
   <span
-    class="m-3"
+    class="me-3"
     style="cursor: pointer"
     onclick="$('[name=is_fixed]').val('true');$('[name=is_taxable]').val('unknown');$('.filterButton').click()"
   >
@@ -148,7 +147,7 @@
     {% trans "Fixed" %}
   </span>
   <span
-    class="m-3"
+    class="me-3"
     style="cursor: pointer"
     onclick="$('[name=is_fixed]').val('false');$('[name=is_taxable]').val('unknown');$('.filterButton').click()"
   >
diff --git a/payroll/templates/payroll/contract/contract_view.html b/payroll/templates/payroll/contract/contract_view.html
index 910387294..0c4ab8d99 100644
--- a/payroll/templates/payroll/contract/contract_view.html
+++ b/payroll/templates/payroll/contract/contract_view.html
@@ -209,9 +209,9 @@
   >
     {% trans "Selected Employees" %}
   </div>
-  <div class="d-flex flex-row-reverse oh-wrapper">
+  <div class="d-flex flex-row-reverse oh-wrapper mb-2">
     <span
-      class="m-3"
+      class="me-3"
       onclick="$('[name=contract_status]').val('terminated'); $('[name=contract_status]').first().change(); $('.filterButton').click()"
       style="cursor: pointer"
     >
@@ -222,7 +222,7 @@
       {% trans "Terminated" %}
     </span>
     <span
-      class="m-3"
+      class="me-3"
       onclick="$('[name=contract_status]').val('expired'); $('[name=contract_status]').first().change(); $('.filterButton').click()"
       style="cursor: pointer"
     >
@@ -233,7 +233,7 @@
       {% trans "Expired" %}
     </span>
     <span
-      class="m-3"
+      class="me-3"
       onclick="$('[name=contract_status]').val('draft'); $('[name=contract_status]').first().change(); $('.filterButton').click()"
       style="cursor: pointer"
     >
@@ -244,7 +244,7 @@
       {% trans "Draft" %}
     </span>
     <span
-      class="m-3"
+      class="me-3"
       onclick="$('[name=contract_status]').val('active'); $('[name=contract_status]').first().change(); $('.filterButton').click()"
       style="cursor: pointer"
     >
diff --git a/payroll/templates/payroll/deduction/view_deduction.html b/payroll/templates/payroll/deduction/view_deduction.html
index 70a13050f..db8cdd5d4 100644
--- a/payroll/templates/payroll/deduction/view_deduction.html
+++ b/payroll/templates/payroll/deduction/view_deduction.html
@@ -12,7 +12,6 @@
 </style>
 
 <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}"
-  style="padding-bottom: 10px;"
 >
   <div class="oh-main__titlebar oh-main__titlebar--left">
     <h1 class="oh-main__titlebar-title fw-bold">{% trans "Deductions" %}</h1>
@@ -112,9 +111,9 @@
 </section>
 <div class="oh-wrapper">
   <!-- start of Quick filters  -->
-  <div class="d-flex flex-row-reverse" style="height:50px;">
+  <div class="d-flex flex-row-reverse mb-2" >
     <span
-      class="m-3"
+      class="me-3"
       onclick="$('[name=is_pretax]').val('true');$('[name=is_fixed]').val('unknown');$('.filterButton').click()"
       style="cursor: pointer"
     >
@@ -125,7 +124,7 @@
       {% trans "Pretax" %}
     </span>
     {% comment %} <span
-      class="m-3"
+      class="me-3"
       style="cursor: pointer"
       onclick="$('[name=is_pretax]').val('false');$('[name=is_fixed]').val('unknown');$('.filterButton').click()"
     >
@@ -136,7 +135,7 @@
       {% trans "No Pretax" %}
     </span> {% endcomment %}
     <span
-      class="m-3"
+      class="me-3"
       style="cursor: pointer"
       onclick="$('[name=is_fixed]').val('true');$('[name=is_pretax]').val('unknown');$('.filterButton').click()"
     >
@@ -147,7 +146,7 @@
       {% trans "Fixed" %}
     </span>
     <span
-      class="m-3"
+      class="me-3"
       style="cursor: pointer"
       onclick="$('[name=is_fixed]').val('false');$('[name=is_pretax]').val('unknown');$('.filterButton').click()"
     >
diff --git a/payroll/templates/payroll/loan/records.html b/payroll/templates/payroll/loan/records.html
index a90d51833..6dd386dfc 100644
--- a/payroll/templates/payroll/loan/records.html
+++ b/payroll/templates/payroll/loan/records.html
@@ -1,14 +1,14 @@
 {% load i18n %}
-<div class="d-flex flex-row-reverse oh-wrapper">
-  <span class="mb-3" onclick="$('[name=type]').val('fine').change();  $('.filterButton').click()" style="cursor: pointer; margin-right: 15px;">
+<div class="d-flex flex-row-reverse oh-wrapper mb-3">
+  <span class="me-3" onclick="$('[name=type]').val('fine').change();  $('.filterButton').click()" style="cursor: pointer;">
     <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
     {% trans "Fine" %}
   </span>
-  <span class="mb-3" onclick="$('[name=type]').val('loan').change(); $('.filterButton').click()" style="cursor: pointer; margin-right: 15px;">
+  <span class="me-3" onclick="$('[name=type]').val('loan').change(); $('.filterButton').click()" style="cursor: pointer;">
     <span class="oh-dot oh-dot--small me-1" style="background-color:rgba(128, 128, 128, 0.482)"></span>
     {% trans "Loan" %}
   </span>
-  <span class="mb-3" onclick="$('[name=type]').val('advanced_salary').change();$('.filterButton').click()" style="cursor: pointer; margin-right: 15px;">
+  <span class="me-3" onclick="$('[name=type]').val('advanced_salary').change();$('.filterButton').click()" style="cursor: pointer;">
     <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
     {% trans "Advanced Salary" %}
   </span>
diff --git a/payroll/templates/payroll/payslip/payslips_quick_filter.html b/payroll/templates/payroll/payslip/payslips_quick_filter.html
index a99abb3e4..8dd2b731e 100644
--- a/payroll/templates/payroll/payslip/payslips_quick_filter.html
+++ b/payroll/templates/payroll/payslip/payslips_quick_filter.html
@@ -1,11 +1,11 @@
 {% load i18n %}
 <div
-  class="d-flex flex-row-reverse oh-wrapper"
+  class="d-flex flex-row-reverse oh-wrapper mb-2"
   style="padding-bottom: 10px; justify-content: right; align-items: center"
 >
   {% if perms.payroll.add_payslip %}
     <span
-    class="paid m-2"
+    class="paid me-3"
     onclick="$('[name=sent_to_employee]').val('false'); $('[name=sent_to_employee]').first().change(); $('.filterButton').click()"
     style="cursor: pointer; margin-left: 5px"
     >
@@ -16,7 +16,7 @@
     {% trans "Mail Not Sent" %}
     </span>
     <span
-      class="paid m-2"
+      class="paid me-3"
       onclick="$('[name=sent_to_employee]').val('true'); $('[name=sent_to_employee]').first().change(); $('.filterButton').click()"
       style="cursor: pointer; margin-left: 5px"
     >
@@ -28,7 +28,7 @@
     </span>
   {% endif %}
   <span
-    class="draft m-2"
+    class="draft me-3"
     onclick="$('[name=status]').val('draft'); $('[name=status]').first().change(); $('.filterButton').click();"
     style="cursor: pointer; margin-left: 5px"
   >
@@ -39,7 +39,7 @@
     {% trans "Draft" %}
   </span>
   <span
-    class="review_ongoing m-2"
+    class="review_ongoing me-3"
     onclick="$('[name=status]').val('review_ongoing'); $('[name=status]').first().change(); $('.filterButton').click()"
     style="cursor: pointer; margin-left: 5px"
   >
@@ -50,7 +50,7 @@
     {% trans "Review Ongoing" %}
   </span>
   <span
-    class="confirmed m-2"
+    class="confirmed me-3"
     onclick="$('[name=status]').val('confirmed'); $('[name=status]').first().change(); $('.filterButton').click()"
     style="cursor: pointer; margin-left: 5px"
   >
@@ -61,7 +61,7 @@
     {% trans "Confirmed" %}
   </span>
   <span
-    class="paid m-2"
+    class="paid me-3"
     onclick="$('[name=status]').val('paid'); $('[name=status]').first().change(); $('.filterButton').click()"
     style="cursor: pointer; margin-left: 5px"
   >
diff --git a/payroll/templates/payroll/reimbursement/nav.html b/payroll/templates/payroll/reimbursement/nav.html
index 74f66c632..88f0a2288 100644
--- a/payroll/templates/payroll/reimbursement/nav.html
+++ b/payroll/templates/payroll/reimbursement/nav.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<section class="oh-wrapper oh-main__topbar" style="padding-bottom: 1rem;">
+<section class="oh-wrapper oh-main__topbar">
   <div class="oh-main__titlebar oh-main__titlebar--left oh-d-flex-column--resp oh-mb-3--small">
     <h1 class="oh-main__titlebar-title fw-bold">{% trans 'Reimbursements' %}</h1>
   </div>
diff --git a/payroll/templates/payroll/reimbursement/reimbursement_list.html b/payroll/templates/payroll/reimbursement/reimbursement_list.html
index bc1d82190..71dfbaf5f 100644
--- a/payroll/templates/payroll/reimbursement/reimbursement_list.html
+++ b/payroll/templates/payroll/reimbursement/reimbursement_list.html
@@ -1,7 +1,7 @@
 {% load i18n %} {% include "filter_tags.html" %}
-<div class="d-flex flex-row-reverse oh-wrapper">
+<div class="d-flex flex-row-reverse oh-wrapper mb-2">
     <span
-        class="mb-3"
+        class="me-3"
         onclick="$('[name=status]').val('canceled').change();  $('.filterButton').click()"
         style="cursor: pointer; margin-right: 15px"
     >
@@ -12,7 +12,7 @@
         {% trans "Canceled" %}
     </span>
     <span
-        class="mb-3"
+        class="me-3"
         onclick="$('[name=status]').val('approved').change();$('.filterButton').click()"
         style="cursor: pointer; margin-right: 15px"
     >
@@ -23,7 +23,7 @@
         {% trans "Approved" %}
     </span>
     <span
-        class="mb-3"
+        class="me-3"
         onclick="$('[name=status]').val('requested').change(); $('.filterButton').click()"
         style="cursor: pointer; margin-right: 15px"
     >
diff --git a/pms/templates/feedback/feedback_list.html b/pms/templates/feedback/feedback_list.html
index 2242cb8ae..e631d5efe 100644
--- a/pms/templates/feedback/feedback_list.html
+++ b/pms/templates/feedback/feedback_list.html
@@ -24,24 +24,24 @@
 </style>
 
 {% include 'filter_tags.html' %}
-<div class="d-flex flex-row-reverse">
-  <span class="m-3 review_ongoing" onclick="$('[name=status]').val('At Risk');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+<div class="d-flex flex-row-reverse mb-2">
+  <span class="me-3 review_ongoing" onclick="$('[name=status]').val('At Risk');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
     {% trans "At Risk" %}
   </span>
-  <span class="m-3 review_ongoing" onclick="$('[name=status]').val('Not Started');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+  <span class="me-3 review_ongoing" onclick="$('[name=status]').val('Not Started');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:grey"></span>
     {% trans "Not Started" %}
   </span>
-  <span class="m-3 paid" onclick="$('[name=status]').val('Behind');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+  <span class="me-3 paid" onclick="$('[name=status]').val('Behind');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:orange"></span>
     {% trans "Behind" %}
   </span>
-  <span class="m-3 confirmed" onclick="$('[name=status]').val('Closed');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+  <span class="me-3 confirmed" onclick="$('[name=status]').val('Closed');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:rgb(103, 171, 238)"></span>
     {% trans "Closed" %}
   </span>
-  <span class="m-3 paid" onclick="$('[name=status]').val('On Track');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+  <span class="me-3 paid" onclick="$('[name=status]').val('On Track');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
     {% trans "On Track" %}
   </span>
diff --git a/pms/templates/okr/objective_list.html b/pms/templates/okr/objective_list.html
index a93138cec..255decd12 100644
--- a/pms/templates/okr/objective_list.html
+++ b/pms/templates/okr/objective_list.html
@@ -3,24 +3,24 @@
 {% load basefilters %}
 <!-- filter items showing here -->
 {% include 'filter_tags.html' %}
-<div class="d-flex flex-row-reverse">
-  <span class="m-3 review_ongoing" onclick="$('[name=status]').val('At Risk');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+<div class="d-flex flex-row-reverse mb-2">
+  <span class="me-3 review_ongoing" onclick="$('[name=status]').val('At Risk');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
       <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
       {% trans "At Risk" %}
     </span>
-  <span class="m-3 review_ongoing" onclick="$('[name=status]').val('Not Started');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+  <span class="me-3 review_ongoing" onclick="$('[name=status]').val('Not Started');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:grey"></span>
     {% trans "Not Started" %}
   </span>
-  <span class="m-3 paid" onclick="$('[name=status]').val('Behind');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+  <span class="me-3 paid" onclick="$('[name=status]').val('Behind');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:orange"></span>
     {% trans "Behind" %}
   </span>
-  <span class="m-3 confirmed" onclick="$('[name=status]').val('Closed');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+  <span class="me-3 confirmed" onclick="$('[name=status]').val('Closed');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:rgb(103, 171, 238)"></span>
     {% trans "Closed" %}
   </span>
-  <span class="m-3 paid" onclick="$('[name=status]').val('On Track');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
+  <span class="me-3 paid" onclick="$('[name=status]').val('On Track');$('[name=status]').first().change();$('.filterButton').click()" style="cursor: pointer">
     <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
     {% trans "On Track" %}
   </span>
diff --git a/templates/index.html b/templates/index.html
index d32de772f..fa6086c66 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -337,6 +337,12 @@
   overflow: hidden;
   overflow-y: scroll;
 } 
+.oh-main__topbar {
+  padding-bottom:1rem;
+}
+.oh-inner-sidebar-content{
+  padding-top:0;
+}
   </style>
 </head>
 
diff --git a/templates/sidebar.html b/templates/sidebar.html
index 5d910abe4..31fed4f2b 100755
--- a/templates/sidebar.html
+++ b/templates/sidebar.html
@@ -164,16 +164,6 @@
                 >{% trans "Recruitment Survey" %}</a
               >
             </li>
-            {% endif %} 
-            {% if perms.recruitment.view_recruitmentmailtemplate %}
-            <li class="oh-sidebar__submenu-item">
-              <a
-                class="oh-sidebar__submenu-link"
-                href="{% url 'view-mail-templates' %}"
-                class="oh-sidebar__submenu-link"
-                >{% trans "Mail Templates" %}</a
-              >
-            </li>
             {% endif %}
             {% if perms.recruitment.view_candidate %}
             <li class="oh-sidebar__submenu-item">
@@ -661,21 +651,6 @@
             </li>
             {% endif %} 
 
-            <li class="oh-sidebar__submenu-item">
-              <a
-                href="{% url 'holiday-view' %}"
-                class="oh-sidebar__submenu-link"
-                >{% trans "Holidays" %}</a
-              >
-            </li>
-
-            <li class="oh-sidebar__submenu-item">
-              <a
-                href="{% url 'company-leave-view' %}"
-                class="oh-sidebar__submenu-link"
-                >{% trans "Company Leaves" %}</a
-              >
-            </li>
 
           </ul>
         </div>
@@ -916,7 +891,6 @@
           </ul>
         </div>
       </li>
-      {% if perms.Leave.view_leaverequest %}
       <li
         class="oh-sidebar__menu-item"
         x-data="{ isOpen: getOpenState('configNav') }"
@@ -975,6 +949,7 @@
           style="display: none"
           >
           <ul class="oh-sidebar__submenu-items">
+            {% if perms.Leave.view_leaverequest %}
             <li class="oh-sidebar__submenu-item">
               <a
                 href="{% url 'multiple-approval-condition' %}"
@@ -982,10 +957,35 @@
                 >{% trans "Multiple Approvals " %}</a
               >
             </li>
+            {% endif %}
+            {% if perms.recruitment.view_recruitmentmailtemplate %}
+            <li class="oh-sidebar__submenu-item">
+              <a
+                class="oh-sidebar__submenu-link"
+                href="{% url 'view-mail-templates' %}"
+                class="oh-sidebar__submenu-link"
+                >{% trans "Mail Templates" %}</a
+              >
+            </li>
+            <li class="oh-sidebar__submenu-item">
+              <a
+                href="{% url 'holiday-view' %}"
+                class="oh-sidebar__submenu-link"
+                >{% trans "Holidays" %}</a
+              >
+            </li>
+
+            <li class="oh-sidebar__submenu-item">
+              <a
+                href="{% url 'company-leave-view' %}"
+                class="oh-sidebar__submenu-link"
+                >{% trans "Company Leaves" %}</a
+              >
+            </li>
+            {% endif %}
           </ul>
         </div>
       </li>
-      {% endif %}
     </ul>
   </div>
 </div>