From b205aaeee58f0d7c0a15ec0ccf42fd7b5883d25f Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Thu, 23 Sep 2021 06:42:30 +0000
Subject: [PATCH] Style improvements to Channel & Trending pages (#1736)

* Fixes #1733

* Improves Trending & Channel tab styling

Removes :focus styling for unintended effects with auto-focusing on Trending page. Replaces underline with bold text weight & primary color bottom border on selected/active tab. Replaces animated background color change with bold text weight on tab:hover. Changes inactive tab color to tertiary. Removes unnecessary margin beneath tabs. Removes some of the empty vertical space between Channel info section & channel banner. Adds margin changes to maintain good appearance on smaller screens.
---
 src/renderer/views/Channel/Channel.css   | 26 +++++++++++++++---------
 src/renderer/views/Trending/Trending.css | 20 +++++++++---------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 4a2657fa..42a2699d 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -21,6 +21,7 @@
   width: 100%;
   position: relative;
   background-color: var(--card-bg-color);
+  margin-top: 10px;
 }
 
 .channelInfo {
@@ -52,7 +53,8 @@
 .subscribeButton {
   height: 50px;
   min-width: 150px;
-  align-self: center
+  align-self: center;
+  margin-bottom: 10px;
 }
 
 .channelSearch {
@@ -67,6 +69,8 @@
 .channelInfoTabs {
   position: relative;
   width: 100%;
+  margin-top: -16px;
+  margin-bottom: -13px;
 }
 
 .tab {
@@ -74,21 +78,19 @@
   font-size: 15px;
   cursor: pointer;
   align-self: flex-end;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
+  color: var(--tertiary-text-color);
 }
 
 .selectedTab {
-  text-decoration: underline;
+  color: var(--primary-text-color);
+  border-bottom: 3px solid var(--primary-color);
+  margin-bottom: -3px;
+  font-weight: bold;
+  box-sizing: border-box;
 }
 
 .tab:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
+  font-weight: bold;
 }
 
 .aboutTab {
@@ -105,6 +107,10 @@
   white-space: pre-wrap;
 }
 
+.channelSearch {
+  margin-top: 10px;
+}
+
 .elementList {
   margin-top: 15px;
 }
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index 25aefeb0..3f5bf94d 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -14,10 +14,17 @@
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
+  margin-top: -3px;
+  color: var(--tertiary-text-color);
+  margin-bottom: 10px;
 }
 
 .selectedTab {
-  text-decoration: underline;
+  border-bottom: 3px solid var(--primary-color);
+  color: var(--primary-text-color);
+  font-weight: bold;
+  box-sizing: border-box;
+  margin-bottom: -3px;
 }
 
 .tab {
@@ -26,17 +33,10 @@
   font-size: 15px;
   cursor: pointer;
   align-self: flex-end;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
 }
 
-.tab:hover, .tab:focus {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
+.tab:hover {
+  font-weight: bold;
 }
 
 @media only screen and (max-width: 350px) {