Modal and StyledIcon in Shared UI Module

webui/src/components/Base/Header.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import oc from 'open-color';
 
+import { StyledIcon, Tooltip } from 'components';
 import MenuIcon from 'react-icons/lib/md/menu';
-import { ThumbnailIcon, Tooltip } from 'components';
+import PersonIcon from 'react-icons/lib/md/person';
 
 const Wrapper = styled.div`
   display: flex;
@@ -55,7 +56,9 @@ const Header = ({ onSidebarToggle, onLogoutRequest }) => (
     </Title>
     <Thumbnail onClick={onLogoutRequest}>
       <Tooltip bottom content='Logout' width="60px">
-        <ThumbnailIcon size="2rem" color={oc['pink'][4]} />
+        <StyledIcon size="2rem" background={oc['pink'][4]}>
+          <PersonIcon/>
+        </StyledIcon>
       </Tooltip>
     </Thumbnail>
   </Wrapper>

webui/src/components/Base/Login.js

@@ -6,7 +6,8 @@ import styled from 'styled-components';
 import oc from 'open-color';
 import { media } from 'helpers/style-utils';
 
-import {ThumbnailIcon} from 'components';
+import { StyledIcon } from 'components';
+import PersonIcon from 'react-icons/lib/md/person';
 import CloseIcon from 'react-icons/lib/md/close';
 
 const Wrapper = styled.div`
@@ -175,7 +176,9 @@ const Login = ({
         message={error && error.message}
         onClose={onErrorReset} />
       <Thumbnail>
-        <ThumbnailIcon size='8rem' color={oc['blue'][6]} />
+        <StyledIcon size='8rem' background={oc['blue'][6]}>
+          <PersonIcon/>
+        </StyledIcon>
       </Thumbnail>
       <Form>
         <InputWrapper>

webui/src/components/Base/Logout.js

@@ -5,6 +5,9 @@ import styled from 'styled-components';
 import oc from 'open-color';
 
 import { Modal } from 'components';
+import { transitions } from 'helpers/style-utils';
+
+import PersonIcon from 'react-icons/lib/md/person';
 
 const TitleWrapper = styled.div`
   padding-left: 1rem;
@@ -88,7 +91,12 @@ class Logout extends Component {
     } = this.props;
 
     return (
-      <Modal visible={visible} onHide={onHide} width="300px">
+      <Modal 
+        visible={visible} 
+        onHide={onHide} 
+        width="300px"
+        transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
+        transitionLeave={`${transitions.slideUp} .5s ease-in-out`}>
         <TitleWrapper>
           Logout
         </TitleWrapper>

webui/src/components/Shared/Modal.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import onClickOutside from 'react-onclickoutside';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
-import {media, transitions} from 'helpers/style-utils';
+import { media, transitions } from 'helpers/style-utils';
 
 const Wrapper = styled.div`
   position: fixed;
@@ -14,42 +14,48 @@ const Wrapper = styled.div`
 
   z-index: 10;
 
-  width: ${ props => props.width };
+  width: ${p => p.width};
 
   ${media.mobile`
     width: calc(100% - 2rem);
   `}
 
   .modal-enter {
-    animation: ${transitions.slideDown} .5s ease-in-out;
+    animation: ${p => p.transitionEnter};
     animation-fill-mode: forwards;
   }
 
   .modal-leave {
-    animation: ${transitions.slideUp} .5s ease-in-out;
+    animation: ${p => p.transitionLeave};
     animation-fill-mode: forwards;
   }
 `;
 
 Wrapper.propTypes = {
-  width: PropTypes.string
+  width: PropTypes.string,
+  transitionEnter: PropTypes.string,
+  transitionLeave: PropTypes.string
 };
 
 class Modal extends Component {
   static propTypes = {
     visible: PropTypes.bool,
     onHide: PropTypes.func,
-    width: PropTypes.string
+    width: PropTypes.string,
+    transitionEnter: PropTypes.string,
+    transitionLeave: PropTypes.string
   }
 
   static defaultProps = {
-    width: '400px'
+    width: '400px',
+    transitionEnter: `${transitions.stretchOut} .3s ease-in`,
+    transitionLeave: `${transitions.shrinkIn} .3s ease-in`
   }
 
   handleClickOutside = (e) => {
     const { visible, onHide } = this.props;
 
-    if(!visible) return null;
+    if (!visible) return null;
     onHide();
   }
 
@@ -72,10 +78,19 @@ class Modal extends Component {
   
   render() {
 
-    const {visible, children, width} = this.props;
+    const { 
+      visible, 
+      children, 
+      width, 
+      transitionEnter,
+      transitionLeave 
+    } = this.props;
 
     return (
-      <Wrapper width={width}>
+      <Wrapper 
+        width={width} 
+        transitionEnter={transitionEnter} 
+        transitionLeave={transitionLeave}>
         <CSSTransitionGroup
           transitionName="modal"
           transitionEnterTimeout={500}

webui/src/components/Shared/StyledIcon.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+
+import styled from 'styled-components';
+import oc from 'open-color';
+
+const Wrapper = styled.div`
+  width: ${p => p.size};
+  height: ${p => p.size};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: calc(${p => p.size} * 0.5 );
+  font-size: calc(${p => p.size} * 0.75);
+
+  background: ${p => p.background};
+  color: ${p => p.color};
+`;
+
+Wrapper.propTypes = {
+  size: PropTypes.string,
+  background: PropTypes.string,
+  color: PropTypes.string
+};
+
+const StyledIcon = ({ children, size, background, color }) => (
+  <Wrapper size={size} background={background} color={color}>
+    {children}
+  </Wrapper>
+)
+
+StyledIcon.propTypes = {
+  size: PropTypes.string,
+  background: PropTypes.string,
+  color: PropTypes.string
+};
+
+StyledIcon.defaultProps = {
+  size: '4rem',
+  background: '#000',
+  color: 'white'
+};
+
+export default StyledIcon;

webui/src/components/Shared/ThumbnailIcon.js

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-
-import styled from 'styled-components';
-import Person from 'react-icons/lib/md/person';
-import oc from 'open-color';
-
-const Wrapper = styled.div`
-  width: ${props => props.size};
-  height: ${props => props.size};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border-radius: calc(${props => props.size} * 0.5 );
-  font-size: calc(${props => props.size} * 0.75);
-
-  background: ${props => props.color};
-  color: white;
-`;
-
-Wrapper.propTypes = {
-  size: PropTypes.string,
-  color: PropTypes.string
-};
-
-const Thumbnail = ({size, color}) => (
-  <Wrapper size={size} color={color}>
-    <Person />
-  </Wrapper>
-)
-
-Thumbnail.propTypes = {
-  size: PropTypes.string,
-  color: PropTypes.string
-};
-
-Thumbnail.defaultProps = {
-  size: '4rem',
-  color: '#000'
-};
-
-export default Thumbnail;

webui/src/components/index.js

@@ -5,7 +5,7 @@ import Login from './Base/Login';
 import Logout from './Base/Logout';
 
 import Modal from './Shared/Modal';
-import ThumbnailIcon from './Shared/ThumbnailIcon';
+import StyledIcon from './Shared/StyledIcon';
 import Dimmed from './Shared/Dimmed';
 import Spinner from './Shared/Spinner';
 import FloatingButton from './Shared/FloatingButton';
@@ -23,7 +23,7 @@ export {
   Logout,
 
   Modal,
-  ThumbnailIcon,
+  StyledIcon,
   Dimmed,
   Spinner,
   FloatingButton,