diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index f0390873..0fa06b70 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -19,8 +19,13 @@ jobs: with: registry-url: https://registry.npmjs.org/ + - name: Yarn Install + run: yarn + working-directory: web-embeds + - name: Deploy to NPM - run: npm run bump + run: yarn bump working-directory: web-embeds env: NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} + YARN_REGISTRY: https://registry.npmjs.org/ 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/micro-service/src/index.css b/micro-service/src/index.css index 9541a105..661bf3bc 100644 --- a/micro-service/src/index.css +++ b/micro-service/src/index.css @@ -15,8 +15,12 @@ html { html, body { height: 100%; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + background-color: #f8f8fa; +} + +* { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, + Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } img { @@ -36,4 +40,6 @@ input:focus-visible { outline: none; } -::selection { background: rgba(110,197,184, 0.62); /* base.tertiary */ } \ No newline at end of file +::selection { + background: rgba(110, 197, 184, 0.62); /* base.tertiary */ +} diff --git a/package.json b/package.json index 6c35aeaf..ee5c228d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "license": "MIT", "workspaces": { "packages": [ - "packages/*" + "packages/*", + "micro-service", + "web-embeds" ], "nohoist": [] } 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/Auth/AuthConfirm.js b/packages/web-shared/components/Auth/AuthConfirm.js index 5299497a..444bc485 100644 --- a/packages/web-shared/components/Auth/AuthConfirm.js +++ b/packages/web-shared/components/Auth/AuthConfirm.js @@ -11,7 +11,7 @@ import AuthLayout from './AuthLayout'; import authSteps from './authSteps'; import { useAnalytics } from '../../providers/AnalyticsProvider'; -const AuthConfirm = () => { +const AuthConfirm = (props) => { const [status, setStatus] = useState('IDLE'); const [error, setError] = useState(null); const [state, dispatch] = useAuth(); @@ -63,7 +63,7 @@ const AuthConfirm = () => { email: user?.email, phone: user?.phone, numberOfSharedProfiles: sharedProfiles.length, - }); + }); dispatch( updateAuth({ token, @@ -77,7 +77,7 @@ const AuthConfirm = () => { userId: user?.id, email: user?.email, phone: user?.phone, - }); + }); if (needsOnboarding) { dispatch( updateAuth({ @@ -130,6 +130,7 @@ const AuthConfirm = () => { return ( diff --git a/packages/web-shared/components/Auth/AuthDetails.js b/packages/web-shared/components/Auth/AuthDetails.js index 248a12cd..a5582b84 100644 --- a/packages/web-shared/components/Auth/AuthDetails.js +++ b/packages/web-shared/components/Auth/AuthDetails.js @@ -1,11 +1,6 @@ import React, { useState, useEffect } from 'react'; -import { - useForm, - useUpdateProfileFields, - useCurrentUser, - useCompleteRegister, -} from '../../hooks'; +import { useForm, useUpdateProfileFields, useCurrentUser, useCompleteRegister } from '../../hooks'; import { update as updateAuth, useAuth } from '../../providers/AuthProvider'; import { Box, Button, Input, Select } from '../../ui-kit'; import authSteps from '../Auth/authSteps'; @@ -16,7 +11,7 @@ function upperFirst(string) { return string.charAt(0).toUpperCase() + string.slice(1); } -function AuthDetails() { +function AuthDetails(props) { const [status, setStatus] = useState('IDLE'); const [error, setError] = useState(null); const [user, setUser] = useState(null); @@ -61,6 +56,7 @@ function AuthDetails() { return ( { +const AuthIdentity = (props) => { const [status, setStatus] = useState('IDLE'); const [error, setError] = useState(null); const [state, dispatch] = useAuth(); @@ -72,9 +72,7 @@ const AuthIdentity = () => { setStatus('LOADING'); requestLogin({ variables: { - identity: validEmail - ? { email: values.identity } - : { phone: values.identity }, + identity: validEmail ? { email: values.identity } : { phone: values.identity }, }, }); } else { @@ -87,9 +85,8 @@ const AuthIdentity = () => { return ( } /> - ) : null} + ) : ( +