.eslintrc.json

@@ -36,6 +36,7 @@
     "func-names": ["warn", "as-needed"],
     "jsx-a11y/label-has-for": 0,
     "import/prefer-default-export": 0,
-    "no-return-assign": 0
+    "no-return-assign": 0,
+    "react/require-default-props": 0
   }
 }

package.json

@@ -48,7 +48,7 @@
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
-    "lbry-redux": "lbryio/lbry-redux#30c18725d8c6c141c30c57f0a324d0abb8963b99",
+    "lbry-redux": "lbryio/lbry-redux#c41899e78415cae6fcb7bfca0e6ba48bb6bfe6c4",
     "localforage": "^1.7.1",
     "mixpanel-browser": "^2.17.1",
     "moment": "^2.22.0",

src/renderer/component/button/view.jsx

@@ -22,6 +22,7 @@ type Props = {
   button: ?string, // primary, secondary, alt, link
   noPadding: ?boolean, // to remove padding and allow circular buttons
   uppercase: ?boolean,
+  iconColor: ?string,
 };
 
 class Button extends React.PureComponent<Props> {
@@ -48,6 +49,7 @@ class Button extends React.PureComponent<Props> {
       type,
       noPadding,
       uppercase,
+      iconColor,
       ...otherProps
     } = this.props;
 
@@ -82,10 +84,10 @@ class Button extends React.PureComponent<Props> {
 
     const content = (
       <span className="btn__content">
-        {icon && <Icon icon={icon} />}
+        {icon && <Icon icon={icon} iconColor={iconColor} />}
         {label && <span className="btn__label">{label}</span>}
         {children && children}
-        {iconRight && <Icon icon={iconRight} />}
+        {iconRight && <Icon icon={iconRight} iconColor={iconColor} />}
       </span>
     );
 

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

@@ -62,7 +62,6 @@ export class FormFieldPrice extends React.PureComponent<Props> {
           name={`${name}_currency`}
           type="select"
           id={`${name}_currency`}
-          className="form-field"
           disabled={disabled}
           onChange={this.handleCurrencyChange}
           value={price.currency}

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

@@ -42,7 +42,7 @@ export class FormField extends React.PureComponent<Props> {
     if (type) {
       if (type === 'select') {
         input = (
-          <select id={name} {...inputProps}>
+          <select className="form-field__select" id={name} {...inputProps}>
             {children}
           </select>
         );

src/renderer/component/common/icon.jsx

@@ -1,26 +1,52 @@
 // @flow
 import React from 'react';
-// import * as icons from 'constants/icons';
 import * as FeatherIcons from 'react-feather';
 import * as icons from 'constants/icons';
+import Tooltip from 'component/common/tooltip';
 
 const RED_COLOR = '#e2495e';
+const PURPLE_COLOR = '#8165b0';
 
 type Props = {
   icon: string,
+  tooltip?: string, // tooltip direction
+  iconColor?: string,
 };
 
 class IconComponent extends React.PureComponent<Props> {
-  // TODO: Move all icons to constants and add titles for all
+  getTooltip = (icon: string) => {
-  // Add some some sort of hover flyout with the title?
+    switch (icon) {
+      case icons.FEATURED:
+        return __('Featured content. Earn rewards for watching.');
+      case icons.LOCAL:
+        return __('This file is downloaded.');
+      default:
+        return null;
+    }
+  };
+
+  getIconColor = (color: string) => {
+    switch (color) {
+      case 'red':
+        return RED_COLOR;
+      case 'purple':
+        return PURPLE_COLOR;
+      default:
+        return null;
+    }
+  };
 
   render() {
-    const { icon } = this.props;
+    const { icon, tooltip, iconColor } = this.props;
     const Icon = FeatherIcons[icon];
 
+    if (!Icon) {
+      return null;
+    }
+
     let color;
-    if (icon === icons.HEART || icon === icons.FEATURED) {
+    if (iconColor) {
-      color = RED_COLOR;
+      color = this.getIconColor(iconColor);
     }
 
     let size = 14;
@@ -28,7 +54,19 @@ class IconComponent extends React.PureComponent<Props> {
       size = 20;
     }
 
-    return Icon ? <Icon size={size} className="icon" color={color} /> : null;
+    let tooltipText;
+    if (tooltip) {
+      tooltipText = this.getTooltip(icon);
+    }
+    const inner = <Icon size={size} className="icon" color={color} />;
+
+    return tooltip ? (
+      <Tooltip icon body={tooltipText} direction={tooltip}>
+        {inner}
+      </Tooltip>
+    ) : (
+      inner
+    );
   }
 }
 

src/renderer/component/common/tooltip.jsx

@@ -1,55 +1,38 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import classnames from 'classnames';
-import Icon from 'component/common/icon';
-import Button from 'component/button';
-import * as icons from 'constants/icons';
 
 type Props = {
   body: string,
-  label: string,
+  label?: string,
+  children: ?React.Node,
+  icon: ?boolean,
+  direction: string,
 };
 
-type State = {
+class ToolTip extends React.PureComponent<Props> {
-  showTooltip: boolean,
+  static defaultProps = {
-};
+    direction: 'bottom',
-
-class ToolTip extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      showTooltip: false,
   };
 
-    (this: any).handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    const { showTooltip } = this.state;
-
-    if (!showTooltip) {
-      document.addEventListener('click', this.handleClick);
-    } else {
-      document.removeEventListener('click', this.handleClick);
-    }
-
-    this.setState({
-      showTooltip: !showTooltip,
-    });
-  }
-
   render() {
-    const { label, body } = this.props;
+    const { children, label, body, icon, direction } = this.props;
-    const { showTooltip } = this.state;
+
+    const tooltipContent = children || label;
 
     return (
-      <span className="tooltip">
+      <span
-        <Button button="link" className="help tooltip__link" onClick={this.handleClick}>
+        className={classnames('tooltip', {
-          {label}
+          'tooltip--label': label && !icon,
-          {showTooltip && <Icon icon={icons.CLOSE} />}
+          'tooltip--icon': icon,
-        </Button>
+          'tooltip--top': direction === 'top',
-        <div className={classnames('tooltip__body', { hidden: !showTooltip })}>{body}</div>
+          'tooltip--right': direction === 'right',
+          'tooltip--bottom': direction === 'bottom',
+          'tooltip--left': direction === 'left',
+        })}
+      >
+        {tooltipContent}
+        <span className="tooltip__body">{body}</span>
       </span>
     );
   }

src/renderer/component/fileActions/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import FileDownloadLink from 'component/fileDownloadLink';
 import { MODALS } from 'lbry-redux';
 import classnames from 'classnames';
 import * as icons from 'constants/icons';
@@ -27,21 +26,21 @@ class FileActions extends React.PureComponent<Props> {
 
     return (
       <section className={classnames('card__actions', { 'card__actions--vertical': vertical })}>
-        <FileDownloadLink uri={uri} />
         {showDelete && (
           <Button
-            className="btn--file-actions"
+            button="alt"
             icon={icons.TRASH}
-            description={__('Delete')}
+            iconColor="red"
+            label={__('Delete')}
             onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })}
           />
         )}
         {!claimIsMine && (
           <Button
-            className="btn--file-actions"
+            button="alt"
             icon={icons.REPORT}
             href={`https://lbry.io/dmca?claim_id=${claimId}`}
-            description={__('Report content')}
+            label={__('Report content')}
           />
         )}
       </section>

src/renderer/component/fileCard/view.jsx

@@ -98,14 +98,16 @@ class FileCard extends React.PureComponent<Props> {
             <div className="card__title--small">
               <TruncatedText lines={3}>{title}</TruncatedText>
             </div>
-            <div className="card__subtitle card__subtitle--file-info">
+            <div className="card__subtitle">
               {pending ? (
                 <div>Pending...</div>
               ) : (
                 <React.Fragment>
                   <UriIndicator uri={uri} link />
-                  {isRewardContent && <Icon icon={icons.FEATURED} />}
+                  <div>
+                    {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
                     {fileInfo && <Icon icon={icons.LOCAL} />}
+                  </div>
                 </React.Fragment>
               )}
             </div>

src/renderer/component/fileDownloadLink/index.js

@@ -5,7 +5,6 @@ import {
   makeSelectLoadingForUri,
   makeSelectCostInfoForUri,
 } from 'lbry-redux';
-import { doFetchAvailability } from 'redux/actions/availability';
 import { doOpenFileInShell } from 'redux/actions/file';
 import { doPurchaseUri, doStartDownload } from 'redux/actions/content';
 import { doPause } from 'redux/actions/media';
@@ -20,7 +19,6 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  checkAvailability: uri => dispatch(doFetchAvailability(uri)),
   openInShell: path => dispatch(doOpenFileInShell(path)),
   purchaseUri: uri => dispatch(doPurchaseUri(uri)),
   restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),

src/renderer/component/fileDownloadLink/view.jsx

@@ -1,21 +1,29 @@
+// @flow
 import React from 'react';
 import Button from 'component/button';
-import classnames from 'classnames';
 import * as icons from 'constants/icons';
 
-class FileDownloadLink extends React.PureComponent {
+type Props = {
-  componentWillMount() {
+  uri: string,
-    this.checkAvailability(this.props.uri);
+  downloading: boolean,
-  }
+  fileInfo: ?{
-
+    written_bytes: number,
-  componentWillReceiveProps(nextProps) {
+    total_bytes: number,
-    this.checkAvailability(nextProps.uri);
+    outpoint: number,
-    this.restartDownload(nextProps);
+    download_path: string,
-  }
+    completed: boolean,
-
+  },
-  restartDownload(props) {
+  loading: boolean,
-    const { downloading, fileInfo, uri, restartDownload } = props;
+  costInfo: ?{},
+  restartDownload: (string, number) => void,
+  openInShell: string => void,
+  purchaseUri: string => void,
+  doPause: () => void,
+};
 
+class FileDownloadLink extends React.PureComponent<Props> {
+  componentWillUpdate() {
+    const { downloading, fileInfo, uri, restartDownload } = this.props;
     if (
       !downloading &&
       fileInfo &&
@@ -27,12 +35,7 @@ class FileDownloadLink extends React.PureComponent {
     }
   }
 
-  checkAvailability(uri) {
+  uri: ?string;
-    if (!this._uri || uri !== this._uri) {
-      this._uri = uri;
-      this.props.checkAvailability(uri);
-    }
-  }
 
   render() {
     const {
@@ -47,8 +50,10 @@ class FileDownloadLink extends React.PureComponent {
     } = this.props;
 
     const openFile = () => {
+      if (fileInfo) {
         openInShell(fileInfo.download_path);
         doPause();
+      }
     };
 
     if (loading || downloading) {
@@ -56,21 +61,11 @@ class FileDownloadLink extends React.PureComponent {
         fileInfo && fileInfo.written_bytes
           ? fileInfo.written_bytes / fileInfo.total_bytes * 100
           : 0;
-      const label = fileInfo ? progress.toFixed(0) + __('% complete') : __('Connecting...');
+      const label = fileInfo
+        ? __('Downloading: ') + progress.toFixed(0) + __('% complete')
+        : __('Connecting...');
 
-      return (
+      return <span className="file-download">{label}</span>;
-        <div className="file-download btn__content">
-          <div
-            className={classnames('file-download__overlay', {
-              btn__content: !!progress,
-            })}
-            style={{ width: `${progress}%` }}
-          >
-            {label}
-          </div>
-          {label}
-        </div>
-      );
     } else if (fileInfo === null && !downloading) {
       if (!costInfo) {
         return null;
@@ -78,9 +73,10 @@ class FileDownloadLink extends React.PureComponent {
 
       return (
         <Button
-          className="btn--file-actions"
+          button="alt"
-          description={__('Download')}
+          label={__('Download')}
           icon={icons.DOWNLOAD}
+          iconColor="purple"
           onClick={() => {
             purchaseUri(uri);
           }}
@@ -89,8 +85,9 @@ class FileDownloadLink extends React.PureComponent {
     } else if (fileInfo && fileInfo.download_path) {
       return (
         <Button
-          className="btn--file-actions"
+          button="alt"
-          description={__('Open')}
+          iconColor="purple"
+          label={__('Open File')}
           icon={icons.OPEN}
           onClick={() => openFile()}
         />

src/renderer/component/fileList/view.jsx

@@ -8,6 +8,7 @@ type FileInfo = {
   name: string,
   channelName: ?string,
   pending?: boolean,
+  channel_claim_id: string,
   value?: {
     publisherSignature: {
       certificateId: string,
@@ -139,6 +140,8 @@ class FileList extends React.PureComponent<Props, State> {
     });
   }
 
+  sortFunctions: {};
+
   render() {
     const { fileInfos, hideFilter, checkPending } = this.props;
     const { sortBy } = this.state;
@@ -149,27 +152,14 @@ class FileList extends React.PureComponent<Props, State> {
     }
 
     this.sortFunctions[sortBy](fileInfos).forEach(fileInfo => {
-      const {
+      const { name: claimName, claim_name: claimNameDownloaded, claim_id: claimId } = fileInfo;
-        channel_name: channelName,
-        name: claimName,
-        claim_name: claimNameDownloaded,
-        claim_id: claimId,
-      } = fileInfo;
       const uriParams = {};
 
       // This is unfortunate
       // https://github.com/lbryio/lbry/issues/1159
       const name = claimName || claimNameDownloaded;
-
-      if (channelName) {
-        uriParams.channelName = channelName;
       uriParams.contentName = name;
-        uriParams.claimId = this.getChannelSignature(fileInfo);
-      } else {
       uriParams.claimId = claimId;
-        uriParams.claimName = name;
-      }
-
       const uri = buildURI(uriParams);
 
       content.push(<FileCard key={uri} uri={uri} checkPending={checkPending} />);

src/renderer/component/subscribeButton/view.jsx

@@ -37,8 +37,9 @@ export default (props: Props) => {
 
   return channelName && uri ? (
     <Button
+      iconColor="red"
       icon={isSubscribed ? undefined : icons.HEART}
-      button={isSubscribed ? 'danger' : 'alt'}
+      button="alt"
       label={subscriptionLabel}
       onClick={() => {
         if (!subscriptions.length) {

src/renderer/component/video/internal/play-button.jsx

@@ -18,7 +18,7 @@ class VideoPlayButton extends React.PureComponent<Props> {
     const label = doesPlayback ? 'Play' : 'View';
 
     return (
-      <Button button="secondary" disabled={disabled} label={label} icon={icon} onClick={play} />
+      <Button button="primary" disabled={disabled} label={label} icon={icon} onClick={play} />
     );
   }
 }

src/renderer/modal/modalCreditIntro/view.jsx

@@ -25,16 +25,13 @@ const ModalCreditIntro = props => {
             can take are limited.
           </p>
         )}
+        {totalRewardValue && (
           <p>
             There are a variety of ways to get credits, including more than{' '}
-          {totalRewardValue ? (
+            <CreditAmount noStyle amount={totalRewardRounded} />{' '}
-            <CreditAmount noStyle amount={totalRewardRounded} />
+            {__('in free rewards for participating in the LBRY beta.')}
-          ) : (
-            <span className="credit-amount">{__('?? credits')}</span>
-          )}{' '}
-          {__(' in free rewards for participating in the LBRY beta.')}
           </p>
-
+        )}
         <div className="card__actions card__actions--center">
           <Button button="primary" onClick={addBalance} label={__('Get Credits')} />
           <Button

src/renderer/page/file/view.jsx

@@ -17,6 +17,8 @@ import Page from 'component/page';
 import player from 'render-media';
 import * as settings from 'constants/settings';
 import type { Claim } from 'types/claim';
+import type { Subscription } from 'types/subscription';
+import FileDownloadLink from 'component/fileDownloadLink';
 
 type Props = {
   claim: Claim,
@@ -39,10 +41,10 @@ type Props = {
   openModal: ({ id: string }, { uri: string }) => void,
   fetchFileInfo: string => void,
   fetchCostInfo: string => void,
-  prepareEdit: ({}) => void,
+  prepareEdit: ({}, string) => void,
   setClientSetting: (string, boolean | string) => void,
   checkSubscription: ({ channelName: string, uri: string }) => void,
-  subscriptions: Array<{}>,
+  subscriptions: Array<Subscription>,
 };
 
 class FilePage extends React.Component<Props> {
@@ -151,17 +153,12 @@ class FilePage extends React.Component<Props> {
             ) : (
               <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
             )}
-            {!isPlaying && (
-              <div className="card-media__internal-links">
-                <FileActions uri={uri} vertical />
-              </div>
-            )}
             <div className="card__content">
               <div className="card__title-identity--file">
                 <h1 className="card__title card__title--file">{title}</h1>
                 <div className="card__title-identity-icons">
                   <FilePrice uri={normalizeURI(uri)} />
-                  {isRewardContent && <Icon icon={icons.FEATURED} />}
+                  {isRewardContent && <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />}
                 </div>
               </div>
               <span className="card__subtitle card__subtitle--file">
@@ -171,6 +168,7 @@ class FilePage extends React.Component<Props> {
               {metadata.nsfw && <div>NSFW</div>}
               <div className="card__channel-info">
                 <UriIndicator uri={uri} link />
+
                 <div className="card__actions card__actions--no-margin">
                   {claimIsMine ? (
                     <Button
@@ -207,6 +205,11 @@ class FilePage extends React.Component<Props> {
             </div>
 
             <div className="card__content">
+              <FileDownloadLink uri={uri} />
+              <FileActions uri={uri} />
+            </div>
+
+            <div className="card__content--extra-padding">
               <FileDetails uri={uri} />
             </div>
           </section>

src/renderer/page/search/view.jsx

@@ -5,6 +5,8 @@ import FileTile from 'component/fileTile';
 import FileListSearch from 'component/fileListSearch';
 import ToolTip from 'component/common/tooltip';
 import Page from 'component/page';
+import Icon from 'component/common/icon';
+import * as icons from 'constants/icons';
 
 const MODAL_ANIMATION_TIME = 250;
 
@@ -50,10 +52,11 @@ class SearchPage extends React.PureComponent<Props> {
               <div className="file-list__header">
                 {__('Exact URL')}
                 <ToolTip
-                  label="?"
+                  icon
                   body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')}
-                  className="tooltip--header"
+                >
-                />
+                  <Icon icon={icons.HELP} />
+                </ToolTip>
               </div>
               <FileTile fullWidth uri={normalizeURI(query)} showUri />
             </React.Fragment>

src/renderer/scss/_vars.scss

@@ -35,6 +35,7 @@ $large-breakpoint: 1760px;
   --color-green-light: #effbe4;
   --color-green-blue: #2ec1a8;
   --color-purple: #8165b0;
+  --color-blue-grey: #203049;
 
   /* Colors */
   --color-divider: #e3e3e3;
@@ -73,6 +74,8 @@ $large-breakpoint: 1760px;
   --input-copyable-bg: #f6f6f6;
   --input-copyable-color: var(--color-grey-dark);
   --input-copyable-border: var(--color-grey);
+  --input-select-bg-color: var(--color-grey);
+  --input-select-color: var(--text-color);
 
   /* input:disabled */
   --input-disabled-border-color: rgba(0, 0, 0, 0.42);
@@ -158,9 +161,8 @@ $large-breakpoint: 1760px;
   --modal-btn-bg-color: var(--btn-bg-alt);
 
   // /* Tooltip */
-  --tooltip-width: 300px;
+  --tooltip-bg: #555;
-  --tooltip-bg: var(--color-bg);
+  --tooltip-color: var(--color-white);
-  --tooltip-color: var(--text-color);
 
   /* Scrollbar */
   --scrollbar-radius: 10px;

src/renderer/scss/component/_card.scss

@@ -2,7 +2,6 @@
   margin-left: auto;
   margin-right: auto;
   border-radius: var(--card-radius);
-  overflow: auto;
   user-select: text;
   display: flex;
   position: relative;
@@ -18,7 +17,6 @@
 
 .card--small {
   width: var(--card-small-width);
-  overflow-x: hidden;
   white-space: normal;
 
   .card__media {
@@ -87,8 +85,7 @@
   align-items: center;
   .credit-amount,
   .icon {
-    margin-top: $spacing-vertical * 1/3;
+    margin: $spacing-vertical * 1/3;
-    margin-left: $spacing-vertical * 2/3;
   }
 }
 
@@ -127,7 +124,11 @@
   color: var(--card-text-color);
 
   .icon {
-    margin-left: $spacing-vertical * 1/3;
+    margin-top: $spacing-vertical * 1/6;
+
+    &:not(:first-of-type) {
+      margin: 0 $spacing-vertical * 1/3;
+    }
   }
 }
 
@@ -135,11 +136,6 @@
   padding-top: $spacing-vertical * 1/3;
 }
 
-.card__subtitle--file-info {
-  display: flex;
-  align-items: center;
-}
-
 .card__subtitle--block {
   display: block;
 }
@@ -184,6 +180,10 @@
   margin-top: $spacing-vertical * 2/3;
 }
 
+.card__content--extra-padding {
+  margin-top: $spacing-vertical;
+}
+
 .card__subtext-title {
   color: var(--text-color);
   font-size: calc(var(--font-size-subtext-multiple) * 1.5em);
@@ -240,12 +240,11 @@
 }
 
 /*
- .card-row is used on the discover/subscriptions page
+ .card-row is used on the discover page
  It is a list of cards that extend past the right edge of the screen
  There are left/right arrows to scroll the cards and view hidden content
 */
 .card-row {
-  overflow: hidden;
   white-space: nowrap;
   width: 100%;
   min-width: var(--card-small-width);
@@ -286,6 +285,18 @@
   padding-top: $spacing-vertical * 2/3;
   overflow: hidden;
 
+  .card {
+    display: inline-block;
+    vertical-align: top;
+    overflow-y: visible;
+    // 31 px to handle to padding between cards
+    width: calc((100% / 4) - 31px);
+  }
+
+  .card:not(:first-of-type) {
+    margin-left: 20px;
+  }
+
   .card:first-of-type {
     margin-left: $spacing-width;
   }
@@ -324,27 +335,6 @@
   }
 }
 
-.card-row__scrollhouse {
-  padding-top: $spacing-vertical * 2/3;
-  overflow: hidden;
-
-  .card {
-    display: inline-block;
-    vertical-align: top;
-    overflow: visible;
-    // 31 px to handle to padding between cards
-    width: calc((100% / 4) - 31px);
-  }
-
-  .card:not(:first-of-type) {
-    margin-left: 20px;
-  }
-
-  .card:last-of-type {
-    margin-right: 20px;
-  }
-}
-
 .card__success-msg {
   border-left: 2px solid var(--success-msg-border);
   color: var(--success-msg-color);

src/renderer/scss/component/_file-download.scss

@@ -1,26 +1,3 @@
-.file-download,
-.file-download__overlay {
-  padding: 5px;
-}
-
 .file-download {
-  position: relative;
+  font-size: 0.8em;
-  background-color: var(--color-black);
-  border-radius: var(--btn-radius);
-  color: var(--color-download);
-  font-size: 12px;
-  opacity: 0.8;
-  font-family: 'metropolis-medium';
-}
-
-.file-download__overlay {
-  background: var(--color-download);
-  color: var(--color-download-overlay);
-  border-radius: var(--btn-radius);
-  position: absolute;
-  white-space: nowrap;
-  overflow: hidden;
-  z-index: 1;
-  top: 0px;
-  left: 0px;
 }

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

@@ -14,6 +14,10 @@
 .file-list__header {
   margin-top: $spacing-vertical * 4/3;
   font-size: 18px;
+
+  .tooltip {
+    margin-left: 5px;
+  }
 }
 
 .file-tile {

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

@@ -100,10 +100,23 @@
   padding-left: $spacing-vertical * 1/3;
 }
 
+.form-field__select {
+  min-width: 60px;
+  height: 30px;
+  border-radius: 8px;
+  background-color: var(--input-select-bg-color);
+  font: normal 12px/30px 'metropolis-medium';
+  color: var(--input-select-color);
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
 // Not sure if I like these
 // Maybe this should be in gui.scss?
 .input--price-amount {
-  width: 60px;
+  width: 80px;
 }
 
 .input--address {

src/renderer/scss/component/_tooltip.scss

@@ -1,30 +1,97 @@
-@import '../mixin/link.scss';
-
 .tooltip {
   position: relative;
-  padding: 0 $spacing-vertical / 3;
+  display: inline-block;
-  font-size: 12px;
 }
 
-.tooltip__body {
+// When there is a label for the tooltip and not just using a button or icon
+.tooltip.tooltip--label {
+  font-size: 12px;
+  padding-left: $spacing-vertical * 1/3;
+
+  .tooltip__body {
+    margin-top: 5px;
+  }
+}
+
+.tooltip.tooltip--icon {
+  margin-top: 5px;
+}
+
+/* Tooltip text */
+.tooltip .tooltip__body {
+  background-color: var(--tooltip-bg);
+  font-family: 'metropolis-medium';
+  font-size: 12px;
+  color: var(--tooltip-color);
+  border-radius: 8px;
   position: absolute;
   z-index: 1;
-  left: 50%;
+  width: 200px;
-  margin-left: calc(var(--tooltip-width) * -1 / 2);
+  text-align: center;
-  white-space: normal;
+  white-space: pre-wrap;
-  box-sizing: border-box;
+  padding: $spacing-vertical * 1/3;
-  padding: $spacing-vertical / 2;
+  visibility: hidden;
-  width: var(--tooltip-width);
-  color: var(--tooltip-color);
-  background-color: var(--tooltip-bg);
-  font-size: calc(var(--font-size) * 7 / 8);
-  line-height: var(--font-line-height);
-  box-shadow: var(--box-shadow-layer);
-  border-radius: var(--card-radius);
 }
 
-.tooltip__link {
+.tooltip .tooltip__body::after {
-  font-size: calc(var(--font-size) * 3 / 4);
+  content: ' ';
-  margin-left: var(--button-padding);
+  width: 0;
-  vertical-align: middle;
+  height: 0;
+  position: absolute;
+  border-width: 5px;
+  border-style: solid;
+}
+
+.tooltip.tooltip--top .tooltip__body {
+  bottom: 100%;
+  left: 50%;
+  margin-left: -100px;
+
+  &::after {
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-color: var(--tooltip-bg) transparent transparent transparent;
+  }
+}
+
+.tooltip.tooltip--right .tooltip__body {
+  margin-top: -5px;
+  margin-left: 10px;
+
+  &::after {
+    top: 17px;
+    right: 100%; /* To the left of the tooltip */
+    margin-top: -5px;
+    border-color: transparent var(--tooltip-bg) transparent transparent;
+  }
+}
+
+.tooltip.tooltip--bottom .tooltip__body {
+  top: 90%;
+  left: 50%;
+  margin-left: -100px;
+
+  &::after {
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-color: transparent transparent var(--tooltip-bg) transparent;
+  }
+}
+
+.tooltip.tooltip--left .tooltip__body {
+  top: -5px;
+  right: 105%;
+
+  &::after {
+    top: 17px;
+    left: 100%;
+    margin-top: -5px;
+    border-color: transparent transparent transparent var(--tooltip-bg);
+  }
+}
+
+.tooltip:hover .tooltip__body {
+  visibility: visible;
 }

src/renderer/scss/mixin/link.scss

@@ -1,28 +0,0 @@
-@mixin text-link($color: var(--color-primary), $hover-opacity: 0.7) {
-  .icon {
-    &:first-child {
-      padding-right: 5px;
-    }
-    &:last-child:not(:only-child) {
-      padding-left: 5px;
-    }
-  }
-
-  &:not(.no-underline) {
-    text-decoration: underline;
-    .icon {
-      text-decoration: none;
-    }
-  }
-  &:hover {
-    opacity: $hover-opacity;
-    transition: opacity var(--transition-duration) var(--transition-type);
-    text-decoration: underline;
-    .icon {
-      text-decoration: none;
-    }
-  }
-
-  color: $color;
-  cursor: pointer;
-}

static/themes/dark.css

@@ -7,7 +7,7 @@
   --color-help: #8696AF;
   --color-download: rgba(255, 255, 255, 0.75);
   --color-download-overlay: var(--color-black);
-  --color-bg: #203049;
+  --color-bg: var(--color-blue-grey);
   --color-bg-alt: #2D3D56;
   --color-placeholder: var(--color-bg-alt);
 
@@ -26,9 +26,11 @@
   --input-border-size: 1px;
   --input-border-color: rgba(255,255,255, 0.5);
   --input-hover-border-color: rgba(255, 255, 255, 1);
-  --input-copyable-bg: #203049;
+  --input-copyable-bg: var(--color-blue-grey);
   --input-copyable-color: #8696AF;
   --input-copyable-border: #53637C;
+  --input-select-bg-color: var(--color-bg-alt);
+  --input-select-color: var(--color-white);
 
   /* input:disabled */
   --input-disabled-border-color: rgba(255, 255, 255, 0.42);

yarn.lock

@@ -5837,9 +5837,9 @@ lazy-val@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
 
-lbry-redux@lbryio/lbry-redux#30c18725d8c6c141c30c57f0a324d0abb8963b99:
+lbry-redux@lbryio/lbry-redux#c41899e78415cae6fcb7bfca0e6ba48bb6bfe6c4:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/30c18725d8c6c141c30c57f0a324d0abb8963b99"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/c41899e78415cae6fcb7bfca0e6ba48bb6bfe6c4"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"