fix: flex alingment issues

kaminskypavel · Aug 26, 2020 · 6071a2e · 6071a2e
1 parent 2af2b24
commit 6071a2e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git 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
@@ -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;