Merge pull request #126 from Groww/sync/tag

[Tag] syncing with Desktop

Author: vikaz596

src/components/atoms/Tag/Tag.tsx

@@ -4,7 +4,9 @@ import './tag.css';
 
 
 const Tag = (props: Props) => {
-  if (!React.Children.count(props.children)) {
+  const childrenCount = React.Children.count(props.children);
+
+  if (!childrenCount) {
     return null;
   }
 
@@ -20,8 +22,15 @@ const Tag = (props: Props) => {
     tagClass = 'tg11Info';
   }
 
+  if (childrenCount === 1) {
+    tagClass += ' absolute-center';
+
+  } else {
+    tagClass += ' valign-wrapper vspace-between';
+  }
+
   return (
-    <div className={`tg11Container ${tagClass}`}>
+    <div className={`fs12 width100 tg11Container ${tagClass}`}>
       {props.children}
     </div>
   );

src/components/atoms/Tag/tag.css

@@ -1,12 +1,12 @@
 .tg11Container {
-  align-items: center; 
+  align-items: center;
   display: inline-flex;
   justify-content: center;
-  font-size: 12px;
-  letter-spacing: 0.2px;
-  border-radius: 15px;
   padding: 3px 10px;
   overflow: hidden;
+  border-radius: 4px;
+  min-height: 30px;
+  -webkit-font-smoothing: auto;
 }
 
 .tg11Warning {
@@ -16,5 +16,5 @@
 
 .tg11Error {
   background-color: var(--growwRed10);
-  color: var(--growwRed);
-}
+  color: var(--text);
+}