app/src/Components/ToolbarButton.jsx

   1 import styled from 'styled-components';
   2
   3 const ToolbarButton = styled.div`
   4   background-color: initial;
   5   border: none;
   6   border-radius: 2px;
   7   width: 30px;
   8   height: 30px;
   9   margin: 5px;
  10   margin-left: ${props => props.isMarginLeft ? '5px' : '0px'};
  11   padding: 3px;
  12   display: ${props => props.isShowing ? 'display' : 'none'};
  13   background-image: url(${props => props.src});
  14   background-size: ${props => props.size};
  15   background-position: center;
  16   background-repeat: no-repeat;
  17   transition: 0.2s background-color;
  18   box-sizing: border-box;
  19   float: ${props => props.isRight ? 'right' : 'left'};
  20   &:hover {
  21     ${props => props.isEnabled && `background-color: ${!props.isDarkModeOrPrivateMode ? 'rgba(0, 0, 0, 0.06)' : 'rgba(130, 130, 130, 0.3)'};`}
  22   }
  23 `;
  24
  25 export default ToolbarButton;