From 11082d2e0a67a90b958eb0b4512fc615023f77e4 Mon Sep 17 00:00:00 2001
From: Vincent Wilson <vince@classyh.at>
Date: Wed, 24 Jan 2024 15:11:13 -0500
Subject: [PATCH] Use wordmark instead of logo inside the modal (#146)

---
 packages/web-shared/components/Modal/Modal.js | 20 +++++++++-------
 .../components/Modal/Modal.styles.js          |  1 +
 .../components/Wordmark/Wordmark.js           | 21 ++++++++++++++++
 .../components/Wordmark/Wordmark.styles.js    | 24 +++++++++++++++++++
 .../web-shared/components/Wordmark/index.js   |  3 +++
 packages/web-shared/hooks/useCurrentChurch.js |  1 +
 6 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 packages/web-shared/components/Wordmark/Wordmark.js
 create mode 100644 packages/web-shared/components/Wordmark/Wordmark.styles.js
 create mode 100644 packages/web-shared/components/Wordmark/index.js

diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js
index 83f2bd56..6c259994 100644
--- a/packages/web-shared/components/Modal/Modal.js
+++ b/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"
diff --git a/packages/web-shared/components/Modal/Modal.styles.js b/packages/web-shared/components/Modal/Modal.styles.js
index c1c5d1ee..b18f12bc 100644
--- a/packages/web-shared/components/Modal/Modal.styles.js
+++ b/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};
 `);
 
diff --git a/packages/web-shared/components/Wordmark/Wordmark.js b/packages/web-shared/components/Wordmark/Wordmark.js
new file mode 100644
index 00000000..43f7429e
--- /dev/null
+++ b/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);
diff --git a/packages/web-shared/components/Wordmark/Wordmark.styles.js b/packages/web-shared/components/Wordmark/Wordmark.styles.js
new file mode 100644
index 00000000..0270a289
--- /dev/null
+++ b/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;
diff --git a/packages/web-shared/components/Wordmark/index.js b/packages/web-shared/components/Wordmark/index.js
new file mode 100644
index 00000000..557d3a77
--- /dev/null
+++ b/packages/web-shared/components/Wordmark/index.js
@@ -0,0 +1,3 @@
+import Wordmark from './Wordmark';
+
+export default Wordmark;
diff --git a/packages/web-shared/hooks/useCurrentChurch.js b/packages/web-shared/hooks/useCurrentChurch.js
index cf6bced0..3093a058 100644
--- a/packages/web-shared/hooks/useCurrentChurch.js
+++ b/packages/web-shared/hooks/useCurrentChurch.js
@@ -11,6 +11,7 @@ export const GET_CURRENT_CHURCH = gql`
       slug
       theme
       logo
+      wordmarkLightUrl
     }
   }
 `;