diff --git a/.prettierignore b/.prettierignore index 92c93fb..23c0e49 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ public/* .next/* +lib/graphql/types/* diff --git a/components/Footer.tsx b/components/Footer.tsx index 5eed42d..fecc255 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,44 +1,41 @@ import React from 'react'; +import Image from 'next/image'; +import { FormattedMessage } from 'react-intl'; import styled from 'styled-components'; -import packageJSON from '../package.json'; +import Container from '@opencollective/frontend-components/components/Container'; +import { P } from '@opencollective/frontend-components/components/Text'; const StyledFooter = styled.footer` - margin-top: 2rem; - font-size: 13px; - - ul { - margin-bottom: 1rem; - padding: 0; - list-style: none; - } - - li { - margin-right: 1rem; - display: inline-block; - } + padding: 36px 40px; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1280px; + margin: 0 auto; `; export default function Footer() { return ( -
- +

+ +

+ + + + + + by Open Collective + + ); } diff --git a/components/Header.tsx b/components/Header.tsx index 6a2427f..5f4dd05 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import Image from 'next/image'; import Link from 'next/link'; import { signIn, signOut } from 'next-auth/react'; import { FormattedMessage } from 'react-intl'; @@ -8,160 +9,80 @@ import { useLoggedInUser } from '../lib/hooks/useLoggedInUser'; import { OPENCOLLECTIVE_OAUTH_PROVIDER_ID } from '../lib/opencollective-oauth-config'; import Avatar from '@opencollective/frontend-components/components/Avatar'; -import { Flex } from '@opencollective/frontend-components/components/Grid'; +import { Box, Flex } from '@opencollective/frontend-components/components/Grid'; import StyledButton from '@opencollective/frontend-components/components/StyledButton'; -import { Strong } from '@opencollective/frontend-components/components/Text'; +import { H1, Span } from '@opencollective/frontend-components/components/Text'; const StyledHeader = styled.header` - /* Set min-height to avoid page reflow while session loading */ - .signedInStatus { - display: block; - min-height: 4rem; - width: 100%; - } - - .loading, - .loaded { - position: relative; - top: 0; - opacity: 1; - overflow: hidden; - border-radius: 0 0 0.6rem 0.6rem; - padding: 0.6rem 1rem; - margin: 0; - background-color: rgba(0, 0, 0, 0.05); - transition: all 0.2s ease-in; - } - - .loading { - top: -2rem; - opacity: 0; - } - - .signedInText, - .notSignedInText { - padding-top: 0.8rem; - left: 1rem; - right: 6.5rem; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: inherit; - z-index: 1; - line-height: 1.3rem; - } - - .signedInText { - padding-top: 0rem; - left: 4.6rem; - } - - .avatar { - border-radius: 2rem; - float: left; - height: 2.8rem; - width: 2.8rem; - background-color: white; - background-size: cover; - background-repeat: no-repeat; - } - - .button, - .buttonPrimary { - float: right; - margin-right: -0.4rem; - font-weight: 500; - border-radius: 0.3rem; - cursor: pointer; - font-size: 1rem; - line-height: 1.4rem; - padding: 0.7rem 0.8rem; - position: relative; - z-index: 10; - background-color: transparent; - color: #555; - } - - .buttonPrimary { - background-color: #346df1; - border-color: #346df1; - color: #fff; - text-decoration: none; - padding: 0.7rem 1.4rem; - } - - .buttonPrimary:hover { - box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2); - } - - .navItems { - margin-bottom: 2rem; - padding: 0; - list-style: none; - } - - .navItem { - display: inline-block; - margin-right: 1rem; - } + padding: 56px 40px 24px 40px; + max-width: 1280px; + margin: 0 auto; `; // The approach used in this component shows how to build a sign in and sign out // component that works on pages which support both client and server side // rendering, and avoids any flash incorrect content on initial page load. export default function Header() { - const { loadingLoggedInUser, LoggedInUser } = useLoggedInUser(); + const { LoggedInUser } = useLoggedInUser(); return ( -
-
- {!LoggedInUser && ( - - - - - { - e.preventDefault(); - signIn(OPENCOLLECTIVE_OAUTH_PROVIDER_ID); - }} - > - - + + +

+ + + + + + by Open Collective + - )} - {LoggedInUser && ( - - - - - Signed in as -
- {LoggedInUser.email ?? LoggedInUser.collective.name} - +

+ + + + {!LoggedInUser ? ( +
+ { + e.preventDefault(); + signIn(OPENCOLLECTIVE_OAUTH_PROVIDER_ID); + }} + > + + +
+ ) : ( + + + + + + {LoggedInUser.collective.name} + + + {LoggedInUser.email} + - { - e.preventDefault(); - signOut(); - }} - > - - - )} -
-
- + { + e.preventDefault(); + signOut(); + }} + > + + + + )} + ); } diff --git a/components/Layout.tsx b/components/Layout.tsx index fb30365..c7edfe6 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import styled from 'styled-components'; import Footer from './Footer'; import Header from './Header'; @@ -7,11 +8,16 @@ interface Props { children: React.ReactNode; } +const Main = styled.main` + background: ${props => props.theme.colors.black[50]}; + min-height: 380px; +`; + export default function Layout({ children }: Props) { return (
-
{children}
+
{children}