test title bar

src/platforms/electron/createWindow.js

@@ -19,6 +19,7 @@ export default appState => {
     backgroundColor: '#2f9176',
     minWidth: 950,
     minHeight: 600,
+    titleBarStyle: 'hidden',
     autoHideMenuBar: true,
     show: false,
     // Create the window using the state information.

src/ui/component/header/view.jsx

@@ -35,14 +35,15 @@ const Header = (props: Props) => {
 
   return (
     <header className="header">
+      <div className="title-bar" />
       <div className="header__contents">
         <div className="header__navigation">
-          {/* <Button
-          className="header__navigation-item header__navigation-item--lbry"
-          label={__('LBRY')}
-          iconRight={ICONS.LBRY}
-          navigate="/"
-        /> */}
+          <Button
+            className="header__navigation-item header__navigation-item--lbry"
+            label={__('LBRY')}
+            icon={ICONS.LBRY}
+            navigate="/"
+          />
           {/* @if TARGET='app' */}
           <div className="header__navigation-arrows">
             <Button
@@ -67,13 +68,6 @@ const Header = (props: Props) => {
         <WunderBar />
 
         <div className="header__navigation">
-          <Button
-            className="header__navigation-item header__navigation-item--menu"
-            description={__('Menu')}
-            icon={ICONS.MENU}
-            iconSize={15}
-          />
-
           <Button
             className="header__navigation-item header__navigation-item--right-action"
             activeClass="header__navigation-item--active"
@@ -131,13 +125,6 @@ const Header = (props: Props) => {
             iconSize={24}
             navigate="/$/settings"
           />
-          <Button
-            className="header__navigation-item header__navigation-item--right-action"
-            activeClass="header__navigation-item--active"
-            icon={ICONS.HELP}
-            iconSize={24}
-            navigate="/$/help"
-          />
         </div>
       </div>
     </header>

src/ui/page/discover/view.jsx

@@ -24,7 +24,7 @@ function DiscoverPage(props) {
     if (personalSort === 'me') {
       options.any_tags = myTags.map(tag => tag.name);
     }
-    if (typeSort === 'best') {
+    if (typeSort === 'trending') {
       options.order_by = ['trending_global', 'trending_mixed'];
     } else if (typeSort === 'new') {
       options.order_by = ['release_time'];

src/ui/scss/component/_file-list.scss

@@ -85,7 +85,6 @@
 }
 
 .file-list__item-title {
-  font-size: 1.2em;
   font-weight: 600;
 }
 

src/ui/scss/component/_header.scss

@@ -1,8 +1,9 @@
 .header {
   position: fixed;
+  top: 0;
   width: 100%;
   background-color: $lbry-white;
-  height: var(--header-height);
+  height: calc(var(--header-height) + 2rem);
   z-index: 1;
   border-bottom: 1px solid $lbry-gray-1;
 }
@@ -34,7 +35,7 @@
 
 .header__navigation-arrows {
   display: flex;
-  margin-left: -1rem;
+  margin: 0 var(--spacing-vertical-small);
 
   .button__content {
     justify-content: center;
@@ -79,9 +80,8 @@
 }
 
 .header__navigation-item--back,
-.header__navigation-item--forward,
-.header__navigation-item--menu {
-  width: var(--header-height);
+.header__navigation-item--forward {
+  width: 3rem;
 }
 
 .header__navigation-item--lbry {
@@ -107,15 +107,6 @@
   margin-right: var(--spacing-vertical-large);
 }
 
-.header__navigation-item--right-action:not(:last-child),
-.header__navigation-item--lbry {
-  // border-right: 1px solid $lbry-gray-1;
-
-  html[data-mode='dark'] & {
-    // border-right: 1px solid $lbry-gray-5;
-  }
-}
-
 .header__navigation-item--upgrade {
   background-color: $lbry-teal-5;
   color: $lbry-white;
@@ -128,22 +119,10 @@
   }
 }
 
-.header__navigation-item--menu {
-  // Add this back once we have an actual menu for mobile
-  // @media (min-width: 601px) {
-  display: none;
-  // }
-}
-
-// Hide links that will live in the menu bar
 @media (max-width: 600px) {
   .header__navigation-item--back,
   .header__navigation-item--forward,
   .header__navigation-item--right-action {
     display: none;
   }
-
-  .header__navigation-item--lbry {
-    padding: var(--spacing-vertical-medium);
-  }
 }

src/ui/scss/component/_main.scss

@@ -1,3 +1,10 @@
+.title-bar {
+  -webkit-app-region: drag;
+  width: 100%;
+  height: 2rem;
+  -webkit-app-region: drag;
+}
+
 .main-wrapper {
   position: absolute;
   min-height: 100vh;

src/ui/scss/component/_tags.scss

@@ -27,7 +27,8 @@ $main: $lbry-teal-5;
 
 .tag {
   user-select: none;
-  display: inline-block;
+  display: flex;
+  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/ui/scss/component/_wunderbar.scss

@@ -4,9 +4,11 @@
 
   cursor: text;
   display: flex;
+  align-items: center;
   flex: 1;
   position: relative;
   z-index: 1;
+  margin-right: var(--spacing-main-padding);
 
   html[data-mode='dark'] & {
     border-color: $lbry-gray-5;
@@ -38,14 +40,26 @@
 
 .wunderbar__input {
   width: 100%;
-  height: 100%;
 
+  height: var(--button-height);
+  border-radius: var(--button-radius);
+  background-color: $lbry-gray-1;
   align-items: center;
   border: none;
   display: flex;
   justify-content: center;
-  padding-left: var(--spacing-vertical-xlarge);
-  transition: background-color 0.2s;
+  padding-left: 2.5rem;
+  transition: all 0.2s;
+  color: $lbry-black;
+
+  &:focus {
+    border-radius: var(--input-border-radius);
+  }
+
+  &::placeholder {
+    color: $lbry-black;
+    opacity: 0.7;
+  }
 
   html[data-mode='dark'] & {
     color: $lbry-white;

src/ui/scss/init/_vars.scss

@@ -48,7 +48,7 @@ $large-breakpoint: 1921px;
   --button-height: 2.6rem;
 
   // Header
-  --header-height: 3.5rem;
+  --header-height: 4.5rem;
 
   // Header -> search
   --search-modal-input-height: 70px;