mobilio/components/index.js

Mobile React Library built for improving the engagement in Ecommerce

import styled from "styled-components"

const Button = styled.button`
background: ${props => props.primary ? "palevioletred" : props.outline ? "transparent" : props.secondary ? "black" : "white"};
color: red !important;
font-size: 3em !important;
margin: 1em;
padding: 0.25em 1em;
border: 4px solid red;
border-color: ${props => props.BorderPrimary ? "palevioletred" : props.BorderSecondary ? "black" : "white"};
border-radius: 20px;
`;

const BuyButton = styled.button`
background: ${props => props.primary ? "palevioletred" : props.outline ? "transparent" : props.secondary ? "black" : "white"};
color: red !important;
font-size: 3em !important;
margin: 1em;
padding: 0.25em 1em;
border: 4px solid red;
border-color: ${props => props.BorderPrimary ? "palevioletred" : props.BorderSecondary ? "black" : "white"};
border-radius: 0px;
position: fixed;
width: 100%;
bottom: 0;
`;

const RedButton = styled.button`
background-color: red !important;
color: white !important;
font-size: 3em !important;
margin: 1em;
padding: 0.25em 1em;
border: 4px solid palevioletred;
border-radius: 20px;
`;


export {
  Button,
  RedButton,
  BuyButton,
}