fix: alert styling

apps/app/package.json

@@ -46,7 +46,7 @@
 		"@opentelemetry/sdk-trace-base": "1.25.1",
 		"@opentelemetry/sdk-trace-node": "1.25.1",
 		"@opentelemetry/semantic-conventions": "1.26.0",
-		"@prisma/instrumentation": "5.19.0",
+		"@prisma/instrumentation": "5.18.0",
 		"@sentry/browser": "8.27.0",
 		"@sentry/nextjs": "8.27.0",
 		"@sentry/node": "8.27.0",
@@ -106,7 +106,7 @@
 	"devDependencies": {
 		"@hookform/devtools": "4.3.1",
 		"@playwright/test": "1.46.1",
-		"@prisma/nextjs-monorepo-workaround-plugin": "5.19.0",
+		"@prisma/nextjs-monorepo-workaround-plugin": "5.18.0",
 		"@relative-ci/agent": "4.2.10",
 		"@tanstack/react-query-devtools": "4.36.1",
 		"@tanstack/react-table-devtools": "8.20.5",

lambdas/cognito-user-migrate/package.json

@@ -22,7 +22,7 @@
 	},
 	"dependencies": {
 		"@aws-lambda-powertools/logger": "1.18.1",
-		"@prisma/client": "5.19.0",
+		"@prisma/client": "5.18.0",
 		"@weareinreach/db": "workspace:*"
 	},
 	"devDependencies": {
@@ -35,7 +35,7 @@
 		"aws-lambda": "1.0.7",
 		"eslint": "8.57.0",
 		"prettier": "3.3.3",
-		"prisma": "5.19.0",
+		"prisma": "5.18.0",
 		"typescript": "5.5.4"
 	}
 }

packages/db/package.json

@@ -46,8 +46,8 @@
 		"@opentelemetry/sdk-trace-base": "1.25.1",
 		"@opentelemetry/sdk-trace-node": "1.25.1",
 		"@opentelemetry/semantic-conventions": "1.26.0",
-		"@prisma/client": "5.19.0",
-		"@prisma/instrumentation": "5.19.0",
+		"@prisma/client": "5.18.0",
+		"@prisma/instrumentation": "5.18.0",
 		"@vercel/kv": "2.0.0",
 		"@vercel/postgres-kysely": "0.9.0",
 		"@weareinreach/crowdin": "workspace:*",
@@ -104,7 +104,7 @@
 		"prettier": "3.3.3",
 		"pretty-bytes": "6.1.1",
 		"pretty-ms": "9.1.0",
-		"prisma": "5.19.0",
+		"prisma": "5.18.0",
 		"prisma-dbml-generator": "0.12.0",
 		"prisma-generator-ts-enums": "1.1.0",
 		"prisma-query-inspector": "1.4.4",

packages/db/prisma/data-migrations/2024-08-22_election-alert.ts

@@ -0,0 +1,77 @@
+import { addSingleKeyFromNestedFreetextCreate } from '@weareinreach/crowdin/api'
+import { generateNestedFreeText } from '~db/lib/generateFreeText'
+import { type MigrationJob } from '~db/prisma/dataMigrationRunner'
+import { type JobDef } from '~db/prisma/jobPreRun'
+/** Define the job metadata here. */
+const jobDef: JobDef = {
+	jobId: '2024-08-22_election-alert',
+	title: 'election alert',
+	createdBy: 'Joe Karow',
+	/** Optional: Longer description for the job */
+	description: undefined,
+}
+/**
+ * Job export - this variable MUST be UNIQUE
+ */
+export const job20240822_election_alert = {
+	title: `[${jobDef.jobId}] ${jobDef.title}`,
+	task: async (ctx, task) => {
+		const { createLogger, formatMessage, jobPostRunner, prisma } = ctx
+		/** Create logging instance */
+		createLogger(task, jobDef.jobId)
+		const log = (...args: Parameters<typeof formatMessage>) => (task.output = formatMessage(...args))
+		/**
+		 * Start defining your data migration from here.
+		 *
+		 * To log output, use `task.output = 'Message to log'`
+		 *
+		 * This will be written to `stdout` and to a log file in `/prisma/migration-logs/`
+		 */
+
+		// Do stuff
+
+		const alertId = 'alrt_01J5XNBQ5GREHSHK5D2QTCXRWE'
+
+		const alertText = generateNestedFreeText({
+			type: 'locationAlert',
+			freeTextId: 'ftxt_01J5XNC3P8HS8SWHGBB546D4RA',
+			itemId: alertId,
+			text: "🇺🇸 US Citizens: <Link href='https://www.headcount.org/vote-with-pride/'>Make sure you're registered and ready to vote with pride on November 5, 2024!</Link>",
+		})
+
+		await prisma.$transaction(async (tx) => {
+			const crowdIn = await addSingleKeyFromNestedFreetextCreate(alertText)
+
+			const newAlert = await tx.locationAlert.create({
+				data: {
+					id: alertId,
+					level: 'WARN_PRIMARY',
+					text: alertText,
+					country: {
+						connect: { cca2: 'US' },
+						// 	[
+						// 	{ cca2: 'AS' },
+						// 	{ cca2: 'GU' },
+						// 	{ cca2: 'MH' },
+						// 	{ cca2: 'MP' },
+						// 	{ cca2: 'PR' },
+						// 	{ cca2: 'PW' },
+						// 	{ cca2: 'UM' },
+						// 	{ cca2: 'US' },
+						// 	{ cca2: 'VI' },
+						// ],
+					},
+				},
+			})
+			log(`Created alert ${newAlert.id}. Crowdin id: ${crowdIn.id}`)
+		})
+
+		/**
+		 * DO NOT REMOVE BELOW
+		 *
+		 * This writes a record to the DB to register that this migration has run successfully.
+		 */
+		await jobPostRunner(jobDef)
+	},
+	def: jobDef,
+} satisfies MigrationJob

