Update Button styling and create pill label component

Currently the Button has a sharper edges for the border. The new button should have border radius 20px and black border

Screen Shot 2022-07-22 at 10.03.32 PM.png

hover: Screen Shot 2022-07-22 at 10.03.41 PM.png

Pill label:

// PillLabel.tsx
const StyledPillLabelContainer = styled.div`
    // use the same styling as PrimaryButton,
    // but include a different background color
    // and no hover style
    background-color: ${({ theme, type }) => theme.color[type]};
`;

interface PillLabelProps {
    type: 'primary' | 'secondary';
    children: JSX.Element;
}

const PillLabel = ({ type, children }: PillLabelProps) => {
   return (
     <StyledPillLabelContainer type={type}>
         {children}
     </StyledPillLabelContainer>
   );
}

to use it: Primary

<PillLabel text="coding" type="primary"/>

Screen Shot 2022-07-22 at 10.24.24 PM.png

Secondary

<PillLabel text="design" type="secondary"/>

Screen Shot 2022-07-22 at 10.24.31 PM.png

chingu-voyages / v39-bears-team-16

Update Button styling and create pill label component #126