);
}
-export default React.memo(styled(KeyPair)`
+export default React.memo(styled(KeyPair)(({ theme }: ThemeProps) => `
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
@@ -44,7 +44,7 @@ export default React.memo(styled(KeyPair)`
> .address {
display: inline-block;
flex: 1;
- font-family: ${({ theme }: ThemeProps) => theme.fontMono};
+ font: ${theme.fontMono};
margin-left: 1rem;
opacity: 0.5;
overflow: hidden;
@@ -69,4 +69,4 @@ export default React.memo(styled(KeyPair)`
text-transform: uppercase;
}
}
-`);
+`));
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index 93da72c535..84d54d7867 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -98,7 +98,7 @@ export default React.memo(styled(Body)(({ theme }: ThemeProps) => `
}
&.hash {
- font-family: ${theme.fontMono};
+ font: ${theme.fontMono};
}
&.links {
diff --git a/packages/react-components/src/Table/Foot.tsx b/packages/react-components/src/Table/Foot.tsx
index 5bba1d2403..0aee8fcb34 100644
--- a/packages/react-components/src/Table/Foot.tsx
+++ b/packages/react-components/src/Table/Foot.tsx
@@ -27,7 +27,7 @@ function Foot ({ className = '', footer, isEmpty }: Props): React.ReactElement `
td {
color: rgba(${theme.theme === 'dark' ? '254, 240, 240' : '78, 78, 78'}, 0.66);
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
font-weight: 400;
padding: 0.75rem 1rem 0.25rem;
text-align: right;
diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx
index 2d12c7e7d9..3c2bfae7bf 100644
--- a/packages/react-components/src/Table/Head.tsx
+++ b/packages/react-components/src/Table/Head.tsx
@@ -53,7 +53,7 @@ export default React.memo(styled(Head)(({ theme }: ThemeProps) => `
z-index: 1;
th {
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
font-weight: 400;
padding: 0.75rem 1rem 0.25rem;
text-align: right;
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
index 553f828791..4fc30c7db5 100644
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@@ -44,7 +44,7 @@ export default (theme: ThemeDef): string => `
}
button.ui--Button {
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
}
.editable {
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 639997d6a1..ee7cf559e5 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -215,7 +215,7 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr
#root {
background: ${theme.bgPage};
color: ${theme.color};
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
height: 100%;
}
@@ -300,7 +300,7 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr
body {
height: 100%;
margin: 0;
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
}
br {
@@ -332,8 +332,9 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr
h1, h2, h3, h4, h5 {
color: ${theme.colorSummary};
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
font-weight: ${theme.fontWeightLight};
+ margin-bottom: 0.25rem;
}
h1 {
@@ -345,8 +346,8 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr
}
}
- h1, h2, h3, h4, h5 {
- margin-bottom: 0.25rem;
+ h2 {
+ font-size: 1.71428571rem;
}
header {
@@ -366,7 +367,7 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr
box-sizing: border-box;
color: ${theme.colorLabel};
display: block;
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
font-size: 1rem;
font-weight: 400;
}
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
index c3a0d84f53..491816c900 100644
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@@ -24,7 +24,8 @@ export default (theme: ThemeDef): string => `
.ui.selection.dropdown > input {
background: ${theme.bgInput};
color: ${theme.color};
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
+ font-size: 1rem;
&:focus {
background: ${theme.bgInput};
@@ -125,7 +126,7 @@ export default (theme: ThemeDef): string => `
background: ${theme.bgPage};
box-shadow: none;
color: ${theme.color};
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
> .actions,
> .content {
@@ -143,7 +144,7 @@ export default (theme: ThemeDef): string => `
background: transparent;
border-bottom: none;
color: ${theme.colorSummary};
- font-family: ${theme.fontSans};
+ font: ${theme.fontSans};
font-size: 1.75rem;
font-weight: 400;
line-height: 1.25rem;
diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx
index 93fbe43285..ccdc9df92a 100644
--- a/packages/react-params/src/Holder.tsx
+++ b/packages/react-params/src/Holder.tsx
@@ -21,7 +21,7 @@ function Holder ({ children, className = '', withBorder, withPadding }: Props):
);
}
-export default React.memo(styled(Holder)`
+export default React.memo(styled(Holder)(({ theme }: ThemeProps) => `
&.withBorder {
border-left: 0.25rem solid #f2f2f2;
}
@@ -37,7 +37,7 @@ export default React.memo(styled(Holder)`
.ui--Param .ui--Labelled label {
text-transform: none !important;
- font-family: ${({ theme }: ThemeProps) => theme.fontMono};
+ font: ${theme.fontMono};
}
.ui--row {
@@ -45,7 +45,7 @@ export default React.memo(styled(Holder)`
}
.ui--Param-Address {
- font-family: ${({ theme }: ThemeProps) => theme.fontMono};
+ font: ${theme.fontMono};
}
.ui--Params-Content {
@@ -95,4 +95,4 @@ export default React.memo(styled(Holder)`
right: 3.5rem;
}
}
-`);
+`));