Feature/tooltip redesign

src/content-tooltip/components/AnimationWrapper.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './tooltip.css'
+
+/*
+TODO:
+- Animate icons leaving out.
+- Streamline animation flow using enter and exit animations
+*/
+class AnimationWrapper extends React.Component {
+    static propTypes = {
+        children: PropTypes.node.isRequired,
+    }
+
+    setRef = node => (this.container = node)
+
+    render() {
+        return (
+            <div ref={this.setRef} className={styles.animationContainer}>
+                {this.props.children}
+            </div>
+        )
+    }
+}
+
+export default AnimationWrapper

src/content-tooltip/components/container.jsx

@@ -11,7 +11,7 @@ import {
 } from './tooltip-states'
 import { copyToClipboard } from '../utils'
 
-class Container extends React.Component {
+class TooltipContainer extends React.Component {
     static propTypes = {
         onInit: PropTypes.func.isRequired,
         createAndCopyDirectLink: PropTypes.func.isRequired,
@@ -21,7 +21,7 @@ class Container extends React.Component {
 
     state = {
         showTooltip: false,
-        position: {},
+        position: { x: 250, y: 200 },
         tooltipState: 'pristine',
         linkURL: '',
     }
@@ -100,6 +100,7 @@ class Container extends React.Component {
 
     render() {
         const { showTooltip, position, tooltipState } = this.state
+
         return (
             <div className="memex-tooltip-container">
                 {showTooltip ? (
@@ -116,4 +117,4 @@ class Container extends React.Component {
     }
 }
 
-export default OnClickOutside(Container)
+export default OnClickOutside(TooltipContainer)

src/content-tooltip/components/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Container from './container'
+import TooltipContainer from './container'
 
 export function setupUIContainer(
     target,
     { createAndCopyDirectLink, openSettings, destroyTooltip },
 ) {
     return new Promise(resolve => {
         ReactDOM.render(
-            <Container
+            <TooltipContainer
                 onInit={showTooltip => resolve(showTooltip)}
                 destroy={destroyTooltip}
                 createAndCopyDirectLink={createAndCopyDirectLink}

src/content-tooltip/components/tooltip-states.jsx

@@ -5,14 +5,13 @@ import styles from './tooltip.css'
 import { getExtURL } from '../utils'
 
 const images = {
-    link: getExtURL('/img/link.svg'),
-    check: getExtURL('/img/check.svg'),
+    share: getExtURL('/img/share.svg'),
+    check: getExtURL('/img/green_check.svg'),
 }
 
 export const InitialComponent = ({ createLink }) => (
     <div className={styles.createLinkButton} onMouseDown={createLink}>
-        <img className={styles.createLinkImg} src={images.link} />
-        <div className={styles.createLinkText}>Create Link</div>
+        <img className={styles.createLinkImg} src={images.share} />
     </div>
 )
 
@@ -33,8 +32,15 @@ export const CreatingLinkComponent = () => (
 
 export const CopiedComponent = () => (
     <div className={styles.copiedMessage}>
-        <span className={styles.copiedText}>Link copied to clipboard</span>
         <img className={styles.check} src={images.check} />
+        <div className={styles.copiedTextContainer}>
+            <p className={styles.greenText}>
+                Highlight link copied to clipboard
+            </p>
+            <p className={styles.greyText}>
+                Everyone opening it can see this quote
+            </p>
+        </div>
     </div>
 )