Merge pull request #1406 from prezly/site-preview-label-on-preview-banner

Added a "Site preview" label to the preview banner

Author: iamhugofelix

src/modules/PreviewBar/PreviewBar.module.scss

@@ -2,7 +2,7 @@
     background-color: $color-base-900;
     display: flex;
     align-items: center;
-    gap: $spacing-5;
+    gap: $spacing-3;
     position: rel;
     padding-top: $spacing-3;
 
@@ -14,10 +14,6 @@
     @include tablet-up {
         padding-bottom: $spacing-3;
     }
-
-    &.noDescription {
-        padding-bottom: $spacing-3;
-    }
 }
 
 .appLink {

src/modules/PreviewBar/PreviewBar.tsx

@@ -35,7 +35,7 @@ export function PreviewBar({ newsroom }: Props) {
     }
 
     return (
-        <div className={classNames(styles.wrapper, { [styles.noDescription]: !isSecretStoryPage })}>
+        <div className={styles.wrapper}>
             <a
                 className={styles.appLink}
                 href="https://rock.prezly.com"
@@ -49,11 +49,17 @@ export function PreviewBar({ newsroom }: Props) {
             >
                 <IconPrezly />
             </a>
-            {isSecretStoryPage && (
+
+            {isSecretStoryPage ? (
                 <p className={styles.description}>
                     This is a preview with a temporary URL which will change after publishing.
                 </p>
+            ) : (
+                <p className={styles.description}>
+                    Site preview
+                </p>
             )}
+            
             <div className={styles.actions}>
                 <a
                     className={styles.action}