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">
-                    <span className="share-text">
-                        <FormattedMessage id="preview.share.notShared" />
-                    </span>
-                    <Button
-                        className="button share-button"
-                        onClick={props.onShare}
-                    >
-                        <FormattedMessage id="preview.share.shareButton" />
-                    </Button>
-                </FlexRow>
-            </div>
-        </div>
-    );
-};
+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={onShare}
+            >
+                <FormattedMessage id="preview.share.shareButton" />
+            </Button>
+        </FlexRow>
+    </div>
+);
 
 ShareBanner.propTypes = {
-    onShare: PropTypes.func,
-    shared: PropTypes.bool.isRequired
+    onShare: PropTypes.func
 };
 
 module.exports = ShareBanner;

src/views/preview/share-banner.scss

@@ -2,19 +2,23 @@
 
 $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;
-    
+
     &:before {
         display: inline-block;
         margin-right: .5rem;