refactor(website): styling cleanups (#658)

shared/locales/de/website-donate.json

@@ -14,9 +14,9 @@
 		"0": "{{ amount, currency }} legt den Grundstein für eine bedeutende Sache. Es ermöglicht uns, einer Person in Not ein Social Income zu bieten.",
 		"1": "{{ amount, currency }} deckt mehr als ein Drittel eines Social Incomes für eine bedürftige Person.",
 		"2": "{{ amount, currency }} finanziert mehr als die Hälfte eines Social Incomes für eine Person.",
-		"3": "Großartig! Dein monatlicher Beitrag von {{ amount, currency }} ermöglicht es mindestens einer bedürftigen Person ein vollständiges Social Income bereitzustellen.",
+		"3": "Dein monatlicher Beitrag von {{ amount, currency }} ermöglicht es mindestens einer bedürftigen Person ein vollständiges Social Income bereitzustellen.",
 		"4": "{{ amount, currency }} ermöglicht ein Social Income für mehr als zwei bedürftige Personen.",
-		"5": "Wunderbar! Dein Beitrag von {{ amount, currency }} finanziert ein Social Income für mehr als drei bedürftige Personen.",
+		"5": "Dein Beitrag von {{ amount, currency }} finanziert ein Social Income für mehr als drei bedürftige Personen.",
 		"6": "Dein Beitrag von {{ amount, currency }} sichert ein Social Income für mehr als vier bedürftige Personen.",
 		"7": "Dein Beitrag von {{ amount, currency }} sichert ein Social Income für mehr als fünf bedürftige Personen.",
 		"8": "Dein monatlicher Beitrag von {{ amount, currency }} ist außergewöhnlich, ebenso wie dein Einfluss."

shared/locales/de/website-login.json

@@ -2,6 +2,11 @@
 	"metadata": {
 		"title": "Login | Social Income"
 	},
+	"alert": {
+		"title": "Passwort zurücksetzen",
+		"text": "Falls du vor Dezember 2023 ein Konto bei uns erstellt hast, setze bitte dein Passwort über \"Passwort vergessen?\" zurück.",
+		"tooltip": "Mit der neuen Webseite haben unsere Benutzerdatenbank aktualisiert. Deine Daten sind sicher, aber du musst dein Passwort zurücksetzen, um dich wieder anmelden zu können."
+	},
 	"title": "Melde dich an",
 	"email": "E-Mail",
 	"invalid-email": "Ungültige E-Mail-Adresse",

shared/locales/de/website-me.json

@@ -34,6 +34,7 @@
 		"source": "Quelle",
 		"total": "Total",
 		"amount-currency": "{{ amount, currency }}",
+		"new-subscription": "Neues Abonnement",
 		"interval": "Interval",
 		"interval-1": "Monatlich",
 		"interval-3": "Quartalsweise",

shared/locales/en/website-donate.json

@@ -8,15 +8,15 @@
 	"amount": "Amount",
 	"button-text": "Make a Difference",
 	"donation-impact": {
-		"monthly-contribution": "Your monthly contribution:",
+		"monthly-contribution": "Your monthly contribution",
 		"direct-payout": "The people in need receive your contribution directly on their mobile phones.",
-		"your-impact": "Your impact:",
+		"your-impact": "Your impact",
 		"0": "{{ amount, currency }} lays the groundwork for a significant cause. It enables us to provide a Social Income to an individual facing hardship.",
 		"1": "{{ amount, currency }} pays for more than a third of a Social Income for one person in need.",
 		"2": "{{ amount, currency }} funds more than half of someone’s Social Income.",
-		"3": "Great! Your monthly contribution of {{ amount, currency }} will allow at least one person in need to receive a full Social Income.",
+		"3": "Your monthly contribution of {{ amount, currency }} will allow at least one person in need to receive a full Social Income.",
 		"4": "{{ amount, currency }} provides a Social Income for more than two people in need.",
-		"5": "Wonderful! Your contribution of {{ amount, currency }} funds a Social Income for more than three people in need.",
+		"5": "Your contribution of {{ amount, currency }} funds a Social Income for more than three people in need.",
 		"6": "Your contribution of {{ amount, currency }} sustains a Social Income for more than four people in need.",
 		"7": "Your contribution of {{ amount, currency }} sustains a Social Income for more than five people in need.",
 		"8": "Your monthly contribution of {{ amount, currency }} is extraordinary, as well as your impact."

shared/locales/en/website-login.json

@@ -2,6 +2,11 @@
 	"metadata": {
 		"title": "Login | Social Income"
 	},
+	"alert": {
+		"title": "Reset Password",
+		"text": "If you created an account with us before December 2023, please reset your password using \"Forgot password?\" below.",
+		"tooltip": "With the new website, our user database has been updated. Your data is secure, but you need to reset your password to log in again."
+	},
 	"title": "Sign in to your account",
 	"email": "Email",
 	"invalid-email": "Invalid email address",

shared/locales/en/website-me.json

@@ -34,6 +34,7 @@
 		"source": "Source",
 		"total": "Total",
 		"amount-currency": "{{ amount, currency }}",
+		"new-subscription": "New subscription",
 		"interval": "Interval",
 		"interval-1": "Monthly",
 		"interval-3": "Quarterly",

shared/src/utils/stats/PaymentStatsCalculator.ts

@@ -45,7 +45,8 @@ export class PaymentStatsCalculator {
 	static async build(firestoreAdmin: FirestoreAdmin, currency: string): Promise<PaymentStatsCalculator> {
 		const payments = await firestoreAdmin.collectionGroup<Payment>(PAYMENT_FIRESTORE_PATH).get();
 		const exchangeRate = await getLatestExchangeRate(firestoreAdmin, currency);
-		const contributions = payments.docs
+		// TODO: filter out payments from test users
+		const paymentDocs = payments.docs
 			.filter((payment) => payment.data().amount_chf != undefined)
 			.map((paymentDoc) => {
 				const payment = paymentDoc.data();
@@ -56,7 +57,7 @@ export class PaymentStatsCalculator {
 					month: toDateTime(payment.payment_at).toFormat('yyyy-MM'),
 				} as PaymentStatsEntry;
 			});
-		return new PaymentStatsCalculator(_(contributions));
+		return new PaymentStatsCalculator(_(paymentDocs));
 	}
 
 	totalPayments = () => {

ui/src/components/alert.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../lib/utils';
+
+const alertVariants = cva(
+	'relative w-full rounded-lg border px-4 py-2 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+	{
+		variants: {
+			variant: {
+				default: 'bg-popover text-popover-foreground',
+				primary: 'bg-primary-muted border-primary text-primary-foreground',
+				secondary: 'bg-secondary-muted border-secondary text-secondary-foreground',
+				accent: 'bg-accent-muted border-accent text-accent-foreground',
+				destructive: 'bg-destructive-muted border-destructive text-destructive-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+const Alert = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+	<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+	({ className, ...props }, ref) => (
+		<h5 ref={ref} className={cn('mb-1 font-medium tracking-tight ', className)} {...props} />
+	),
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, ...props }, ref) => <div ref={ref} className={cn('text-sm', className)} {...props} />,
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertDescription, AlertTitle };

ui/src/components/badge.tsx

@@ -8,9 +8,9 @@ const badgeVariants = cva(
 	{
 		variants: {
 			variant: {
-				default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-				secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+				default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary-muted',
+				secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary-muted',
+				destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive-muted',
 				outline: 'text-foreground',
 			},
 		},

ui/src/components/button.tsx

@@ -1,49 +1,84 @@
 import { IconType } from '@icons-pack/react-simple-icons/types';
 import { Slot } from '@radix-ui/react-slot';
+import { SpinnerIcon } from '@socialincome/website/src/components/logos/spinner-icon';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-all duration-200 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-				outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground',
-				link: 'text-primary underline-offset-4 hover:underline',
-			},
 			size: {
 				default: 'h-10 px-4 py-2',
 				sm: 'h-9 rounded-md px-3',
 				lg: 'h-16 rounded-md px-8 text-lg',
 				icon: 'h-10 w-10',
 			},
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary-muted font-medium',
+				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive-muted font-medium',
+				outline: 'border border-input bg-background hover:bg-muted font-medium',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-muted font-medium',
+				ghost: 'hover:bg-muted font-normal',
+				link: 'text-primary underline-offset-4 hover:underline p-0 font-normal',
+			},
 		},
 		defaultVariants: {
-			variant: 'default',
 			size: 'default',
+			variant: 'default',
 		},
 	},
 );
 
