Merge pull request #393 from Giveth/develop

Release 0.2.2
Giveth · Mar 31, 2022 · 72e2727 · 72e2727 · vercel · Mar 31, 2022
2 parents a819b88 + 4b6ecde
commit 72e2727
Show file tree

Hide file tree

Showing 56 changed files with 2,470 additions and 754 deletions.
diff --git a/.github/ISSUE_TEMPLATE/design-issue-template.md b/.github/ISSUE_TEMPLATE/design-issue-template.md
@@ -0,0 +1,24 @@
+---
+name: Design Issue Template
+about: Please select this template for any design request. It will automatically add
+  Design label, feel free to add other labels as needed.
+title: ''
+labels: Design
+assignees: ''
+
+---
+
+**What problem is this design solving? Why is it necessary?**
+*A clear and concise description of what the problem is. Link to any relevant issues, PRs, and other resources.*
+
+
+**Is there any user data or feedback backing up this feature request?**
+*Share any user research conducted by yourself or others.*
+
+
+**Which metrics will define this feature's success?**
+*Provide current and/or expected metrics.*
+
+
+**Additional context**
+*Add any other context or screenshots related to your design here.*
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "givethdapp",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"private": true,
 	"scripts": {
 		"build": "next build",
@@ -49,7 +49,6 @@
 		"react-dropzone": "^11.5.3",
 		"react-google-maps": "^9.4.5",
 		"react-hot-toast": "^2.1.1",
-		"react-html-parser": "^2.0.2",
 		"react-lottie": "^1.2.3",
 		"react-modal": "^3.14.4",
 		"react-places-autocomplete": "^7.3.0",

diff --git a/pages/account.tsx b/pages/account.tsx
@@ -11,7 +11,7 @@ const NoUserContainer = styled.div`
 
 const UserRoute: FC = () => {
 	const {
-		state: { isSignedIn, user },
+		state: { user },
 	} = useUser();
 	return (
 		<>

diff --git a/pages/user/[address].tsx b/pages/user/[address].tsx
@@ -1,16 +1,28 @@
+import { GetServerSideProps } from 'next';
+import Head from 'next/head';
+import { FC } from 'react';
+import styled from 'styled-components';
+import { Container } from '@/components/Grid';
+import { H3 } from '@giveth/ui-design-system';
+
 import { client } from '@/apollo/apolloClient';
 import { GET_USER_BY_ADDRESS } from '@/apollo/gql/gqlUser';
 import { IUser } from '@/apollo/types/types';
 import UserPublicProfileView from '@/components/views/userPublicProfile/UserPublicProfile.view';
-import { GetServerSideProps } from 'next';
-import Head from 'next/head';
-import { FC } from 'react';
 
 interface IUserRouteProps {
-	user: IUser;
+	user?: IUser;
 }
 
 const UserRoute: FC<IUserRouteProps> = ({ user }) => {
+	if (!user) {
+		return (
+			<Container>
+				<NotFound>User not found</NotFound>
+			</Container>
+		);
+	}
+
 	return (
 		<>
 			<Head>
@@ -21,6 +33,10 @@ const UserRoute: FC<IUserRouteProps> = ({ user }) => {
 	);
 };
 
+const NotFound = styled(H3)`
+	margin: 200px 0;
+`;
+
 export const getServerSideProps: GetServerSideProps = async context => {
 	const { query } = context;
 	const queryAddress = query.address;

diff --git a/public/images/info-icon.svg b/public/images/info-icon.svg
diff --git a/public/images/wallet_icon.svg b/public/images/wallet_icon.svg
diff --git a/public/images/warning.svg b/public/images/warning.svg
diff --git a/public/images/x-icon-mustard.svg b/public/images/x-icon-mustard.svg
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -1,27 +1,29 @@
 import { useState } from 'react';
-import ReactHtmlParser from 'react-html-parser';
 import Image from 'next/image';
+import { P, brandColors, Lead } from '@giveth/ui-design-system';
+import styled from 'styled-components';
+
 import { Shadow } from './styled-components/Shadow';
 import ArrowDown from '/public/images/arrow_down.svg';
 import ArrowUp from '/public/images/arrow_up.svg';
-import { P, brandColors, Lead } from '@giveth/ui-design-system';
-import styled from 'styled-components';
 
-const Accordion = (props: { title: string; description: string }) => {
+const Accordion = (props: {
+	title: string;
+	description?: JSX.Element | string;
+	children?: JSX.Element | JSX.Element[];
+}) => {
 	const [isOpen, setOpen] = useState(false);
 
 	const handleClick = () => setOpen(!isOpen);
-	const { title, description } = props;
+	const { title, description, children } = props;
 
 	return (
 		<Wrapper>
 			<HeadSection onClick={handleClick}>
 				<Title>{title}</Title>
-				<Image src={isOpen ? ArrowDown : ArrowUp} alt='arrow down' />
+				<Image src={isOpen ? ArrowDown : ArrowUp} alt='arrow icon' />
 			</HeadSection>
-			{isOpen && (
-				<BodySection>{ReactHtmlParser(description)}</BodySection>
-			)}
+			{isOpen && <BodySection>{description || children}</BodySection>}
 		</Wrapper>
 	);
 };
@@ -30,12 +32,10 @@ const BodySection = styled(P)`
 	color: ${brandColors.giv[800]};
 	text-align: left;
 	margin-top: 16px;
+	padding: 0 20px 20px 20px;
 
 	a {
 		color: #007bff !important;
-		&:hover {
-			text-decoration: underline !important;
-		}
 	}
 `;
 
@@ -44,9 +44,15 @@ const Title = styled(Lead)`
 `;
 
 const HeadSection = styled.div`
+	padding: 20px;
 	cursor: pointer;
 	display: flex;
 	justify-content: space-between;
+	gap: 20px;
+
+	> :last-child {
+		flex-shrink: 0;
+	}
 `;
 
 const Wrapper = styled.div`
@@ -55,7 +61,6 @@ const Wrapper = styled.div`
 	border-radius: 12px;
 	box-shadow: ${Shadow.Neutral[500]};
 	background: white;
-	padding: 20px 32px 20px 20px;
 `;
 
 export default Accordion;
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
@@ -1,20 +1,16 @@
-import { semanticColors } from '@giveth/ui-design-system';
 import React, { ReactElement } from 'react';
-import styled from 'styled-components';
 
 const ExternalLink = (props: {
-	children: ReactElement | string;
+	children?: ReactElement[] | ReactElement;
 	href: string;
+	title?: string;
 }) => {
+	const { children, href, title } = props;
 	return (
-		<StyledLink href={props.href} rel='noopener noreferrer' target='_blank'>
-			{props.children}
-		</StyledLink>
+		<a href={href} rel='noopener noreferrer' target='_blank'>
+			{title || children}
+		</a>
 	);
 };
 
-const StyledLink = styled.a`
-	color: ${semanticColors.blueSky[500]} !important;
-`;
-
 export default ExternalLink;
diff --git a/src/components/GIVfrens.sc.tsx b/src/components/GIVfrens.sc.tsx
@@ -8,6 +8,7 @@ import {
 	QuoteText,
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
+import { Col, Row } from './Grid';
 
 export const Subtitle = styled(Lead)`
 	margin-bottom: 24px;
@@ -49,3 +50,18 @@ export const DaoCardButton = styled(ButtonLink)`
 	margin-top: 36px;
 	margin-bottom: 12px;
 `;
+
+export const DAOContainer = styled(Col)`
+	position: relative;
+	padding-top: 24px;
+`;
+
+export const DAOChangeNetwork = styled.div`
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	backdrop-filter: blur(2px);
+	z-index: 2;
+`;