From e7d77a1a262daaa8532c4df17b8344cae892c92c Mon Sep 17 00:00:00 2001 From: Ewa Kowalska <30404388+ekowalsk@users.noreply.github.com> Date: Sat, 28 Aug 2021 09:47:23 +0200 Subject: [PATCH] Style flags (#6003) * Style tags * Improve styling * Apply lint fixes * Extract flag styles to Flag component * Export Flag component from index file * Add margins * Remove unnecessary code --- packages/page-accounts/src/Sidebar/Flags.tsx | 39 ++++------- packages/react-components/src/Flag.tsx | 66 +++++++++++++++++++ packages/react-components/src/Tag.tsx | 12 ++-- packages/react-components/src/index.tsx | 1 + packages/react-components/src/styles/index.ts | 2 +- packages/react-components/src/types.ts | 2 + 6 files changed, 90 insertions(+), 32 deletions(-) create mode 100644 packages/react-components/src/Flag.tsx diff --git a/packages/page-accounts/src/Sidebar/Flags.tsx b/packages/page-accounts/src/Sidebar/Flags.tsx index 4f6a3e02f0..9d499b8b68 100644 --- a/packages/page-accounts/src/Sidebar/Flags.tsx +++ b/packages/page-accounts/src/Sidebar/Flags.tsx @@ -6,7 +6,7 @@ import type { AddressFlags } from '@polkadot/react-hooks/types'; import React from 'react'; import styled from 'styled-components'; -import { Tag } from '@polkadot/react-components'; +import { Flag } from '@polkadot/react-components'; import { useTranslation } from '../translate'; @@ -32,84 +32,73 @@ function Flags ({ className = '', flags: { isCouncil, isDevelopment, isExternal, }
{isValidator && ( - ('Validator')} - size='tiny' /> )} {isNominator && ( - ('Nominator')} - size='tiny' /> )} {isExternal && ( isMultisig ? ( - ('Multisig')} - size='tiny' /> ) : isProxied ? ( - ('External')} - size='tiny' + label={t('Proxied')} /> ) : ( - ('External')} - size='tiny' /> ) )} {isInjected && ( - ('Injected')} - size='tiny' /> )} {isDevelopment && ( - ('Test account')} - size='tiny' /> )} {isCouncil && ( - ('Council')} - size='tiny' /> )} {isSociety && ( - ('Society')} - size='tiny' /> )} {isTechCommittee && ( - ('Technical committee')} - size='tiny' /> )} {isSudo && ( - ('Sudo key')} - size='tiny' /> )}
@@ -129,6 +118,6 @@ export default React.memo(styled(Flags)` } .ui--Tag { - margin: 0.1rem 0 0.1rem 0.571rem; + margin: 0.2rem 1rem 0.2rem 0.571rem; } `); diff --git a/packages/react-components/src/Flag.tsx b/packages/react-components/src/Flag.tsx new file mode 100644 index 0000000000..16940eefca --- /dev/null +++ b/packages/react-components/src/Flag.tsx @@ -0,0 +1,66 @@ +// Copyright 2017-2021 @polkadot/app-accounts authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import styled from 'styled-components'; + +import { Tag } from '@polkadot/react-components/index'; +import { FlagColor } from '@polkadot/react-components/types'; + +interface FlagProps { + className?: string; + color: FlagColor; + label: React.ReactNode; +} + +function Flag ({ className = '', color, label }: FlagProps): React.ReactElement { + return ( + + ); +} + +export default React.memo(styled(Flag)` + border-radius: 0 0.25rem 0.25rem 0; + padding: 0.5833em 1.25em 0.5833em 1.5em; + font-size: 0.78571429rem; + line-height: 1; + color: #fff !important; + + &.darkTheme { + :after { + background-color: var(--bg-tabs); + } + } + + &:after { + background-color: #fff; + border-radius: 500rem; + content: ''; + left: -0.25em; + margin-top: -0.25em; + position: absolute; + width: 0.5em; + height: 0.5em; + top: 50%; + } + + &:before { + border-radius: 0.2rem 0 0.1rem 0; + background-color: inherit; + background-image: none; + content: ''; + right: 100%; + width: 1.5em; + height: 1.5em; + position: absolute; + transform: translateY(-50%) translateX(50%) rotate(-45deg); + top: 50%; + transition: none; + } +`); diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx index bfa50231b5..83a9a5feb8 100644 --- a/packages/react-components/src/Tag.tsx +++ b/packages/react-components/src/Tag.tsx @@ -4,13 +4,13 @@ import React, { useContext, useState } from 'react'; import styled, { ThemeContext } from 'styled-components'; -import { ThemeDef } from '@polkadot/react-components/types'; +import { FlagColor as TagColor, ThemeDef } from '@polkadot/react-components/types'; import Tooltip from './Tooltip'; interface Props { className?: string; - color?: 'blue' | 'green' | 'grey' | 'orange' | 'pink' | 'red' | 'yellow' | 'theme'; + color?: TagColor; hover?: React.ReactNode; label: React.ReactNode; size?: 'small' | 'tiny'; @@ -55,10 +55,6 @@ export default React.memo(styled(Tag)` white-space: nowrap; z-index: 1; - &.themeColor.darkTheme { - background-color: rgba(255,255,255,0.08); - } - &.tinySize { font-size: .71428571rem; } @@ -90,4 +86,8 @@ export default React.memo(styled(Tag)` &.yellowColor { background: darkgoldenrod; } + + &.themeColor.darkTheme { + background-color: rgba(255,255,255,0.08); + } `); diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index 0cd665ff86..a3cb1f5696 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -39,6 +39,7 @@ export { default as Event } from './Event'; export { default as Expander } from './Expander'; export { default as Extrinsic } from './Extrinsic'; export { default as FilterOverlay } from './FilterOverlay'; +export { default as Flag } from './Flag'; export { default as Forget } from './Forget'; export { default as HelpOverlay } from './HelpOverlay'; export { default as Icon } from './Icon'; diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index 7cb5dc0882..f63d583ac0 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -288,7 +288,7 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr .ui--Tag.themeColor.lightTheme, .ui--InputTags.lightTheme .ui.label { - background: ${hexToRGB(getHighlight(uiHighlight), '0.08')} !important; + background: ${hexToRGB(getHighlight(uiHighlight), '0.08')}; color: ${countBrightness(uiHighlight) > BRIGHTNESS ? '#424242' : getHighlight(uiHighlight)}; } diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts index e239f68311..26ad81c9fe 100644 --- a/packages/react-components/src/types.ts +++ b/packages/react-components/src/types.ts @@ -77,3 +77,5 @@ export interface ThemeDef { export interface ThemeProps { theme: ThemeDef; } + +export type FlagColor = 'blue' | 'green' | 'grey' | 'orange' | 'pink' | 'red' | 'yellow' | 'theme';