fix: redesign tabs slightly (#1178)

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;

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>

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'
 

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>

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;