aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-shared')
-rw-r--r--packages/react-shared/src/components/anchor_title.tsx5
-rw-r--r--packages/react-shared/src/components/container.tsx55
-rw-r--r--packages/react-shared/src/components/markdown_paragraph_block.tsx14
-rw-r--r--packages/react-shared/src/components/markdown_section.tsx25
-rw-r--r--packages/react-shared/src/index.ts1
-rw-r--r--packages/react-shared/src/utils/colors.ts1
-rw-r--r--packages/react-shared/tsconfig.json1
7 files changed, 94 insertions, 8 deletions
diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx
index a83881b67..dabdfff9b 100644
--- a/packages/react-shared/src/components/anchor_title.tsx
+++ b/packages/react-shared/src/components/anchor_title.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { Link as ScrollLink } from 'react-scroll';
import { HeaderSizes, Styles } from '../types';
+import { colors } from '../utils/colors';
import { constants } from '../utils/constants';
const headerSizeToScrollOffset: { [headerSize: string]: number } = {
@@ -27,7 +28,7 @@ const styles: Styles = {
cursor: 'pointer',
},
h1: {
- fontSize: '1.8em',
+ fontSize: '30px',
},
h2: {
fontSize: '1.5em',
@@ -63,7 +64,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
} as any
}
>
- <div className="inline-block" style={{ paddingRight: 4 }}>
+ <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}>
{this.props.title}
</div>
<ScrollLink
diff --git a/packages/react-shared/src/components/container.tsx b/packages/react-shared/src/components/container.tsx
new file mode 100644
index 000000000..f2ae68b70
--- /dev/null
+++ b/packages/react-shared/src/components/container.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+type StringOrNum = string | number;
+
+export type ContainerTag = 'div' | 'span';
+
+export interface ContainerProps {
+ marginTop?: StringOrNum;
+ marginBottom?: StringOrNum;
+ marginRight?: StringOrNum;
+ marginLeft?: StringOrNum;
+ padding?: StringOrNum;
+ paddingTop?: StringOrNum;
+ paddingBottom?: StringOrNum;
+ paddingRight?: StringOrNum;
+ paddingLeft?: StringOrNum;
+ backgroundColor?: string;
+ borderRadius?: StringOrNum;
+ maxWidth?: StringOrNum;
+ maxHeight?: StringOrNum;
+ width?: StringOrNum;
+ height?: StringOrNum;
+ minWidth?: StringOrNum;
+ minHeight?: StringOrNum;
+ isHidden?: boolean;
+ className?: string;
+ position?: 'absolute' | 'fixed' | 'relative' | 'unset';
+ display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
+ top?: string;
+ left?: string;
+ right?: string;
+ bottom?: string;
+ zIndex?: number;
+ Tag?: ContainerTag;
+ cursor?: string;
+ id?: string;
+ onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+ overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
+}
+
+export const Container: React.StatelessComponent<ContainerProps> = props => {
+ const { children, className, Tag, isHidden, id, onClick, ...style } = props;
+ const visibility = isHidden ? 'hidden' : undefined;
+ return (
+ <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
+ {children}
+ </Tag>
+ );
+};
+
+Container.defaultProps = {
+ Tag: 'div',
+};
+
+Container.displayName = 'Container';
diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx
new file mode 100644
index 000000000..519638446
--- /dev/null
+++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx
@@ -0,0 +1,14 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { colors } from '../utils/colors';
+
+export interface MarkdownParagraphBlockProps {}
+
+export interface MarkdownParagraphBlockState {}
+
+export class MarkdownParagraphBlock extends React.Component<MarkdownParagraphBlockProps, MarkdownParagraphBlockState> {
+ public render(): React.ReactNode {
+ return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{this.props.children}</span>;
+ }
+}
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index e84d2b078..3dc3efe12 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -8,15 +8,18 @@ import { colors } from '../utils/colors';
import { utils } from '../utils/utils';
import { AnchorTitle } from './anchor_title';
+import { Container } from './container';
import { Link } from './link';
import { MarkdownCodeBlock } from './markdown_code_block';
import { MarkdownLinkBlock } from './markdown_link_block';
+import { MarkdownParagraphBlock } from './markdown_paragraph_block';
export interface MarkdownSectionProps {
sectionName: string;
markdownContent: string;
headerSize?: HeaderSizes;
githubLink?: string;
+ shouldReformatTitle?: boolean;
}
interface DefaultMarkdownSectionProps {
@@ -32,6 +35,7 @@ export interface MarkdownSectionState {
export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
public static defaultProps: Partial<MarkdownSectionProps> = {
headerSize: HeaderSizes.H3,
+ shouldReformatTitle: true,
};
constructor(props: MarkdownSectionProps) {
super(props);
@@ -43,7 +47,9 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
const id = utils.getIdFromName(sectionName);
- const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
+ const finalSectionName = this.props.shouldReformatTitle
+ ? utils.convertCamelCaseToSpaces(sectionName)
+ : sectionName;
return (
<div
className="md-px1 sm-px2 overflow-hidden"
@@ -51,12 +57,12 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
<ScrollElement name={id}>
- <div className="clearfix pt3">
+ <Container className="clearfix" marginBottom="20px">
<div className="col lg-col-8 md-col-8 sm-col-12">
- <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
+ <span style={{ color: colors.grey700 }}>
<AnchorTitle
headerSize={headerSize}
- title={finalSectionName}
+ title={_.capitalize(finalSectionName)}
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
@@ -71,16 +77,23 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
</div>
)}
</div>
- </div>
- <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
+ </Container>
<ReactMarkdown
source={markdownContent}
escapeHtml={false}
renderers={{
code: MarkdownCodeBlock,
link: MarkdownLinkBlock,
+ paragraph: MarkdownParagraphBlock,
}}
/>
+ <Container
+ width={'100%'}
+ height={'1px'}
+ backgroundColor={colors.grey300}
+ marginTop={'32px'}
+ marginBottom={'32px'}
+ />
</ScrollElement>
</div>
);
diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts
index e33b09f19..2ab9b393e 100644
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -5,6 +5,7 @@ export { MarkdownSection } from './components/markdown_section';
export { NestedSidebarMenu } from './components/nested_sidebar_menu';
export { SectionHeader } from './components/section_header';
export { Link } from './components/link';
+export { Container } from './components/container';
export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';
diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts
index 596c17e83..a4dd7fefa 100644
--- a/packages/react-shared/src/utils/colors.ts
+++ b/packages/react-shared/src/utils/colors.ts
@@ -18,6 +18,7 @@ const baseColors = {
darkGrey: '#818181',
landingLinkGrey: '#919191',
linkSectionGrey: '#999999',
+ greyTheme: '#666666',
grey700: '#616161',
grey750: '#515151',
grey800: '#424242',
diff --git a/packages/react-shared/tsconfig.json b/packages/react-shared/tsconfig.json
index 5abe0ab4e..9fd1b04cf 100644
--- a/packages/react-shared/tsconfig.json
+++ b/packages/react-shared/tsconfig.json
@@ -4,6 +4,7 @@
"outDir": "lib",
"rootDir": "src",
"jsx": "react",
+ "strictNullChecks": false,
"baseUrl": ".",
"paths": {
"*": ["node_modules/@types/*", "*"]
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 15:56:01 +0800