Merge pull request #1528 from lbryio/md-fix

Fix markdown preview

CHANGELOG.md

@@ -33,11 +33,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
    * Fix don't allow dark mode with automatic night mode enabled ([#1005](https://github.com/lbryio/lbry-app/issues/1005))
    * Fix description box on Publish (dark theme) ([#1356](https://github.com/lbryio/lbry-app/issues/#1356))
    * Fix price wrapping in price badge ([#1420](https://github.com/lbryio/lbry-app/pull/1420))
-   * Fix spacing in search suggestions ([#1422])(https://github.com/lbryio/lbry-app/pull/1422))
-   * Fix text/HTML files don't display correctly in-app anymore ([#1379])(https://github.com/lbryio/lbry-app/issues/1379)
-   * Fix notification modals when reward is claimed ([#1436])(https://github.com/lbryio/lbry-app/issues/1436) and ([#1407])(https://github.com/lbryio/lbry-app/issues/1407)
-   * Fix disabled cards(grayed out) ([#1466])(https://github.com/lbryio/lbry-app/issues/1466)
+   * Fix spacing in search suggestions ([#1422](https://github.com/lbryio/lbry-app/pull/1422))
+   * Fix text/HTML files don't display correctly in-app anymore ([#1379](https://github.com/lbryio/lbry-app/issues/1379))
+   * Fix notification modals when reward is claimed ([#1436](https://github.com/lbryio/lbry-app/issues/1436)) and ([#1407](https://github.com/lbryio/lbry-app/issues/1407))
+   * Fix disabled cards(grayed out) ([#1466](https://github.com/lbryio/lbry-app/issues/1466))
    * Fix markdown render ([#1179](https://github.com/lbryio/lbry-app/issues/1179))
+   * Fix new lines not showing correctly after markdown changes ([#1504](https://github.com/lbryio/lbry-app/issues/1504))
    * Fix claim ID being null when reporting a claim that was not previously download ([issue#1512](https://github.com/lbryio/lbry-app/issues/1512)) ([PR#1530](https://github.com/lbryio/lbry-app/pull/1530))
 
 

src/renderer/component/video/internal/play-button.jsx

@@ -17,9 +17,7 @@ class VideoPlayButton extends React.PureComponent<Props> {
     const icon = doesPlayback ? 'Play' : 'Folder';
     const label = doesPlayback ? 'Play' : 'View';
 
-    return (
-      <Button button="primary" disabled={disabled} label={label} icon={icon} onClick={play} />
-    );
+    return <Button button="primary" disabled={disabled} label={label} icon={icon} onClick={play} />;
   }
 }
 

src/renderer/page/file/index.js

@@ -33,7 +33,7 @@ const select = (state, props) => ({
   playingUri: selectPlayingUri(state),
   isPaused: selectMediaPaused(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state)
+  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
 });
 
 const perform = dispatch => ({

src/renderer/page/settings/index.js

@@ -26,7 +26,7 @@ const select = state => ({
   language: selectCurrentLanguage(state),
   languages: selectLanguages(state),
   automaticDarkModeEnabled: makeSelectClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED)(state),
-  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state)
+  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
 });
 
 const perform = dispatch => ({

src/renderer/page/settings/view.jsx

@@ -31,7 +31,7 @@ type Props = {
   currentTheme: string,
   themes: Array<string>,
   automaticDarkModeEnabled: boolean,
-  autoplay: boolean
+  autoplay: boolean,
 };
 
 type State = {
@@ -144,7 +144,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
       currentTheme,
       themes,
       automaticDarkModeEnabled,
-      autoplay
+      autoplay,
     } = this.props;
 
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;

src/renderer/redux/reducers/settings.js

@@ -24,7 +24,7 @@ const defaultState = {
     theme: getLocalStorageSetting(SETTINGS.THEME, 'light'),
     themes: getLocalStorageSetting(SETTINGS.THEMES, []),
     automaticDarkModeEnabled: getLocalStorageSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false),
-    autoplay: getLocalStorageSetting(SETTINGS.AUTOPLAY, false)
+    autoplay: getLocalStorageSetting(SETTINGS.AUTOPLAY, false),
   },
   isNight: false,
   languages: {},

src/renderer/scss/_vars.scss

@@ -12,6 +12,7 @@ $large-breakpoint: 1760px;
   --side-nav-width: 220px;
   --side-nav-width-m: 240px;
   --side-nav-width-l: 320px;
+  --font-size-subtext-multiple: 0.92;
 
   --video-aspect-ratio: 56.25%; // 9 x 16
   --snack-bar-width: 756px;

src/renderer/scss/component/_card.scss

@@ -198,7 +198,6 @@
   padding-top: $spacing-vertical * 1/3;
   word-break: break-word;
   font-family: 'metropolis-medium';
-  font-size: 13px;
 }
 
 .card__actions {

src/renderer/scss/component/_markdown-editor.scss

@@ -45,8 +45,9 @@ div.editor-toolbar a {
 }
 
 .editor-preview {
-  background: var(--card-bg) !important;
-  border: 0 !important;
+  font-size: calc(var(--font-size-subtext-multiple) * 1em);
+  background: var(--color-bg) !important;
+  border: 0;
 }
 
 .editor-preview-side {
@@ -54,18 +55,6 @@ div.editor-toolbar a {
   border: 1px solid var(--input-border-color) !important;
 }
 
-.editor-preview pre,
-.editor-preview-side pre {
-  background: #eee;
-}
-
-.editor-preview table td,
-.editor-preview table th,
-.editor-preview-side table td,
-.editor-preview-side table th {
-  border: 1px solid var(--input-border-color) !important;
-}
-
 .CodeMirror .CodeMirror-code .cm-tag {
   color: #63a35c;
 }

src/renderer/scss/component/_markdown-preview.scss

@@ -1,8 +1,8 @@
+.editor-preview,
 .markdown-preview {
   margin: 0;
 
-  /* Headings: title */
-
+  /* Headers */
   h1,
   h2,
   h3,
@@ -37,39 +37,48 @@
     font-size: 0.84em;
     color: var(--color-help);
   }
-}
 
-.markdown-preview table {
-  padding: 8px;
-  margin: 16px 0;
-  background-color: var(--card-bg);
-
-  tr td,
-  tr th,
-  tr td:first-of-type,
-  tr th:first-of-type,
-  tr td:last-of-type,
-  tr th:last-of-type {
-    padding: 8px;
+  /* Paragraphs */
+  p {
+    white-space: pre-line;
   }
-}
 
-.markdown-preview code {
-  display: block;
-  padding: 8px;
-  margin: 16px 0;
-  background-color: var(--color-bg-alt);
-  color: var(--color-help);
-  font-size: 1em;
-  font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
-}
+  /* Strikethrough text */
+  del {
+    color: var(--color-help);
+  }
 
-.markdown-preview hr {
-  border: 1px solid var(--color-divider);
-}
+  /* Tables */
+  table {
+    padding: 8px;
+    margin: 16px 0;
+    background-color: var(--card-bg);
 
-.markdown-preview del {
-  color: var(--color-help);
+    tr td,
+    tr th,
+    tr td:first-of-type,
+    tr th:first-of-type,
+    tr td:last-of-type,
+    tr th:last-of-type {
+      padding: 8px;
+    }
+  }
+
+  /* Horizontal Rule */
+  hr {
+    border: 1px solid var(--color-divider);
+  }
+
+  /* Code */
+  code {
+    display: block;
+    padding: 8px;
+    margin: 16px 0;
+    background-color: var(--color-bg-alt);
+    color: var(--color-help);
+    font-size: 1em;
+    font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
+  }
 }
 
 blockquote {

src/renderer/scss/component/_table.scss

@@ -1,4 +1,5 @@
 table.table,
+.editor-preview table,
 .markdown-preview table {
   word-wrap: break-word;
   max-width: 100%;
@@ -28,6 +29,7 @@ table.table,
 
   th {
     font-family: 'metropolis-semibold';
+    border: 0;
   }
 
   td {