diff --git a/.vscode/settings.json b/.vscode/settings.json index 28639b8427..a1e46ebe13 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -15,6 +15,7 @@ "Notif", "SUSHISWAP", "swiper", + "texty", "xdai" ] } diff --git a/package.json b/package.json index 5fcbed6d8c..a7671f8e20 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "givethdapp", - "version": "2.8.2", + "version": "2.8.3", "private": true, "scripts": { "build": "next build", diff --git a/public/images/logo/logo.svg b/public/images/logo/logo.svg new file mode 100644 index 0000000000..1af9d487b9 --- /dev/null +++ b/public/images/logo/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/logo/logo1.png b/public/images/logo/logo1.png deleted file mode 100644 index 4d76b25b57..0000000000 Binary files a/public/images/logo/logo1.png and /dev/null differ diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx index 43e2509abb..c2b573345a 100644 --- a/src/components/ExternalLink.tsx +++ b/src/components/ExternalLink.tsx @@ -1,27 +1,30 @@ +import { GLink } from '@giveth/ui-design-system'; import React, { ReactElement } from 'react'; import styled from 'styled-components'; const ExternalLink = (props: { - children?: ReactElement[] | ReactElement; href: string; + children?: ReactElement[] | ReactElement; title?: string | ReactElement; color?: string; }) => { const { children, href, title, color } = props; return ( - - {title || children} - + + {title ? ( + {title} + ) : ( + children + )} + ); }; -const Styled = styled.a` +const StyledGLink = styled(GLink)` color: ${props => props.color || 'inherit'}; `; +const StyledLink = styled.a` + display: inline-block; +`; export default ExternalLink; diff --git a/src/components/Header/Header.sc.tsx b/src/components/Header/Header.sc.tsx index 2f01a4492f..0f06346d23 100644 --- a/src/components/Header/Header.sc.tsx +++ b/src/components/Header/Header.sc.tsx @@ -215,6 +215,14 @@ export const SearchButton = styled(HeaderLink)` props.theme === ETheme.Dark ? brandColors.giv[300] : neutralColors.gray[200]}; + & > div > span { + display: none; + } + ${mediaQueries.desktop} { + & > div > span { + display: inline-block; + } + } `; export const ConnectButton = styled(Button)` @@ -301,3 +309,8 @@ export const UserName = styled(GLink)` overflow: hidden; text-overflow: ellipsis; `; + +export const GLinkNoWrap = styled(GLink)` + text-overflow: ellipsis; + white-space: nowrap; +`; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index b0ba19479d..c25f8aa0d8 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -23,6 +23,7 @@ import { HeaderLink, HomeButton, SearchButton, + GLinkNoWrap, } from './Header.sc'; import { isUserRegistered } from '@/lib/helpers'; import Routes from '@/lib/constants/Routes'; @@ -187,7 +188,7 @@ const Header: FC = () => { width='50' height='50' alt='Giveth logo' - src='/images/logo/logo1.png' + src='/images/logo/logo.svg' /> @@ -222,7 +223,9 @@ const Header: FC = () => { onClick={() => dispatch(setShowSearchModal(true))} > - Search projects + + Search projects + diff --git a/src/components/menu/GIVeconomyItems.tsx b/src/components/menu/GIVeconomyItems.tsx index 0650285464..2f9fa94d8d 100644 --- a/src/components/menu/GIVeconomyItems.tsx +++ b/src/components/menu/GIVeconomyItems.tsx @@ -64,5 +64,5 @@ export const GIVeconomyItems = () => { }; const LabelStyle = styled(Caption)` - margin: 24px 8px 16px; + margin: 24px 16px 16px; `; diff --git a/src/components/menu/ProjectsItems.tsx b/src/components/menu/ProjectsItems.tsx index 4cc70ba198..8e46409468 100644 --- a/src/components/menu/ProjectsItems.tsx +++ b/src/components/menu/ProjectsItems.tsx @@ -92,5 +92,5 @@ const CategoriesGrid = styled.div<{ inSidebar?: boolean }>` `; const Label = styled(Caption)` - padding-left: 8px; + padding-left: 16px; `; diff --git a/src/components/modals/SearchModal.tsx b/src/components/modals/SearchModal.tsx index 8c0e8af44e..6d3a4ac376 100644 --- a/src/components/modals/SearchModal.tsx +++ b/src/components/modals/SearchModal.tsx @@ -1,13 +1,20 @@ import { FC, useState, useEffect } from 'react'; import styled from 'styled-components'; -import { brandColors, H6, Lead, neutralColors } from '@giveth/ui-design-system'; +import { + brandColors, + ButtonText, + H6, + IconX16, + Lead, + neutralColors, +} from '@giveth/ui-design-system'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { Modal } from './Modal'; import { IModal } from '@/types/common'; import { useModalAnimation } from '@/hooks/useModalAnimation'; import { Col, Container, Row } from '../Grid'; -import { Flex } from '../styled-components/Flex'; +import { Flex, FlexCenter } from '../styled-components/Flex'; import { mediaQueries } from '@/lib/constants/constants'; import { ETheme } from '@/features/general/general.slice'; import { useAppSelector } from '@/features/hooks'; @@ -17,6 +24,7 @@ import Routes from '@/lib/constants/Routes'; import { client } from '@/apollo/apolloClient'; import { FETCH_CAMPAIGN_BY_SLUG } from '@/apollo/gql/gqlCampaign'; import { ICampaign, IProject } from '@/apollo/types/types'; +import { Shadow } from '../styled-components/Shadow'; const quickLinks = [ { @@ -123,8 +131,13 @@ export const SearchModal: FC = ({ setShowModal }) => { isAnimating={isAnimating} theme={theme} fullScreen + hiddenClose > + + Close + +
Find awesome projects on Giveth
@@ -201,8 +214,23 @@ const StyledModal = styled(Modal)` : neutralColors.gray[200]}; `; +const CloseModal = styled(FlexCenter)` + position: absolute; + top: 0; + left: 32px; + gap: 8px; + padding: 12px 16px; + background-color: ${props => + props.theme === ETheme.Dark + ? brandColors.giv[700] + : neutralColors.gray[100]}; + border-radius: 50px; + box-shadow: ${Shadow.Neutral[400]}; + cursor: pointer; +`; + const SearchModalContainer = styled(Container)` - padding-top: 36px; + padding-top: 96px; ${mediaQueries.tablet} { padding-top: 132px; } diff --git a/src/components/sidebar/HomeSidebar.tsx b/src/components/sidebar/HomeSidebar.tsx index d60db5a4d3..4d4bb9201a 100644 --- a/src/components/sidebar/HomeSidebar.tsx +++ b/src/components/sidebar/HomeSidebar.tsx @@ -31,9 +31,9 @@ export const HomeSidebar = () => { - + - NFT + Community = ({ const ItemWrapper = styled(Flex)` cursor: pointer; - padding: 12px 8px; + padding: 12px 16px; `; const ChildrenWrapper = styled.div` - padding: 12px 8px; + padding: 12px 0; border-bottom: 1px solid ${props => props.theme === ETheme.Dark diff --git a/src/components/views/homepage/ProjectsCampaignBlock.tsx b/src/components/views/homepage/ProjectsCampaignBlock.tsx index 25dc5d2b0c..515387ef64 100644 --- a/src/components/views/homepage/ProjectsCampaignBlock.tsx +++ b/src/components/views/homepage/ProjectsCampaignBlock.tsx @@ -1,6 +1,5 @@ import { - brandColors, - ButtonText, + Button, H1, IconChevronRight32, IconPointerLeft, @@ -10,9 +9,9 @@ import { import styled from 'styled-components'; import { Navigation, Pagination } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; -import { FC, Fragment, useEffect, useRef, useState } from 'react'; +import { FC, useEffect, useRef, useState } from 'react'; import { Swiper as SwiperClass } from 'swiper/types'; -import InternalLink from '@/components/InternalLink'; +import Link from 'next/link'; import { ICampaign } from '@/apollo/types/types'; import { Flex, FlexCenter } from '@/components/styled-components/Flex'; import ProjectCard from '@/components/project-card/ProjectCard'; @@ -22,12 +21,12 @@ import { client } from '@/apollo/apolloClient'; import { FETCH_CAMPAIGN_BY_SLUG } from '@/apollo/gql/gqlCampaign'; import { BlockHeader, BlockTitle } from './common'; import { Container } from '@/components/Grid'; -import { campaignLinkGenerator } from '@/helpers/url'; import { NavigationWrapper, PaginationWrapper, SwiperPaginationWrapper, } from '@/components/styled-components/SwiperPagination'; +import { campaignLinkGenerator } from '@/helpers/url'; interface IProjectsCampaignBlockProps { campaign: ICampaign; @@ -82,22 +81,14 @@ const ProjectsCampaignBlock: FC = ({ - <H1 weight={700} style={{ overflowWrap: 'anywhere' }}> - {campaign.title.split(' ').map((t, index) => ( - <Fragment key={index}> - <span>{t}</span> - <br /> - </Fragment> - ))} - </H1> - <InternalLink - href={campaignLinkGenerator(campaign) || ''} - color={brandColors.giv[500]} - > - <ExploreText> - EXPLORE <IconChevronRight32 /> - </ExploreText> - </InternalLink> + <H1 weight={700}>{campaign.title}</H1> + <Link href={campaignLinkGenerator(campaign) || ''}> + <Button + buttonType='texty-primary' + label='EXPLORE' + icon={<IconChevronRight32 />} + /> + </Link> {
- } /> @@ -60,7 +61,8 @@ const EventDetails = () => { know who’s around to meet up. - } diff --git a/src/components/views/landings/EthDenver/GivethSwag.tsx b/src/components/views/landings/EthDenver/GivethSwag.tsx index 2decc79de1..f7291ae8eb 100644 --- a/src/components/views/landings/EthDenver/GivethSwag.tsx +++ b/src/components/views/landings/EthDenver/GivethSwag.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { + Button, H3, IconExternalLink24, Lead, @@ -7,7 +8,6 @@ import { } from '@giveth/ui-design-system'; import SwagImg from '/public/images/swag.png'; import Image from 'next/image'; -import { GhostButton } from '@/components/styled-components/Button'; import { Col, Container, Row } from '@/components/Grid'; import ExternalLink from '@/components/ExternalLink'; import links from '@/lib/constants/links'; @@ -28,9 +28,10 @@ const GivethSwag = () => { from our new and improved swag shop. - } /> diff --git a/src/components/views/landings/EthDenver/SupportUs.tsx b/src/components/views/landings/EthDenver/SupportUs.tsx index 196988603b..b0d210d66e 100644 --- a/src/components/views/landings/EthDenver/SupportUs.tsx +++ b/src/components/views/landings/EthDenver/SupportUs.tsx @@ -1,10 +1,10 @@ import styled from 'styled-components'; import { + Button, H4, IconChevronRight32, neutralColors, } from '@giveth/ui-design-system'; -import { GhostButton } from '@/components/styled-components/Button'; import { Container } from '@/components/Grid'; import ExternalLink from '@/components/ExternalLink'; @@ -17,8 +17,9 @@ const SupportUs = () => { Quest prize pool? - } /> diff --git a/src/components/views/landings/EthDenver/givethTalks/CalendarItem.tsx b/src/components/views/landings/EthDenver/givethTalks/CalendarItem.tsx index 2d5ae3af8a..ab6eec3ae8 100644 --- a/src/components/views/landings/EthDenver/givethTalks/CalendarItem.tsx +++ b/src/components/views/landings/EthDenver/givethTalks/CalendarItem.tsx @@ -43,14 +43,14 @@ const CalendarItem: FC = props => { icon={} /> - + } /> - + ); diff --git a/src/components/views/landings/EthDenver/impactQuest/ImpactQuests.tsx b/src/components/views/landings/EthDenver/impactQuest/ImpactQuests.tsx index 5b553cd22c..b47c47ff3e 100644 --- a/src/components/views/landings/EthDenver/impactQuest/ImpactQuests.tsx +++ b/src/components/views/landings/EthDenver/impactQuest/ImpactQuests.tsx @@ -1,12 +1,12 @@ import styled from 'styled-components'; import { + Button, H3, IconExternalLink24, Lead, mediaQueries, } from '@giveth/ui-design-system'; import Image from 'next/image'; -import { GhostButton } from '@/components/styled-components/Button'; import PizzaImage from '/public/images/ETHDenver-pizza.png'; import { Col, Row } from '@/components/Grid'; import ExternalLink from '@/components/ExternalLink'; @@ -29,7 +29,8 @@ const ImpactQuests = () => { conference. - } diff --git a/src/components/views/landings/EthDenver/impactQuest/ImpactTrackMentorship.tsx b/src/components/views/landings/EthDenver/impactQuest/ImpactTrackMentorship.tsx index 5b191017c8..0c45bcfadb 100644 --- a/src/components/views/landings/EthDenver/impactQuest/ImpactTrackMentorship.tsx +++ b/src/components/views/landings/EthDenver/impactQuest/ImpactTrackMentorship.tsx @@ -1,15 +1,15 @@ import styled from 'styled-components'; import { + Button, H3, IconChevronRight32, neutralColors, } from '@giveth/ui-design-system'; import ImpactTrackImg from '/public/images/ETHDenver-Impact-mentorship.png'; import Image from 'next/image'; -import { GhostButton } from '@/components/styled-components/Button'; import { Col, Row } from '@/components/Grid'; -import ExternalLink from '@/components/ExternalLink'; import links from '@/lib/constants/links'; +import ExternalLink from '@/components/ExternalLink'; const ImpactTrackMentorship = () => { return ( @@ -30,11 +30,12 @@ const ImpactTrackMentorship = () => {
Do you need help with your project for the Impact Track? Reach out to us on the ETHDenver Discord - server under the "Building" section! + server under the "Building" section! - } />