Add AppHeader and Login to MicroService (#203)

## 🐛 Issue

<!-- Link to the issue in Github or Basecamp this PR is addressing. If there is no related issue or related pull request, consider briefly describing the problem or enhancement being addressed. -->
You can't login on micro service. We will need login for user commenting.

## ✏️ Solution

<!--
Describe your changes, and why you're making them. If there's something novel or complex about your approach, you can call it out here. 
-->

Add an AppHeader and Profile button.

## 🔬 To Test

<!--
With only the context in this description, how would a developer from outside Apollos setup and validate your change? 
-->

1. `cd micro-service && yarn dev`
2. navigate to a content item (or don't - this shows on the error home page)

## 📸 Screenshots


<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/Iqv8SYVwCDX0dUbjBiDz/1cccf6b1-d5b4-4465-aafe-9a46bf185006.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/Iqv8SYVwCDX0dUbjBiDz/1cccf6b1-d5b4-4465-aafe-9a46bf185006.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/Iqv8SYVwCDX0dUbjBiDz/1cccf6b1-d5b4-4465-aafe-9a46bf185006.mp4">login.mp4</video>


<!--
| Before | After |
| --- | --- |
| _attach image_ | _attach image_ |
| _attach image_ | _attach image_ |
-->

micro-service/src/App.js

@@ -8,9 +8,9 @@ import {
   RouterProvider,
 } from '@apollosproject/web-shared/providers';
 
+import AppHeader from '@apollosproject/web-shared/components/AppHeader';
+
 import { Button, Box, BodyText } from '@apollosproject/web-shared/ui-kit';
-import { Logo } from '@apollosproject/web-shared/components';
-import { useCurrentChurch } from '@apollosproject/web-shared/hooks';
 import Styled from './App.styles';
 
 import ErrorPage from './error-page';
@@ -24,20 +24,6 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
-function ChurchLogo(props) {
-  const { currentChurch } = useCurrentChurch();
-
-  //Can't set favicon in SSR
-  if (typeof document !== 'undefined') {
-    const favicon = document.querySelector('link[rel="icon"]');
-    if (currentChurch?.logo) {
-      favicon.href = currentChurch.logo;
-    }
-  }
-
-  return <Logo source={currentChurch?.logo} {...props} />;
-}
-
 function App({ searchParams, url }) {
   const churchSlug = getChurchSlug(url);
   const _root = searchParams?.root;
@@ -47,9 +33,12 @@ function App({ searchParams, url }) {
   const ssr = typeof document === 'undefined';
 
   const mainRoute = (
-    <Styled.FeedWrapper>
-      <FeatureFeed featureFeed={`${type}:${randomId}`} church={churchSlug} />
-    </Styled.FeedWrapper>
+    <>
+      <AppHeader />
+      <Styled.FeedWrapper>
+        <FeatureFeed featureFeed={`${type}:${randomId}`} church={churchSlug} />
+      </Styled.FeedWrapper>
+    </>
   );
 
   const routerConfig = [
@@ -66,7 +55,6 @@ function App({ searchParams, url }) {
   if (churchSlug) {
     return (
       <AppProvider church={churchSlug} modal="true">
-        <ChurchLogo display="flex" alignItems="center" justifyContent="center" marginTop="40px" />
         {/** When using SSR, avoid the router. it crashes */}
         {ssr ? mainRoute : <RouterProvider router={router} />}
       </AppProvider>

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

@@ -0,0 +1,46 @@
+import Wordmark from '../Wordmark';
+import { useCurrentChurch } from '../../hooks';
+import { Box, Avatar } from '../../ui-kit';
+import { User } from '@phosphor-icons/react';
+
+import SearchStyles from '../Searchbar/Search.styles';
+
+import ProfileButton from '../Profile/ProfileButton';
+
+function ChurchLogo(props) {
+  const { currentChurch } = useCurrentChurch();
+
+  return <Wordmark source={currentChurch?.wordmarkLightUrl} padding={10} {...props} />;
+}
+
+const AppHeader = () => (
+  <>
+    <Box
+      py={8}
+      px={16}
+      height={58}
+      alignItems="center"
+      backgroundColor="fill.paper"
+      borderBottom="1px solid"
+      borderColor="text.quaternary"
+      position="fixed"
+      display="flex"
+      flexDirection="row"
+      justifyContent="space-between"
+      boxShadow="small"
+      top={0}
+      left={0}
+      right={0}
+      zIndex={999}
+    >
+      <Box>
+        <ChurchLogo size="30px" />
+      </Box>
+
+      <ProfileButton />
+    </Box>
+    <Box height={58} />
+  </>
+);
+
+export default AppHeader;

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

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

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

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import Color from 'color';
 import ImageUploader from './ImageUploader';
 
-import { Button, Avatar, BodyText, Box, Card, H4, ListItem } from '../../ui-kit';
+import { Button, Avatar, BodyText, Box, H4, ListItem } from '../../ui-kit';
 import Logo from '../Logo';
 import {
   UserCirclePlus,
@@ -158,7 +158,9 @@ const Profile = ({ theme, handleCloseProfile, ...rest }) => {
           {/* Profile Actions */}
           {state.token && !showDetails && !imgSrc ? (
             <>
-              <Styled.Title mb="xs">My Profile</Styled.Title>
+              <H4 color="text.secondary" mb="xs">
+                My Profile
+              </H4>
               <Box>
                 <ListItem
                   onClick={() => setShowDetails(true)}

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

@@ -1,7 +1,7 @@
 import { withTheme } from 'styled-components';
 import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
-import { H4, Card, utils } from '../../ui-kit';
+import Card from '../../ui-kit/Card';
 import { system } from '../../ui-kit/_lib/system';
 import Color from 'color';
 
@@ -12,6 +12,7 @@ const Profile = withTheme(styled.div`
   position: absolute;
   transition: opacity 0.3s ease;
   z-index: 9999;
+  right: 0;
 
   @media screen and (max-width: ${themeGet('breakpoints.sm')}) {
     position: fixed;
@@ -20,12 +21,8 @@ const Profile = withTheme(styled.div`
     right: 0;
     left: 0;
   }
-  ${system};
-`);
 
-const Title = withTheme(styled(H4)`
-  color: ${themeGet('colors.text.secondary')};
-  font-size: ${utils.rem('16px')};
+  ${system};
 `);
 
 const ProfileCard = withTheme(styled(Card)`
@@ -87,7 +84,6 @@ const AppLinks = withTheme(styled.div`
 
 const Styled = {
   Profile,
-  Title,
   CloseIcon,
   UploadIcon,
   AppLinks,

packages/web-shared/components/Profile/ProfileButton.js

@@ -0,0 +1,40 @@
+import { Box, Avatar } from '../../ui-kit';
+import { User } from '@phosphor-icons/react';
+import { useCurrentUser } from '../../hooks';
+import { useState } from 'react';
+import Profile from './Profile';
+
+const ProfileButton = (props) => {
+  const [showProfile, setShowProfile] = useState(false);
+  const { currentUser } = useCurrentUser();
+
+  const handleOpenProfile = () => {
+    setShowProfile(true);
+  };
+
+  return (
+    <Box position="relative">
+      <Box onClick={handleOpenProfile} cursor="pointer">
+        {currentUser?.profile?.photo?.uri ? (
+          <Avatar src={currentUser?.profile?.photo?.uri} width={30} alt="avatar" />
+        ) : (
+          <Box
+            borderRadius="100%"
+            backgroundColor="fill.system"
+            height={30}
+            width={30}
+            alignItems="center"
+            justifyContent="center"
+            display="flex"
+            color="text.secondary"
+          >
+            <User size={16} weight="bold" />
+          </Box>
+        )}
+      </Box>
+      {showProfile ? <Profile handleCloseProfile={() => setShowProfile(false)} /> : null}
+    </Box>
+  );
+};
+
+export default ProfileButton;

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

@@ -1,23 +1,23 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { User, MagnifyingGlass, ArrowLeft } from '@phosphor-icons/react';
+import { MagnifyingGlass, ArrowLeft } from '@phosphor-icons/react';
 
 import { systemPropTypes } from '../../ui-kit/_lib/system';
-import { Box, Avatar } from '../../ui-kit';
+import { Box } from '../../ui-kit';
 import { useCurrentUser } from '../../hooks';
 import { useSearchState } from '../../providers/SearchProvider';
 
-import Profile from '../Profile';
 import Autocomplete from '../Searchbar/Autocomplete';
 import SearchResults from '../Searchbar/SearchResults';
 
+import ProfileButton from '../Profile/ProfileButton';
+
 import Styled from './Search.styles';
 
 const MOBILE_BREAKPOINT = 428;
 
 const Searchbar = (props = {}) => {
   const searchState = useSearchState();
-  const [showProfile, setShowProfile] = useState(false);
   const [showTextPrompt, setShowTextPrompt] = useState(true);
   const [autocompleteInstance, setAutocompleteInstance] = useState(null);
   const [autocompleteState, setAutocompleteState] = useState({
@@ -94,13 +94,6 @@ const Searchbar = (props = {}) => {
     }
   }, [autocompleteState.isOpen]);
 
-  const handleOpenProfile = () => {
-    setShowProfile(true);
-  };
-  const handleCloseProfile = () => {
-    setShowProfile(false);
-  };
-
   const handleGetAutocompleteInstance = (instance) => {
     setAutocompleteInstance(instance);
   };
@@ -146,19 +139,10 @@ const Searchbar = (props = {}) => {
               </Box>
             </Styled.InterfaceWrapper>
           </Styled.Interface>
-          <Box padding="12px" onClick={handleOpenProfile}>
-            {currentUser?.profile?.photo?.uri ? (
-              <Avatar src={currentUser?.profile?.photo?.uri} width="38px" alt="avatar" />
-            ) : (
-              <Styled.Profile>
-                <User size={18} weight="bold" color={userExist ? 'white' : null} />
-              </Styled.Profile>
-            )}
-          </Box>
+          <ProfileButton />
         </Box>
         <SearchResults autocompleteState={autocompleteState} autocomplete={autocompleteInstance} />
       </Styled.Wrapper>
-      {showProfile ? <Profile handleCloseProfile={handleCloseProfile} /> : null}
     </Box>
   );
 };