diff --git a/client/src/assets/fonts/Montserrat-Regular.otf b/client/src/assets/fonts/Montserrat-Regular.otf new file mode 100644 index 00000000..c1d1ee37 Binary files /dev/null and b/client/src/assets/fonts/Montserrat-Regular.otf differ diff --git a/client/src/components/App/App.css b/client/src/components/App/App.css index cde6c891..b39a85fb 100644 --- a/client/src/components/App/App.css +++ b/client/src/components/App/App.css @@ -498,3 +498,9 @@ a.btn.disabled, fieldset:disabled a.btn { .text-center { text-align: center !important; } + +@font-face { + font-family: 'Montserrat'; + src: local('Montserrat'), + url('../../assets/fonts/Montserrat-Regular.otf') format('truetype'); +} \ No newline at end of file diff --git a/client/src/components/Auth/AuthButton.js b/client/src/components/Auth/AuthButton.js index b6e415b4..e09d6a6b 100644 --- a/client/src/components/Auth/AuthButton.js +++ b/client/src/components/Auth/AuthButton.js @@ -2,6 +2,9 @@ import React from 'react'; import { useAuth0 } from '@auth0/auth0-react'; import useAuthUtils from '@/components/Auth/useAuthUtils'; +import { GreenButton } from '@/components/Section/Section'; +import { MenuItem } from '@mui/material'; +import { LoginOutlined, LogoutOutlined } from '@mui/icons-material'; export const AuthButton = () => { const { isAuthenticated, logout } = useAuth0(); @@ -18,12 +21,57 @@ export const AuthButton = () => { }; return ( - + + ); +}; + +export const ProfileAuthButton = (props) => { + const LoginIcon = (props) => ( + + ); + + const LogoutIcon = (props) => ( + + ); + const { isAuthenticated, logout } = useAuth0(); + const { loginToCurrentPage } = useAuthUtils(); + + const handleClick = () => { + if (isAuthenticated) { + // Only logging out to the root seems to be allowed, so if the user is on a subpage like + // /contact, they'll be sent back to /. + logout({ returnTo: location.origin }); + } else { + loginToCurrentPage(); + } + }; + + return ( + + {isAuthenticated ? : } + {props.children} + ); }; diff --git a/client/src/components/Auth/index.js b/client/src/components/Auth/index.js index bcef3062..a1723733 100644 --- a/client/src/components/Auth/index.js +++ b/client/src/components/Auth/index.js @@ -1,5 +1,5 @@ export { Loading } from './Loading'; -export { AuthButton } from './AuthButton'; +export { AuthButton, ProfileAuthButton } from './AuthButton'; export { RedirectWithHash } from './RedirectWithHash'; export { RequireAuth } from './RequireAuth'; export { Auth0ProviderWithRedirect } from './Auth0ProviderWithRedirect'; diff --git a/client/src/components/Header/Header.js b/client/src/components/Header/Header.js index 13cc03ca..82c24324 100644 --- a/client/src/components/Header/Header.js +++ b/client/src/components/Header/Header.js @@ -1,92 +1,64 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Menu, MenuItem } from '@mui/material'; +import { TreeLogo } from '@/components/Icons'; +import HeaderLogo from '@/assets/images/logos/header-logo.svg'; import { useAuth0 } from '@auth0/auth0-react'; import { AuthButton } from '@/components/Auth'; -import HeaderLogo from '@/assets/images/logos/header-logo.svg'; +import Menu from './Menu'; + import './Header.scss'; const Header = () => { - const [anchorEl, setAnchorEl] = React.useState(null); - - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; const { isAuthenticated } = useAuth0(); return ( - ); }; -const HeaderButton = ({ menuItem }) => ( - -); - export default Header; diff --git a/client/src/components/Header/Header.scss b/client/src/components/Header/Header.scss index 3e7467ba..1dbd1a9b 100644 --- a/client/src/components/Header/Header.scss +++ b/client/src/components/Header/Header.scss @@ -4,15 +4,153 @@ url('../../assets/fonts/WTT-THIN.ttf') format('truetype'); } +// .header { +// position: fixed; +// top: 0; +// width: 100%; +// background-color: rgba(20, 125, 22, 0.8); +// border-color: transparent; + +// /* put this above the map drawer but below modal dialogs */ +// z-index: 1250 !important; +// } + .header { - position: fixed; - top: 0; + font-family: 'Montserrat', sans-serif; + display: flex; + justify-content: center; width: 100%; - background-color: rgba(20,125,22, 0.8); - border-color: transparent; + height: 64px; + + &__navigation { + display: flex; + width: 70%; + + @media only screen and (max-width: 768px) { + width: 90%; + } + + &__logocontainer { + display: flex; + align-items: center; + max-width: 272px; + + &__logo { + padding-left: 10px; + width: 100%; + } + } + + &__navcontainer { + position: relative; + display: flex; + left: 5%; + align-items: center; + + @media only screen and (max-width: 768px) { + display: none; + } + + &__buttons { + margin: 8px 8px; + font-size: 1.5rem; + border: none; + background-color: white; + padding: 0; + padding-right: 32px; + + a { + display: flex; + flex-direction: column; + color: black; + + &:before { + color: black; + font-weight: bold; + content: attr(Title); + visibility: hidden; + height: 0; + } + + &:hover { + color: #3fab45; + text-decoration: none; + font-weight: bold; + } + } + } + } + + &__authcontainer { + display: flex; + align-items: center; + margin-left: auto; + + &__button { + + @media only screen and (max-width: 768px) { + display: none; + } + } - /* put this above the map drawer but below modal dialogs */ - z-index: 1250 !important; + &__burger { + display: none; + + @media only screen and (max-width: 768px) { + display: inline-block; + } + } + + &__picture { + width: 40px; + height: 40px; + border-radius: 50%; + } + + &__menu { + display: flex; + flex-direction: column; + + &__menuitem { + display: none; + width: 100%; + + @media only screen and (max-width: 768px) { + display: flex; + flex-direction: column; + border-bottom: rgba(0, 0, 0, 0.4) 1px solid; + } + + &__links { + color: black; + + &:hover { + text-decoration: none; + color: #3fab45; + cursor: default; + } + + &__span { + padding-left: 15px; + font-size: 1.2em; + } + } + + &__disabled { + color: #00000040; + + &:hover { + text-decoration: none; + color: #00000040; + } + } + + + } + } + + } + } } .header--logo { @@ -27,6 +165,7 @@ box-shadow: 0 0 0 2pxrgba 0, 0, 0, 0.1; } + .header-btn-menu { background-color: white; border-radius: 4px; @@ -82,7 +221,7 @@ .header-btn-menu { background-color: transparent; border-width: 0; - color: white; + color: #3fab45; border: none; outline: none; font-size: 3rem; diff --git a/client/src/components/Header/Menu.js b/client/src/components/Header/Menu.js new file mode 100644 index 00000000..01cf0750 --- /dev/null +++ b/client/src/components/Header/Menu.js @@ -0,0 +1,230 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Menu, MenuItem } from '@mui/material'; +import { useAuth0 } from '@auth0/auth0-react'; +import { ProfileAuthButton } from '@/components/Auth'; +import { + PublicOutlined, + InfoOutlined, + HelpOutlineOutlined, + ContactMailOutlined, + FolderSpecialOutlined, + AccountCircleOutlined, +} from '@mui/icons-material/'; + +import './Header.scss'; + +const NavMenu = () => { + const [anchorEl, setAnchorEl] = React.useState(null); + + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const { isAuthenticated, user = {} } = useAuth0(); + const { picture } = user; + + return ( + <> + {isAuthenticated ? ( + profile + ) : ( + + )} + + {isAuthenticated && ( +
+
+ + + + + Profile + + + +
+
+ )} + +
+ + + + + Map + + + + + + + + + About + + + + + + + + + Contact + + + + + + + + Data + + + +
+ + + + + Help + + + + + {isAuthenticated ? ( + + Log Out + + ) : ( + + Sign In + + )} + + + + ); +}; + +export default NavMenu; diff --git a/client/src/components/Section/Section.js b/client/src/components/Section/Section.js index 92ec690f..c072694d 100644 --- a/client/src/components/Section/Section.js +++ b/client/src/components/Section/Section.js @@ -1,5 +1,6 @@ import React from 'react'; import { Box } from '@mui/material'; +import styled from '@emotion/styled'; export default function Section({ children, title }) { return ( @@ -17,3 +18,13 @@ export default function Section({ children, title }) { ); } + +export const GreenButton = styled.button((props) => ({ + background: '#3fab45', + color: 'white', + fontSize: '1.75rem', + border: 'none', + borderRadius: '.5rem', + padding: '4px', + ...props.style, +})); diff --git a/client/src/pages/License/License.js b/client/src/pages/License/License.js index 8aa11e20..d5f7f6bd 100644 --- a/client/src/pages/License/License.js +++ b/client/src/pages/License/License.js @@ -139,6 +139,85 @@ function License() { with respect to this CC0 or use of the Work. +
+
+

SIL OPEN FONT LICENSE Version 1.1

+
+
+

Preamble

+ The goals of the Open Font License (OFL) are to stimulate worldwide + development of collaborative font projects, to support the font + creation efforts of academic and linguistic communities, and to + provide a free and open framework in which fonts may be shared and + improved in partnership with others. The OFL allows the licensed fonts + to be used, studied, modified and redistributed freely as long as they + are not sold by themselves. The fonts, including any derivative works, + can be bundled, embedded, redistributed and/or sold with any software + provided that any reserved names are not used by derivative works. The + fonts and derivatives, however, cannot be released under any other + type of license. The requirement for fonts to remain under this + license does not apply to any document created using the fonts or + their derivatives. +
+
+

Definitions

+ "Font Software" refers to the set of files released by the Copyright + Holder(s) under this license and clearly marked as such. This may + include source files, build scripts and documentation. "Reserved Font + Name" refers to any names specified as such after the copyright + statement(s). "Original Version" refers to the collection of Font + Software components as distributed by the Copyright Holder(s). + "Modified Version" refers to any derivative made by adding to, + deleting, or substituting -- in part or in whole -- any of the + components of the Original Version, by changing formats or by porting + the Font Software to a new environment. "Author" refers to any + designer, engineer, programmer, technical writer or other person who + contributed to the Font Software. +
+
+

Permissions & Conditions

+ Permission is hereby granted, free of charge, to any person obtaining + a copy of the Font Software, to use, study, copy, merge, embed, + modify, redistribute, and sell modified and unmodified copies of the + Font Software, subject to the following conditions: 1) Neither the + Font Software nor any of its individual components, in Original or + Modified Versions, may be sold by itself. 2) Original or Modified + Versions of the Font Software may be bundled, redistributed and/or + sold with any software, provided that each copy contains the above + copyright notice and this license. These can be included either as + stand-alone text files, human-readable headers or in the appropriate + machine-readable metadata fields within text or binary files as long + as those fields can be easily viewed by the user. 3) No Modified + Version of the Font Software may use the Reserved Font Name(s) unless + explicit written permission is granted by the corresponding Copyright + Holder. This restriction only applies to the primary font name as + presented to the users. 4) The name(s) of the Copyright Holder(s) or + the Author(s) of the Font Software shall not be used to promote, + endorse or advertise any Modified Version, except to acknowledge the + contribution(s) of the Copyright Holder(s) and the Author(s) or with + their explicit written permission. 5) The Font Software, modified or + unmodified, in part or in whole, must be distributed entirely under + this license, and must not be distributed under any other license. The + requirement for fonts to remain under this license does not apply to + any document created using the Font Software. +
+
+

Disclaimers

+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF + MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT + OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE + COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, + INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL + DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM + OTHER DEALINGS IN THE FONT SOFTWARE. +
+
+ This license becomes null and void if any of the above conditions are + not met. +
+
); }