From 7dccba5813bb8a0473fe82e73b38b0753bb18244 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 12 Mar 2021 11:18:09 -0500
Subject: [PATCH] only use new post styling for markdown

---
 ui/component/page/view.jsx          |  6 +++---
 ui/page/file/view.jsx               | 28 +++++++++++++++++-----------
 ui/scss/component/_claim-list.scss  |  1 +
 ui/scss/component/_file-render.scss | 19 +++++--------------
 ui/scss/component/_main.scss        |  2 +-
 5 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx
index e08e28792..0ea99ef6f 100644
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@@ -27,7 +27,7 @@ type Props = {
   noSideNavigation: boolean,
   fullWidthPage: boolean,
   videoTheaterMode: boolean,
-  isText?: boolean,
+  isMarkdown?: boolean,
   backout: {
     backLabel?: string,
     backNavDefault?: string,
@@ -48,7 +48,7 @@ function Page(props: Props) {
     noSideNavigation = false,
     backout,
     videoTheaterMode,
-    isText = false,
+    isMarkdown = false,
   } = props;
 
   const {
@@ -107,7 +107,7 @@ function Page(props: Props) {
             'main--auth-page': authPage,
             'main--file-page': filePage,
             'main--theater-mode': isOnFilePage && videoTheaterMode,
-            'main--text': isText,
+            'main--markdown': isMarkdown,
           })}
         >
           {children}
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index a09262430..f6dd8aecf 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -48,7 +48,7 @@ function FilePage(props: Props) {
   } = props;
   const cost = costInfo ? costInfo.cost : null;
   const hasFileInfo = fileInfo !== undefined;
-  const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
+  const isMarkdown = renderMode === RENDER_MODES.MARKDOWN;
 
   React.useEffect(() => {
     // always refresh file info when entering file page to see if we have the file
@@ -90,10 +90,20 @@ function FilePage(props: Props) {
       );
     }
 
-    if (RENDER_MODES.TEXT_MODES.includes(renderMode)) {
+    if (isMarkdown) {
       return <PostViewer uri={uri} />;
     }
 
+    if (RENDER_MODES.TEXT_MODES.includes(renderMode)) {
+      return (
+        <React.Fragment>
+          <FileTitleSection uri={uri} />
+          <FileRenderInitiator uri={uri} />
+          <FileRenderInline uri={uri} />
+        </React.Fragment>
+      );
+    }
+
     return (
       <React.Fragment>
         <FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
@@ -112,15 +122,11 @@ function FilePage(props: Props) {
   }
 
   return (
-    <Page className="file-page" filePage isText={isText}>
-      <div
-        className={classnames('section card-stack', `file-page__${renderMode}`, {
-          'file-page__text': isText,
-        })}
-      >
+    <Page className="file-page" filePage isMarkdown={isMarkdown}>
+      <div className={classnames('section card-stack', `file-page__${renderMode}`)}>
         {renderFilePageLayout()}
 
-        {!isText && (
+        {!isMarkdown && (
           <div className="file-page__secondary-content">
             <div>
               {RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />}
@@ -132,8 +138,8 @@ function FilePage(props: Props) {
         )}
       </div>
 
-      {!isText && !videoTheaterMode && <RecommendedContent uri={uri} />}
-      {isText && (
+      {!isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
+      {isMarkdown && (
         <div className="file-page__post-comments">
           <CommentsList uri={uri} linkedComment={linkedComment} />
         </div>
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 5dad4fbd4..f6cb92cbb 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -585,6 +585,7 @@
 }
 
 .claim-link {
+  @include font-sans;
   position: relative;
 }
 
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index d811cb830..6a881cd00 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -12,13 +12,12 @@
     margin-top: var(--spacing-l);
   }
 
-  .file-page__text {
-    .card {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+  .file-page__md {
+    .file-viewer--document {
+      margin-top: var(--spacing-l);
 
-      &:first-child {
-        margin-bottom: 0;
+      @media (min-width: $breakpoint-small) {
+        margin-top: var(--spacing-xl);
       }
     }
 
@@ -132,14 +131,6 @@
   }
 }
 
-.file-viewer--document {
-  margin-top: var(--spacing-l);
-
-  @media (min-width: $breakpoint-small) {
-    margin-top: var(--spacing-xl);
-  }
-}
-
 .file-render__viewer--three {
   position: relative;
   overflow: hidden;
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 7d4401701..34d490314 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -192,7 +192,7 @@
   }
 }
 
-.main--text {
+.main--markdown {
   flex-direction: column;
 }