From f797ea784f1c1103bdb714e9b8926f975991b4a3 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sun, 30 Jan 2022 14:27:49 -0600
Subject: [PATCH] page handling object better styled

---
 src/App.css                | 44 ++++++++++++++++++++++++++++++++++++++
 src/features/posts/Feed.js |  4 ++--
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index f4760fb..136efa4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -79,6 +79,10 @@
   width: 6rem;
 }
 
+.sidebar-button:hover {
+  background-color: rgb(218, 171, 216);
+}
+
 .sidebar-button:active {
   background-color: darkorchid;
   transition: background-color 35ms linear;
@@ -131,4 +135,44 @@
   display: hidden;
   flex-direction: column;
   align-items: center;
+}
+
+.page-handling {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem;
+  background-color: orchid;
+  border-radius: 15px;
+  width: 50%;
+  height: 3rem;
+}
+
+.page-handling button {
+  background-color: rgb(218, 171, 216);
+  border: transparent;
+  border-radius: 50%;
+  height: 3.5rem;
+  width: 3.5rem;
+  box-shadow:2rem rgb(111, 30, 151);
+}
+
+.page-handling button:hover {
+  background-color: rgb(202, 186, 201);
+}
+
+.page-handling button:active {
+  background-color: rgb(247, 233, 246);
+}
+
+#top-page-handling {
+  margin-bottom: -1rem;
+  margin-top: 2rem;
+}
+
+#bottom-page-handling {
+  margin-top: 5rem;
+  position: relative;
+  bottom: 6rem;
 }
\ No newline at end of file
diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index 2452d64..6d8cdf7 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -196,7 +196,7 @@ export default function Feed() {
         <>
         {feedPages ? 
 
-        <div className="page-handling">
+        <div className="page-handling" id="top-page-handling">
             <button className="decrement" onClick={handleDecrement}>-</button>
             <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
             <button className="increment" onClick={handleIncrement}>+</button>
@@ -207,7 +207,7 @@ export default function Feed() {
         {feedPages ? feedPages[currentPage] : <h1 className="loading-message">Loading cats for you...</h1>}
         {feedPages ? 
 
-        <div className="page-handling">
+        <div className="page-handling" id="bottom-page-handling">
             <button className="decrement" onClick={handleDecrement}>-</button>
             <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
             <button className="increment" onClick={handleIncrement}>+</button>