fix: transparent modal & typo on footer userId text

src/lib/i18n/messages.json

@@ -28,6 +28,7 @@
 		"public": "Public",
 		"private": "Private",
 		"inviteOnly": "Invite Only",
+		"invite-only": "Invite Only",
 		"limited": "Limited",
 		"unlimited": "Unlimited",
 		"capacity": "Capacity",
@@ -267,7 +268,7 @@
 	"layout": {
 		"defaultTitle": "Cactoide -",
 		"defaultDescription": "Create and manage event RSVPs",
-		"userIdCookieText": "Your UserID storated as a cookie:",
+		"userIdCookieText": "Your UserID stored as a cookie:",
 		"firstTimeVisiting": "First time visiting. Generating new UserID...",
 		"copyright": "© 2025 Cactoide"
 	}

src/routes/+error.svelte

@@ -14,7 +14,7 @@
 	<!-- Error Content -->
 	<div class="container mx-auto flex-1 px-4 py-8">
 		<div class="mx-auto max-w-md text-center">
-			<div class="rounded-sm border border-red-500/30 bg-red-900/20 p-8">
+			<div class="rounded-sm border border-red-500/30 bg-red-900 p-8">
 				<div class="mb-4 text-6xl text-red-400">🚨</div>
 				<h2 class="mb-4 text-2xl font-bold text-red-400">{t('errors.errorTitle')}</h2>
 

src/routes/event/+page.svelte

@@ -156,7 +156,8 @@
 												? 'border-green-300 text-green-400'
 												: 'border-orange-300 text-orange-400'}"
 										>
-											{event.visibility === 'public' ? t('common.public') : t('common.private')}
+											<!-- TODO(polaroi8d): replace with something better solution; message.json using this, beacuse of common.invite-only works here -->
+											{t(`common.${event.visibility}`)}
 										</span>
 									</div>
 									<div class="flex items-center space-x-2"></div>

src/routes/event/[id]/+page.svelte

@@ -485,19 +485,19 @@
 {#if success}
 	{#if typeToShow === 'add'}
 		<div
-			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-green-500/30 bg-green-900/20 p-4 text-green-400"
+			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-green-500/30 bg-green-900 p-4 text-green-400"
 		>
 			{success}
 		</div>
 	{:else if typeToShow === 'remove'}
 		<div
-			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900/20 p-4 text-yellow-400"
+			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900 p-4 text-yellow-400"
 		>
 			{t('event.removedRsvpSuccessfully')}
 		</div>
 	{:else if typeToShow === 'copy'}
 		<div
-			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900/20 p-4 text-yellow-400"
+			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900 p-4 text-yellow-400"
 		>
 			{t('event.eventLinkCopied')}
 		</div>
@@ -508,7 +508,7 @@
 
 {#if error}
 	<div
-		class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-red-500/30 bg-red-900/20 p-4 text-red-400"
+		class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-red-500/30 bg-red-900 p-4 text-red-400"
 	>
 		{error}
 	</div>

src/routes/event/[id]/edit/+page.svelte

@@ -444,7 +444,7 @@
 <!-- Invite Link Toast -->
 {#if showInviteLinkToast}
 	<div
-		class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900/20 p-4 text-yellow-400"
+		class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900 p-4 text-yellow-400"
 	>
 		{t('event.inviteLinkCopied')}
 	</div>

src/routes/event/[id]/invite/[token]/+page.svelte

@@ -450,13 +450,13 @@
 {#if success}
 	{#if form?.type === 'add'}
 		<div
-			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-green-500/30 bg-green-900/20 p-4 text-green-400"
+			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-green-500 bg-green-900 p-4 text-green-400"
 		>
 			{success}
 		</div>
 	{:else if form?.type === 'remove'}
 		<div
-			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900/20 p-4 text-yellow-400"
+			class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500 bg-yellow-900 p-4 text-yellow-400"
 		>
 			{t('event.removedRsvpSuccessfully')}
 		</div>
@@ -465,7 +465,7 @@
 
 {#if error}
 	<div
-		class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-red-500/30 bg-red-900/20 p-4 text-red-400"
+		class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-red-500 bg-red-900 p-4 text-red-400"
 	>
 		{error}
 	</div>