Use wordmark instead of logo inside the modal (#146)

packages/web-shared/components/Modal/Modal.js

@@ -17,11 +17,12 @@ import {
   useBreadcrumbDispatch,
 } from '../../providers/BreadcrumbProvider';
 import { X } from 'phosphor-react';
-import Logo from '../Logo';
+import Wordmark from '../Wordmark';
 
 function ChurchLogo(props) {
   const { currentChurch } = useCurrentChurch();
-  return <Logo source={currentChurch?.logo} theme={currentChurch?.theme} padding={10} {...props} />;
+  return <Wordmark source={currentChurch?.wordmarkLightUrl} padding={10} {...props} />;
+  return null;
 }
 
 const Modal = (props = {}) => {
@@ -61,11 +62,11 @@ const Modal = (props = {}) => {
                 width="100%"
                 display="flex"
                 mb="s"
-                alignItems="flex-start"
-                justifyContent="space-between"
+                mt="s"
+                alignItems="center"
+                justifyContent="center"
                 flexDirection={{ _: 'column-reverse', sm: 'row' }}
               >
-                <Box width={{ _: '0', sm: '10%' }}></Box>
                 <ChurchLogo
                   display="flex"
                   alignSelf="center"
@@ -75,19 +76,22 @@ const Modal = (props = {}) => {
                   size="60px"
                   borderRadius="xl"
                 />
-                <Box
+              </Box>
+              <Box
                   width={{ _: '100%', sm: '10%' }}
                   mb={{ _: 'xs', sm: '0' }}
                   ml={{ _: '0', sm: 'xs' }}
                   display="flex"
                   justifyContent="flex-end"
                   alignItems="center"
+                  position="absolute"
+                  top="xs"
+                  right="xs"
                 >
                   <Styled.Icon onClick={handleCloseModal} ml={{ _: 'auto', sm: '0' }}>
                     <X size={16} weight="bold" />
                   </Styled.Icon>
-                </Box>
-              </Box>
+                </Box>              
               <Box
                 width="100%"
                 display="flex"

packages/web-shared/components/Modal/Modal.styles.js

@@ -53,6 +53,7 @@ const ModalContainer = withTheme(styled.div`
   @media screen and (max-width: ${themeGet('breakpoints.sm')}) {
     padding: 16px;
   }
+  position: relative;
   ${system};
 `);
 

packages/web-shared/components/Wordmark/Wordmark.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTheme } from 'styled-components';
+import Styled from './Wordmark.styles';
+
+import { systemPropTypes } from '../../ui-kit';
+
+function Wordmark({ size, source }) {
+
+  return (
+    <Styled.Image src={source || './icon.png'} alt="Logo" size={size} />
+  );
+}
+
+Wordmark.propTypes = {
+  ...systemPropTypes,
+  size: PropTypes.number,
+  source: PropTypes.string,
+};
+
+export default withTheme(Wordmark);

packages/web-shared/components/Wordmark/Wordmark.styles.js

@@ -0,0 +1,24 @@
+import { withTheme } from 'styled-components';
+import styled, { css } from 'styled-components';;
+
+const DEFAULT_ICON_SIZE = '80px';
+
+const imageStyles = ({ size }) => {
+  const newSize = size || DEFAULT_ICON_SIZE;
+
+  return css`
+    max-height: ${newSize};
+    max-width: 80%;
+  `;
+};
+
+const Image = withTheme(styled.img`
+  resizemode: 'contain';
+  ${imageStyles};
+`);
+
+const Styled = {
+  Image,
+};
+
+export default Styled;

packages/web-shared/components/Wordmark/index.js

@@ -0,0 +1,3 @@
+import Wordmark from './Wordmark';
+
+export default Wordmark;

packages/web-shared/hooks/useCurrentChurch.js

@@ -11,6 +11,7 @@ export const GET_CURRENT_CHURCH = gql`
       slug
       theme
       logo
+      wordmarkLightUrl
     }
   }
 `;