Merge pull request #4222 from DaleMcGrew/Dale_WebApp_Dec28-2024b

Removed more styles from main.css. Moved some .svg icons to img/global/svg-icons. Updated ChallengeInviteFriendsTopNavigation to match how we layout other functional components.
wevote · Jan 5, 2025 · ca92fb0 · ca92fb0
2 parents 4db177d + 4927152
commit ca92fb0
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 91 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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 → src/img/global/svg-icons/cross.svg b/src/img/global/icons/cross.svg → src/img/global/svg-icons/cross.svg
diff --git a/src/img/global/icons/dislike.svg → src/img/global/svg-icons/dislike.svg b/src/img/global/icons/dislike.svg → src/img/global/svg-icons/dislike.svg
diff --git a/src/img/global/icons/like.svg → src/img/global/svg-icons/like.svg b/src/img/global/icons/like.svg → src/img/global/svg-icons/like.svg
diff --git a/src/img/global/icons/search.svg → src/img/global/svg-icons/search.svg b/src/img/global/icons/search.svg → 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
@@ -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
       >
         <StyledEngineProvider injectFirst>
           <ThemeProvider theme={theme}>
-            <StyledToolbar disableGutters
+            <ToolbarStyled disableGutters
               className={classes.toolbarRoot}
-              component={StyledToolbar}
+              component={Toolbar}
             >
-              <StyledTabs value={value} onChange={handleChange} aria-label="Tab menu">
-                {!hideAboutTab && <StyledTab id="challengeLandingTab-0" label="About" onClick={() => history.push(aboutUrl)} value={1} isSmallScreen={isSmallScreen} />}
-                <StyledTab id="challengeLandingTab-1" label="Leaderboard" onClick={() => history.push(leaderboardUrl)} value={2} isSmallScreen={isSmallScreen} />
-                {voterIsChallengeParticipant && <StyledTab id="challengeLandingTab-2" label={isSmallScreen ? 'Invited' : 'Invited friends'} onClick={() => history.push(friendsUrl)} value={3} />}
-              </StyledTabs>
+              <TabsStyled value={value} onChange={handleChange} aria-label="Tab menu">
+                {!hideAboutTab && <TabStyled id="challengeLandingTab-0" label="About" onClick={() => history.push(aboutUrl)} value={1} isSmallScreen={isSmallScreen} />}
+                <TabStyled id="challengeLandingTab-1" label="Leaderboard" onClick={() => history.push(leaderboardUrl)} value={2} isSmallScreen={isSmallScreen} />
+                {voterIsChallengeParticipant && <TabStyled id="challengeLandingTab-2" label={isSmallScreen ? 'Invited' : 'Invited friends'} onClick={() => history.push(friendsUrl)} value={3} />}
+              </TabsStyled>
               <MoreInfoIconWrapper
                 hovered={hovered}
                 isSmallScreen={isSmallScreen}
@@ -209,7 +149,7 @@ export default function ChallengeInviteFriendsTopNavigation ({ challengeSEOFrien
                 <InfoOutlined />
                 {!isSmallScreen && <MoreInfoText>More info</MoreInfoText>}
               </MoreInfoIconWrapper>
-            </StyledToolbar>
+            </ToolbarStyled>
           </ThemeProvider>
         </StyledEngineProvider>
       </AppBar>
@@ -220,9 +160,71 @@ export default function ChallengeInviteFriendsTopNavigation ({ challengeSEOFrien
       )}
     </div>
   );
-}
+};
 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
@@ -19,16 +19,16 @@ const HeaderBarLogo = ({ chosenSiteLogoUrl, isBeta, light }) => (
       </Link>
     ) : (
       <WeVoteLogoWrapper>
-        <Link to="/ready" className="page-logo page-logo-full-size" id="logoHeaderBar">
+        <Link to="/ready" id="logoHeaderBar">
           <HeaderLogoImage src={light ? normalizedImagePath(logoLight) : normalizedImagePath(logoDark)} />
           {(isBeta && !isCordova()) && (
-            <span className="beta-marker">
+            <BetaMarker>
               <Suspense fallback={<></>}>
                 <DelayedLoad waitBeforeShow={200}>
                   <BetaMarkerInner light={light}>ballot</BetaMarkerInner>
                 </DelayedLoad>
               </Suspense>
-            </span>
+            </BetaMarker>
           )}
         </Link>
       </WeVoteLogoWrapper>
@@ -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 }) => (`