From 90e3d2fb20bc03136d14ef2a20b32d4ea4471374 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sun, 22 May 2022 12:40:07 +0200
Subject: [PATCH] missing twilio credentials in a modal

---
 .../components/missing-twilio-credentials.tsx | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/features/core/components/missing-twilio-credentials.tsx b/app/features/core/components/missing-twilio-credentials.tsx
index 5ce7f82..43f3e21 100644
--- a/app/features/core/components/missing-twilio-credentials.tsx
+++ b/app/features/core/components/missing-twilio-credentials.tsx
@@ -3,22 +3,29 @@ import { IoSettings, IoAlertCircleOutline } from "react-icons/io5";
 
 export default function MissingTwilioCredentials() {
 	return (
-		<div className="text-center my-auto">
-			<IoAlertCircleOutline className="mx-auto h-12 w-12 text-gray-400" aria-hidden="true" />
-			<h3 className="mt-2 text-sm font-medium text-gray-900">You haven&#39;t set up any phone number yet</h3>
-			<p className="mt-1 text-sm text-gray-500">
-				Head over to your settings
-				<br />
-				to set up your phone number.
-			</p>
-			<div className="mt-6">
-				<Link
-					to="/settings/phone"
-					className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
-				>
-					<IoSettings className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
-					Set up my phone number
-				</Link>
+		<div className="flex items-end justify-center min-h-full overflow-y-hidden pt-4 px-4 pb-4 text-center md:block md:p-0 z-10">
+			<span className="hidden md:inline-block md:align-middle md:h-screen">&#8203;</span>
+			<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all md:my-8 md:align-middle md:max-w-lg md:w-full md:p-6">
+				<div className="text-center my-auto p-4">
+					<IoAlertCircleOutline className="mx-auto h-12 w-12 text-gray-400" aria-hidden="true" />
+					<h3 className="mt-2 text-sm font-medium text-gray-900">
+						You haven&#39;t set up any phone number yet
+					</h3>
+					<p className="mt-1 text-sm text-gray-500">
+						Head over to your settings
+						<br />
+						to set up your phone number.
+					</p>
+					<div className="mt-6">
+						<Link
+							to="/settings/phone"
+							className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
+						>
+							<IoSettings className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+							Set up my phone number
+						</Link>
+					</div>
+				</div>
 			</div>
 		</div>
 	);