Merge pull request #4771 from Giveth/fix-ui-issues#4726

Fix UI issues#4726
Giveth · Oct 1, 2024 · a3fc152 · a3fc152
2 parents 00a3627 + bfa59fa
commit a3fc152
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 30 deletions.
diff --git a/src/components/badges/ShareLikeBadge.tsx b/src/components/badges/ShareLikeBadge.tsx
@@ -54,7 +54,7 @@ const Wrapper = styled(FlexCenter)`
 const BadgeText = styled(ButtonText)<{ $fromDonate?: boolean | null }>`
 	color: ${props =>
 		props.$fromDonate ? brandColors.pinky[500] : neutralColors.gray[700]};
-	text-transform: ${props => (props.$fromDonate ? 'none' : 'uppercase')};
+	text-transform: ${props => (props.$fromDonate ? 'none' : '')};
 	margin: 0 auto;
 `;
 

diff --git a/src/components/views/project/ProjectBadges.tsx b/src/components/views/project/ProjectBadges.tsx
@@ -92,11 +92,9 @@ const ProjectBadges = () => {
 };
 
 const CustomFlex = styled(Flex)`
-	overflow-x: scroll;
 	overflow-y: hidden;
 	white-space: nowrap;
-	margin-bottom: -3px;
-	padding-top: 8px;
+	margin-bottom: 24px;
 `;
 
 export const TooltipContent = styled.div`

diff --git a/src/components/views/project/ProjectHeader.tsx b/src/components/views/project/ProjectHeader.tsx
@@ -56,7 +56,7 @@ const ProjectImage = styled.img`
 	border-radius: 16px;
 	width: 100%;
 	object-fit: cover; // Ensures the image covers the entire container
-	height: 380px;
+	height: 430px;
 	position: relative;
 `;
 
@@ -65,7 +65,7 @@ const GradientOverlay = styled.div`
 	top: 0;
 	left: 0;
 	width: 100%;
-	height: 380px;
+	height: 430px;
 	background: linear-gradient(
 		to top,
 		rgba(1, 1, 27, 0.6),

diff --git a/src/components/views/project/ProjectIndex.tsx b/src/components/views/project/ProjectIndex.tsx
@@ -180,7 +180,7 @@ const ProjectIndex: FC<IProjectBySlug> = () => {
 					orgLabel={projectData?.organization?.label}
 				/>
 				<Row>
-					<Col xs={12} md={8} lg={8.5}>
+					<Col xs={12} md={8} lg={8.5} style={{ margin: '0' }}>
 						<ProjectHeader />
 						{isMobile && isAdmin && (
 							<MobileActionsContainer
@@ -202,7 +202,7 @@ const ProjectIndex: FC<IProjectBySlug> = () => {
 						)}
 						<ProjectGIVbackToast />
 					</Col>
-					<Col xs={12} md={4} lg={3.5}>
+					<Col xs={12} md={4} lg={3.5} style={{ margin: '0' }}>
 						<ProjectActionCard />
 					</Col>
 					{isDraft && (

diff --git a/src/components/views/project/projectActionCard/ProjectActionCard.tsx b/src/components/views/project/projectActionCard/ProjectActionCard.tsx
@@ -2,11 +2,8 @@ import {
 	mediaQueries,
 	neutralColors,
 	Flex,
-	Subline,
 	brandColors,
-	IconChevronRight16,
 } from '@giveth/ui-design-system';
-import Link from 'next/link';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { ProjectStats } from './ProjectStats';
@@ -18,7 +15,6 @@ import MobileDonateFooter from './MobileDonateFooter';
 import QFSection from './QFSection';
 import { DonateSection } from './DonationSection';
 import { ProjectPublicActions } from './ProjectPublicActions';
-import Routes from '@/lib/constants/Routes';
 
 export const ProjectActionCard = () => {
 	const isMobile = !useMediaQuery(device.tablet);
@@ -34,7 +30,7 @@ export const ProjectActionCard = () => {
 	return (
 		<ProjectActionCardWrapper
 			$flexDirection='column'
-			$justifyContent='space-between'
+			$justifyContent='space-evenly'
 		>
 			<ProjectActionInnerCard />
 		</ProjectActionCardWrapper>
@@ -57,20 +53,6 @@ const ProjectActionInnerCard = () => {
 			)}
 			{!isMobile && !isAdmin && <ProjectPublicActions />}
 			{isAdmin && <ProjectStats />}
-			<Link href={Routes.Onboarding + '/donors'}>
-				<LearnLink
-					$alignItems='center'
-					$justifyContent='center'
-					gap='2px'
-				>
-					<Subline>
-						{formatMessage({
-							id: 'label.learn_more_about_donating_on_giveth',
-						})}
-					</Subline>
-					<IconChevronRight16 />
-				</LearnLink>
-			</Link>
 		</>
 	);
 };

diff --git a/src/components/views/project/projectActionCard/ProjectPublicActions.tsx b/src/components/views/project/projectActionCard/ProjectPublicActions.tsx
@@ -149,7 +149,7 @@ export const ProjectPublicActions = () => {
 					{reaction?.userId && reaction?.userId === user?.id ? (
 						<IconBookmarkFilled16 color={brandColors.pinky[500]} />
 					) : (
-						<IconBookmark16 />
+						<IconBookmark16 color='#525f7f' />
 					)}
 				</StyledBadgeButton>
 			</BadgeWrapper>

diff --git a/src/components/views/project/projectActionCard/QFSection.tsx b/src/components/views/project/projectActionCard/QFSection.tsx
@@ -138,7 +138,7 @@ const QFSection: FC<IQFSectionProps> = ({ projectData }) => {
 	);
 
 	return (
-		<DonationSectionWrapper gap={isOnDonatePage ? '8px' : '24px'}>
+		<DonationSectionWrapper gap={'8px'}>
 			{isOnDonatePage && (
 				<>
 					<Link href={projectLink}>
@@ -302,7 +302,6 @@ const Amount = styled(H3)`
 
 const Description = styled(Caption)`
 	color: ${neutralColors.gray[700]};
-	margin-bottom: 24px;
 	white-space: nowrap;
 	& > div {
 		color: ${neutralColors.gray[900]};