+
{hash && (
diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx
index 397660f3ab..b0bf15b60b 100644
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@@ -137,10 +137,6 @@ export default React.memo(styled(CardSummary)`
}
}
- > label {
- font-size: 0.95rem;
- }
-
.isSecondary {
font-size: 1rem;
font-weight: var(--font-weight-normal);
diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx
index 0dbde17274..20e869b9d2 100644
--- a/packages/react-components/src/Dropdown.tsx
+++ b/packages/react-components/src/Dropdown.tsx
@@ -145,7 +145,7 @@ const Dropdown = React.memo(styled(BaseDropdown)`
width: 32px;
&.opaque {
- opacity: 0.5;
+ opacity: 0.6;
}
}
diff --git a/packages/react-components/src/Event.tsx b/packages/react-components/src/Event.tsx
index 6e1e5ec802..382ced2da6 100644
--- a/packages/react-components/src/Event.tsx
+++ b/packages/react-components/src/Event.tsx
@@ -20,6 +20,7 @@ export interface Props {
className?: string;
eventName?: string;
value: Event;
+ withExpander?: boolean;
}
interface Value {
@@ -31,7 +32,7 @@ interface AbiEvent extends DecodedEvent {
values: Value[];
}
-function EventDisplay ({ children, className = '', eventName, value }: Props): React.ReactElement
{
+function EventDisplay ({ children, className = '', eventName, value, withExpander }: Props): React.ReactElement {
const { t } = useTranslation();
const names = value.data.names;
const params = value.typeDef.map((type, i) => ({
@@ -84,6 +85,7 @@ function EventDisplay ({ children, className = '', eventName, value }: Props): R
overrides={overrides}
params={params}
values={values}
+ withExpander={withExpander}
>
{abiEvent && (
<>
diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx
index 39b7c353cc..aa053ae2bf 100644
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@@ -151,18 +151,10 @@ export default React.memo(styled(Expander)`
justify-content: end;
}
}
-
- .ui--Params.withBorder {
- padding-left: 0.25rem;
- }
}
&.isHeader {
margin-left: 2rem;
-
- .ui--Expander-summary-title {
- font-size: 1.1rem;
- }
}
&.withBreaks .ui--Expander-content {
@@ -199,7 +191,7 @@ export default React.memo(styled(Expander)`
}
.ui--Expander-summary-header-sub {
- font-size: 1rem;
+ font-size: var(--font-size-small);
opacity: 0.6;
}
}
diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx
index 90c24887d9..cfa87b492f 100644
--- a/packages/react-components/src/InputAddress/KeyPair.tsx
+++ b/packages/react-components/src/InputAddress/KeyPair.tsx
@@ -1,11 +1,12 @@
// Copyright 2017-2023 @polkadot/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useMemo } from 'react';
import styled from 'styled-components';
import AccountName from '../AccountName';
import IdentityIcon from '../IdentityIcon';
+import { toShortAddress } from '../util/toShortAddress';
interface Props {
address: string;
@@ -16,6 +17,11 @@ interface Props {
}
function KeyPair ({ address, className = '' }: Props): React.ReactElement {
+ const shortAddr = useMemo(
+ () => toShortAddress(address),
+ [address]
+ );
+
return (
- {address}
+ {shortAddr}
);
@@ -43,11 +49,11 @@ export default React.memo(styled(KeyPair)`
display: inline-block;
flex: 1;
font: var(--font-mono);
+ font-size: var(--font-size-small);
margin-left: 1rem;
- opacity: 0.5;
+ opacity: 0.6;
overflow: hidden;
text-align: right;
- text-overflow: ellipsis;
}
> .icon {
diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx
index 1e2351a443..4c0f4a3ef1 100644
--- a/packages/react-components/src/InputBalance.tsx
+++ b/packages/react-components/src/InputBalance.tsx
@@ -118,7 +118,7 @@ export default React.memo(styled(InputBalance)`
}
> div.text:first-child {
- font-size: 0.9em;
+ font-size: var(--font-size-small);
position: absolute;
top: 50%;
transform: translateY(-50%);
diff --git a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
index 1c02dd883a..ea7ea143cc 100644
--- a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
+++ b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
@@ -62,7 +62,8 @@ export default React.memo(styled(LinkedWrapper)`
.ui--DropdownLinked-Item-text {
flex: 1;
- opacity: 0.5;
+ font-size: var(--font-size-small);
+ opacity: 0.6;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
diff --git a/packages/react-components/src/Inspect.tsx b/packages/react-components/src/Inspect.tsx
index bad5a9227d..311a7eeaf4 100644
--- a/packages/react-components/src/Inspect.tsx
+++ b/packages/react-components/src/Inspect.tsx
@@ -76,7 +76,7 @@ function DecodedInspect ({ className, hex, inspect, label }: Props): React.React
{formatted.map(({ name, value }, i) => (
- | {name} |
+ |
{value} |
))}
@@ -85,7 +85,7 @@ function DecodedInspect ({ className, hex, inspect, label }: Props): React.React
className='isLink'
key='hex'
>
- {t('link')} |
+ |
.ui--Labelled-content {
diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx
index 9bc11d8305..aa06e44b14 100644
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/packages/react-components/src/LinkExternal.tsx
@@ -88,7 +88,7 @@ export default React.memo(styled(LinkExternal)`
}
&.isSmall {
- font-size: 0.85rem;
+ font-size: var(--font-size-small);
line-height: 1.35;
text-align: center;
}
diff --git a/packages/react-components/src/Menu/Header.tsx b/packages/react-components/src/Menu/Header.tsx
index 7228425132..ed07f2074e 100644
--- a/packages/react-components/src/Menu/Header.tsx
+++ b/packages/react-components/src/Menu/Header.tsx
@@ -15,9 +15,9 @@ function Header ({ children, className }: HeaderProps): React.ReactElement {
}
export default React.memo(styled(Header)`
- text-transform: uppercase;
- font-size: 0.714rem;
+ color: var(--color-label);
+ font-size: var(--font-size-label);
line-height: 0.857rem;
-
margin-bottom: 0.3rem;
+ text-transform: var(--text-transform-label);
`);
diff --git a/packages/react-components/src/Menu/Item.tsx b/packages/react-components/src/Menu/Item.tsx
index bee6e094c7..50470c57fb 100644
--- a/packages/react-components/src/Menu/Item.tsx
+++ b/packages/react-components/src/Menu/Item.tsx
@@ -33,17 +33,14 @@ function Item ({ children, className = '', icon, isDisabled, label, onClick }: I
}
export default React.memo(styled(Item)`
+ align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
- align-items: center;
-
- position: relative;
-
- font-size: 0.93rem;
+ font-size: var(--font-size-small);
line-height: 0.93rem;
-
padding: 0.5rem 1rem;
+ position: relative;
&:last-child {
margin-bottom: 0;
diff --git a/packages/react-components/src/Modal/Columns.tsx b/packages/react-components/src/Modal/Columns.tsx
index debdf86d9a..3894a518d7 100644
--- a/packages/react-components/src/Modal/Columns.tsx
+++ b/packages/react-components/src/Modal/Columns.tsx
@@ -18,7 +18,7 @@ function Columns ({ children, className = '', hint }: ColumnsProps): React.React
}
export default React.memo(styled(Columns)`
- align-items: flex-start;
+ align-items: center;
display: flex;
justify-content: space-between;
@@ -50,9 +50,9 @@ export default React.memo(styled(Columns)`
box-sizing: border-box;
display: block;
flex: 0 34%;
- font-size: 0.95rem;
+ font-size: var(--font-size-small);
opacity: 0.75;
- padding: 0.75rem 0 0.25rem 0.5rem;
+ padding: 0.25rem 0 0.25rem 0.5rem;
}
}
}
diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx
index d2be8305bc..6a55472f1d 100644
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@@ -111,9 +111,8 @@ export default React.memo(styled(Progress)`
top: 0.375rem;
div {
+ font-size: var(--font-size-small);
line-height: 1;
- font-size: 1.1rem;
- text-shadow: 0 0 2px #f5f3f1;
}
}
diff --git a/packages/react-components/src/Row.tsx b/packages/react-components/src/Row.tsx
index 9c978ba791..765159d08f 100644
--- a/packages/react-components/src/Row.tsx
+++ b/packages/react-components/src/Row.tsx
@@ -33,7 +33,7 @@ export const styles = `
.ui--Row-accountId,
.ui--Row-icon {
filter: grayscale(100);
- opacity: 0.5;
+ opacity: 0.6;
}
}
diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx
index f3f7a78504..419fa1a077 100644
--- a/packages/react-components/src/Table/Head.tsx
+++ b/packages/react-components/src/Table/Head.tsx
@@ -4,8 +4,6 @@
import React from 'react';
import styled from 'styled-components';
-import Icon from '../Icon';
-
type HeaderDef = [React.ReactNode?, string?, number?, (() => void)?];
interface Props {
@@ -37,15 +35,7 @@ function Head ({ children, className = '', filter, header, isEmpty }: Props): Re
onClick={onClick}
>
{index === 0
- ? (
-
-
- {label}
-
- )
+ ? {label}
: isEmpty
? ''
: label
@@ -59,7 +49,6 @@ function Head ({ children, className = '', filter, header, isEmpty }: Props): Re
}
export default React.memo(styled(Head)`
- opacity: 0.85;
z-index: 1;
th {
@@ -78,17 +67,12 @@ export default React.memo(styled(Head)`
display: table-cell;
vertical-align: middle;
- .ui--Icon {
- font-size: 1rem;
- margin-right: 0.5rem;
- vertical-align: middle;
- }
-
.sub {
display: inline-block;
font-size: 1rem;
padding-left: 1.5rem;
text-overflow: ellipsis;
+ vertical-align: middle;
}
}
diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx
index 6d6255479f..610bfbf68e 100644
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/packages/react-components/src/Tabs/Tab.tsx
@@ -48,34 +48,32 @@ function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRo
}
export default React.memo(styled(Tab)`
- position: relative;
- display: flex;
align-items: center;
+ display: flex;
color: #8B8B8B;
- padding: 0 1.5rem;
+ font-size: var(--font-size-button);
height: 100%;
- font-size: 1rem;
- font-weight: 400;
+ padding: 0 1.5rem;
+ position: relative;
+ &:hover {
+ color: #8B8B8B;
- &:hover {
- color: #8B8B8B;
-
- .tabLinkText::after{
- background-color: #8B8B8B;
- }
+ .tabLinkText::after {
+ background-color: #8B8B8B;
}
+ }
- &:hover .tabLinkText::after,
- &.tabLinkActive .tabLinkText::after {
- content: '';
- position: absolute;
- width: 3.14rem;
- height: 2px;
- bottom: -2px;
- left: 50%;
- transform: translateX(-50%);
- }
+ &:hover .tabLinkText::after,
+ &.tabLinkActive .tabLinkText::after {
+ content: '';
+ position: absolute;
+ width: 3.14rem;
+ height: 2px;
+ bottom: -2px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
&.tabLinkActive {
color: var(--color-text) !important;
diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx
index f1466c3398..9477c0bca7 100644
--- a/packages/react-components/src/Tabs/index.tsx
+++ b/packages/react-components/src/Tabs/index.tsx
@@ -104,11 +104,11 @@ export default React.memo(styled(Tabs)`
.ui--TabsList {
display: flex;
- list-style: none;
height: 100%;
+ list-style: none;
margin: 0 1.4rem;
- white-space: nowrap;
padding: 0;
+ white-space: nowrap;
@media only screen and (max-width: 900px) {
margin: 0 2.72rem 0 2.35rem;
diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx
index bcb28cf243..e8a18b58aa 100644
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@@ -44,7 +44,7 @@ export default React.memo(styled(Tag)`
border-radius: 0.25rem;
color: #fff;
display: inline-block;
- font-size: 0.857rem;
+ font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
line-height: 1rem;
margin: 0 0.125rem;
@@ -55,7 +55,7 @@ export default React.memo(styled(Tag)`
z-index: 1;
&.tinySize {
- font-size: .71428571rem;
+ font-size: var(--font-size-tiny);
}
&.blackColor {
@@ -75,7 +75,8 @@ export default React.memo(styled(Tag)`
}
&.lightgreyColor {
- background: #a6a6a6;
+ background: #b6b6b6;
+ opacity: 0.7;
}
&.orangeColor {
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
index cec201d21e..d69b529270 100644
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@@ -40,12 +40,13 @@ export default (_theme: ThemeDef): string => `
padding-right: 0;
padding-bottom: 0.3em;
padding-left: 0.3em;
- color: #2e86ab !important;
- background: none !important;
+ color: #2e86ab !important;
+ background: none !important;
}
button.ui--Button {
font: var(--font-sans);
+ font-size: var(--font-size-button);
}
.editable {
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 5b28988c48..20b7b05908 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -387,6 +387,7 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr
&.error,
&.warning {
border-left-width: 0.25rem;
+ font-size: var(--font-size-small);
line-height: 1.5;
margin-left: 2.25rem;
padding: 0.75rem 1rem;
@@ -496,9 +497,9 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr
color: var(--color-label);
font-style: normal;
font-weight: var(--font-weight-normal);
- font-size: 0.714rem;
+ font-size: var(--font-size-label);
line-height: 1rem;
- text-transform: uppercase;
+ text-transform: var(--text-transform-label);
margin-bottom: 0.25rem;
}
@@ -534,8 +535,11 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr
color: var(--color-label);
display: block;
font: var(--font-sans);
- font-size: 1rem;
+ font-size: var(--font-size-label);
font-weight: var(--font-weight-normal);
+ line-height: 1rem;
+ text-transform: var(--text-transform-label);
+ vertical-align: middle;
}
main {
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
index 90a62fca66..ba5a04d0c7 100644
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@@ -24,6 +24,7 @@ export default (_theme: ThemeDef): string => `
.ui.input > input,
.ui.selection.dropdown > input {
background: var(--bg-input);
+ border-color: var(--border-input);
color: var(--color-text);
font: var(--font-sans);
font-size: 1rem;
@@ -94,14 +95,20 @@ export default (_theme: ThemeDef): string => `
border-style: dashed;
}
- .ui.primary.buttons .ui.button {
- background-color: #666;
- border-color: transparent;
- color: #f9f8f7;
- opacity: 0.5;
+ .ui.buttons {
+ .ui.button {
+ background: transparent;
+ }
- .dropdown.icon {
- opacity: 0;
+ &.primary .ui.button {
+ background-color: #666;
+ border-color: transparent;
+ color: #f9f8f7;
+ opacity: 0.5;
+
+ .dropdown.icon {
+ opacity: 0;
+ }
}
}
}
diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx
index cc04ed577d..15fa7c264f 100644
--- a/packages/react-params/src/Holder.tsx
+++ b/packages/react-params/src/Holder.tsx
@@ -8,12 +8,13 @@ interface Props {
children?: React.ReactNode;
className?: string;
withBorder?: boolean;
+ withExpander?: boolean;
withPadding?: boolean;
}
-function Holder ({ children, className = '', withBorder, withPadding }: Props): React.ReactElement {
+function Holder ({ children, className = '', withBorder, withExpander, withPadding }: Props): React.ReactElement {
return (
-
+
{children}
);
@@ -21,24 +22,29 @@ function Holder ({ children, className = '', withBorder, withPadding }: Props):
export default React.memo(styled(Holder)`
&.withBorder {
- padding-left: 1.5rem;
+ padding-left: 2rem;
.ui--Params-Content {
- border-left: 0.25rem solid #f2f2f2;
+ border-left: 1px dashed var(--border-input);
.ui--Params.withBorder {
- padding-left: 0.25rem;
+ padding-left: 0;
}
}
}
+ &.withExpander {
+ padding-left: 0.25rem;
+ }
+
&.withPadding {
padding-left: 4rem;
}
- .ui--Param .ui--Labelled label {
+ .ui--Param-composite .ui--row > .ui--Labelled > label {
text-transform: none !important;
font: var(--font-mono);
+ font-size: var(--font-size-label);
}
.ui--row {
@@ -54,7 +60,7 @@ export default React.memo(styled(Holder)`
padding: 0;
.ui--Params-Content {
- margin-left: 1.75rem;
+ margin-left: 2rem;
}
}
diff --git a/packages/react-params/src/index.tsx b/packages/react-params/src/index.tsx
index d0e1b1cfea..80859daf55 100644
--- a/packages/react-params/src/index.tsx
+++ b/packages/react-params/src/index.tsx
@@ -29,6 +29,7 @@ interface Props extends I18nProps {
registry?: Registry;
values?: RawParams | null;
withBorder?: boolean;
+ withExpander?: boolean;
}
interface State {
@@ -81,7 +82,7 @@ class Params extends React.PureComponent {
}
public override render (): React.ReactNode {
- const { children, className = '', isDisabled, isError, onEnter, onEscape, overrides, params, registry = api.registry, withBorder = true } = this.props;
+ const { children, className = '', isDisabled, isError, onEnter, onEscape, overrides, params, registry = api.registry, withExpander, withBorder = true } = this.props;
const { values = this.props.values } = this.state;
if (!values || !values.length) {
@@ -92,6 +93,7 @@ class Params extends React.PureComponent {
diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx
index eff67e1855..834fe5ea5e 100644
--- a/packages/react-query/src/BlockToTime.tsx
+++ b/packages/react-query/src/BlockToTime.tsx
@@ -47,6 +47,7 @@ export default React.memo(styled(BlockToTime)`
}
span.timeUnits {
- font-size: 0.825em;
+ // this is not var(--font-size-small) since we want em
+ font-size: 0.875em;
}
`);
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index eb2cae5c3e..f0a0b63602 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -131,7 +131,7 @@ export default React.memo(styled(FormatBalance)`
> .ui--FormatBalance-postfix {
font-weight: var(--font-weight-light);
- opacity: 0.7;
+ opacity: 0.75;
vertical-align: baseline;
}
}
|