Skip to content

Testimonial Section Refresh #261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 30, 2023
Merged

Testimonial Section Refresh #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15a8f10
Testimonial Section Refresh
Aaryan1203 Oct 25, 2023
0e2bad6
Got rid of unnecessary conditionals
Aaryan1203 Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 6 additions & 9 deletions main-site/components/testimonials-section/testimonial-card/TestimonialCard.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,11 @@ const StyledTestimonialCardContainer = styled.div`

const StyledTestimonialCardBox = styled.div<StyledTestimonialCardAuthorYearImageProps>`
padding: 2.5em;
background-color: ${(props): string =>
props.isSponsor ? colors.DUNE_HIGHLIGHT : colors.TEXT_BOX};
margin: 2em;
border-radius: 2em;
width: 22em;
height: 28em;
border: 1px solid white;

@media ${max.tablet} {
width: 18em;
Expand All @@ -41,7 +40,7 @@ const StyledTestimonialCardImage = styled.img<StyledTestimonialCardAuthorYearIma
width: 100%;
scale: ${(props): string => (props.isSponsor ? '0.9' : '')};
height: ${(props): string => (props.isSponsor ? '32%' : '50%')};
margin-bottom: ${(props): string => (props.isSponsor ? '1em' : '1em')};
margin-bottom: ${'1em'};
@media ${max.tabletXs} {
border-radius: 0em;
}
Expand All @@ -52,20 +51,18 @@ const StyledTestimonialCardAuthor = styled(
)<StyledTestimonialCardAuthorYearImageProps>`
font-size: ${(props): string => (props.isSponsor ? '1.8em' : '1.2em')};
font-family: ${(props): string =>
props.isSponsor ? fonts.nunitoRegular : ''};
props.isSponsor ? fonts.nunitoRegular : fonts.nunitoSansRegular};
margin-bottom: ${(props): string => (props.isSponsor ? '0em' : '0.4em')};
color: ${(props): string => (props.isSponsor ? colors.TEXT_BOX : '')};
color: ${colors.WHITE};
`;

const StyledTestimonialCardYearCompany = styled(
P
)<StyledTestimonialCardAuthorYearImageProps>`
font-size: ${(props): string => (props.isSponsor ? '1.2em' : '1em')};
color: ${(props): string =>
props.isSponsor ? colors.BLACK : colors.TEXT_GREY};
color: ${colors.WHITE};
margin-bottom: 0.4em;
font-family: ${(props): string =>
props.isSponsor ? fonts.nunitoSansSemibold : ''};
font-family: ${fonts.nunitoRegular};
`;

const StyledTestimonialTextWrapper = styled.div<StyledTestimonialCardAuthorYearImageProps>`
Expand Down
56 changes: 27 additions & 29 deletions main-site/components/testimonials-section/testimonials/Testimonials.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import styled from '@emotion/styled';
import { max } from '../../../../shared-ui/lib/responsive';
import { colors } from '../../../../shared-ui/style/colors';
import { fonts } from '../../../../shared-ui/style/typography';
import { StyledCactusButtonsProps } from '../../../lib/types';

const StyledTestimonialsContainer = styled.div`
display: flex;
Expand All @@ -21,57 +18,58 @@ const StyledTestimonialsCenterContainer = styled.div`
const StyledTestimonialsLeftContainer = styled.div`
justify-content: left;
position: absolute;
left: -14em;
left: -10em;
@media (max-width: 1100px) {
left: -15em;
}
@media ${max.tabletLg} {
left: -20em;
}
@media ${max.tablet} {
left: -22em;
left: -16em;
}
@media (max-width: 660px) {
left: -20em;
}
`;

const StyledTestimonialsRightContainer = styled.div`
justify-content: right;
position: absolute;
right: -14em;
right: -10em;
@media (max-width: 1100px) {
right: -15em;
}
@media ${max.tabletLg} {
right: -20em;
}
@media ${max.tablet} {
right: -22em;
right: -16em;
}
@media (max-width: 660px) {
right: -20em;
}
`;

const StyledCactusButtons = styled.img<StyledCactusButtonsProps>`
width: ${(StyledCactusButtonsProps): string =>
StyledCactusButtonsProps.isToggled ? '4em' : '2.8em'};
height: ${(StyledCactusButtonsProps): string =>
StyledCactusButtonsProps.isToggled ? '4em' : '2.8em'};
padding: 1em;
align-item: center;
margin-bottom: ${(StyledCactusButtonsProps): string =>
StyledCactusButtonsProps.isToggled ? '-0.5em' : '0'};
`;

const StyledTestimonialNumbers = styled.div<StyledCactusButtonsProps>`
font-family: ${fonts.nunitoSansRegular};
font-size: 1.3em;
color: ${(StyledCactusButtonsProps): string =>
StyledCactusButtonsProps.isToggled
? colors.DIRECTORS_YELLOW
: colors.BLACK};
`;

const StyledButtonNumberContainer = styled.div`
display: inline-block;
`;

const StyledArrowsContainer = styled.div`
margin-top: -8em;
margin-bottom: 6em;
display: flex;
justify-content: center;
flex-direction: row;
gap: 25em;
`

export {
StyledTestimonialsCenterContainer,
StyledTestimonialsLeftContainer,
StyledTestimonialsRightContainer,
StyledTestimonialsContainer,
StyledCactusButtons,
StyledTestimonialNumbers,
StyledButtonNumberContainer
StyledButtonNumberContainer,
StyledArrowsContainer
};
90 changes: 42 additions & 48 deletions main-site/components/testimonials-section/testimonials/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,13 @@ import React, { useState } from 'react';
import useMatchMedia from 'react-use-match-media';
import { getLeftOrRight, getLeftOrRightTestimonial } from '../../../lib/utils';
import TestimonialCard from '../testimonial-card/TestimonialCard';
import { StyledTestimonialButtons } from '../testimonial-card/TestimonialCard.styles';
import {
StyledCactusButtons,
StyledTestimonialsCenterContainer,
StyledTestimonialsContainer,
StyledTestimonialsLeftContainer,
StyledTestimonialsRightContainer,
StyledTestimonialNumbers,
StyledButtonNumberContainer
StyledArrowsContainer
} from './Testimonials.styles';
import cactus1 from '../../../../shared-ui/images/cactus1.png';
import cactus2 from '../../../../shared-ui/images/cactus2.png';
import cactus3 from '../../../../shared-ui/images/cactus3.png';
import cactus4 from '../../../../shared-ui/images/cactus4.png';
import LeftOrRightTestimonialCard from '../testimonial-card/LeftOrRightTestimonialCard';
import { TestimonialData } from '../../../lib/types';
//sponsor testimonial data
Expand All @@ -29,22 +22,7 @@ const Testimonials: React.FC<TestimonialsSectionProps> = ({
}) => {
const isDesktop = useMatchMedia(min.tablet);
const [currentIndex, setCurrentIndex] = useState<number>(0);
const goToTestimonial = (index: number): void => {
setCurrentIndex(index);
};

function getCactus(index: number): string {
if (index === 0) {
return cactus1;
}
if (index === 1) {
return cactus2;
}
if (index === 2) {
return cactus3;
}
return cactus4;
}
const getLeftTestimonial: TestimonialData = getLeftOrRightTestimonial(
'left',
testimonialData,
Expand All @@ -58,15 +36,15 @@ const Testimonials: React.FC<TestimonialsSectionProps> = ({
return (
<>
<StyledTestimonialsContainer>
{isDesktop && (
{
<StyledTestimonialsLeftContainer>
<LeftOrRightTestimonialCard
isSponsor={isSponsor}
testimonial={getLeftTestimonial}
/>
</StyledTestimonialsLeftContainer>
)}
{!isDesktop && (
}
{isDesktop && (
<Arrow
left
onClick={(): void =>
Expand Down Expand Up @@ -97,7 +75,7 @@ const Testimonials: React.FC<TestimonialsSectionProps> = ({
/>
))}
</StyledTestimonialsCenterContainer>
{!isDesktop && (
{isDesktop && (
<Arrow
left={false}
onClick={(): void =>
Expand All @@ -113,34 +91,50 @@ const Testimonials: React.FC<TestimonialsSectionProps> = ({
}
/>
)}
{isDesktop && (
{
<StyledTestimonialsRightContainer>
<LeftOrRightTestimonialCard
isSponsor={isSponsor}
testimonial={getRightTestimonial}
/>
</StyledTestimonialsRightContainer>
)}
}
</StyledTestimonialsContainer>
{isDesktop && (
<StyledTestimonialButtons>
{testimonialData.map((_, testimonialIndex) => (
<StyledButtonNumberContainer
key={`testimonial-${testimonialIndex}`}
>
<StyledCactusButtons
src={getCactus(testimonialIndex)}
onClick={(): void => goToTestimonial(testimonialIndex)}
isToggled={testimonialIndex === currentIndex}
/>
<StyledTestimonialNumbers
isToggled={testimonialIndex === currentIndex}
>
{testimonialIndex + 1}
</StyledTestimonialNumbers>
</StyledButtonNumberContainer>
))}
</StyledTestimonialButtons>
{!isDesktop && (
<StyledArrowsContainer>
{
<Arrow
left
onClick={(): void =>
setCurrentIndex(
testimonialData[
getLeftOrRight<TestimonialData>(
'left',
testimonialData,
testimonialData[currentIndex]
).id
].id
)
}
/>
}
{
<Arrow
left={false}
onClick={(): void =>
setCurrentIndex(
testimonialData[
getLeftOrRight<TestimonialData>(
'right',
testimonialData,
testimonialData[currentIndex]
).id
].id
)
}
/>
}
</StyledArrowsContainer>
)}
</>
);
Expand Down