only use new post styling for markdown

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}

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}>
+    <Page className="file-page" filePage isMarkdown={isMarkdown}>
-      <div
+      <div className={classnames('section card-stack', `file-page__${renderMode}`)}>
-        className={classnames('section card-stack', `file-page__${renderMode}`, {
-          'file-page__text': isText,
-        })}
-      >
         {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} />}
+      {!isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
-      {isText && (
+      {isMarkdown && (
         <div className="file-page__post-comments">
           <CommentsList uri={uri} linkedComment={linkedComment} />
         </div>

ui/scss/component/_claim-list.scss

@@ -585,6 +585,7 @@
 }
 
 .claim-link {
+  @include font-sans;
   position: relative;
 }
 

ui/scss/component/_file-render.scss

@@ -12,13 +12,12 @@
     margin-top: var(--spacing-l);
   }
 
-  .file-page__text {
+  .file-page__md {
-    .card {
+    .file-viewer--document {
-      border-bottom-left-radius: 0;
+      margin-top: var(--spacing-l);
-      border-bottom-right-radius: 0;
 
-      &:first-child {
+      @media (min-width: $breakpoint-small) {
-        margin-bottom: 0;
+        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;

ui/scss/component/_main.scss

@@ -192,7 +192,7 @@
   }
 }
 
-.main--text {
+.main--markdown {
   flex-direction: column;
 }