Fix primeng table pagination style

1 files changed, 41 insertions, 52 deletions

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index cf55bad79..620df3cb8 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -88,9 +88,6 @@ body .p-paginator .p-paginator-current {
   min-width: 2.286em;
   line-height: 2.286em;
 }
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
 body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
   color: #848484;
 }
@@ -152,6 +149,7 @@ body .p-dropdown {
   background: #ffffff;
   border: 1px solid #a6a6a6;
   transition: border-color 0.2s, box-shadow 0.2s;
+  border-radius: 6px;
 }
 body .p-dropdown:not(.p-disabled):hover {
   border-color: #212121;
@@ -162,28 +160,41 @@ body .p-dropdown:not(.p-disabled).p-focus {
   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
   border-color: pvar(--mainColor);
 }
+body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+  @include padding-right(0);
+}
 body .p-dropdown .p-dropdown-label {
-  @include padding-right(2em);
+  background: transparent;
+  border: 0 none;
 }
+body .p-dropdown .p-dropdown-label.p-placeholder {
+  color: #6c757d;
+}
+body .p-dropdown .p-dropdown-label:enabled:focus {
+  outline: 0 none;
+  box-shadow: none;
+}
+
 body .p-dropdown .p-dropdown-trigger {
-  background-color: #ffffff;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
+  background-color: transparent;
+  width: 2rem;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
   color: #848484;
 }
 body .p-dropdown .p-dropdown-clear-icon {
   color: #848484;
+  right: 2rem;
 }
 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
   @include padding-right(4em);
 }
 body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
   background-color: #ffffff;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border: 0 none;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 body .p-dropdown-panel .p-dropdown-filter-container {
   padding: 0.429em 0.857em 0.429em 0.857em;
@@ -611,10 +622,12 @@ p-table {
       justify-content: center;
       align-items: center;
 
-      .p-dropdown {
-        position: absolute;
-        top: 10px;
-        left: 0;
+      p-dropdown {
+        .p-dropdown {
+          @include padding-left(0.5rem);
+
+          align-items: center;
+        }
 
         &.p-focus {
           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
@@ -632,15 +645,16 @@ p-table {
       }
 
       .p-paginator-current {
-        position: absolute;
-        right: 0;
         color: pvar(--inputPlaceholderColor);
         overflow: visible;
+      }
 
-        @media screen and (max-width: $small-view) {
-          left: 0;
-          top: 40px;
-        }
+      .p-paginator-first {
+        margin-left: auto;
+      }
+
+      .p-paginator-last {
+        margin-right: auto;
       }
 
       .p-paginator-first,
@@ -661,38 +675,17 @@ p-table {
           background-color: #fff !important;
         }
 
-        &.p-paginator-first {
-          .p-paginator-icon {
-            width: 18px;
-            height: 18px;
-            background: url('../assets/images/feather/skip-back.svg') no-repeat;
-            background-size: contain;
-          }
+        .p-paginator-icon {
+          width: 18px;
+          height: 18px;
         }
 
         &.p-paginator-prev {
           @include margin-right(10px);
-
-          .p-paginator-icon {
-            @include chevron-left-default;
-          }
         }
 
         &.p-paginator-next {
           @include margin-left(10px);
-
-          .p-paginator-icon {
-            @include chevron-right-default;
-          }
-        }
-
-        &.p-paginator-last {
-          .p-paginator-icon {
-            width: 18px;
-            height: 18px;
-            background: url('../assets/images/feather/skip-forward.svg') no-repeat;
-            background-size: contain;
-          }
         }
       }
 
@@ -742,19 +735,15 @@ p-table {
     }
   }
 
-  @media screen and (max-width: #{breakpoint(lg)}) {
-    // Prevent overflow
+  @media screen and (max-width: $small-view) {
     p-paginator {
-      .p-paginator-current,
-      .p-dropdown {
-        top: 0;
-        margin-top: 30px;
+      .p-paginator-current {
+        display: none !important;
       }
     }
   }
 
   @media screen and (max-width: $mobile-view) {
-    // Prevent overflow
     p-paginator {
       .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
         display: none;