packages/db/prisma/data-migrations/index.ts

@@ -9,4 +9,5 @@ export * from './2024-06-27_search-page-alert'
 export * from './2024-06-28_new-cost-props'
 export * from './2024-07-29_address-visibility-update'
 export * from './2024-07-29_new-service-tags'
+export * from './2024-08-22_election-alert'
 // codegen:end

packages/ui/components/core/LocationBasedAlertBanner/index.tsx

@@ -1,36 +1,33 @@
-import { Box, createStyles, rem, Text } from '@mantine/core'
+import { Box, createStyles, rem, Stack, Text } from '@mantine/core'
 import { Trans } from 'next-i18next'
 
 import { Link } from '~ui/components/core/Link'
 import { useCustomVariant } from '~ui/hooks/useCustomVariant'
 import { trpc as api } from '~ui/lib/trpcClient'
 
 const useStyles = createStyles((theme) => ({
-	alertContainer: {
-		display: 'flex',
-		flexDirection: 'column',
-		alignItems: 'center',
-		justifyContent: 'flex-start',
+	primaryContainer: {
+		position: 'sticky',
+		marginTop: rem(-15),
+		[theme.fn.smallerThan('xl')]: {
+			marginTop: rem(-40),
+		},
+		[theme.fn.smallerThan('sm')]: {
+			marginBottom: rem(-60),
+		},
 	},
+	secondaryContainer: { marginBottom: rem(10) },
 
 	primary: {
-		display: 'flex',
-		alignItems: 'center',
-		justifyContent: 'center',
+		// display: 'flex',
+		// alignItems: 'center',
+		// justifyContent: 'center',
 		textAlign: 'center',
 		width: '100vw',
 		borderRadius: 0,
 		padding: `${rem(12)} 0`,
 		...theme.other.utilityFonts.utility1,
-		position: 'sticky',
-		marginTop: rem(-15),
 
-		[theme.fn.smallerThan('xl')]: {
-			marginTop: rem(-25),
-		},
-		[theme.fn.smallerThan('sm')]: {
-			marginTop: rem(-25),
-		},
 		'&[data-alert-level="INFO_PRIMARY"]': {
 			backgroundColor: theme.other.colors.secondary.cornflower,
 			span: {
@@ -52,7 +49,7 @@ const useStyles = createStyles((theme) => ({
 		height: 'unset',
 		borderRadius: rem(10),
 		padding: `${rem(8)} ${rem(12)}`,
-		marginBottom: rem(10),
+
 		'&[data-alert-level="INFO_SECONDARY"]': {
 			height: 'unset',
 			backgroundColor: theme.fn.lighten(theme.other.colors.secondary.cornflower, 0.7),
@@ -78,8 +75,18 @@ export const LocationBasedAlertBanner = ({ lat, lon, type }: LocationBasedAlertB
 		lon,
 	})
 
-	return isLoading || !locationBasedAlertBannerProps ? null : (
-		<div className={cx(classes.alertContainer, classes[type])}>
+	if (isLoading || !locationBasedAlertBannerProps) {
+		return null
+	}
+
+	return (
+		<Stack
+			spacing={0}
+			className={cx({
+				[classes.primaryContainer]: type === 'primary',
+				[classes.secondaryContainer]: type === 'secondary',
+			})}
+		>
 			{locationBasedAlertBannerProps
 				.filter((alertProps) => alertProps.level.toLowerCase().endsWith(type))
 				.map((alertProps) => (
@@ -92,11 +99,12 @@ export const LocationBasedAlertBanner = ({ lat, lon, type }: LocationBasedAlertB
 								components={{
 									Link: <Link external variant={variants.Link.inheritStyle} target='_blank' />,
 								}}
+								// as={Text}
 							/>
 						</Text>
 					</Box>
 				))}
-		</div>
+		</Stack>
 	)
 }