diff --git a/components/Button.tsx b/components/Button.tsx index b36905e..286d4f3 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -12,7 +12,6 @@ const Btn = styled.button` display: inline; cursor: pointer; background: none; - outline: none; color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)}; padding: 1rem; border: ${({ variant, dark, theme }) => @@ -23,7 +22,7 @@ const Btn = styled.button` font-size: ${({ variant }) => (variant === 'outline' ? '1.05rem' : 'inherit')}; text-transform: ${({ variant }) => (variant === 'outline' ? 'uppercase' : 'inherit')}; padding: ${({ variant }) => (variant === 'outline' ? '.5rem 1rem' : '0rem')}; - + text-align: left; transition: color 250ms ease-in-out; z-index: 1; @@ -73,11 +72,16 @@ const Btn = styled.button` } `; -const Button: FC = ({ variant = 'text', onClick, children }) => { +const Button: FC = ({ + variant = 'text', + onClick, + children, + className +}) => { const { dark } = useContext(DarkModeContext); return ( - + {children} ); diff --git a/components/IconButton.tsx b/components/IconButton.tsx index 9e1b0d2..12b35eb 100644 --- a/components/IconButton.tsx +++ b/components/IconButton.tsx @@ -12,13 +12,12 @@ const Btn = styled.button` background: none; border: none; color: none; - outline: none; `; -const IconButton: FC = ({ icon, onClick }) => { +const IconButton: FC = ({ icon, onClick, className }) => { return ( - - Icon Button + + ); };