From 6071a2edff3fb66b783a4750d7457cb950af6438 Mon Sep 17 00:00:00 2001
From: Pavel 'PK' Kaminsky <kaminsky.pavel@gmail.com>
Date: Wed, 26 Aug 2020 17:46:31 +0300
Subject: [PATCH] fix: flex alingment issues

---
 src/components/Pill/Pill.stories.tsx |  2 +-
 src/components/Pill/index.tsx        | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Pill/Pill.stories.tsx b/src/components/Pill/Pill.stories.tsx
index c40f691..7c80646 100644
--- a/src/components/Pill/Pill.stories.tsx
+++ b/src/components/Pill/Pill.stories.tsx
@@ -33,7 +33,7 @@ NotActivePill.args = {
 
 export const DisabledPill = Template.bind({});
 DisabledPill.args = {
-  disabled: false,
+  disabled: true,
   label: "Disabled"
 };
 
diff --git a/src/components/Pill/index.tsx b/src/components/Pill/index.tsx
index 24e72aa..a6a6cc1 100644
--- a/src/components/Pill/index.tsx
+++ b/src/components/Pill/index.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const PillsGroup = styled.div`
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
 `;
@@ -29,13 +29,13 @@ const PillComponent = styled.div<Pick<Props, "disabled" | "active">>`
   margin: 0 2px;
   text-decoration: none;
   border-radius: 16px;
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
 
   background-color: ${({active, disabled}) => {
     if (disabled) {
-      return "#c6c6c6";
+      return "rgb(237, 238, 240)";
     }
 
     return active ? "#e5f4ff" : "none";
@@ -62,11 +62,9 @@ const Pill: React.FunctionComponent<Props> = ({
   disabled = false,
   active = false
 }) => (
-  <PillsGroup>
-    <PillComponent active={active} disabled={disabled} onClick={onClick}>
-      <InnerText>{label}</InnerText>
-    </PillComponent>
-  </PillsGroup>
+  <PillComponent active={active} disabled={disabled} onClick={onClick}>
+    <InnerText>{label}</InnerText>
+  </PillComponent>
 );
 
 export default Pill;