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

@@ -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,
       }
       <div>
         {isValidator && (
-          <Tag
+          <Flag
             color='theme'
             label={t<string>('Validator')}
-            size='tiny'
           />
         )}
         {isNominator && (
-          <Tag
+          <Flag
             color='theme'
             label={t<string>('Nominator')}
-            size='tiny'
           />
         )}
         {isExternal && (
           isMultisig
             ? (
-              <Tag
+              <Flag
                 color='green'
                 label={t<string>('Multisig')}
-                size='tiny'
               />
             )
             : isProxied
               ? (
-                <Tag
+                <Flag
                   color='grey'
-                  label={t<string>('External')}
-                  size='tiny'
+                  label={t<string>('Proxied')}
                 />
               )
               : (
-                <Tag
+                <Flag
                   color='grey'
                   label={t<string>('External')}
-                  size='tiny'
                 />
               )
         )}
         {isInjected && (
-          <Tag
+          <Flag
             color='grey'
             label={t<string>('Injected')}
-            size='tiny'
           />
         )}
         {isDevelopment && (
-          <Tag
+          <Flag
             color='grey'
             label={t<string>('Test account')}
-            size='tiny'
           />
         )}
         {isCouncil && (
-          <Tag
+          <Flag
             color='blue'
             label={t<string>('Council')}
-            size='tiny'
           />
         )}
         {isSociety && (
-          <Tag
+          <Flag
             color='green'
             label={t<string>('Society')}
-            size='tiny'
           />
         )}
         {isTechCommittee && (
-          <Tag
+          <Flag
             color='orange'
             label={t<string>('Technical committee')}
-            size='tiny'
           />
         )}
         {isSudo && (
-          <Tag
+          <Flag
             color='pink'
             label={t<string>('Sudo key')}
-            size='tiny'
           />
         )}
       </div>
@@ -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;
   }
 `);

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<FlagProps> {
+  return (
+    <Tag
+      className={`${className} ${color === 'theme' ? ' highlight--color-bg highlight--bg' : ''}` }
+      color={color}
+      isFlag
+      label={label}
+      size='tiny'
+    />
+  );
+}
+
+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;
+  }
+`);

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);
+  }
 `);

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';

packages/react-components/src/styles/index.ts

@@ -288,7 +288,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ 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)};
   }
 

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';