From a9f436990a770a6ebd650f6ca166b4830d323133 Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Fri, 15 Apr 2022 11:07:00 -0400
Subject: [PATCH] fix pagination styling

---
 static/app-strings.json            |  1 +
 ui/component/common/paginate.jsx   |  5 +++--
 ui/scss/component/_form-field.scss | 22 ++++++++++------------
 ui/scss/component/_pagination.scss | 23 ++++++++++-------------
 4 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 2661cf9e9..0b7f246ca 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2323,5 +2323,6 @@
   "You followed @rossmanngroup!": "You followed @rossmanngroup!",
   "%repost% %publish%": "%repost% %publish%",
   "Failed to view lbry://@MicheL-PDF#7/LaDameAuPain#f, please try again. If this problem persists, visit https://lbry.com/faq/support for support.": "Failed to view lbry://@MicheL-PDF#7/LaDameAuPain#f, please try again. If this problem persists, visit https://lbry.com/faq/support for support.",
+  "Go to": "Go to",
   "--end--": "--end--"
 }
diff --git a/ui/component/common/paginate.jsx b/ui/component/common/paginate.jsx
index 6d321a5b0..e0e095140 100644
--- a/ui/component/common/paginate.jsx
+++ b/ui/component/common/paginate.jsx
@@ -81,8 +81,9 @@ function Paginate(props: Props) {
           <FormField
             value={textValue}
             onChange={(e) => setTextValue(e.target.value)}
-            className="paginate-channel"
-            label={__('Go to page:')}
+            className="paginate-goto"
+            aria-label={__('Go to page:')}
+            placeholder={__('Go to')}
             type="text"
             name="paginate-file"
           />
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 56e5fc9b3..c68788a80 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -358,16 +358,13 @@ fieldset-group {
       }
 
       &:nth-of-type(2) {
-        &:not(input.paginate-channel) {
-          // yuck
-          input,
-          select {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
-          label {
-            margin-left: var(--spacing-s);
-          }
+        input,
+        select {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        label {
+          margin-left: var(--spacing-s);
         }
       }
     }
@@ -375,13 +372,14 @@ fieldset-group {
     &.fieldgroup--paginate {
       padding-bottom: var(--spacing-l);
       margin-top: var(--spacing-l);
-      align-items: flex-end;
+      align-items: center;
       justify-content: center;
 
       fieldset-section {
         input {
-          margin-bottom: 5px !important;
           margin-left: var(--spacing-s);
+          border-radius: calc(var(--height-button) / 2);
+          height: var(--height-button);
         }
       }
     }
diff --git a/ui/scss/component/_pagination.scss b/ui/scss/component/_pagination.scss
index fa59c7942..9b0083863 100644
--- a/ui/scss/component/_pagination.scss
+++ b/ui/scss/component/_pagination.scss
@@ -10,11 +10,14 @@
   @media (max-width: $breakpoint-small) {
     font-size: var(--font-small);
   }
+  .pagination__item {
+    margin-bottom: 0;
+  }
 }
 
 .pagination__item {
-  width: 3rem;
-  height: 3rem;
+  width: var(--height-button);
+  height: var(--height-button);
 
   border-radius: 50%;
   text-align: center;
@@ -24,8 +27,6 @@
   }
 
   &:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover {
-    color: var(--color-primary);
-
     &:hover {
       background-color: var(--color-button-secondary-bg-hover);
     }
@@ -33,12 +34,11 @@
 
   &:not(.pagination__item--previous):not(.pagination__item--next) {
     font-weight: var(--font-weight-bold);
-    line-height: 3rem;
+    line-height: var(--height-button);
     margin: 0 0.5em;
   }
-
-  &:not(.pagination__item--break):not(.disabled) {
-    background-color: var(--color-header-background);
+  &:not(.pagination__item--selected) {
+    background-color: unset;
     cursor: pointer;
   }
 
@@ -64,18 +64,15 @@
 
 .pagination__item--previous,
 .pagination__item--next {
-  line-height: 1.5;
-  position: relative;
-  padding-top: var(--spacing-s);
+  line-height: var(--height-button);
   background-color: var(--color-header-background);
-  margin-bottom: 0px !important;
 }
 
 .pagination__item--selected {
   background-color: var(--color-button-secondary-bg);
 }
 
-.paginate-channel {
+.paginate-goto {
   width: 5rem;
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);