Control visibility externally and fix css

src/views/preview/presentation.jsx

@@ -87,10 +87,9 @@ const PreviewPresentation = ({
     const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
     return (
         <div className="preview">
-            <ShareBanner
-                shared={isShared}
-                onShare={onShare}
-            />
+            {!isShared && (
+                <ShareBanner onShare={onShare} />
+            )}
             { projectInfo && projectInfo.author && projectInfo.author.id && (
                 <Formsy onKeyPress={onKeyPress}>
                     <div className="inner">

src/views/preview/share-banner.jsx

@@ -6,30 +6,24 @@ const Button = require('../../components/forms/button.jsx');
 
 require('./share-banner.scss');
 
-const ShareBanner = props => {
-    if (props.shared) return null;
-    return (
-        <div className="shareBanner">
-            <div className="inner">
-                <FlexRow className="preview-row">
+const ShareBanner = ({onShare}) => (
+    <div className="share-banner-outer">
+        <FlexRow className="inner share-banner">
             <span className="share-text">
                 <FormattedMessage id="preview.share.notShared" />
             </span>
             <Button
                 className="button share-button"
-                        onClick={props.onShare}
+                onClick={onShare}
             >
                 <FormattedMessage id="preview.share.shareButton" />
             </Button>
         </FlexRow>
     </div>
-        </div>
-    );
-};
+);
 
 ShareBanner.propTypes = {
-    onShare: PropTypes.func,
-    shared: PropTypes.bool.isRequired
+    onShare: PropTypes.func
 };
 
 module.exports = ShareBanner;

src/views/preview/share-banner.scss

@@ -2,15 +2,19 @@
 
 $navigation-height: 50px;
 
-.shareBanner {
+.share-banner-outer {
     background-color: $ui-orange-25percent;
     width: 100%;
     overflow: hidden;
     color: $ui-orange;
 }
 
+.share-banner {
+    align-items: center;
+    justify-content: space-between;
+}
+
 .share-button {
-    margin-top: 0;
     background-color: $ui-orange;
     font-size: .875rem;
     font-weight: normal;