git ssb

1+

Daan Patchwork / manyverse



Commit 9dfef253826782c2dfb5b6335d3dd317756bf3f3

Browse Files

ux: improve typography and styling in markdown posts

David Gómez authored on 4/3/2020, 11:06:22 AM
staltz committed on 4/3/2020, 11:06:22 AM
Parent: dc16dad0ac4a489f5b6e01d067074e5f2a45105f

Files changed

src/frontend/components/Markdown.tschanged
src/frontend/global-styles/typography.tschanged
src/frontend/components/Markdown.tsView
@@ -3,96 +3,105 @@
33 * This Source Code Form is subject to the terms of the Mozilla Public
44 * License, v. 2.0. If a copy of the MPL was not distributed with this
55 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
66
7-import {createElement, PureComponent} from 'react';
8-import {View, Text, Linking, StyleSheet, TextProperties} from 'react-native';
7+import {createElement as $, PureComponent} from 'react';
8+import {Linking, StyleSheet, Text, TextProperties, View} from 'react-native';
99 import {Palette} from '../global-styles/palette';
1010 import {Dimensions} from '../global-styles/dimens';
1111 import {Typography as Typ} from '../global-styles/typography';
1212 import {GlobalEventBus} from '../drivers/eventbus';
1313 import ZoomableImage from './ZoomableImage';
14-const remark = require('remark');
15-const ReactMarkdown = require('react-markdown');
16-const normalizeForReactNative = require('mdast-normalize-react-native');
1714 const gemojiToEmoji = require('remark-gemoji-to-emoji');
1815 const imagesToSsbServeBlobs = require('remark-images-to-ssb-serve-blobs');
16+const linkifyRegex = require('remark-linkify-regex');
17+const normalizeForReactNative = require('mdast-normalize-react-native');
18+const ReactMarkdown = require('react-markdown');
1919 const Ref = require('ssb-ref');
20-const linkifyRegex = require('remark-linkify-regex');
20+const remark = require('remark');
2121
22-const $ = createElement;
23-
2422 const textProps: TextProperties = {
2523 selectable: true,
2624 textBreakStrategy: 'simple',
2725 };
2826
2927 const styles = StyleSheet.create({
30- paragraph: {
31- flexWrap: 'wrap',
32- flexDirection: 'row',
33- alignItems: 'flex-start',
34- justifyContent: 'flex-start',
35- marginVertical: Dimensions.verticalSpaceSmall,
36- },
37-
38- paragraphText: {
39- flexWrap: 'wrap',
40- overflow: 'visible',
41- color: Palette.text,
42- },
43-
4428 text: {},
4529
46- listItemText: {
47- color: Palette.text,
48- },
49-
5030 heading1: {
51- fontWeight: 'bold',
52- marginVertical: Dimensions.verticalSpaceNormal,
53- fontSize: Typ.baseSize * Typ.scaleUp * Typ.scaleUp,
31+ fontWeight: '700',
5432 color: Palette.text,
33+ fontSize: Typ.baseSize * Math.pow(Typ.scaleUp, 3),
34+ lineHeight: Typ.baseSize * Math.pow(Typ.scaleUp, 3) * Typ.baseLeading,
35+ marginVertical: Dimensions.verticalSpaceSmall,
5536 },
5637
5738 heading2: {
58- fontWeight: 'bold',
59- marginVertical: Dimensions.verticalSpaceNormal,
60- fontSize: Typ.baseSize * Typ.scaleUp,
39+ fontWeight: '700',
6140 color: Palette.text,
41+ fontSize: Typ.baseSize * Math.pow(Typ.scaleUp, 2),
42+ lineHeight: Typ.baseSize * Math.pow(Typ.scaleUp, 2) * Typ.baseLeading,
43+ marginVertical: Dimensions.verticalSpaceSmall,
6244 },
6345
6446 heading3: {
65- fontWeight: 'bold',
47+ fontWeight: '700',
48+ color: Palette.text,
49+ fontSize: Typ.baseSize * Typ.scaleUp,
50+ lineHeight: Typ.baseSize * Typ.scaleUp * Typ.baseLeading,
6651 marginVertical: Dimensions.verticalSpaceSmall,
67- fontSize: Typ.baseSize,
68- color: Palette.text,
6952 },
7053
7154 heading4: {
72- fontWeight: 'bold',
73- fontSize: Typ.baseSize * Typ.scaleDown,
55+ fontWeight: '700',
7456 color: Palette.text,
57+ fontSize: Typ.baseSize,
58+ lineHeight: Typ.baseSize * Typ.baseLeading,
59+ marginVertical: Dimensions.verticalSpaceSmall,
7560 },
7661
7762 heading5: {
78- fontWeight: 'bold',
79- fontSize: Typ.baseSize * Typ.scaleDown * Typ.scaleDown,
63+ fontWeight: '700',
8064 color: Palette.text,
65+ fontSize: Typ.baseSize * Typ.scaleDown,
66+ lineHeight: Typ.baseSize * Typ.baseLeading,
67+ marginVertical: Dimensions.verticalSpaceSmall,
8168 },
8269
8370 heading6: {
84- fontWeight: 'bold',
85- fontSize: Typ.baseSize * Typ.scaleDown * Typ.scaleDown * Typ.scaleDown,
71+ fontWeight: '700',
8672 color: Palette.text,
73+ fontSize: Typ.baseSize * Math.pow(Typ.scaleDown, 2),
74+ lineHeight: Typ.baseSize * Typ.baseLeading,
75+ marginVertical: Dimensions.verticalSpaceSmall,
8776 },
8877
78+ paragraph: {
79+ flexWrap: 'wrap',
80+ flexDirection: 'row',
81+ alignItems: 'flex-start',
82+ justifyContent: 'flex-start',
83+ marginVertical: Dimensions.verticalSpaceSmall,
84+ },
85+
86+ paragraphText: {
87+ flexWrap: 'wrap',
88+ overflow: 'visible',
89+ color: Palette.text,
90+ fontSize: Typ.baseSize,
91+ lineHeight: Typ.baseSize * Typ.baseLeading,
92+ },
93+
94+ strong: {
95+ fontWeight: '700',
96+ },
97+
8998 em: {
9099 fontStyle: 'italic',
91100 },
92101
93- strong: {
94- fontWeight: 'bold',
102+ strikethrough: {
103+ textDecorationLine: 'line-through',
95104 },
96105
97106 link: {
98107 textDecorationLine: 'underline',
@@ -102,54 +111,52 @@
102111 color: Palette.textBrand,
103112 textDecorationLine: 'underline',
104113 },
105114
106- inlineCode: {
107- backgroundColor: Palette.backgroundTextWeak,
108- color: Palette.textWeak,
109- paddingLeft: 4,
110- paddingRight: 4,
111- borderRadius: 2,
112- fontFamily: Typ.fontFamilyMonospace,
115+ listItemText: {
116+ color: Palette.text,
117+ fontSize: Typ.baseSize,
118+ lineHeight: Typ.baseSize * Typ.baseLeading,
113119 },
114120
115- strikethrough: {
116- textDecorationLine: 'line-through',
121+ orderedBullet: {
122+ fontWeight: '700',
117123 },
118124
119- blockquote: {
125+ inlineCode: {
120126 backgroundColor: Palette.backgroundTextWeak,
121- borderLeftWidth: 3,
122- borderLeftColor: Palette.backgroundTextWeakStrong,
123- paddingLeft: Dimensions.horizontalSpaceSmall,
124- paddingRight: 1,
127+ fontFamily: Typ.fontFamilyMonospace,
128+ color: Palette.textWeak,
125129 },
126130
127131 codeBlock: {
128132 backgroundColor: Palette.backgroundTextWeak,
129- marginVertical: 2,
130- paddingVertical: 3,
131- paddingHorizontal: 5,
132- borderRadius: 2,
133+ marginVertical: Dimensions.verticalSpaceSmall,
134+ padding: Dimensions.verticalSpaceSmall,
133135 },
134136
135137 codeText: {
138+ fontFamily: Typ.fontFamilyMonospace,
139+ fontWeight: '400',
136140 color: Palette.textWeak,
137141 fontSize: Typ.fontSizeSmall,
138- fontWeight: 'normal',
139- fontFamily: Typ.fontFamilyMonospace,
142+ lineHeight: Typ.fontSizeSmall * Typ.baseLeading,
140143 },
141144
145+ blockquote: {
146+ backgroundColor: Palette.backgroundTextWeak,
147+ borderLeftWidth: 3,
148+ borderLeftColor: Palette.backgroundTextWeakStrong,
149+ marginVertical: Dimensions.verticalSpaceSmall,
150+ paddingLeft: Dimensions.horizontalSpaceSmall,
151+ paddingRight: 1,
152+ },
153+
142154 horizontalLine: {
143155 backgroundColor: Palette.textLine,
156+ marginVertical: Dimensions.verticalSpaceSmall,
144157 height: 2,
145- marginTop: Dimensions.verticalSpaceSmall,
146- marginBottom: Dimensions.verticalSpaceSmall,
147158 },
148-
149- orderedBullet: {
150- fontWeight: 'bold',
151- },
152159 });
153160
154161 const renderers = {
155162 root: (props: {children: any}) => $(View, null, props.children),
src/frontend/global-styles/typography.tsView
@@ -5,18 +5,20 @@
55 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
66
77 import {Platform} from 'react-native';
88
9-const BASE_SIZE = 15; // px
9+const BASE_SIZE = 16; // px | pt
1010 const SCALE = 1.125;
11+const LEADING = 1.5;
1112
1213 const scaleUp = SCALE;
1314 const scaleDown = 1 / SCALE;
1415
1516 export const Typography = {
1617 scaleUp,
1718 scaleDown,
1819 baseSize: BASE_SIZE,
20+ baseLeading: LEADING,
1921 fontSizeLarge: BASE_SIZE * scaleUp * scaleUp,
2022 fontSizeBig: BASE_SIZE * scaleUp,
2123 fontSizeNormal: BASE_SIZE,
2224 fontSizeSmall: BASE_SIZE * scaleDown,

Built with git-ssb-web