diff --git a/client/cypress/e2e/patronMode.cy.ts b/client/cypress/e2e/patronMode.cy.ts
index 8dd53630e3..854b0a8ca1 100644
--- a/client/cypress/e2e/patronMode.cy.ts
+++ b/client/cypress/e2e/patronMode.cy.ts
@@ -708,5 +708,15 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
});
});
});
+
+ it('when entering project view, button icon changes to chevronLeft', () => {
+ visitWithLoader(ROOT_ROUTES.proposals.absolute);
+ cy.get('[data-test^=ProposalsView__ProposalsListItem').first().click();
+ cy
+ .get('[data-test=Navbar__Button--Projects]')
+ .find('svg')
+ // HTML tag can't be self-closing in CY.
+ .should('have.html','');
+ });
});
});
diff --git a/client/src/components/shared/Layout/Layout.tsx b/client/src/components/shared/Layout/Layout.tsx
index 5bcc87b06e..f5f28668be 100644
--- a/client/src/components/shared/Layout/Layout.tsx
+++ b/client/src/components/shared/Layout/Layout.tsx
@@ -27,6 +27,7 @@ import useUserTOS from 'hooks/queries/useUserTOS';
import { ROOT_ROUTES } from 'routes/RootRoutes/routes';
import { octant } from 'svg/logo';
import { chevronBottom } from 'svg/misc';
+import { chevronLeft } from 'svg/navigation';
import getDifferenceInWeeks from 'utils/getDifferenceInWeeks';
import getIsPreLaunch from 'utils/getIsPreLaunch';
import getTimeDistance from 'utils/getTimeDistance';
@@ -44,7 +45,6 @@ const Layout: FC = ({
isLoading,
isNavigationVisible = true,
classNameBody,
- navigationTabs = navigationTabsDefault,
isAbsoluteHeaderPosition = false,
}) => {
const { data: isPatronMode } = useIsPatronMode();
@@ -82,7 +82,7 @@ const Layout: FC = ({
const [currentPeriod, setCurrentPeriod] = useState(() => getCurrentPeriod());
const tabsWithIsActive = useMemo(() => {
- let tabs = navigationTabs;
+ let tabs = navigationTabsDefault;
if (isPatronMode) {
tabs = patronNavigationTabs;
@@ -91,12 +91,18 @@ const Layout: FC = ({
tabs = adminNavigationTabs;
}
- return tabs.map(tab => ({
- ...tab,
- isActive: tab.isActive || pathname === tab.to,
- isDisabled: isPreLaunch && tab.to !== ROOT_ROUTES.earn.absolute,
- }));
- }, [isPatronMode, isProjectAdminMode, isPreLaunch, pathname, navigationTabs]);
+ return tabs.map(tab => {
+ const isProjectView =
+ pathname.includes(`${ROOT_ROUTES.proposal.absolute}/`) &&
+ tab.to === ROOT_ROUTES.proposals.absolute;
+ return {
+ ...tab,
+ icon: isProjectView ? chevronLeft : tab.icon,
+ isActive: tab.isActive || pathname === tab.to || isProjectView,
+ isDisabled: isPreLaunch && tab.to !== ROOT_ROUTES.earn.absolute,
+ };
+ });
+ }, [isPatronMode, isProjectAdminMode, isPreLaunch, pathname]);
const isAllocationPeriodIsHighlighted = useMemo(() => {
if (isDecisionWindowOpen && timeCurrentAllocationEnd) {
diff --git a/client/src/components/shared/Layout/types.ts b/client/src/components/shared/Layout/types.ts
index 5e49d65031..81018f5471 100644
--- a/client/src/components/shared/Layout/types.ts
+++ b/client/src/components/shared/Layout/types.ts
@@ -1,7 +1,5 @@
import { ReactNode } from 'react';
-import { NavigationTab } from 'constants/navigationTabs/types';
-
export default interface LayoutProps {
children?: ReactNode;
classNameBody?: string;
@@ -11,5 +9,4 @@ export default interface LayoutProps {
isLoading?: boolean;
isNavigationVisible?: boolean;
navigationBottomSuffix?: ReactNode;
- navigationTabs?: NavigationTab[];
}
diff --git a/client/src/views/ProposalView/ProposalView.tsx b/client/src/views/ProposalView/ProposalView.tsx
index c61bc7d4e8..efb24a460a 100644
--- a/client/src/views/ProposalView/ProposalView.tsx
+++ b/client/src/views/ProposalView/ProposalView.tsx
@@ -1,6 +1,6 @@
import { AnimatePresence } from 'framer-motion';
import throttle from 'lodash/throttle';
-import React, { ReactElement, useState, useEffect, useMemo } from 'react';
+import React, { ReactElement, useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import InfiniteScroll from 'react-infinite-scroller';
import { Navigate, Route, Routes, useParams } from 'react-router-dom';
@@ -9,7 +9,6 @@ import ProposalBackToTopButton from 'components/Proposal/ProposalBackToTopButton
import ProposalList from 'components/Proposal/ProposalList';
import Layout from 'components/shared/Layout';
import Loader from 'components/ui/Loader';
-import { navigationTabs as navigationTabsDefault } from 'constants/navigationTabs/navigationTabs';
import useAreCurrentEpochsProjectsHiddenOutsideAllocationWindow from 'hooks/helpers/useAreCurrentEpochsProjectsHiddenOutsideAllocationWindow';
import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen';
@@ -19,7 +18,6 @@ import useProposalsIpfsWithRewards, {
} from 'hooks/queries/useProposalsIpfsWithRewards';
import { ROOT_ROUTES } from 'routes/RootRoutes/routes';
import toastService from 'services/toastService';
-import { chevronLeft } from 'svg/navigation';
import styles from './ProposalView.module.scss';
@@ -39,16 +37,6 @@ const ProposalView = (): ReactElement => {
const { data: matchedProposalRewards } = useMatchedProposalRewards(epoch);
const { data: proposalsIpfsWithRewards } = useProposalsIpfsWithRewards(epoch);
- const navigationTabs = useMemo(() => {
- const navTabs = [...navigationTabsDefault];
- navTabs[0] = {
- ...navTabs[0],
- icon: chevronLeft,
- isActive: true,
- };
- return navTabs;
- }, []);
-
const isEpoch1 = currentEpoch === 1;
const areMatchedProposalsReady =
!!currentEpoch &&
@@ -130,7 +118,7 @@ const ProposalView = (): ReactElement => {
}, [loadedProposals.length, proposalsIpfsWithRewards.length]);
if (!initialElement || !areMatchedProposalsReady || proposalsIpfsWithRewards.length === 0) {
- return ;
+ return ;
}
if (
@@ -151,11 +139,7 @@ const ProposalView = (): ReactElement => {
}
return (
-
+