From 7b9fec292c67c33d3416bd06ebcfa69d1c8deb65 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 27 Jun 2020 12:38:48 +0200
Subject: [PATCH] Rework tags dependencies (#3063)

* Rework tags dependencies

* Remove size param
---
 .../page-accounts/src/Sidebar/Identity.tsx    |  5 +-
 packages/react-components/src/Tag.tsx         | 82 +++++++++++++++++--
 packages/react-components/src/Tags.tsx        | 10 +--
 3 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/packages/page-accounts/src/Sidebar/Identity.tsx b/packages/page-accounts/src/Sidebar/Identity.tsx
index bd35548aad..783e32bd3c 100644
--- a/packages/page-accounts/src/Sidebar/Identity.tsx
+++ b/packages/page-accounts/src/Sidebar/Identity.tsx
@@ -69,7 +69,10 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
               //   ? <img src={identity.image} />
               //   : <i className='icon user ui--AddressMenu-identityIcon' />
               //
-              <i className='icon user ui--AddressMenu-identityIcon' />
+              <Icon
+                className='ui--AddressMenu-identityIcon'
+                icon='user'
+              />
             }
             subtitle={identity.legal}
             title={identity.display}
diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx
index d126a75482..519b7e4a11 100644
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@@ -3,14 +3,13 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useState } from 'react';
-import Label from 'semantic-ui-react/dist/commonjs/elements/Label/Label';
 import styled from 'styled-components';
 
 import Tooltip from './Tooltip';
 
 interface Props {
   className?: string;
-  color?: 'green' | 'grey' | 'red';
+  color?: 'blue' | 'green' | 'grey' | 'orange' | 'pink' | 'red';
   hover?: React.ReactNode;
   isTag?: boolean;
   label: React.ReactNode;
@@ -19,18 +18,16 @@ interface Props {
 
 let tagId = 0;
 
-function Tag ({ className = '', color, hover, isTag = true, label, size = 'small' }: Props): React.ReactElement<Props> {
+function Tag ({ className = '', color = 'grey', hover, isTag = true, label, size = 'small' }: Props): React.ReactElement<Props> {
   const [trigger] = useState(`tag-hover-${Date.now()}-${tagId++}`);
   const tooltipProps = hover
     ? { 'data-for': trigger, 'data-tip': true }
     : {};
 
   return (
-    <Label
-      className={className}
+    <div
+      className={`${color}Color ${isTag ? 'isTag' : ''} ${size}Size ${className}`}
       color={color || 'grey'}
-      size={size}
-      tag={isTag}
       {...tooltipProps}
     >
       {label}
@@ -40,10 +37,79 @@ function Tag ({ className = '', color, hover, isTag = true, label, size = 'small
           trigger={trigger}
         />
       )}
-    </Label>
+    </div>
   );
 }
 
 export default React.memo(styled(Tag)`
+  border-radius: 0.25rem;
+  color: #fff;
+  display: inline-block;
+  font-size: 0.78571429rem;
+  font-weight: normal;
+  line-height: 1;
+  margin: 0.125rem;
+  padding: 0.5833em 0.833em;
+  position: relative;
   white-space: nowrap;
+  z-index: 1;
+
+  &.tinySize {
+    font-size: .71428571rem;
+  }
+
+  &.blueColor {
+    background: #2185d0;
+  }
+
+  &.greenColor {
+    background: #21ba45;
+  }
+
+  &.greyColor {
+    background: #767676;
+  }
+
+  &.orangeColor {
+    background: #f2711c;
+  }
+
+  &.pinkColor {
+    background: #e03997;
+  }
+
+  &.redColor {
+    background: #db2828;
+  }
+
+  &.isTag {
+    border-radius: 0 0.25rem 0.25rem 0;
+    padding-left: 1.5em;
+    padding-right: 1.25em;
+
+    &: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 {
+      background-color: inherit;
+      background-image: none;
+      content: '';
+      right: 100%;
+      width: 1.56em;
+      height: 1.56em;
+      position: absolute;
+      transform: translateY(-50%) translateX(50%) rotate(-45deg);
+      top: 50%;
+      transition: none;
+    }
+  }
 `);
diff --git a/packages/react-components/src/Tags.tsx b/packages/react-components/src/Tags.tsx
index e9d97ded1b..cf3132cb7b 100644
--- a/packages/react-components/src/Tags.tsx
+++ b/packages/react-components/src/Tags.tsx
@@ -17,31 +17,27 @@ import { useTranslation } from './translate';
 interface Props {
   children?: React.ReactNode;
   className?: string;
-  color?: 'green' | 'grey' | 'red';
   isEditable?: boolean;
   isEditing?: boolean;
   onChange?: (_: string[]) => void;
   onToggleIsEditing?: () => void;
   onSave?: VoidFn;
-  size?: 'small' | 'tiny';
   value: string[];
 }
 
-function Tags ({ children, className, color = 'grey', isEditable, isEditing, onChange, onSave, onToggleIsEditing, size = 'small', value }: Props): React.ReactElement<Props> {
+function Tags ({ children, className, isEditable, isEditing, onChange, onSave, onToggleIsEditing, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const contents = useMemo(
-    (): React.ReactNode => value.length
+    () => value.length
       ? value.map((tag): React.ReactNode => (
         <Tag
-          color={color}
           key={tag}
           label={tag}
-          size={size}
         />
       ))
       : <label>{t<string>('no tags')}</label>,
-    [color, size, t, value]
+    [t, value]
   );
 
   const _onSave = useCallback(