From de86b1edee0f8754e58c31e27c75fa2c4042e4f5 Mon Sep 17 00:00:00 2001
From: Bart <barthuijgen@users.noreply.github.com>
Date: Sun, 11 Apr 2021 11:05:22 +0200
Subject: [PATCH] fix: pagination showing wrong page and improved select
 stylign and a11y

---
 apps/blueprints/src/components/Pagination.tsx | 15 +++++++-
 apps/blueprints/src/components/Select.tsx     | 38 ++++++++++---------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/apps/blueprints/src/components/Pagination.tsx b/apps/blueprints/src/components/Pagination.tsx
index eb6412c..743324c 100644
--- a/apps/blueprints/src/components/Pagination.tsx
+++ b/apps/blueprints/src/components/Pagination.tsx
@@ -30,7 +30,7 @@ export const Pagination: React.FC<BoxProps & PaginationProps> = ({
     <StyledPagination>
       {totalPages > 1 && (
         <ReactPaginate
-          initialPage={page}
+          initialPage={page - 1}
           pageRangeDisplayed={4}
           marginPagesDisplayed={2}
           pageCount={totalPages}
@@ -76,7 +76,8 @@ const StyledPagination = styled(Box)`
           0 0 4px 0 #000;
         background-color: #8e8e8e;
 
-        &:hover {
+        &:hover,
+        &:focus {
           color: #000;
           text-decoration: none;
           outline: 0;
@@ -100,6 +101,16 @@ const StyledPagination = styled(Box)`
         filter: none;
         outline: 0;
       }
+
+      &.disabled a,
+      &.disabled a:hover {
+        cursor: default;
+        filter: none;
+        background-color: #3d3d3d;
+        color: #818181;
+        box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 8px 4px -8px #000,
+          inset 0 -6px 4px -8px #818181, inset 0 -8px 4px -8px #000, 0 0 4px 0 #000;
+      }
     }
   }
 `;
diff --git a/apps/blueprints/src/components/Select.tsx b/apps/blueprints/src/components/Select.tsx
index bee9634..c0ed8e4 100644
--- a/apps/blueprints/src/components/Select.tsx
+++ b/apps/blueprints/src/components/Select.tsx
@@ -18,29 +18,33 @@ const StyledSelect = styled(MultiSelect)`
   color: black;
   &.rmsc {
     .dropdown-container {
+      outline: none;
       border: none;
-      border-radius: 0;
-      background-color: #8e8e8e;
-      box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
-        inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
-        0 0 4px 0 #000;
 
-      .gray {
-        color: #000 !important;
+      &:hover .dropdown-heading,
+      &:focus .dropdown-heading,
+      &[aria-expanded="true"] .dropdown-heading {
+        cursor: pointer;
+        color: #000;
+        text-decoration: none;
+        outline: 0;
+        box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 9px 2px -8px #fff,
+          inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000, inset 0 -9px 2px -8px #432400,
+          0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
+        background-color: #e39827;
+        filter: drop-shadow(0 0 2px #f9b44b);
       }
 
       .dropdown-heading {
-        cursor: pointer;
+        border: none;
+        border-radius: 0;
+        background-color: #8e8e8e;
+        box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
+          inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
+          0 0 4px 0 #000;
 
-        &:hover {
-          color: #000;
-          text-decoration: none;
-          outline: 0;
-          box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
-            inset 0 9px 2px -8px #fff, inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000,
-            inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
-          background-color: #e39827;
-          filter: drop-shadow(0 0 2px #f9b44b);
+        .gray {
+          color: #000 !important;
         }
       }
     }