First run changes for invite page

src/renderer/component/common/icon-custom.jsx

@@ -2,23 +2,31 @@
 import * as ICONS from 'constants/icons';
 import React from 'react';
 
+type IconProps = {
+  size: number,
+  color: string,
+};
+
 // Returns a react component
-const buildIcon = iconStrokes => ({ size = 24, color = 'currentColor', ...otherProps }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width={size}
-    height={size}
-    fill="none"
-    stroke={color}
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...otherProps}
-  >
-    {iconStrokes}
-  </svg>
-);
+const buildIcon = iconStrokes => (props: IconProps) => {
+  const { size = 24, color = 'currentColor', ...otherProps } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...otherProps}
+    >
+      {iconStrokes}
+    </svg>
+  );
+};
 
 export const customIcons = {
   [ICONS.ARROW_LEFT]: buildIcon(
@@ -37,7 +45,7 @@ export const customIcons = {
       <polyline strokeLinejoin="round" points="13 4 21 12 13 20" />
     </g>
   ),
-  [ICONS.EYE]: buildIcon(
+  [ICONS.VIEW]: buildIcon(
     <g fill="none" fillRule="evenodd">
       <path
         d="M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z"
@@ -93,4 +101,13 @@ export const customIcons = {
       />
     </g>
   ),
+  [ICONS.PUBLISHED]: buildIcon(
+    <g fill="none" fillRule="evenodd" strokeLinecap="round">
+      <path
+        d="M8, 18 L5, 18 L5, 18 C2.790861, 18 1, 16.209139 1, 14 C1, 11.790861 2.790861, 10 5, 10 C5.35840468, 10 5.70579988, 10.0471371 6.03632437, 10.1355501 C6.01233106, 9.92702603 6, 9.71495305 6, 9.5 C6, 6.46243388 8.46243388, 4 11.5, 4 C14.0673313, 4 16.2238156, 5.7590449 16.8299648, 8.1376465 C17.2052921, 8.04765874 17.5970804, 8 18, 8 C20.7614237, 8 23, 10.2385763 23, 13 C23, 15.7614237 20.7614237, 18 18, 18 L16, 18, L8, 18"
+        strokeLinejoin="round"
+        transform="scale(1, 1.2) translate(0, -2)"
+      />
+    </g>
+  ),
 };

src/renderer/component/common/tooltip.jsx

@@ -9,6 +9,7 @@ type Props = {
   icon?: boolean,
   direction: string,
   onComponent?: boolean, // extra padding to account for button/form field size
+  alwaysVisible?: boolean, // should tooltip stay open, guide callbacks will close it manually
 };
 
 type State = {
@@ -18,6 +19,7 @@ type State = {
 class ToolTip extends React.PureComponent<Props, State> {
   static defaultProps = {
     direction: 'bottom',
+    alwaysVisible: false,
   };
 
   constructor(props: Props) {
@@ -88,7 +90,7 @@ class ToolTip extends React.PureComponent<Props, State> {
 
   render() {
     const { direction } = this.state;
-    const { children, label, body, icon, onComponent } = this.props;
+    const { children, label, body, icon, onComponent, alwaysVisible } = this.props;
 
     const tooltipContent = children || label;
     const bodyLength = body.length;
@@ -106,14 +108,15 @@ class ToolTip extends React.PureComponent<Props, State> {
           'tooltip--bottom': direction === 'bottom',
           'tooltip--left': direction === 'left',
           'tooltip--on-component': onComponent,
+          'tooltip--always-visible': alwaysVisible,
         })}
       >
         {tooltipContent}
         <span
           ref={ref => {
             this.tooltip = ref;
           }}
-          className={classnames('tooltip__body', {
+          className={classnames('card tooltip__body', {
             'tooltip__body--short': isShortDescription,
           })}
         >

src/renderer/component/common/yrbl.jsx

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import Native from 'native';
+
+type Props = {
+  title: string,
+  subtitle: string,
+  type: string,
+};
+
+const yrblTypes = {
+  happy: 'gerbil-happy.png',
+  sad: 'gerbil-sad.png',
+};
+
+export default class extends React.PureComponent<Props> {
+  static defaultProps = {
+    type: 'happy',
+  };
+
+  render() {
+    const { title, subtitle, type } = this.props;
+
+    const image = yrblTypes[type];
+
+    return (
+      <div className="yrbl-wrap">
+        <img alt="Friendly gerbil" className="yrbl" src={Native.imagePath(image)} />
+        <div className="card__content">
+          <h2 className="card__title">{title}</h2>
+          <p className="card__subtitle">{subtitle}</p>
+        </div>
+      </div>
+    );
+  }
+}

src/renderer/component/copyableText/view.jsx

@@ -7,6 +7,7 @@ import Button from 'component/button';
 
 type Props = {
   copyable: string,
+  snackMessage: ?string,
   doToast: ({ message: string }) => void,
 };
 
@@ -20,7 +21,7 @@ export default class CopyableText extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { copyable, doToast } = this.props;
+    const { copyable, doToast, snackMessage } = this.props;
 
     return (
       <FormRow verticallyCentered stretch>
@@ -45,7 +46,7 @@ export default class CopyableText extends React.PureComponent<Props> {
           onClick={() => {
             clipboard.writeText(copyable);
             doToast({
-              message: __('Text copied'),
+              message: snackMessage || __('Text copied'),
             });
           }}
         />

src/renderer/component/externalLink/view.jsx

@@ -34,7 +34,7 @@ class ExternalLink extends React.PureComponent<Props> {
       element = (
         <Button
           button="link"
-          iconRight={ICONS.EXTERNAL_LINK}
+          iconRight={ICONS.EXTERNAL}
           title={title || href}
           label={children}
           className="btn--external-link"

src/renderer/component/fileActions/view.jsx

@@ -20,15 +20,15 @@ type Props = {
 class FileActions extends React.PureComponent<Props> {
   render() {
     const { fileInfo, uri, openModal, claimIsMine, claimId } = this.props;
-    const showDelete = (claimIsMine || (fileInfo && Object.keys(fileInfo).length > 0)) ;
+    const showDelete = claimIsMine || (fileInfo && Object.keys(fileInfo).length > 0);
 
     return (
       <React.Fragment>
         {showDelete && (
           <Tooltip onComponent body={__('Delete this file')}>
             <Button
               button="alt"
-              icon={ICONS.TRASH}
+              icon={ICONS.DELETE}
               description={__('Delete')}
               onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
             />

src/renderer/component/fileCard/view.jsx

@@ -132,7 +132,7 @@ class FileCard extends React.PureComponent<Props> {
         <div className="media__properties">
           <FilePrice hideFree uri={uri} />
           {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
-          {isSubscribed && <Icon icon={icons.HEART} />}
+          {isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
           {fileInfo && <Icon icon={icons.LOCAL} />}
           {isNew && <span className="badge badge--alert">{__('NEW')}</span>}
         </div>

src/renderer/component/fileDownloadLink/view.jsx

@@ -97,7 +97,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
     } else if (fileInfo && fileInfo.download_path) {
       return (
         <ToolTip onComponent body={__('Open file')}>
-          <Button button="alt" iconColor="green" icon={ICONS.LOCAL} onClick={() => openFile()} />
+          <Button button="alt" iconColor="green" icon={ICONS.EXTERNAL} onClick={() => openFile()} />
         </ToolTip>
       );
     }

src/renderer/component/fileTile/view.jsx

@@ -70,7 +70,7 @@ class FileTile extends React.PureComponent<Props> {
       <div className={classnames('media__properties', { card__subtitle: size === 'large' })}>
         <FilePrice hideFree uri={uri} />
         {isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
-        {isSubscribed && <Icon icon={ICONS.HEART} />}
+        {isSubscribed && <Icon icon={ICONS.SUBSCRIPTION} />}
         {isRewardContent && <Icon iconColor="red" icon={ICONS.FEATURED} />}
         {isDownloaded && <Icon icon={ICONS.LOCAL} />}
       </div>

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

@@ -17,7 +17,7 @@ class VideoPlayButton extends React.PureComponent<Props> {
     const disabled = isLoading || fileInfo === undefined;
     const doesPlayback = ['audio', 'video'].indexOf(mediaType) !== -1;
     const label = doesPlayback ? __('Play') : __('View');
-    const icon = doesPlayback ? ICONS.PLAY : ICONS.EYE;
+    const icon = doesPlayback ? ICONS.PLAY : ICONS.VIEW;
     return (
       <Button
         disabled={disabled}