diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx new file mode 100644 index 00000000..84e50d1b --- /dev/null +++ b/client/components/mobile/Footer.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import styled from 'styled-components'; +import { prop, remSize } from '../../theme'; + +const background = prop('Button.default.background'); +const textColor = prop('primaryTextColor'); + +const Footer = styled.div` + position: fixed; + width: 100%; + background: ${background}; + color: ${textColor}; + padding: ${remSize(12)}; + padding-left: ${remSize(32)}; + z-index: 1; + + bottom: 0; +`; + +export default Footer; diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx new file mode 100644 index 00000000..d638c1ac --- /dev/null +++ b/client/components/mobile/Header.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import styled from 'styled-components'; +import { prop, remSize } from '../../theme'; + +const background = prop('Button.default.background'); +const textColor = prop('primaryTextColor'); + +const Header = styled.div` + position: fixed; + width: 100%; + background: ${background}; + color: ${textColor}; + padding: ${remSize(12)}; + padding-left: ${remSize(32)}; + padding-right: ${remSize(32)}; + z-index: 1; + + display: flex; + flex: 1; + flex-direction: row; + justify-content: flex-start; + align-items: center; +`; + +export default Header; diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx new file mode 100644 index 00000000..ce758376 --- /dev/null +++ b/client/components/mobile/IconButton.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import styled from 'styled-components'; +import { prop, remSize } from '../../theme'; + +const textColor = prop('primaryTextColor'); + +const IconButton = styled.button` +width: 3rem; +> svg { + width: 100%; + height: auto; + fill: ${textColor}; + stroke: ${textColor}; +} +`; + +export default IconButton; diff --git a/client/components/mobile/MobileScreen.jsx b/client/components/mobile/MobileScreen.jsx new file mode 100644 index 00000000..1e50f80a --- /dev/null +++ b/client/components/mobile/MobileScreen.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Screen = ({ children }) => ( +