Newnew

package.json

@@ -46,6 +46,7 @@
     "electron-log": "^2.2.12",
     "electron-updater": "^2.23.3",
     "electron-window-state": "^4.1.1",
+    "filewatcher-webpack-plugin": "^1.2.0",
     "find-process": "^1.1.0",
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
@@ -89,6 +90,7 @@
   },
   "devDependencies": {
     "@lbry/color": "^1.0.2",
+    "@lbry/components": "^1.5.1",
     "axios": "^0.18.0",
     "babel-eslint": "^8.2.2",
     "babel-plugin-module-resolver": "^3.1.1",
@@ -113,7 +115,6 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.7.0",
-    "filewatcher-webpack-plugin": "^1.2.0",
     "flow-bin": "^0.69.0",
     "flow-typed": "^2.3.0",
     "husky": "^0.14.3",

src/main/index.js

@@ -67,7 +67,6 @@ app.on('ready', async () => {
   // Windows WMIC returns lbrynet start with 2 spaces. https://github.com/yibn2008/find-process/issues/18
   const processListArgs = process.platform === 'win32' ? 'lbrynet  start' : 'lbrynet start';
   const processList = await findProcess('name', processListArgs);
-
   const isDaemonRunning = processList.length > 0;
 
   if (!isDaemonRunning) {

src/renderer/component/address/view.jsx

@@ -23,7 +23,7 @@ export default class Address extends React.PureComponent<Props> {
     const { address, doToast } = this.props;
 
     return (
-      <FormRow verticallyCentered padded stretch>
+      <FormRow verticallyCentered stretch>
         <input
           className="input-copyable form-field__input"
           readOnly

src/renderer/component/app/view.jsx

@@ -89,6 +89,7 @@ class App extends React.PureComponent<Props> {
 
   scrollListener() {
     const { recordScroll } = this.props;
+
     if (this.mainContent) {
       recordScroll(this.mainContent.scrollTop);
     }

src/renderer/component/button/view.jsx

@@ -23,7 +23,8 @@ type Props = {
   noPadding: ?boolean, // to remove padding and allow circular buttons
   uppercase: ?boolean,
   iconColor?: string,
-  tourniquet: ?boolean, // to shorten the button and ellipsis, only use for links
+  iconSize?: number,
+  constrict: ?boolean, // to shorten the button and ellipsis, only use for links
 };
 
 class Button extends React.PureComponent<Props> {
@@ -51,7 +52,8 @@ class Button extends React.PureComponent<Props> {
       noPadding,
       uppercase,
       iconColor,
-      tourniquet,
+      iconSize,
+      constrict,
       ...otherProps
     } = this.props;
 
@@ -71,7 +73,7 @@ class Button extends React.PureComponent<Props> {
             'btn--link': button === 'link',
             'btn--external-link': button === 'link' && href,
             'btn--uppercase': uppercase,
-            'btn--tourniquet': tourniquet,
+            'btn--constrict': constrict,
           }
         : 'btn--no-style',
       className
@@ -87,10 +89,10 @@ class Button extends React.PureComponent<Props> {
 
     const content = (
       <span className="btn__content">
-        {icon && <Icon icon={icon} iconColor={iconColor} />}
+        {icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
         {label && <span className="btn__label">{label}</span>}
         {children && children}
-        {iconRight && <Icon icon={iconRight} iconColor={iconColor} />}
+        {iconRight && <Icon icon={iconRight} iconColor={iconColor} size={iconSize} />}
       </span>
     );
 

src/renderer/component/cardMedia/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import classnames from 'classnames';
+import Native from 'native';
 
 type Props = {
   thumbnail: ?string, // externally sourced image
@@ -12,13 +12,13 @@ class CardMedia extends React.PureComponent<Props> {
 
     return (
       <div
-        style={thumbnail ? { backgroundImage: `url('${thumbnail}')` } : {}}
-        className={classnames('card__media', {
-          'card__media--no-img': !thumbnail,
-        })}
-      >
-        {!thumbnail && <span className="card__media-text">LBRY</span>}
-      </div>
+        style={
+          thumbnail
+            ? { backgroundImage: `url('${thumbnail}')` }
+            : { backgroundImage: `url('${Native.imagePath('placeholder.png')}')` }
+        }
+        className="media__thumb"
+      />
     );
   }
 }

src/renderer/component/categoryList/view.jsx

@@ -7,7 +7,6 @@ import ToolTip from 'component/common/tooltip';
 import FileCard from 'component/fileCard';
 import Button from 'component/button';
 import SubscribeButton from 'component/subscribeButton';
-import classnames from 'classnames';
 
 type Props = {
   category: string,
@@ -17,7 +16,6 @@ type Props = {
   channelClaims: ?Array<Claim>,
   fetchChannel: string => void,
   obscureNsfw: boolean,
-  isSubComponent: boolean,
 };
 
 type State = {
@@ -28,7 +26,6 @@ type State = {
 class CategoryList extends PureComponent<Props, State> {
   static defaultProps = {
     categoryLink: '',
-    isSubComponent: false,
   };
 
   constructor() {
@@ -210,32 +207,29 @@ class CategoryList extends PureComponent<Props, State> {
   }
 
   render() {
-    const {
-      category,
-      categoryLink,
-      names,
-      channelClaims,
-      obscureNsfw,
-      isSubComponent,
-    } = this.props;
+    const { category, categoryLink, names, channelClaims, obscureNsfw } = this.props;
     const { canScrollNext, canScrollPrevious } = this.state;
     const isCommunityTopBids = category.match(/^community/i);
     const showScrollButtons = isCommunityTopBids ? !obscureNsfw : true;
 
-    // isSubComponent is a hack, this component should be able to handle this with proper overflow styling
-
     return (
-      <div className="card-row">
-        <div
-          className={classnames('card-row__header', {
-            'card-row__header--sub-component': isSubComponent,
-          })}
-        >
-          <div className="card-row__title">
+      <section className="media-group--row">
+        <header className="media-group__header">
+          <div className="media-group__header-title">
             {categoryLink ? (
-              <div className="card__actions card__actions--no-margin">
-                <Button label={category} navigate="/show" navigateParams={{ uri: categoryLink }} />
-                <SubscribeButton uri={`lbry://${categoryLink}`} showSnackBarOnSubscribe />
+              <div className="channel-info__actions">
+                <div className="channel-info__actions__group">
+                  <Button
+                    label={category}
+                    navigate="/show"
+                    navigateParams={{ uri: categoryLink }}
+                  />
+                  <SubscribeButton
+                    button="alt"
+                    showSnackBarOnSubscribe
+                    uri={`lbry://${categoryLink}`}
+                  />
+                </div>
               </div>
             ) : (
               category
@@ -250,38 +244,30 @@ class CategoryList extends PureComponent<Props, State> {
             )}
           </div>
           {showScrollButtons && (
-            <div
-              className={classnames('card-row__scroll-btns', {
-                'card-row__scroll-btns--sub-component': isSubComponent,
-              })}
-            >
+            <nav className="media-group__header-navigation">
               <Button
-                className="btn--arrow"
                 disabled={!canScrollPrevious}
                 onClick={this.handleScrollPrevious}
                 icon={ICONS.ARROW_LEFT}
               />
               <Button
-                className="btn--arrow"
                 disabled={!canScrollNext}
                 onClick={this.handleScrollNext}
                 icon={ICONS.ARROW_RIGHT}
               />
-            </div>
+            </nav>
           )}
-        </div>
+        </header>
         {obscureNsfw && isCommunityTopBids ? (
-          <div className="card-row__message help">
+          <p className="media__message media__message--help">
             {__(
               'The community top bids section is only visible if you allow mature content in the app. You can change your content viewing preferences'
             )}{' '}
             <Button button="link" navigate="/settings" label={__('here')} />.
-          </div>
+          </p>
         ) : (
-          <div
-            className={classnames('card-row__scrollhouse', {
-              'card-row__scrollhouse--sub-component': isSubComponent,
-            })}
+          <ul
+            className="media-scrollhouse"
             ref={ref => {
               this.rowItems = ref;
             }}
@@ -314,9 +300,9 @@ class CategoryList extends PureComponent<Props, State> {
               new Array(10).fill(1).map((x, i) => <FileCard placeholder key={i} />)
             /* eslint-enable react/no-array-index-key */
             }
-          </div>
+          </ul>
         )}
-      </div>
+      </section>
     );
   }
 }

src/renderer/component/channelTile/view.jsx

@@ -9,11 +9,13 @@ import type { Claim } from 'types/claim';
 type Props = {
   uri: string,
   isResolvingUri: boolean,
+  isSearchResult: boolean,
   totalItems: number,
   size: string,
   claim: ?Claim,
   resolveUri: string => void,
   navigate: (string, ?{}) => void,
+  buttonStyle: string,
 };
 
 class ChannelTile extends React.PureComponent<Props> {
@@ -36,7 +38,16 @@ class ChannelTile extends React.PureComponent<Props> {
   }
 
   render() {
-    const { claim, navigate, isResolvingUri, totalItems, uri, size } = this.props;
+    const {
+      claim,
+      navigate,
+      isResolvingUri,
+      isSearchResult,
+      totalItems,
+      uri,
+      size,
+      buttonStyle,
+    } = this.props;
 
     let channelName;
     let subscriptionUri;
@@ -51,20 +62,21 @@ class ChannelTile extends React.PureComponent<Props> {
       <section
         onClick={onClick}
         role="button"
-        className={classnames('file-tile card--link', {
-          'file-tile--small': size === 'small',
-          'file-tile--large': size === 'large',
+        className={classnames('media-tile card--link', {
+          'media--search-result': isSearchResult,
+          'media--small': size === 'small',
+          'media--large': size === 'large',
         })}
       >
         <CardMedia title={channelName} thumbnail={null} />
-        <div className="file-tile__info">
-          {isResolvingUri && <div className="file-tile__title">{__('Loading...')}</div>}
+        <div className="media__info">
+          {isResolvingUri && <div className="media__title">{__('Loading...')}</div>}
           {!isResolvingUri && (
             <React.Fragment>
-              <div className="file-tile__title">
+              <div className="media__title">
                 <TruncatedText text={channelName || uri} lines={1} />
               </div>
-              <div className="card__subtitle">
+              <div className="media__subtitle">
                 {totalItems > 0 && (
                   <span>
                     {totalItems} {totalItems === 1 ? 'file' : 'files'}
@@ -75,8 +87,8 @@ class ChannelTile extends React.PureComponent<Props> {
             </React.Fragment>
           )}
           {subscriptionUri && (
-            <div className="card__actions">
-              <SubscribeButton uri={subscriptionUri} />
+            <div className="media__actions">
+              <SubscribeButton buttonStyle="inverse" uri={subscriptionUri} />
             </div>
           )}
         </div>

src/renderer/component/common/credit-amount.jsx

@@ -13,7 +13,6 @@ type Props = {
   large?: boolean,
   showLBC?: boolean,
   fee?: boolean,
-  inheritStyle?: boolean,
   badge?: boolean,
 };
 
@@ -37,7 +36,6 @@ class CreditAmount extends React.PureComponent<Props> {
       isEstimate,
       fee,
       showLBC,
-      inheritStyle,
       badge,
     } = this.props;
 
@@ -66,7 +64,11 @@ class CreditAmount extends React.PureComponent<Props> {
       }
 
       if (showLBC) {
-        amountText = `${amountText} ${__('LBC')}`;
+        amountText = (
+          <span>
+            {amountText} {__('LBC')}
+          </span>
+        );
       }
 
       if (fee) {
@@ -77,14 +79,11 @@ class CreditAmount extends React.PureComponent<Props> {
     return (
       <span
         title={fullPrice}
-        className={classnames('credit-amount', {
-          'credit-amount--large': large,
-          // TODO: remove inheritStyle prop
-          // It just complicates things
-          'credit-amount--inherit': inheritStyle,
+        className={classnames('badge', {
           badge,
-          'badge--cost': badge && !isFree,
+          'badge--cost': (badge && !isFree) || amount > 0,
           'badge--free': badge && isFree,
+          'badge--large': large,
         })}
       >
         {amountText}

src/renderer/component/common/form-components/form-field.jsx

@@ -68,9 +68,11 @@ export class FormField extends React.PureComponent<Props> {
     if (type) {
       if (type === 'select') {
         input = (
-          <select className="form-field__select" id={name} {...inputProps}>
-            {children}
-          </select>
+          <div className="form-field__select-wrapper">
+            <select className="form-field__select" id={name} {...inputProps}>
+              {children}
+            </select>
+          </div>
         );
       } else if (type === 'markdown') {
         const handleEvents = {