+const iconVariants = cva('', {
+	variants: {
+		size: {
+			default: 'h-4 w-4 mr-2',
+			sm: 'h-3 w-3 mr-2',
+			lg: 'h-6 w-6 mr-3',
+			icon: 'h-6 w-6',
+		},
+		defaultVariants: {
+			size: 'default',
+		},
+	},
+});
+
 export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
 	asChild?: boolean;
+	showLoadingSpinner?: boolean;
 	Icon?: IconType;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, Icon, children, ...props }, ref) => {
+	(
+		{
+			className,
+			variant = 'default',
+			size = 'default',
+			asChild = false,
+			Icon,
+			showLoadingSpinner = false,
+			children,
+			...props
+		},
+		ref,
+	) => {
 		const Comp = asChild ? Slot : 'button';
+		Icon = showLoadingSpinner ? (SpinnerIcon as IconType) : Icon;
 		return (
-			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
-				{Icon && <Icon className={cn('h-4 w-4', { 'mr-2': size !== 'icon', 'h-6 w-6': size === 'lg' })} />}
-				{children}
+			<Comp className={cn(buttonVariants({ size, variant, className }))} ref={ref} {...props}>
+				{Icon ? (
+					<div className={cn('flex w-full items-center justify-center')}>
+						<Icon className={cn(iconVariants({ size }))} />
+						{children}
+					</div>
+				) : (
+					<>{children}</>
+				)}
 			</Comp>
 		);
 	},

ui/src/components/dialog.tsx

@@ -17,7 +17,7 @@ const DialogOverlay = React.forwardRef<
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			'bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm',
 			className,
 		)}
 		{...props}
