Merge pull request #2450 from lbryio/fixes

Make alignment great again

package.json

@@ -59,7 +59,7 @@
     "@babel/register": "^7.0.0",
     "@hot-loader/react-dom": "16.8",
     "@lbry/color": "^1.0.2",
-    "@lbry/components": "^2.3.3",
+    "@lbry/components": "^2.7.0",
     "@types/three": "^0.93.1",
     "async-exit-hook": "^2.0.1",
     "babel-eslint": "^10.0.1",

src/ui/component/button/view.jsx

@@ -20,7 +20,6 @@ type Props = {
   description: ?string,
   type: string,
   button: ?string, // primary, secondary, alt, link
-  noPadding: ?boolean, // to remove padding and allow circular buttons
   iconColor?: string,
   iconSize?: number,
   constrict: ?boolean, // to shorten the button and ellipsis, only use for links
@@ -39,6 +38,8 @@ class Button extends React.PureComponent<Props> {
       title,
       label,
       icon,
+      // This should rarely be used. Regular buttons should just use `icon`
+      // `iconRight` is used for the header (home) button with the LBRY icon and external links that are displayed inline
       iconRight,
       disabled,
       children,
@@ -47,7 +48,6 @@ class Button extends React.PureComponent<Props> {
       description,
       button,
       type,
-      noPadding,
       iconColor,
       iconSize,
       constrict,
@@ -57,9 +57,6 @@ class Button extends React.PureComponent<Props> {
 
     const combinedClassName = classnames(
       'button',
-      {
-        'button--no-padding': noPadding,
-      },
       button
         ? {
           'button--primary': button === 'primary',

src/ui/component/categoryList/view.jsx

@@ -272,20 +272,18 @@ class CategoryList extends PureComponent<Props, State> {
     return (
       <section className="media-group--row">
         <header className="media-group__header">
-          <div className="media-group__header-title">
+          <h2 className="media-group__header-title">
             {categoryLink ? (
-              <div className="channel-info__actions">
+              <React.Fragment>
-                <div className="channel-info__actions__group">
+                <Button label={category} navigate={channelLink} />
-                  <Button label={category} navigate={channelLink} />
+                <SubscribeButton
-                  <SubscribeButton
+                  button="alt"
-                    button="alt"
+                  showSnackBarOnSubscribe
-                    showSnackBarOnSubscribe
+                  uri={`lbry://${categoryLink}`}
-                    uri={`lbry://${categoryLink}`}
+                />
-                  />
+              </React.Fragment>
-                </div>
-              </div>
             ) : (
-              category
+              <span>{category}</span>
             )}
             {isCommunityTopBids && (
               <ToolTip
@@ -296,7 +294,7 @@ class CategoryList extends PureComponent<Props, State> {
                 )}
               />
             )}
-          </div>
+          </h2>
           {showScrollButtons && (
             <nav className="media-group__header-navigation">
               <Button

src/ui/component/common/icon.jsx

@@ -65,7 +65,9 @@ class IconComponent extends React.PureComponent<Props> {
       tooltipText = this.getTooltip(icon);
     }
 
-    const inner = <Icon size={iconSize} className={classnames('icon', className)} color={color} />;
+    const inner = (
+      <Icon size={iconSize} className={classnames(`icon icon--${icon}`, className)} color={color} />
+    );
 
     return tooltipText ? (
       <Tooltip icon body={tooltipText} direction={tooltip}>

src/ui/component/header/view.jsx

@@ -44,24 +44,22 @@ const Header = (props: Props) => {
           navigate="/"
         />
         {/* @if TARGET='app' */}
-        <div className="header__navigation-app">
+        <div className="header__navigation-arrows">
-          <div className="header__navigation-arrows">
+          <Button
-            <Button
+            className="header__navigation-item header__navigation-item--back"
-              className="header__navigation-item header__navigation-item--back"
+            description={__('Navigate back')}
-              description={__('Navigate back')}
+            onClick={() => window.history.back()}
-              onClick={() => window.history.back()}
+            icon={ICONS.ARROW_LEFT}
-              icon={ICONS.ARROW_LEFT}
+            iconSize={15}
-              iconSize={15}
+          />
-            />
 
-            <Button
+          <Button
-              className="header__navigation-item header__navigation-item--forward"
+            className="header__navigation-item header__navigation-item--forward"
-              description={__('Navigate forward')}
+            description={__('Navigate forward')}
-              onClick={() => window.history.forward()}
+            onClick={() => window.history.forward()}
-              icon={ICONS.ARROW_RIGHT}
+            icon={ICONS.ARROW_RIGHT}
-              iconSize={15}
+            iconSize={15}
-            />
+          />
-          </div>
         </div>
         {/* @endif */}
       </div>
@@ -77,7 +75,8 @@ const Header = (props: Props) => {
         />
 
         <Button
-          className="header__navigation-item header__navigation-item--wallet"
+          className="header__navigation-item header__navigation-item--right-action"
+          activeClass="header__navigation-item--active"
           description={__('Your wallet')}
           title={`Your balance is ${balance} LBRY Credits`}
           label={
@@ -102,7 +101,7 @@ const Header = (props: Props) => {
 
         {showUpgradeButton && (
           <Button
-            className="header__navigation-item header__navigation-item--right-action"
+            className="header__navigation-item header__navigation-item--right-action header__navigation-item--upgrade"
             icon={ICONS.DOWNLOAD}
             iconSize={24}
             label={__('Upgrade App')}

src/ui/component/subscribeMarkAsRead/view.jsx

@@ -30,13 +30,7 @@ export default class MarkAsRead extends PureComponent<Props> {
     const { channel } = this.props;
     const label = channel ? __('Mark as read') : __('Mark all as read');
     return (
-      <Button
+      <Button button="inverse" icon={ICONS.COMPLETE} label={label} onClick={this.handleClick} />
-        noPadding
-        button="inverse"
-        icon={ICONS.COMPLETE}
-        label={label}
-        onClick={this.handleClick}
-      />
     );
   }
 }

src/ui/component/uriIndicator/view.jsx

@@ -56,7 +56,7 @@ class UriIndicator extends React.PureComponent<Props> {
     }
 
     return (
-      <Button noPadding className="button--uri-indicator" navigate={channelLink}>
+      <Button className="button--uri-indicator" navigate={channelLink}>
         {inner}
       </Button>
     );

src/ui/component/wunderbar/view.jsx

@@ -154,7 +154,7 @@ class WunderBar extends React.PureComponent<Props, State> {
                 this.input = el;
               }}
               className="wunderbar__input"
-              placeholder="Enter LBRY URL here or search for videos, music, games and more"
+              placeholder="Enter a LBRY URL here or search for videos, music, games and more"
             />
           )}
           renderItem={({ value, type }, isHighlighted) => (

src/ui/page/account/view.jsx

@@ -16,8 +16,6 @@ const WalletPage = () => (
         <WalletBalance />
         <RewardSummary />
       </div>
-      <WalletSend />
-      <WalletAddress />
       <TransactionListRecent />
     </div>
   </Page>

src/ui/page/help/view.jsx

@@ -181,7 +181,7 @@ class HelpPage extends React.PureComponent<Props, State> {
               />
             </div>
 
-            <div className="card__meta">{__('Thanks! LBRY is made by its users.')}</div>
+            <div className="help">{__('Thanks! LBRY is made by its users.')}</div>
           </div>
         </section>
 

src/ui/page/subscriptions/internal/user-subscriptions.jsx

@@ -41,7 +41,7 @@ export default (props: Props) => {
             <div className="card__actions card__actions--no-margin">
               <Button
                 disabled={viewMode === VIEW_ALL}
-                selected={viewMode === VIEW_ALL}
+                className={viewMode === VIEW_ALL && 'button--subscription-view-selected'}
                 button="link"
                 label="All Subscriptions"
                 onClick={() => doSetViewMode(VIEW_ALL)}
@@ -49,7 +49,7 @@ export default (props: Props) => {
               <Button
                 button="link"
                 disabled={viewMode === VIEW_LATEST_FIRST}
-                selected={viewMode === VIEW_LATEST_FIRST}
+                className={viewMode === VIEW_LATEST_FIRST && 'button--subscription-view-selected'}
                 label={__('Latest Only')}
                 onClick={() => doSetViewMode(VIEW_LATEST_FIRST)}
               />
@@ -92,8 +92,8 @@ export default (props: Props) => {
         <div className="card__content">
           {viewMode === VIEW_ALL && (
             <Fragment>
-              <div className="card__title--flex">
+              <div className="card__title card__title--flex">
-                <h2 className="card__title">{__('Your subscriptions')}</h2>
+                <span>{__('Your subscriptions')}</span>
                 {unreadSubscriptions.length > 0 && <MarkAsRead />}
               </div>
               <FileList hideFilter sortByHeight fileInfos={subscriptions} />
@@ -106,20 +106,20 @@ export default (props: Props) => {
                 unreadSubscriptions.map(({ channel, uris }) => {
                   const { claimName } = parseURI(channel);
                   return (
-                    <span>
+                    <section key={channel}>
                       <h2 className="card__title card__title--flex">
                         <Button button="link" navigate={channel} label={claimName} />
                         <MarkAsRead channel={channel} />
                       </h2>
 
-                      <section className="media-group--list" key={channel}>
+                      <section className="media-group--list">
                         <ul className="card__list">
                           {uris.map(uri => (
                             <FileCard key={uri} uri={uri} />
                           ))}
                         </ul>
                       </section>
-                    </span>
+                    </section>
                   );
                 })
               ) : (

src/ui/redux/selectors/file_info.js

@@ -119,104 +119,6 @@ export const selectTotalDownloadProgress = createSelector(
   }
 );
 
-export const selectSearchDownloadUris = query =>
-  createSelector(
-    selectFileInfosDownloaded,
-    selectClaimsById,
-    (fileInfos, claimsById) => {
-      if (!query || !fileInfos.length) {
-        return null;
-      }
-
-      const queryParts = query.toLowerCase().split(' ');
-      const searchQueryDictionary = {};
-      queryParts.forEach(subQuery => {
-        searchQueryDictionary[subQuery] = subQuery;
-      });
-
-      const arrayContainsQueryPart = array => {
-        for (let i = 0; i < array.length; i += 1) {
-          const subQuery = array[i];
-          if (searchQueryDictionary[subQuery]) {
-            return true;
-          }
-        }
-        return false;
-      };
-
-      const downloadResultsFromQuery = [];
-      fileInfos.forEach(fileInfo => {
-        const { channel_name: channelName, claim_name: claimName, metadata } = fileInfo;
-        const { author, description, title } = metadata;
-
-        if (channelName) {
-          const lowerCaseChannel = channelName.toLowerCase();
-          const strippedOutChannelName = lowerCaseChannel.slice(1); // trim off the @
-          if (searchQueryDictionary[channelName] || searchQueryDictionary[strippedOutChannelName]) {
-            downloadResultsFromQuery.push(fileInfo);
-            return;
-          }
-        }
-
-        const nameParts = claimName.toLowerCase().split('-');
-        if (arrayContainsQueryPart(nameParts)) {
-          downloadResultsFromQuery.push(fileInfo);
-          return;
-        }
-
-        const titleParts = title.toLowerCase().split(' ');
-        if (arrayContainsQueryPart(titleParts)) {
-          downloadResultsFromQuery.push(fileInfo);
-          return;
-        }
-
-        if (author) {
-          const authorParts = author.toLowerCase().split(' ');
-          if (arrayContainsQueryPart(authorParts)) {
-            downloadResultsFromQuery.push(fileInfo);
-            return;
-          }
-        }
-
-        if (description) {
-          const descriptionParts = description.toLowerCase().split(' ');
-          if (arrayContainsQueryPart(descriptionParts)) {
-            downloadResultsFromQuery.push(fileInfo);
-          }
-        }
-      });
-
-      return downloadResultsFromQuery.length
-        ? downloadResultsFromQuery.map(fileInfo => {
-            const {
-              channel_name: channelName,
-              claim_id: claimId,
-              claim_name: claimName,
-            } = fileInfo;
-
-            const uriParams = {};
-
-            if (channelName) {
-              const claim = claimsById[claimId];
-              if (claim && claim.value) {
-                uriParams.claimId = claim.value.publisherSignature.certificateId;
-              } else {
-                uriParams.claimId = claimId;
-              }
-              uriParams.channelName = channelName;
-              uriParams.contentName = claimName;
-            } else {
-              uriParams.claimId = claimId;
-              uriParams.claimName = claimName;
-            }
-
-            const uri = buildURI(uriParams);
-            return uri;
-          })
-        : null;
-    }
-  );
-
 export const selectFileInfoErrors = createSelector(
   selectState,
   state => state.errors || {}

src/ui/scss/all.scss

@@ -22,6 +22,7 @@
 @import 'component/file-render';
 @import 'component/form-field';
 @import 'component/header';
+@import 'component/icon';
 @import 'component/item-list';
 @import 'component/load-screen';
 @import 'component/main';

src/ui/scss/component/_button.scss

@@ -1,105 +1,68 @@
 @import '~@lbry/components/sass/button/_index.scss';
 
 .button {
-  border-radius: 0;
+  display: inline-block;
-  font-size: 1em;
+
+  .button__content {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
 
   svg {
     stroke-width: 1.9;
     width: 1.2rem;
     height: 1.2rem;
     position: relative;
-    top: 1px;
     color: $lbry-gray-5;
 
     // Buttons that don't have a label
     &:only-child {
       color: inherit;
-      stroke-opacity: 1;
       width: 1.4rem;
       height: 1.4rem;
-      top: 0.1em;
     }
   }
 
+  // Handle icons on the left or right side of the button label
   svg + .button__label,
   .button__label + svg {
-    margin-left: var(--spacing-vertical-small);
+    margin-left: var(--spacing-vertical-miniscule);
-  }
-
-  &.button--icon {
-    border-radius: 50%;
-  }
-}
-
-.button--primary,
-.button--alt,
-.button--no-style {
-  svg {
-    width: 1.2rem;
-    height: 1.2rem;
   }
 }
 
 .button--primary {
-  height: var(--spacing-l);
-
   svg {
     color: white;
   }
-
-  svg + .button__label {
-    position: relative;
-    top: -0.05em;
-  }
 }
 
-// This is a hack and the extra styles are just so this is more specific than the @lbry/components styling
+// Play/View button that is overlayed ontop of the video player
-// Will make a PR there, but just doing it now for the release - Sean
+.button--icon {
-[type='button'].button--inverse {
+  height: 5rem;
-  font-size: 1rem;
+  width: 5rem;
-  transition: background-color 0.2s;
+  border-radius: 2.5rem;
-  border-radius: 0;
-
-  html[data-mode='dark'] & {
-    &:not(:hover) {
-      border-color: rgba($lbry-white, 0.1);
-      background-color: rgba($lbry-black, 0.3);
-    }
-
-    &:hover {
-      border-color: rgba($lbry-white, 0.1);
-      background-color: rgba($lbry-white, 0.1);
-      color: $lbry-white;
-    }
-  }
-
-  html[data-mode='light'] & {
-    &:not(:hover) {
-      background-color: $lbry-white;
-      color: $lbry-black;
-    }
-
-    &:hover {
-      background-color: $lbry-gray-1;
-      color: $lbry-black;
-    }
-  }
-
-  .button__content {
-    svg {
-      color: $lbry-gray-4;
-    }
-  }
 }
 
-.button--selected {
+.button--primary,
-  font-weight: 800;
+.button--alt,
+.button--inverse {
+  height: var(--button-height);
+  line-height: var(--button-height);
+  border-radius: var(--button-radius);
+  font-size: 1.1rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  box-sizing: border-box;
+}
+
+// We need the :disabled to override the default disabled button styles
+// This is a little different because we still want to keep the button styled
+// since it acts as an "active" state
+.button--subscription-view-selected:disabled {
   color: $lbry-teal-5;
-
+  border-bottom: 1px solid $lbry-teal-5;
-  &:disabled {
+  opacity: 1;
-    opacity: 1;
-  }
 
   html[data-mode='dark'] & {
     color: $lbry-teal-3;
@@ -108,6 +71,7 @@
 
 .button--uri-indicator {
   max-width: 100%;
+  height: 1.2em;
   overflow: hidden;
   text-align: left;
   text-overflow: ellipsis;

src/ui/scss/component/_card.scss

@@ -42,6 +42,7 @@
 //  A C T I O N S
 
 .card__actions {
+  display: flex;
   font-size: 1.15rem;
 
   > *:not(:last-child) {
@@ -98,7 +99,7 @@
   position: relative;
 
   &:not(.card__header--flat) {
-    margin-bottom: var(--spacing-vertical-small);
+    margin-bottom: var(--spacing-vertical-medium);
   }
 }
 
@@ -131,15 +132,6 @@
   }
 }
 
-//  C A R D
-//  M E T A
-
-.card__meta {
-  color: $lbry-gray-5;
-  padding-top: var(--spacing-vertical-medium);
-  padding-bottom: var(--spacing-vertical-medium);
-}
-
 //  C A R D
 //  M E S S A G E
 
@@ -193,10 +185,6 @@
   font-size: 2rem;
   font-weight: 600;
 
-  .button {
-    font-size: 1.2rem;
-  }
-
   + .card__content {
     margin-top: var(--spacing-vertical-medium);
   }
@@ -206,9 +194,8 @@
   display: flex;
   align-items: center;
 
-  .card__title + .button,
+  & > *:not(:last-child) {
-  .button:not(:first-of-type) {
+    margin-right: var(--spacing-vertical-medium);
-    margin-left: var(--spacing-vertical-medium);
   }
 }
 

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

@@ -1,62 +0,0 @@
-.file-list {
-  display: grid;
-  grid-gap: $spacing-vertical * 2/3;
-  grid-template-columns: repeat(auto-fill, var(--card-small-width));
-  margin-top: $spacing-vertical * 2/3;
-}
-
-.file-list__header {
-  font-size: 24px;
-  padding-top: $spacing-vertical * 4/3;
-
-  .tooltip {
-    margin-left: 5px;
-  }
-}
-
-.file-tile {
-  display: flex;
-  font-size: 14px;
-  padding-top: $spacing-vertical;
-
-  .card__media {
-    flex: 0 0 var(--file-tile-media-width);
-    height: var(--file-tile-media-height);
-  }
-}
-
-.file-tile__info {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  margin-left: $spacing-vertical * 2/3;
-  max-width: 500px;
-}
-
-.file-tile--large {
-  font-size: 16px;
-
-  .card__media {
-    flex: 0 0 var(--file-tile-media-width-large);
-    height: var(--file-tile-media-height-large);
-  }
-}
-
-.file-tile--small {
-  font-size: 12px;
-  padding-top: $spacing-vertical * 2/3;
-
-  .card__media {
-    flex: 0 0 var(--file-tile-media-width-small);
-    height: var(--file-tile-media-height-small);
-  }
-}
-
-.file-tile__title {
-  font-size: 1.1em;
-  word-break: break-word;
-}
-
-.file-tile__uri {
-  color: $lbry-gray-5;
-}

src/ui/scss/component/_form-field.scss

@@ -1,6 +1,13 @@
 @import '~@lbry/components/sass/form/_index.scss';
 
 // lbry/components overrides and minor styles
+// Some items have very specific styling
+// This is because many styles inside `lbry/components/sass/form/` are very specific
+// As styles become hardened here, they _should_ slowly move over to that repo
+
+input-submit {
+  align-items: center;
+}
 
 input[type='number'] {
   width: 8em;
@@ -160,10 +167,6 @@ form {
         border-color: $lbry-teal-3;
       }
     }
-
-    &.button--inverse {
-      @extend .button--inverse;
-    }
   }
 }
 
@@ -176,9 +179,21 @@ fieldset-section {
       }
     }
 
-    .button__content {
+    // input-submit is connected to a button
-      position: relative;
+    // The input height needs to match the button height to lineup correctly
-      top: -0.1em;
+    // Other inputs are fine since they are on their own and are used under different circumstances
+    input[type='text'] {
+      height: var(--button-height);
+
+      [data-mode='dark'] & {
+        &:not(:focus) {
+          border-color: $lbry-gray-5;
+        }
+      }
+    }
+
+    .button {
+      border-radius: 0;
     }
   }
 

src/ui/scss/component/_header.scss

@@ -2,108 +2,81 @@
   position: fixed;
   width: 100%;
   height: var(--header-height);
-  align-items: center;
-  background-color: $lbry-white;
   display: flex;
   justify-content: space-between;
-  z-index: 2;
+  z-index: 2; // Main content uses z-index: 1, this ensures it always scrolls under the header
+  background-color: $lbry-white;
+  border-bottom: 1px solid $lbry-gray-1;
 
   html[data-mode='dark'] & {
     background-color: rgba($lbry-black, 0.9);
     background-color: mix($lbry-black, $lbry-gray-3, 90%);
     color: $lbry-white;
+    border-bottom: none;
   }
 }
 
 .header__navigation {
   display: flex;
 
+  // First navigation item is the top left wrapper
+  // This contains the Lbry logo (home link) and forward/back arrows on desktop
   &:first-of-type {
-    // Main navigation collapses into a menu button
-    // at smaller screen widths
     @media (min-width: 601px) {
       width: calc(var(--side-nav-width) - 1px);
     }
-
-    @media (max-width: 600px) {
-      width: calc(var(--header-height) * 3 + 1px);
-    }
   }
 }
 
-// .header__navigation-app {
-//   flex: 1;
-//   display: flex;
-//   justify-content: space-between;
-
-// LBRY logo in the top left corner
-.lbry-icon {
-  height: var(--header-height);
-  width: 1rem;
-  overflow: visible;
-}
-
 .header__navigation-arrows {
-  flex: 1;
   display: flex;
-  justify-content: flex-end;
+
-  border-left: 1px solid $lbry-gray-1;
+  .button__content {
+    justify-content: center;
+  }
 }
-// }
 
 .header__navigation-item {
   height: var(--header-height);
   display: flex;
   justify-content: center;
   align-items: center;
+  border-radius: 0;
 
-  &:not(:disabled):hover {
+  svg {
+    stroke: $lbry-black;
+  }
+
+  &:hover {
     background-color: $lbry-gray-1;
+  }
 
-    html[data-mode='dark'] & {
+  &.header__navigation-item--active {
-      background-color: $lbry-gray-5;
+    &::after {
+      height: 0.2em;
+      bottom: 0;
+      width: 100%;
+      background-color: $lbry-teal-3;
+      content: '';
+      position: absolute;
     }
   }
 
-  &:disabled {
+  html[data-mode='dark'] & {
-    opacity: 0.3;
+    &:hover {
-  }
+      background-color: $lbry-gray-5;
+    }
 
-  .button__content {
+    svg {
-    line-height: var(--header-height);
+      stroke: $lbry-white;
-    overflow: hidden;
+    }
-    text-align: center;
-    text-overflow: ellipsis;
-    width: 100%;
   }
 }
 
-.header__navigation-item--active {
-  background-image: linear-gradient(
-    to bottom,
-    transparent 0%,
-    mix(transparent, $lbry-teal-3, 70%) 90%
-  );
-}
-
 .header__navigation-item--back,
 .header__navigation-item--forward,
-.header__navigation-item--home,
 .header__navigation-item--menu {
   width: var(--header-height);
-
-  svg {
-    stroke: $lbry-black;
-
-    &:only-child {
-      // Header icons are a little different because they are larger
-      top: 0.25rem;
-    }
-
-    html[data-mode='dark'] & {
-      stroke: $lbry-white;
-    }
-  }
 }
 
 .header__navigation-item--lbry {
@@ -114,65 +87,52 @@
   .lbry-icon {
     height: 2rem;
     width: 2rem;
-    top: 0.6rem;
   }
 }
 
-// Publish button
 .header__navigation-item--right-action {
-  position: relative;
-
   .button__content {
-    display: flex;
     padding: 0 var(--spacing-vertical-large);
   }
+}
 
-  .button__label {
+.header__navigation-item--right-action:not(:last-child),
-    line-height: 1.4;
+.header__navigation-item--lbry {
-    padding-left: 0.5rem;
+  border-right: 1px solid $lbry-gray-1;
-  }
-
-  svg {
-    top: 0.1em;
-  }
-
-  &:not(:last-child) {
-    border-right: 1px solid $lbry-gray-1;
-  }
 
   html[data-mode='dark'] & {
-    svg {
+    border-right: 1px solid $lbry-gray-5;
-      stroke: $lbry-white;
-    }
   }
 }
 
-.header__navigation-item--wallet {
+.header__navigation-item--upgrade {
-  border-right: 1px solid $lbry-gray-1;
+  background-color: $lbry-teal-5;
-  width: 10rem;
+  color: $lbry-white;
+  svg {
+    stroke: $lbry-white;
+  }
 
-  html[data-mode='dark'] & {
+  &:hover {
-    border-color: $lbry-gray-5;
+    background-color: $lbry-teal-4;
   }
 }
 
 .header__navigation-item--menu {
-  @media (min-width: 601px) {
+  // Add this back once we have an actual menu for mobile
-    display: none;
+  // @media (min-width: 601px) {
-  }
+  display: none;
+  // }
 }
 
 // Hide links that will live in the menu bar
-@media (max-width: 601px) {
+@media (max-width: 600px) {
   .header__navigation-item--back,
   .header__navigation-item--forward,
-  .header__navigation-item--home,
+  .header__navigation-item--right-action {
-  .header__navigation-item--right-action,
-  .header__navigation-item--wallet {
     display: none;
   }
 
-  .header__navigation:first-child {
+  .header__navigation-item--lbry {
-    display: none;
+    padding: var(--spacing-vertical-medium);
   }
 }

src/ui/scss/component/_icon.scss

@@ -0,0 +1,10 @@
+// Not all icons are created equally... at least the react-feather ones aren't
+// Minor adjustments to ensure icons line up vertically
+
+.icon--Heart {
+  top: -1px;
+}
+
+.icon--Flag {
+  top: -2px;
+}

src/ui/scss/component/_media.scss

@@ -174,6 +174,7 @@
 
 .media__action-group--large {
   display: flex;
+  align-items: flex-end;
   margin-top: var(--spacing-vertical-small);
   margin-bottom: var(--spacing-vertical-small);
 
@@ -508,33 +509,15 @@
 }
 
 .media-group__header-title {
-  align-items: center;
-  cursor: default;
   display: flex;
+  align-items: flex-end;
   font-weight: 700;
-  line-height: 1.33;
+  font-size: 2rem;
-  width: calc(100% - 6rem); // to not cover the navigation
+  padding-bottom: var(--spacing-vertical-small);
 
-  // Title needs adjusting depending on screen width
+  & > *:not(:first-child) {
-
+    font-weight: normal;
-  @media (min-width: 601px) {
+    margin-left: var(--spacing-vertical-medium);
-    font-size: 2rem;
-  }
-
-  .channel-info__actions__group {
-    .button {
-      &:first-child {
-        font-size: 2rem;
-
-        .button__label {
-          margin: 0;
-        }
-      }
-
-      &:last-child {
-        font-weight: normal;
-      }
-    }
   }
 }
 

src/ui/scss/component/_tooltip.scss

@@ -85,10 +85,9 @@
   // When there is a label for the tooltip and not just using a button or icon
   font-size: 14px;
   padding-left: $spacing-vertical * 1/3;
-
+  height: 100%;
-  .tooltip__body {
+  display: flex;
-    margin-top: 5px;
+  align-items: center;
-  }
 }
 
 .tooltip--on-component,

src/ui/scss/init/_gui.scss

@@ -175,11 +175,6 @@ code {
   }
 }
 
-.meta {
-  color: $lbry-gray-1;
-  font-size: 0.8rem;
-}
-
 .empty {
   color: $lbry-gray-5;
   font-style: italic;

src/ui/scss/init/_vars.scss

@@ -34,8 +34,8 @@ $large-breakpoint: 1921px;
   --select-height: 30px;
 
   // Button
-  --button-radius: 20px;
+  --button-radius: 2.6rem;
-  --button-height: 36px;
+  --button-height: 2.6rem;
 
   // Header
   --header-height: 3.5rem;

yarn.lock

@@ -838,10 +838,10 @@
   resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.1.1.tgz#b80ec25fb515d436129332b20c767c5a7014ac09"
   integrity sha512-BdxqWmm84WYOd1ZsPruJiGr7WBEophVfJKg7oywFOAMb0h6ERe4Idx1ceweMSvCOyPlR5GAhil9Gvk70SBFdxQ==
 
-"@lbry/components@^2.3.3":
+"@lbry/components@^2.7.0":
-  version "2.4.0"
+  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.4.0.tgz#1fae33575647417929dec64e3cff1d2541fa7418"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.7.0.tgz#246aa8c482f63940b2d235f21bd5a5ddd6c44a0b"
-  integrity sha512-p1Y4c9YiURQCGlYNSpN8nJgyznn10oEUWhDBui6IwW+ZlI40ILN4aiG1RRURQM2mj9b+9qczV6uUpm0IdOB67g==
+  integrity sha512-SuoqHb/ycZBVBuhFONeGntL3Qs0J9akATd8/ytJAdtI2xPWL3yXdext3e/F8VJRE4hW7hkJooTsCX6WbANZYTQ==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"