From 0fe07b05c01d2cbe416be0f6f9bf97a28199988c Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 8 Jan 2020 14:20:30 -0500
Subject: [PATCH] mobile cleanup plus some font fixes

---
 ui/component/common/paginate.jsx   | 20 ++++++++++++--------
 ui/scss/component/_claim-list.scss |  8 ++++----
 ui/scss/component/_comments.scss   |  3 +--
 ui/scss/component/_media.scss      |  1 +
 ui/scss/component/_navigation.scss |  1 +
 ui/scss/component/_pagination.scss | 14 ++++++++++++++
 ui/scss/component/section.scss     |  2 +-
 ui/scss/init/_gui.scss             |  2 +-
 8 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/ui/component/common/paginate.jsx b/ui/component/common/paginate.jsx
index 078d59a8a..18da66771 100644
--- a/ui/component/common/paginate.jsx
+++ b/ui/component/common/paginate.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import { Form, FormField } from 'component/common/form';
 import ReactPaginate from 'react-paginate';
+import useIsMobile from 'effects/use-is-mobile';
 
 const PAGINATE_PARAM = 'page';
 
@@ -20,6 +21,7 @@ function Paginate(props: Props) {
   const [textValue, setTextValue] = React.useState('');
   const urlParams = new URLSearchParams(search);
   const currentPage = Number(urlParams.get(PAGINATE_PARAM)) || 1;
+  const isMobile = useIsMobile();
 
   function handleChangePage(newPageNumber: number) {
     if (onPageChange) {
@@ -63,14 +65,16 @@ function Paginate(props: Props) {
             containerClassName="pagination"
           />
         </fieldset-section>
-        <FormField
-          value={textValue}
-          onChange={e => setTextValue(e.target.value)}
-          className="paginate-channel"
-          label={__('Go to page:')}
-          type="text"
-          name="paginate-file"
-        />
+        {!isMobile && (
+          <FormField
+            value={textValue}
+            onChange={e => setTextValue(e.target.value)}
+            className="paginate-channel"
+            label={__('Go to page:')}
+            type="text"
+            name="paginate-file"
+          />
+        )}
       </fieldset-group>
     </Form>
   );
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index a3b358c50..320f25257 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -81,13 +81,13 @@
     font-size: 14px;
 
     .media__thumb {
-      width: 4rem;
-      height: 2.25rem;
+      width: 5rem;
+      height: 3rem;
     }
 
     .channel-thumbnail {
-      width: 4rem;
-      height: 4rem;
+      width: 5rem;
+      height: 5rem;
     }
   }
 }
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 050a9289e..7fb1418a9 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -3,11 +3,10 @@
 }
 
 .comment {
-  font-size: var(--font-multiplier-small);
   padding: var(--spacing-small) 0;
   display: flex;
   flex-direction: row;
-  font-size: var(--font-small);
+  font-size: var(--font-body);
   padding: var(--spacing-medium) 0;
   margin: 0;
 
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index 180be943c..96521d75e 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -66,6 +66,7 @@
 .media__subtitle {
   align-self: flex-start;
   color: var(--color-text-subtitle);
+  font-size: var(--font-small);
 
   svg {
     stroke: var(--color-text-subtitle);
diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss
index a905f1cf6..2b1c676c1 100644
--- a/ui/scss/component/_navigation.scss
+++ b/ui/scss/component/_navigation.scss
@@ -5,6 +5,7 @@
 
   @media (max-width: $breakpoint-small) {
     display: none;
+    margin-left: 0;
   }
 }
 
diff --git a/ui/scss/component/_pagination.scss b/ui/scss/component/_pagination.scss
index 63207f536..98dcec32d 100644
--- a/ui/scss/component/_pagination.scss
+++ b/ui/scss/component/_pagination.scss
@@ -6,6 +6,10 @@
   + .form-field {
     margin-left: var(--spacing-medium);
   }
+
+  @media (max-width: $breakpoint-small) {
+    font-size: var(--font-small);
+  }
 }
 
 .pagination__item {
@@ -41,6 +45,16 @@
     display: block;
     height: 100%;
   }
+
+  @media (max-width: $breakpoint-small) {
+    width: 2rem;
+    height: 2rem;
+
+    &:not(.pagination__item--previous):not(.pagination__item--next) {
+      font-weight: var(--font-weight-bold);
+      line-height: 2rem;
+    }
+  }
 }
 
 .pagination__item--break {
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 10251ab73..312b89097 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -46,7 +46,7 @@
 .section__title--small {
   @extend .section__title;
   font-size: var(--font-body);
-  margin-top: var(--spacing-small);
+  margin-top: var(--spacing-medium);
 }
 
 .section__title--large {
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 4e15382d4..7fe122083 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -18,7 +18,7 @@ html {
 
   color: var(--color-text);
   background-color: var(--color-background);
-  font-size: 14px;
+  font-size: 16px;
 }
 
 body {