Merge pull request #2270 from Giveth/hotfix-2.8.3

Hotfix 2.8.3

.vscode/settings.json

@@ -15,6 +15,7 @@
 		"Notif",
 		"SUSHISWAP",
 		"swiper",
+		"texty",
 		"xdai"
 	]
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "givethdapp",
-	"version": "2.8.2",
+	"version": "2.8.3",
 	"private": true,
 	"scripts": {
 		"build": "next build",

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 (
-		<Styled
-			color={color}
-			href={href}
-			rel='noopener noreferrer'
-			target='_blank'
-		>
-			{title || children}
-		</Styled>
+		<StyledLink href={href} rel='noopener noreferrer' target='_blank'>
+			{title ? (
+				<StyledGLink color={color}>{title}</StyledGLink>
+			) : (
+				children
+			)}
+		</StyledLink>
 	);
 };
 
-const Styled = styled.a`
+const StyledGLink = styled(GLink)`
 	color: ${props => props.color || 'inherit'};
 `;
+const StyledLink = styled.a`
+	display: inline-block;
+`;
 
 export default ExternalLink;

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;
+`;

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<IHeader> = () => {
 										width='50'
 										height='50'
 										alt='Giveth logo'
-										src='/images/logo/logo1.png'
+										src='/images/logo/logo.svg'
 									/>
 								</Logo>
 							</Link>
@@ -222,7 +223,9 @@ const Header: FC<IHeader> = () => {
 						onClick={() => dispatch(setShowSearchModal(true))}
 					>
 						<Flex alignItems='center' gap='16px'>
-							<GLink size='Big'>Search projects</GLink>
+							<GLinkNoWrap size='Big'>
+								Search projects
+							</GLinkNoWrap>
 							<IconSearch24 />
 						</Flex>
 					</SearchButton>

src/components/menu/GIVeconomyItems.tsx

@@ -64,5 +64,5 @@ export const GIVeconomyItems = () => {
 };
 
 const LabelStyle = styled(Caption)`
-	margin: 24px 8px 16px;
+	margin: 24px 16px 16px;
 `;

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;
 `;

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<IModal> = ({ setShowModal }) => {
 			isAnimating={isAnimating}
 			theme={theme}
 			fullScreen
+			hiddenClose
 		>
 			<SearchModalContainer>
+				<CloseModal theme={theme} onClick={closeModal}>
+					<ButtonText>Close</ButtonText>
+					<IconX16 />
+				</CloseModal>
 				<SearchBox>
 					<H6 weight={700}>Find awesome projects on Giveth</H6>
 					<SearchInput setTerm={setTerm} />
@@ -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;
 	}

src/components/sidebar/HomeSidebar.tsx

@@ -31,9 +31,9 @@ export const HomeSidebar = () => {
 				<GIVeconomyItems />
 			</SidebarParentItem>
 			<ItemSpacer />
-			<Link href={Routes.NFT}>
+			<Link href={Routes.Join}>
 				<Item theme={theme}>
-					<GLink size='Big'>NFT</GLink>
+					<GLink size='Big'>Community</GLink>
 				</Item>
 			</Link>
 			<SearchButton

src/components/sidebar/SidebarItem.tsx

@@ -46,11 +46,11 @@ export const SidebarParentItem: FC<ISidebarItemProps> = ({
 
 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

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<IProjectsCampaignBlockProps> = ({
 			</BlockHeader>
 			<BottomSection>
 				<Title>
-					<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>
 				</Title>
 				<SwiperWrapper>
 					<Swiper
@@ -172,12 +163,7 @@ const BottomSection = styled(Flex)`
 	}
 `;
 
-const ExploreText = styled(ButtonText)`
-	margin-top: 44px;
-	display: flex;
-	align-items: center;
-	gap: 10px;
-`;
+// const ExploreText = styled(Button)``;
 
 const Title = styled(FlexCenter)`
 	flex-direction: column;
@@ -186,6 +172,7 @@ const Title = styled(FlexCenter)`
 	margin: 0 32px;
 	user-select: none;
 	padding-right: 24px;
+	gap: 24px;
 	${mediaQueries.tablet} {
 		margin: 0;
 		width: 263px;

src/components/views/landings/EthDenver/EventDetails.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import {
+	Button,
 	H3,
 	H4,
 	IconArrowRight32,
@@ -10,7 +11,6 @@ import {
 import DiscordIcon from '/public/images/ETHDenver-discord.svg';
 import MapImage from '/public/images/ETHDenver-map.png';
 import Image from 'next/image';
-import { GhostButton } from '@/components/styled-components/Button';
 import { Col, Container, Row } from '@/components/Grid';
 import { mediaQueries } from '@/lib/constants/constants';
 import ExternalLink from '@/components/ExternalLink';
@@ -37,8 +37,9 @@ const EventDetails = () => {
 						</Lead>
 						<br />
 						<ExternalLink href='https://maps.app.goo.gl/hg2LicDFbsUBWdCYA?g_st=ic'>
-							<GhostButton
+							<Button
 								size='large'
+								buttonType='texty-primary'
 								label='Get Directions'
 								icon={<IconArrowRight32 />}
 							/>
@@ -60,7 +61,8 @@ const EventDetails = () => {
 						know who’s around to meet up.
 					</H4>
 					<ExternalLink href={links.DISCORD}>
-						<GhostButton
+						<Button
+							buttonType='texty-primary'
 							label='Join us on Discord'
 							size='large'
 							icon={<IconChevronRight32 />}

src/components/views/landings/EthDenver/GivethSwag.tsx

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 import {
+	Button,
 	H3,
 	IconExternalLink24,
 	Lead,
 	neutralColors,
 } 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.
 							</Desc>
 							<ExternalLink href={links.SWAG}>
-								<GhostButton
+								<Button
 									label='Go to Swag shop'
 									size='large'
+									buttonType='texty-primary'
 									icon={<IconExternalLink24 />}
 								/>
 							</ExternalLink>

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?
 			</H4>
 			<ExternalLink href='https://giveth.notion.site/Become-an-Impact-Quest-Partner-f3c29ec6685a4a75b46a0f6a0a3ea917'>
-				<GhostButton
+				<Button
 					label='Learn more here'
+					buttonType='texty-primary'
 					size='large'
 					icon={<IconChevronRight32 />}
 				/>