@@ -34,13 +34,13 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-8 shadow-lg duration-200 sm:rounded-lg md:w-full',
+				'bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-8 shadow-lg duration-200 sm:rounded-lg md:w-full',
 				className,
 			)}
 			{...props}
 		>
 			{children}
-			<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+			<DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none">
 				<X className="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>

ui/src/components/navigation-menu.tsx

@@ -36,7 +36,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-	'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-lg font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+	'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-lg font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
 );
 
 const NavigationMenuTrigger = React.forwardRef<

ui/src/components/select.tsx

@@ -76,7 +76,7 @@ const SelectItem = React.forwardRef<
 	<SelectPrimitive.Item
 		ref={ref}
 		className={cn(
-			'focus:bg-popover focus:text-popover-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			'bg-popover hover:bg-popover-muted text-popover-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 			className,
 		)}
 		{...props}

ui/src/components/typography/typography.tsx

@@ -7,30 +7,28 @@ import IntrinsicElements = React.JSX.IntrinsicElements;
 
 export type FontSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'>;
 const FONT_SIZE_MAP: { [key in FontSize]: string } = {
-	'5xl': 'text-5xl',
-	'4xl': 'text-4xl',
-	'3xl': 'text-3xl',
-	'2xl': 'text-2xl',
+	'5xl': 'text-4xl md:text-5xl',
+	'4xl': 'text-3xl md:text-4xl',
+	'3xl': 'text-2xl md:text-3xl',
+	'2xl': 'text-xl md:text-2xl',
 	xl: 'text-xl',
 	lg: 'text-lg',
 	md: 'text-base',
 	sm: 'text-sm',
 	xs: 'text-xs',
 };
 
-const FONT_WEIGHTS = ['normal', 'medium', 'semibold', 'bold'] as const;
+const FONT_WEIGHTS = ['normal', 'medium', 'bold'] as const;
 export type FontWeight = (typeof FONT_WEIGHTS)[number];
 const FONT_WEIGHT_MAP: { [key in FontWeight]: string } = {
 	normal: 'font-normal',
 	medium: 'font-medium',
-	semibold: 'font-semibold',
 	bold: 'font-bold',
 };
 
 const FONT_COLOR_MAP: { [key in FontColor]: string } = {
 	background: 'text-background',
 	foreground: 'text-foreground',
-	'si-yellow': 'text-si-yellow',
 	primary: 'text-primary',
 	'primary-foreground': 'text-primary-foreground',
 	secondary: 'text-secondary',