diff --git a/package-lock.json b/package-lock.json index 631616641..8c02aa59d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,7 +44,7 @@ "react": "~17.0.2", "react-bootstrap": "^1.6.4", "react-confetti": "^6.1.0", - "react-copy-to-clipboard": "^5.0.3", + "react-copy-to-clipboard": "^5.1.0", "react-dom": "~17.0.2", "react-fullstory": "^1.4.0", "react-ga4": "^2.1.0", diff --git a/src/css/main.css b/src/css/main.css index df8233bf4..0f4e9933c 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -3335,20 +3335,6 @@ a { background-color:#fff } -.page-logo { - width:45px -} - -@media all and (min-width: 576px) { - .page-logo { - width:120px - } -} - -.page-logo > .beta-marker { - position:relative -} - .search-container--cordova { left:0; width:auto diff --git a/src/img/global/icons/cross.svg b/src/img/global/svg-icons/cross.svg similarity index 100% rename from src/img/global/icons/cross.svg rename to src/img/global/svg-icons/cross.svg diff --git a/src/img/global/icons/dislike.svg b/src/img/global/svg-icons/dislike.svg similarity index 100% rename from src/img/global/icons/dislike.svg rename to src/img/global/svg-icons/dislike.svg diff --git a/src/img/global/icons/like.svg b/src/img/global/svg-icons/like.svg similarity index 100% rename from src/img/global/icons/like.svg rename to src/img/global/svg-icons/like.svg diff --git a/src/img/global/icons/search.svg b/src/img/global/svg-icons/search.svg similarity index 100% rename from src/img/global/icons/search.svg rename to src/img/global/svg-icons/search.svg diff --git a/src/js/common/components/Navigation/ChallengeInviteFriendsTopNavigation.jsx b/src/js/common/components/Navigation/ChallengeInviteFriendsTopNavigation.jsx index 71493bdee..01e977048 100644 --- a/src/js/common/components/Navigation/ChallengeInviteFriendsTopNavigation.jsx +++ b/src/js/common/components/Navigation/ChallengeInviteFriendsTopNavigation.jsx @@ -1,10 +1,11 @@ import React, { useState, Suspense } from 'react'; import { AppBar, Tab, Tabs, Toolbar, useMediaQuery } from '@mui/material'; -import { createTheme, StyledEngineProvider, ThemeProvider, styled } from '@mui/material/styles'; -import makeStyles from '@mui/styles/makeStyles'; +import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles'; +import { withStyles } from '@mui/styles'; import { InfoOutlined } from '@mui/icons-material'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; +import styled from 'styled-components'; import { renderLog } from '../../utils/logging'; import { endsWith } from '../../utils/startsWith'; import stringContains from '../../utils/stringContains'; @@ -32,68 +33,8 @@ const theme = createTheme({ }, }, }); -const StyledToolbar = styled(Toolbar)(({ theme }) => ({ - alignItems: 'center', - display: 'flex', - minHeight: 48, - position: 'relative', - width: '100%', -})); -const StyledTabs = styled(Tabs)({ - flexGrow: 1, -}); - -const MoreInfoIconWrapper = styled('div', { - shouldForwardProp: (prop) => !['hovered', 'isSmallScreen'].includes(prop), -})(({ hovered, isSmallScreen }) => ({ - alignItems: 'center', - color: hovered ? DesignTokenColors.primary500 : DesignTokenColors.neutral600, - cursor: 'pointer', - display: 'flex', - fontSize: '0.875rem', - fontWeight: 500, - lineHeight: 1.25, - position: 'absolute', - right: isSmallScreen ? '12px' : '16px', -})); - -const MoreInfoText = styled('span')({ - marginLeft: 4, -}); - -const StyledTab = styled(Tab)(({ theme }) => ({ - marginRight: 16, - minWidth: 'auto', - padding: '12px 16px', - [theme.breakpoints.down('sm')]: { - minWidth: '0', - padding: '12px 10px', - }, - '&:last-child': { - marginRight: 0, - }, -})); - -// TODO: Mar 23, 2022, makeStyles is legacy in MUI 5, replace instance with styled-components or sx if there are issues -const useStyles = makeStyles((theme) => ({ - appBarRoot: { - borderBottom: 0, - boxShadow: 'none', - [theme.breakpoints.up('sm')]: { - borderBottom: '1px solid #ddd', - }, - }, - root: { - flexGrow: 1, - backgroundColor: theme.palette.background.paper, - }, - toolbarRoot: { - minHeight: 48, - }, -})); - -export default function ChallengeInviteFriendsTopNavigation ({ challengeSEOFriendlyPath, challengeWeVoteId, hideAboutTab }) { +const ChallengeInviteFriendsTopNavigation = ({ challengeSEOFriendlyPath, challengeWeVoteId, classes, hideAboutTab }) => { const [value, setValue] = React.useState(0); const [voterIsChallengeParticipant, setVoterIsChallengeParticipant] = React.useState(false); // console.log('ChallengeInviteFriendsTopNavigation challengeWeVoteId:', challengeWeVoteId, ', voterIsChallengeParticipant:', voterIsChallengeParticipant); @@ -102,7 +43,6 @@ export default function ChallengeInviteFriendsTopNavigation ({ challengeSEOFrien const [isMoreInfoOpen, setIsMoreInfoOpen] = useState(false); const [hovered, setHovered] = useState(false); - const classes = useStyles(); const history = useHistory(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); @@ -190,15 +130,15 @@ export default function ChallengeInviteFriendsTopNavigation ({ challengeSEOFrien > - - - {!hideAboutTab && history.push(aboutUrl)} value={1} isSmallScreen={isSmallScreen} />} - history.push(leaderboardUrl)} value={2} isSmallScreen={isSmallScreen} /> - {voterIsChallengeParticipant && history.push(friendsUrl)} value={3} />} - + + {!hideAboutTab && history.push(aboutUrl)} value={1} isSmallScreen={isSmallScreen} />} + history.push(leaderboardUrl)} value={2} isSmallScreen={isSmallScreen} /> + {voterIsChallengeParticipant && history.push(friendsUrl)} value={3} />} + {!isSmallScreen && More info} - + @@ -220,9 +160,71 @@ export default function ChallengeInviteFriendsTopNavigation ({ challengeSEOFrien )} ); -} +}; ChallengeInviteFriendsTopNavigation.propTypes = { challengeSEOFriendlyPath: PropTypes.string, challengeWeVoteId: PropTypes.string, hideAboutTab: PropTypes.bool, }; + +const styles = () => ({ + appBarRoot: { + borderBottom: 0, + boxShadow: 'none', + [theme.breakpoints.up('sm')]: { + borderBottom: '1px solid #ddd', + }, + }, + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, + toolbarRoot: { + minHeight: 48, + }, +}); + +const MoreInfoIconWrapper = styled('div', { + shouldForwardProp: (prop) => !['hovered', 'isSmallScreen'].includes(prop), +})(({ hovered, isSmallScreen }) => ({ + alignItems: 'center', + color: hovered ? DesignTokenColors.primary500 : DesignTokenColors.neutral600, + cursor: 'pointer', + display: 'flex', + fontSize: '0.875rem', + fontWeight: 500, + lineHeight: 1.25, + position: 'absolute', + right: isSmallScreen ? '12px' : '16px', +})); + +const MoreInfoText = styled('span')({ + marginLeft: 4, +}); + +const TabsStyled = styled(Tabs)({ + flexGrow: 1, +}); + +const TabStyled = styled(Tab)(() => ({ + marginRight: 16, + minWidth: 'auto', + padding: '12px 16px', + [theme.breakpoints.down('sm')]: { + minWidth: '0', + padding: '12px 10px', + }, + '&:last-child': { + marginRight: 0, + }, +})); + +const ToolbarStyled = styled(Toolbar)(() => ({ + alignItems: 'center', + display: 'flex', + minHeight: 48, + position: 'relative', + width: '100%', +})); + +export default withStyles(styles)(ChallengeInviteFriendsTopNavigation); diff --git a/src/js/components/Navigation/HeaderBarLogo.jsx b/src/js/components/Navigation/HeaderBarLogo.jsx index 5d7108f02..04decf039 100644 --- a/src/js/components/Navigation/HeaderBarLogo.jsx +++ b/src/js/components/Navigation/HeaderBarLogo.jsx @@ -19,16 +19,16 @@ const HeaderBarLogo = ({ chosenSiteLogoUrl, isBeta, light }) => ( ) : ( - + {(isBeta && !isCordova()) && ( - + }> ballot - + )} @@ -42,6 +42,10 @@ HeaderBarLogo.propTypes = { light: PropTypes.bool, }; +const BetaMarker = styled('span')` + position:relative; +`; + const BetaMarkerInner = styled('span', { shouldForwardProp: (prop) => !['light'].includes(prop), })(({ light }) => (`