From de9faf46783847ce0ef4e0c2d544e50283f12a1e Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 5 May 2019 12:30:08 -0700
Subject: [PATCH] fix: redesign tabs slightly (#1178)

---
 src/routes/_components/TabSet.html                  | 13 +++++++------
 src/routes/_components/profile/AccountProfile.html  |  5 ++++-
 .../_components/profile/AccountProfileFilters.html  |  5 +++++
 .../_components/profile/AccountProfilePage.html     |  6 ++----
 src/scss/themes/_base.scss                          |  4 ++--
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/routes/_components/TabSet.html b/src/routes/_components/TabSet.html
index ca56341..a475b13 100644
--- a/src/routes/_components/TabSet.html
+++ b/src/routes/_components/TabSet.html
@@ -26,7 +26,7 @@
   ul {
     list-style: none;
     display: flex;
-    margin: 5px 0;
+    margin: 0;
     box-sizing: border-box;
   }
 
@@ -36,13 +36,14 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
     background: var(--tab-bg);
+    border-left: none;
   }
 
-  li:not(:first-child) {
-    border-left: none;
+  li:last-child {
+    border-right: none;
   }
 
   li:hover {
@@ -70,7 +71,7 @@
   }
 
   a {
-    padding: 10px;
+    padding: 7px 10px;
     color: var(--body-text-color);
     font-size: 1.1em;
     flex: 1;
diff --git a/src/routes/_components/profile/AccountProfile.html b/src/routes/_components/profile/AccountProfile.html
index e27c05e..1a762ac 100644
--- a/src/routes/_components/profile/AccountProfile.html
+++ b/src/routes/_components/profile/AccountProfile.html
@@ -13,6 +13,7 @@
       <AccountProfileDetails {account} {relationship} {verifyCredentials} />
     </div>
   </div>
+  <AccountProfileFilters account={$currentAccountProfile} {filter} />
 </div>
 <style>
   .account-profile {
@@ -82,6 +83,7 @@
   import AccountProfileMeta from './AccountProfileMeta.html'
   import AccountProfileDetails from './AccountProfileDetails.html'
   import AccountProfileMovedBanner from './AccountProfileMovedBanner.html'
+  import AccountProfileFilters from './AccountProfileFilters.html'
   import { store } from '../../_store/store'
   import { classname } from '../../_utils/classname'
 
@@ -105,7 +107,8 @@
       AccountProfileNote,
       AccountProfileMeta,
       AccountProfileDetails,
-      AccountProfileMovedBanner
+      AccountProfileMovedBanner,
+      AccountProfileFilters
     }
   }
 </script>
diff --git a/src/routes/_components/profile/AccountProfileFilters.html b/src/routes/_components/profile/AccountProfileFilters.html
index 3223bdb..b900101 100644
--- a/src/routes/_components/profile/AccountProfileFilters.html
+++ b/src/routes/_components/profile/AccountProfileFilters.html
@@ -4,6 +4,11 @@
   {tabs}
   className="account-profile-filters"
 />
+<style>
+  :global(.account-profile-filters) {
+    background: var(--account-profile-bg);
+  }
+</style>
 <script>
   import TabSet from '../TabSet.html'
 
diff --git a/src/routes/_components/profile/AccountProfilePage.html b/src/routes/_components/profile/AccountProfilePage.html
index 6f4ce2c..c3c1057 100644
--- a/src/routes/_components/profile/AccountProfilePage.html
+++ b/src/routes/_components/profile/AccountProfilePage.html
@@ -5,8 +5,8 @@
   <AccountProfile account={$currentAccountProfile}
                   relationship={$currentAccountRelationship}
                   verifyCredentials={$currentVerifyCredentials}
+                  {filter}
   />
-  <AccountProfileFilters account={$currentAccountProfile} {filter} />
   {/if}
   {#if !filter}
     <PinnedStatuses {accountId} />
@@ -30,7 +30,6 @@
   import { updateProfileAndRelationship, clearProfileAndRelationship } from '../../_actions/accounts'
   import AccountProfile from './AccountProfile.html'
   import PinnedStatuses from '../timeline/PinnedStatuses.html'
-  import AccountProfileFilters from './AccountProfileFilters.html'
 
   export default {
     oncreate () {
@@ -59,8 +58,7 @@
       HiddenFromSSR,
       DynamicPageBanner,
       AccountProfile,
-      PinnedStatuses,
-      AccountProfileFilters
+      PinnedStatuses
     }
   }
 </script>
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index 4f9f8be..86a081e 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -104,8 +104,8 @@
   --tab-bg: #{$main-bg-color};
   --tab-bg-non-selected: #{darken($main-bg-color, 3%)};
   --tab-bg-active: #{darken($main-bg-color, 25%)};
-  --tab-bg-hover: #{darken($main-bg-color, 4%)};
-  --tab-bg-hover-non-selected: #{darken($main-bg-color, 7%)};
+  --tab-bg-hover: #{darken($main-bg-color, 2%)};
+  --tab-bg-hover-non-selected: #{darken($main-bg-color, 5%)};
 
   --tooltip-bg: rgba(30, 30, 30, 0.9);
   --tooltip-color: white;