Start on fixing up text. (#330)

Giving-Coupons · Oct 26, 2022 · 785081e · 785081e
2 parents a8b8d78 + 1728612
commit 785081e
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 25 deletions.
diff --git a/backend/app/views/campaigns/index.json.jbuilder b/backend/app/views/campaigns/index.json.jbuilder
@@ -5,6 +5,7 @@ json.array! @campaigns do |campaign|
   json.name campaign.name
   json.description campaign.description
   json.imageBase64 encoded_file_data_url(campaign.image)
+  json.primaryDonorName campaign.primary_donor.name
 
   json.charities do
     json.array! campaign.charities, partial: 'charities/list', as: :charity

diff --git a/frontend/components/campaigns/dashboard/CampaignDonationBreakdownCard.tsx b/frontend/components/campaigns/dashboard/CampaignDonationBreakdownCard.tsx
@@ -88,9 +88,11 @@ const CampaignDonationBreakdownCard = ({ totalDonationBreakdown, charitiesDonati
 
             <TableCell align="center">
               <Stack sx={donationTableHeaderSx} component="div" direction="row">
-                <Typography variant="caption">Primary</Typography>
+                <Typography variant="caption">
+                  From {charitiesDonations[0]?.primaryDonor?.name || 'the campaign organizer'}
+                </Typography>
 
-                <Typography variant="caption">Secondary</Typography>
+                <Typography variant="caption">From the public</Typography>
               </Stack>
             </TableCell>
           </TableRow>

diff --git a/frontend/components/campaigns/dashboard/CampaignPrimaryDonorCard.tsx b/frontend/components/campaigns/dashboard/CampaignPrimaryDonorCard.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const CampaignPrimaryDonorCard = ({ primaryDonor }: Props) => (
   <CampaignCard>
-    <Typography variant="h3">Primary Donor Info</Typography>
+    <Typography variant="h3">Initiated by</Typography>
 
     <Avatar variant="rounded" sx={avatarSx} src={primaryDonor.imageBase64} />
 

diff --git a/frontend/components/campaigns/list/CampaignListCard.tsx b/frontend/components/campaigns/list/CampaignListCard.tsx
@@ -29,9 +29,9 @@ const CampaignListCard = ({ campaign }: Props) => {
       <CompetingGraph
         overrideGraphSx={graphSx}
         topLabelTitle={`$${primaryDonorDonationData.amount}`}
-        topLabels={['by the primary donor']}
+        topLabels={[`from ${campaign.primaryDonorName}`]}
         bottomLabelTitle={`$${secondaryDonorDonationData.amount}`}
-        bottomLabels={['by the secondary donors']}
+        bottomLabels={['from the public']}
         barFractions={[primaryDonorDonationData.fraction, secondaryDonorDonationData.fraction]}
       />
     </Container>

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -21,6 +21,8 @@ import {
   howItWorksSectionSx,
   howItWorksStackSx,
   largeImpactTextSx,
+  logoIconTextSx,
+  logoTextSx,
   orgDescriptionSx,
   statsSectionGridItemStackSx,
   statsSectionGridItemSx,
@@ -29,6 +31,7 @@ import {
   statsSectionSx,
 } from '../styles/indexStyles';
 import { log } from '../utils/analytics';
+import { ReactNode } from 'react';
 
 const Home: NextPage = () => {
   return (
@@ -64,7 +67,7 @@ const HeadlineSection = () => (
     <Grid item xs={12} sm={12} md={6} lg={6} sx={headlineTextGridSx}>
       <Stack sx={headlineTextStackSx}>
         <Typography variant="hero" align="center" textAlign="left" fontWeight="900">
-          Together, we are more
+          Share the gift of giving
         </Typography>
 
         <Typography
@@ -75,7 +78,8 @@ const HeadlineSection = () => (
           textAlign="left"
           fontWeight="500"
         >
-          Giving Coupons is an initiative to raise money for charities through public gift matching
+          Giving Coupons is an initiative to raise awareness and money for charities by empowering more people to
+          donate.
         </Typography>
 
         <Button
@@ -114,11 +118,11 @@ const StatsSection = () => {
 
       <Box width="80%">
         <Grid sx={statsSectionGridSx} container spacing={2}>
-          <StatItem imgSrc="/icon-charity.png" stat="$4,500" subtitle="Additional funds raised for charity" />
+          <StatItem imgSrc="/icon-charity.png" stat="$1,600" subtitle="Additional funds raised for charity" />
 
-          <StatItem imgSrc="/icon-voucher.png" stat="632" subtitle="Coupons issued" />
+          <StatItem imgSrc="/icon-voucher.png" stat="160" subtitle="Coupons issued" />
 
-          <StatItem imgSrc="/icon-love.png" stat="20972" subtitle="Lives impacted" />
+          <StatItem imgSrc="/icon-love.png" stat="8" subtitle="Charities supported" />
         </Grid>
       </Box>
     </Stack>
@@ -135,7 +139,7 @@ const ResponsiveCharityImage = () => (
 );
 
 const HowItWorksSection = () => {
-  const GridItem = (props: { imgSrc: string; text: string; alignTo: 'start' | 'end' }) => (
+  const GridItem = (props: { imgSrc: string; content: ReactNode; alignTo: 'start' | 'end' }) => (
     <Grid item xs={12}>
       <Stack sx={howItWorksStackSx} alignItems={props.alignTo === 'start' ? 'flex-start' : 'flex-end'} spacing={2}>
         <Stack
@@ -145,14 +149,18 @@ const HowItWorksSection = () => {
         >
           <Box sx={howItWorksImageSx} component="img" src={props.imgSrc} />
 
-          <Typography sx={{ margin: '2rem' }} variant="h3">
-            {props.text}
-          </Typography>
+          {props.content}
         </Stack>
       </Stack>
     </Grid>
   );
 
+  const GridItemText = (props: { children: ReactNode }) => (
+    <Typography sx={{ margin: '2rem' }} variant="h3">
+      {props.children}
+    </Typography>
+  );
+
   return (
     <Grid sx={howItWorksSectionSx} container spacing={2}>
       <Grid item xs={12}>
@@ -161,15 +169,43 @@ const HowItWorksSection = () => {
         </Typography>
       </Grid>
 
-      <GridItem imgSrc="/public-relation.png" text="Donors commit a sum to one or more charities" alignTo="start" />
+      <GridItem
+        imgSrc="/public-relation.png"
+        content={<GridItemText>Donors start a campaign by committing a sum to one or more charities</GridItemText>}
+        alignTo="start"
+      />
 
-      <GridItem text="Giving Coupons generates coupons" imgSrc="/icon-voucher.png" alignTo="end" />
+      <GridItem
+        content={
+          <GridItemText>
+            <Box sx={logoIconTextSx} component="img" src="/logo-icon.png" />{' '}
+            <Typography sx={logoTextSx} component="span" color="primary" variant="h4">
+              GIVING COUPONS
+            </Typography>{' '}
+            generates and prints out coupons
+          </GridItemText>
+        }
+        imgSrc="/icon-voucher.png"
+        alignTo="end"
+      />
 
       <GridItem
         imgSrc="/icon-charity.png"
-        text="Coupon recipients choose which charities gets the donation"
+        content={
+          <GridItemText>
+            Coupon recipients choose which charities gets the donation, and can add their own contributions
+          </GridItemText>
+        }
         alignTo="start"
       />
+
+      <GridItem
+        imgSrc="/icon-love.png"
+        content={
+          <GridItemText>The selected charities directly receive the funds from the donor or via Giving.SG</GridItemText>
+        }
+        alignTo="end"
+      />
     </Grid>
   );
 };

diff --git a/frontend/styles/indexStyles.ts b/frontend/styles/indexStyles.ts
@@ -124,7 +124,7 @@ export const charityImageLargeResponsiveSx: SxProps = {
 };
 
 export const howItWorksSectionSx: SxProps = {
-  height: { xs: '95vh', sm: '90vh' },
+  minHeight: { xs: '100vh', sm: '100vh' },
   width: '90%',
   maxWidth: '800px',
   margin: 'auto',
@@ -158,12 +158,6 @@ export const largeImpactTextSx: SxProps = {
   fontWeight: 'bold',
 };
 
-export const buttonSecondary: SxProps = {
-  minWidth: '50%',
-  margin: '10px 0px',
-  color: 'blue',
-};
-
 export const buttonCard: SxProps = {
   backgroundImage: 'linear-gradient(to right, #FFF428 , #FF3200)',
   maxWidth: 345,
@@ -173,7 +167,7 @@ export const callToActionStackSx: SxProps = {
   height: '30vh',
   justifyContent: 'center',
   alignItems: 'center',
-  paddingTop: '2rem',
+  paddingTop: '56px',
 };
 
 export const callToActionSectionGridItemSx: SxProps = {
@@ -189,3 +183,15 @@ export const givingCouponsNoticeSx: SxProps = {
   alignItems: 'flex-start',
   padding: '10px',
 };
+
+export const logoIconTextSx: SxProps = {
+  maxHeight: '1.6em',
+  minHeight: '1.6em',
+  height: '1.6em',
+  verticalAlign: 'middle',
+  padding: '0 2px',
+};
+
+export const logoTextSx: SxProps = {
+  verticalAlign: 'middle',
+};
diff --git a/frontend/types/campaigns.ts b/frontend/types/campaigns.ts
@@ -18,6 +18,7 @@ export type CampaignListData = {
   name: string;
   description: string;
   imageBase64: string;
+  primaryDonorName: string;
   charities: CharityListData[];
   donations: DonationBreakdownData;
   couponsRedeemedCount: number;