From 089a82ed2e92c2de393905a793dd39d40a37057b Mon Sep 17 00:00:00 2001 From: "heykd.eth" <65736142+thekidnamedkd@users.noreply.github.com> Date: Thu, 31 Oct 2024 07:41:27 -0700 Subject: [PATCH] feat(APP-3648): Update logo, clean up navigation logic on scroll (#1412) --- src/assets/images/iconLogo.svg | 6 ----- src/assets/images/iconLogoBlue.svg | 6 ----- src/assets/images/logo.svg | 9 +------- src/assets/images/logoBlue.svg | 8 ------- src/assets/images/logotype.svg | 1 + src/assets/locales/en/common.json | 3 --- src/components/logos/logo/index.tsx | 23 ++++++++++++++++++ src/components/logos/logotype/index.tsx | 27 ++++++++++++++++++++++ src/containers/daoExplorer/daoExplorer.tsx | 3 ++- src/containers/exploreFooter/index.tsx | 19 +++++++-------- src/containers/footer/index.tsx | 19 +++++++-------- src/containers/navbar/exploreNav.tsx | 25 +++++++++----------- src/pages/notFound.tsx | 20 +++++++++++----- 13 files changed, 99 insertions(+), 70 deletions(-) delete mode 100644 src/assets/images/iconLogo.svg delete mode 100644 src/assets/images/iconLogoBlue.svg delete mode 100644 src/assets/images/logoBlue.svg create mode 100644 src/assets/images/logotype.svg create mode 100644 src/components/logos/logo/index.tsx create mode 100644 src/components/logos/logotype/index.tsx diff --git a/src/assets/images/iconLogo.svg b/src/assets/images/iconLogo.svg deleted file mode 100644 index 15aaa6de0..000000000 --- a/src/assets/images/iconLogo.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/images/iconLogoBlue.svg b/src/assets/images/iconLogoBlue.svg deleted file mode 100644 index ad99560e6..000000000 --- a/src/assets/images/iconLogoBlue.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg index 01089c256..dec9353cb 100644 --- a/src/assets/images/logo.svg +++ b/src/assets/images/logo.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/src/assets/images/logoBlue.svg b/src/assets/images/logoBlue.svg deleted file mode 100644 index 0118b7414..000000000 --- a/src/assets/images/logoBlue.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/assets/images/logotype.svg b/src/assets/images/logotype.svg new file mode 100644 index 000000000..90db66ada --- /dev/null +++ b/src/assets/images/logotype.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json index cf553387d..a85836454 100644 --- a/src/assets/locales/en/common.json +++ b/src/assets/locales/en/common.json @@ -1196,9 +1196,6 @@ "linkURL": "https://form.typeform.com/to/apg4gHYO" } }, - "logo": { - "linkURL": "https://aragon.org/" - }, "modal": { "deposit": { "headerTitle": "Deposit assets", diff --git a/src/components/logos/logo/index.tsx b/src/components/logos/logo/index.tsx new file mode 100644 index 000000000..6595e317f --- /dev/null +++ b/src/components/logos/logo/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +export const Logo = () => { + return ( + + + + + ); +}; diff --git a/src/components/logos/logotype/index.tsx b/src/components/logos/logotype/index.tsx new file mode 100644 index 000000000..0515c895e --- /dev/null +++ b/src/components/logos/logotype/index.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +export const Logotype = () => { + return ( + + + + + + ); +}; diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index d63ab80ff..08156a3c3 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -371,10 +371,11 @@ export const DaoExplorer = () => { const MainContainer = styled.div.attrs({ className: 'flex flex-col space-y-4 xl:space-y-6', })``; + const Container = styled.div.attrs({ className: 'flex flex-col space-y-3', })``; const CardsWrapper = styled.div.attrs({ - className: 'grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-6', + className: 'grid grid-cols-1 gap-3 md:grid-cols-2', })``; diff --git a/src/containers/exploreFooter/index.tsx b/src/containers/exploreFooter/index.tsx index c3ef2c19c..673b31128 100644 --- a/src/containers/exploreFooter/index.tsx +++ b/src/containers/exploreFooter/index.tsx @@ -1,14 +1,13 @@ import React from 'react'; import styled from 'styled-components'; import {Icon, IconType} from '@aragon/ods'; - import {GridLayout} from 'components/layout'; import {StyledLink} from 'components/styledLink'; import useScreen from 'hooks/useScreen'; import Green from 'assets/images/greenGradient.svg'; -import IconLogo from 'assets/images/iconLogo.svg'; import Purple from 'assets/images/purpleGradient.svg'; import {EXPLORE_NAV_LINKS, PRIVACY_NAV_LINKS} from 'utils/constants'; +import {Logotype} from 'components/logos/logotype'; const Footer: React.FC = () => { const {isDesktop} = useScreen(); @@ -37,7 +36,7 @@ const Footer: React.FC = () => { {isDesktop ? ( <> - + {ExploreNavLinks} @@ -49,7 +48,9 @@ const Footer: React.FC = () => { ) : ( <> - + + + {ExploreNavLinks} {PrivacyNavLinks} @@ -84,11 +85,7 @@ const ActionContainer = styled.div.attrs({ })``; const FlexDiv = styled.div.attrs({ - className: 'flex space-x-8 items-center', -})``; - -const LogoContainer = styled.img.attrs({ - className: 'h-10', + className: 'flex space-x-8 items-center h-10 text-neutral-0', })``; const StyledNavList = styled.ul.attrs({ @@ -107,4 +104,8 @@ const GradientPurple = styled.img.attrs({ className: 'xl:h-80 h-60 absolute -right-10 xl:-top-[88px] top-32', })``; +const LogoContainer = styled.div.attrs({ + className: 'h-10 text-neutral-0', +})``; + export default Footer; diff --git a/src/containers/footer/index.tsx b/src/containers/footer/index.tsx index d2bfa04d0..088823ce5 100644 --- a/src/containers/footer/index.tsx +++ b/src/containers/footer/index.tsx @@ -2,12 +2,11 @@ import React from 'react'; import styled from 'styled-components'; import {Link} from '@aragon/ods-old'; import {Icon, IconType} from '@aragon/ods'; - import {GridLayout} from 'components/layout'; import useScreen from 'hooks/useScreen'; -import IconLogoBlue from 'assets/images/iconLogoBlue.svg'; import {EXPLORE_NAV_LINKS, PRIVACY_NAV_LINKS} from 'utils/constants'; import {useWallet} from 'hooks/useWallet'; +import {Logotype} from 'components/logos/logotype'; const Footer: React.FC = () => { const {isDesktop} = useScreen(); @@ -33,7 +32,7 @@ const Footer: React.FC = () => { {isDesktop ? ( <> - + {ExploreNavLinks} @@ -45,7 +44,9 @@ const Footer: React.FC = () => { ) : ( <> - + + + {ExploreNavLinks} {PrivacyNavLinks} @@ -84,11 +85,7 @@ const ActionContainer = styled.div.attrs({ })``; const FlexDiv = styled.div.attrs({ - className: 'flex space-x-8 items-center', -})``; - -const LogoContainer = styled.img.attrs({ - className: 'h-10', + className: 'flex space-x-8 items-center h-10 text-primary-400', })``; const StyledNavList = styled.ul.attrs({ @@ -99,4 +96,8 @@ const Copyright = styled.span.attrs({ className: 'text-neutral-600 font-normal', })``; +const LogoContainer = styled.div.attrs({ + className: 'h-10 text-primary-400', +})``; + export default Footer; diff --git a/src/containers/navbar/exploreNav.tsx b/src/containers/navbar/exploreNav.tsx index 3eb0f67cf..7040738ce 100644 --- a/src/containers/navbar/exploreNav.tsx +++ b/src/containers/navbar/exploreNav.tsx @@ -3,22 +3,20 @@ import styled from 'styled-components'; import {ButtonWallet, useScreen} from '@aragon/ods-old'; import {Button, IconType} from '@aragon/ods'; import {useTranslation} from 'react-i18next'; - import {useWallet} from 'hooks/useWallet'; -import Logo from 'assets/images/logo.svg'; import {useGlobalModalContext} from 'context/globalModals'; import {Container, GridLayout} from 'components/layout'; import {FEEDBACK_FORM} from 'utils/constants'; import classNames from 'classnames'; +import {Logotype} from 'components/logos/logotype'; +import {Logo} from 'components/logos/logo'; const ExploreNav: React.FC = () => { const [isScrolled, setIsScrolled] = useState(false); const {t} = useTranslation(); const {address, ensName, ensAvatarUrl, isConnected, methods} = useWallet(); const {open} = useGlobalModalContext(); - const {isDesktop} = useScreen(); - - const path = t('logo.linkURL'); + const {isDesktop, isMobile} = useScreen(); const handleFeedbackButtonClick = () => { window.open(FEEDBACK_FORM, '_blank'); @@ -37,7 +35,7 @@ const ExploreNav: React.FC = () => { useEffect(() => { const handleScroll = () => { - const threshold = 250; + const threshold = 276; if (window.scrollY > threshold) { setIsScrolled(true); } else { @@ -62,12 +60,11 @@ const ExploreNav: React.FC = () => { return (