fix(bugs): Style info pills

Author: d-beezee

src/common/components/pills/IconPill.tsx

@@ -1,35 +1,40 @@
 import { Span, Tag } from '@appquality/unguess-design-system';
-import { theme as globalTheme } from 'src/app/theme';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
+const StyledAvatar = styled(Tag.Avatar)``;
+
 const StyledTag = styled(Tag)`
   pointer-events: none;
   padding: 0;
   margin-right: ${({ theme }) => theme.space.xs};
+  ${StyledAvatar} {
+    margin-left: 0;
+    margin-right: ${({ theme }) => theme.space.xxs};
+  }
 `;
 
 const StyledChild = styled(Span)`
   color: ${({ theme }) => theme.palette.grey[700]};
 `;
 
-const StyledAvatar = styled(StyledTag.Avatar)`
-  margin-left: 0 !important;
-  margin-right: ${({ theme }) => theme.space.xxs} !important;
-`;
-
 const PillContainer = styled.div`
   font-size: ${({ theme }) => theme.fontSizes.sm};
   margin-right: ${({ theme }) => theme.space.xs};
   display: flex;
   align-items: center;
 `;
-interface PillProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
+
+interface PillProps {
+  title: ReactNode;
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
   background?: string;
   color?: string;
   icon?: ReactNode;
   children?: ReactNode;
+  size?: Parameters<typeof Tag>[0]['size'];
 }
 
 export const IconPill = ({
@@ -38,14 +43,13 @@ export const IconPill = ({
   icon,
   title,
   children,
+  size,
   ...props
 }: PillProps) => (
   <PillContainer {...props}>
-    <StyledTag isPill hue={background ?? 'white'} size="large">
+    <StyledTag isPill hue={background ?? 'white'} size={size || 'large'}>
       {icon && <StyledAvatar>{icon}</StyledAvatar>}
-      <Span isBold style={{ color: color ?? globalTheme.palette.grey[700] }}>
-        {title}
-      </Span>
+      {title}
     </StyledTag>
     {children && <StyledChild>{children}</StyledChild>}
   </PillContainer>

src/pages/Bugs/Detail/Meta.tsx

@@ -1,4 +1,4 @@
-import { LG, MD, SM } from '@appquality/unguess-design-system';
+import { LG, MD, SM, Span } from '@appquality/unguess-design-system';
 import { ReactComponent as OSIcon } from 'src/assets/icons/environment-icon.svg';
 import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/pill-icon-smartphone.svg';
 import { ReactComponent as TabletIcon } from 'src/assets/icons/pill-icon-tablet.svg';
@@ -21,7 +21,12 @@ const BugInfo = styled.div`
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
-  margin-top: ${({ theme }) => theme.space.sm};
+  margin: ${({ theme }) => theme.space.xxs} 0;
+`;
+
+const InfoTitle = styled(Span)`
+  color: ${({ theme }) => theme.palette.grey[600]};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
 `;
 
 function getDeviceIcon(device: string) {
@@ -71,18 +76,23 @@ export default ({
         style={{
           color: globalTheme.palette.grey[600],
           textTransform: 'capitalize',
+          fontWeight: globalTheme.fontWeights.regular,
         }}
       >
         {bug.type.name}
       </SM>
-      <Pipe />
+      <Pipe style={{ height: '20px' }} />
       <IconPill
-        title={bug.device.type}
+        size="medium"
+        title={<InfoTitle>{bug.device.type}</InfoTitle>}
         icon={getDeviceIcon(bug.device.type)}
         style={{ textTransform: 'capitalize' }}
       />
       <IconPill
-        title={`${bug.device.os} ${bug.device.os_version}`}
+        size="medium"
+        title={
+          <InfoTitle>{`${bug.device.os} ${bug.device.os_version}`}</InfoTitle>
+        }
         icon={<OSIcon />}
         style={{ textTransform: 'capitalize' }}
       />