feature(website): styling campaign page (#771)

admin/src/collections/Campaigns.ts

@@ -104,5 +104,17 @@ export const campaignsCollection = buildAuditedCollection<Campaign>({
 			enumValues: campaignStatusEnumValues,
 			validation: { required: true },
 		},
+		metadata_description: {
+			dataType: 'string',
+			name: 'Metadata Description',
+		},
+		metadata_ogImage: {
+			dataType: 'string',
+			name: 'Metadata Open Graph Image Path',
+		},
+		metadata_twitterImage: {
+			dataType: 'string',
+			name: 'Metadata Twitter Image Path',
+		},
 	}),
 });

shared/locales/de/website-donate.json

@@ -1,12 +1,10 @@
 {
-	"metadata": {
-		"title": "Mein Beitrag | Social Income"
-	},
 	"amount-currency": "{{ amount, currency }}",
 	"title": "Was ist dein durchschnittliches monatliches Einkommen?",
 	"how-to-pay": "Wie möchtest du bezahlen?",
 	"amount": "Betrag",
 	"button-text": "Mache einen Unterschied",
+	"button-text-short": "Jetzt spenden",
 	"donation-impact": {
 		"monthly-contribution": "Dein monatlicher Beitrag:",
 		"direct-payout": "Dein Beitrag wird direkt auf das Mobiltelefon der Social Income Empfänger:innen ausgezahlt.",
@@ -92,7 +90,12 @@
 		},
 		"days-left_zero": "Letzter Tag",
 		"days-left_one": "Noch einen Tag bis zum Spendeschluss",
-		"days-left_other": "{{ count }} verbleibende Tage:",
-		"ended": "Die Kampagne ist geschlossen. Keine weiteren Spenden möglich."
+		"days-left_other": "{{ count }} verbleibende Tage",
+		"ended": "Die Kampagne ist beendet. Für reguläre Spenden verwende bitte die Hauptspendeseite.",
+		"card-title": "Mein Beitrag",
+		"about-si-title": "Über Social Income",
+		"about-si-text-1": "Social Income ist eine NGO mit Sitz in der Schweiz, die bedingungslose Geldüberweisungen per Mobiltelefon an Menschen in multidimensionaler Armut in Westafrika bereitstellt.",
+		"about-si-text-2": "Seit 2020 führt Social Income ein zeitlich unbegrenztes Programm für ein universelles Grundeinkommen in Sierra Leone durch.",
+		"about-si-link": "<a href='/faq' target=\"_blank\">Fragen und Antworten</a>"
 	}
 }

shared/locales/en/website-donate.json

@@ -1,12 +1,10 @@
 {
-	"metadata": {
-		"title": "My Contribution | Social Income"
-	},
 	"amount-currency": "{{ amount, currency }}",
 	"title": "What's your average monthly income?",
 	"how-to-pay": "How would you like to pay?",
 	"amount": "Amount",
 	"button-text": "Make a Difference",
+	"button-text-short": "Donate Now",
 	"donation-impact": {
 		"monthly-contribution": "Your monthly contribution",
 		"direct-payout": "The people in need receive your contribution directly on their mobile phones.",
@@ -92,7 +90,12 @@
 		},
 		"days-left_zero": "Last day left to contribute",
 		"days-left_one": "1 day left to contribute",
-		"days-left_other": "{{ count }} days left to contribute:",
-		"ended": "The campaign ended, no more donations possible."
+		"days-left_other": "{{ count }} days left to contribute",
+		"ended": "The campaign has ended.  For regular donations, please use the main donation page.",
+		"card-title": "My Contribution",
+		"about-si-title": "About Social Income",
+		"about-si-text-1": "Social Income is a nonprofit organization based in Switzerland that provides unconditional cash transfers via mobile phone to people living in multidimensional poverty in West Africa.",
+		"about-si-text-2": "Since 2020, Social Income has been running an open-ended universal basic income program in Sierra Leone.",
+		"about-si-link": "<a href='/faq' target=\"_blank\">Frequently Asked Questions</a>"
 	}
 }

shared/src/types/campaign.ts

@@ -18,6 +18,9 @@ export type Campaign = {
 	goal_currency?: Currency;
 	end_date: Timestamp;
 	status: CampaignStatus;
+	metadata_description?: string;
+	metadata_ogImage?: string;
+	metadata_twitterImage?: string;
 };
 
 export enum CampaignStatus {

ui/src/components/progress.tsx

@@ -10,13 +10,18 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
 	<ProgressPrimitive.Root
 		ref={ref}
-		className={cn('relative h-2 w-full overflow-hidden rounded-full bg-white', className)}
+		className={cn('bg-primary relative h-full w-full overflow-hidden rounded-full p-1', className)}
 		{...props}
 	>
-		<ProgressPrimitive.Indicator
-			className="bg-accent h-full w-full flex-1 transition-all"
-			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-		/>
+		<div className="relative h-full w-full">
+			<ProgressPrimitive.Indicator
+				className="bg-accent absolute bottom-0 left-0 top-0 h-full rounded-s-full transition-all"
+				style={{
+					width: `calc(${value || 0}%)`,
+					transform: 'translateX(0.1rem)',
+				}}
+			/>
+		</div>
 	</ProgressPrimitive.Root>
 ));
 Progress.displayName = ProgressPrimitive.Root.displayName;