cleanup

static/app-strings.json

@@ -915,12 +915,7 @@
   "Support %amount% LBC": "Support %amount% LBC",
   "You deposited %amount% LBC as a support!": "You deposited %amount% LBC as a support!",
   "LBRY Link": "LBRY Link",
-  "Publish to %uri%": "Publish to %uri%",
   "Your wallet": "Your wallet",
   "Publish a file, or create a channel": "Publish a file, or create a channel",
-  "Your account": "Your account",
+  "Your account": "Your account"
-  "Channel profile picture": "Channel profile picture",
-  "refreshing the app": "refreshing the app",
-  "Follower": "Follower",
-  "%repost_channel_link% reposted": "%repost_channel_link% reposted"
 }

ui/component/navigationButton/view.jsx

@@ -9,7 +9,7 @@ const MAX_HISTORY_SIZE = 12;
 type Props = {
   isBackward: boolean,
   history: {
-    entries: { key: string, title: string }[],
+    entries: Array<{ key: string, title: string, pathname: string }>,
     go: number => void,
     goBack: () => void,
     goForward: () => void,
@@ -44,19 +44,22 @@ const NavigationButton = (props: Props) => {
 
   // creates an <li> intended for the button's <ul>
   const makeItem = useCallback(
-    (entry, index) => {
+    (entry: { pathname: string, title: string, key: string }, index: number) => {
       // difference between the current index and the index of the entry
       const backwardDif = index - (currentIndex < MAX_HISTORY_SIZE ? currentIndex : MAX_HISTORY_SIZE);
       const forwardDif = index + 1;
       return (
         <li
+          className="header__navigation-button"
+          role="link"
           key={entry.key}
           onMouseDown={() => {
             setShowHistory(false);
             go(isBackward ? backwardDif : forwardDif);
           }}
         >
-          {entry.title}
+          <span>{entry.title}</span>
+          <span className="header__navigation-button-help">{entry.pathname === '/' ? __('Home') : entry.pathname}</span>
         </li>
       );
     },
@@ -81,7 +84,7 @@ const NavigationButton = (props: Props) => {
         iconSize={18}
         disabled={slicedEntries.length === 0}
       />
-      {showHistory && <ul className={'header__navigaiton-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
+      {showHistory && <ul className={'header__navigation-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
     </div>
   );
 };

ui/component/router/view.jsx

@@ -87,17 +87,22 @@ function AppRouter(props: Props) {
     uri,
     title,
   } = props;
-  const { channelName, streamName } = parseURI(uri);
   const { entries } = history;
   const entryIndex = history.index;
 
   useEffect(() => {
-    if (typeof title !== 'undefined' && title !== '') {
+    if (uri) {
-      document.title = title;
+      const { channelName, streamName } = parseURI(uri);
-    } else if (typeof streamName !== 'undefined' && streamName !== 'undefined' && streamName !== '') {
+
-      document.title = streamName;
+      if (typeof title !== 'undefined' && title !== '') {
-    } else if (typeof channelName !== 'undefined' && channelName !== '') {
+        document.title = title;
-      document.title = channelName;
+      } else if (streamName) {
+        document.title = streamName;
+      } else if (channelName) {
+        document.title = channelName;
+      } else {
+        document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+      }
     } else {
       document.title = IS_WEB ? SITE_TITLE : 'LBRY';
     }
@@ -108,7 +113,7 @@ function AppRouter(props: Props) {
     return () => {
       document.title = IS_WEB ? SITE_TITLE : 'LBRY';
     };
-  }, [channelName, entries, entryIndex, streamName, title]);
+  }, [entries, entryIndex, title, uri]);
 
   useEffect(() => {
     window.scrollTo(0, currentScroll);

ui/scss/component/_header.scss

@@ -148,19 +148,28 @@
   margin: 0 var(--spacing-medium);
 }
 
-.header__navigaiton-dropdown {
+.header__navigation-dropdown {
+  @extend .menu__list--header;
+  padding: 0;
   position: absolute;
   list-style-type: none;
   background-color: var(--color-header-background);
-  margin-top: 19px;
+}
 
-  li {
+.header__navigation-button {
-    margin: 0;
+  margin: 0;
-    padding: 2px 5px;
+  padding: var(--spacing-miniscule) var(--spacing-medium);
+  display: flex;
+  align-items: center;
 
-    &:hover {
+  &:hover {
-      cursor: pointer;
+    cursor: pointer;
-      background-color: var(--color-menu-background--active);
+    background-color: var(--color-menu-background--active);
-    }
   }
 }
+
+.header__navigation-button-help {
+  @extend .help;
+  margin-top: 0;
+  margin-left: var(--spacing-small);
+}

ui/scss/component/menu-button.scss

@@ -55,6 +55,8 @@
   margin-left: calc(var(--spacing-medium) * -1);
   box-shadow: var(--card-box-shadow);
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
 }
 
 .menu__link {