diff --git a/micro-service/src/App.js b/micro-service/src/App.js
index 59b932fb..9ae97bcf 100644
--- a/micro-service/src/App.js
+++ b/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 ;
-}
-
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 = (
-
-
-
+ <>
+
+
+
+
+ >
);
const routerConfig = [
@@ -66,7 +55,6 @@ function App({ searchParams, url }) {
if (churchSlug) {
return (
-
{/** When using SSR, avoid the router. it crashes */}
{ssr ? mainRoute : }
diff --git a/packages/web-shared/components/AppHeader/AppHeader.js b/packages/web-shared/components/AppHeader/AppHeader.js
new file mode 100644
index 00000000..850577a2
--- /dev/null
+++ b/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 ;
+}
+
+const AppHeader = () => (
+ <>
+
+
+
+
+
+
+
+
+ >
+);
+
+export default AppHeader;
diff --git a/packages/web-shared/components/AppHeader/index.js b/packages/web-shared/components/AppHeader/index.js
new file mode 100644
index 00000000..7692071c
--- /dev/null
+++ b/packages/web-shared/components/AppHeader/index.js
@@ -0,0 +1,3 @@
+import AppHeader from './AppHeader';
+
+export default AppHeader;
diff --git a/packages/web-shared/components/Profile/Profile.js b/packages/web-shared/components/Profile/Profile.js
index e4db63a3..bdcdd00a 100644
--- a/packages/web-shared/components/Profile/Profile.js
+++ b/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 ? (
<>
- My Profile
+
+ My Profile
+
setShowDetails(true)}
diff --git a/packages/web-shared/components/Profile/Profile.styles.js b/packages/web-shared/components/Profile/Profile.styles.js
index e73d10e3..465e75f3 100644
--- a/packages/web-shared/components/Profile/Profile.styles.js
+++ b/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,
diff --git a/packages/web-shared/components/Profile/ProfileButton.js b/packages/web-shared/components/Profile/ProfileButton.js
new file mode 100644
index 00000000..407a36c6
--- /dev/null
+++ b/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 (
+
+
+ {currentUser?.profile?.photo?.uri ? (
+
+ ) : (
+
+
+
+ )}
+
+ {showProfile ? setShowProfile(false)} /> : null}
+
+ );
+};
+
+export default ProfileButton;
diff --git a/packages/web-shared/components/Searchbar/Searchbar.js b/packages/web-shared/components/Searchbar/Searchbar.js
index 153df467..9f4a1fd6 100644
--- a/packages/web-shared/components/Searchbar/Searchbar.js
+++ b/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 = {}) => {
-
- {currentUser?.profile?.photo?.uri ? (
-
- ) : (
-
-
-
- )}
-
+
- {showProfile ? : null}
);
};