Fix modals
This commit is contained in:
parent
997646be35
commit
536dc3fcb8
2 changed files with 143 additions and 137 deletions
|
|
@ -129,7 +129,7 @@ const Channels: React.FC = () => {
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center space-x-2 flex-1 min-w-0">
|
<div className="flex items-center space-x-2 flex-1 min-w-0">
|
||||||
<h3 className="text-lg font-medium text-gray-900 truncate">
|
<h3 className="text-lg font-medium text-gray-900 truncate">
|
||||||
!{channel.name}@{channel.platform_instance?.url?.replace(/^https?:\/\//, '')}
|
{channel.display_name || channel.name}
|
||||||
</h3>
|
</h3>
|
||||||
<a
|
<a
|
||||||
href={`https://${channel.platform_instance?.url?.replace(/^https?:\/\//, '')}/c/${channel.name}`}
|
href={`https://${channel.platform_instance?.url?.replace(/^https?:\/\//, '')}/c/${channel.name}`}
|
||||||
|
|
@ -154,9 +154,9 @@ const Channels: React.FC = () => {
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{channel.display_name && (
|
<p className="text-sm text-gray-500">
|
||||||
<p className="text-sm text-gray-500">{channel.display_name}</p>
|
!{channel.name}@{channel.platform_instance?.url?.replace(/^https?:\/\//, '')}
|
||||||
)}
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -229,23 +229,24 @@ const Channels: React.FC = () => {
|
||||||
|
|
||||||
{/* Account Management Modal */}
|
{/* Account Management Modal */}
|
||||||
{showAccountModal && (
|
{showAccountModal && (
|
||||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
<div className="fixed inset-0" style={{ zIndex: 9999 }} onClick={() => setShowAccountModal(null)}>
|
||||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
<div
|
||||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={() => setShowAccountModal(null)}></div>
|
className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl p-6"
|
||||||
|
style={{ width: '500px', maxHeight: '80vh', overflowY: 'auto' }}
|
||||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
<div className="flex items-center mb-4">
|
||||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-blue-100">
|
||||||
<div className="sm:flex sm:items-start">
|
|
||||||
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
||||||
<Link2 className="h-6 w-6 text-blue-600" />
|
<Link2 className="h-6 w-6 text-blue-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
|
<div className="ml-4">
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
<h3 className="text-lg font-medium text-gray-900">
|
||||||
Manage Accounts for {showAccountModal.channelName}
|
Manage Accounts for {showAccountModal.channelName}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="mt-4">
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
<p className="text-sm text-gray-500 mb-4">
|
<p className="text-sm text-gray-500 mb-4">
|
||||||
Select a platform account to link to this channel:
|
Select a platform account to link to this channel:
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -291,20 +292,17 @@ const Channels: React.FC = () => {
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<div className="flex justify-end pt-4 border-t">
|
||||||
</div>
|
|
||||||
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowAccountModal(null)}
|
onClick={() => setShowAccountModal(null)}
|
||||||
className="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
>
|
>
|
||||||
Close
|
Close
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -280,9 +280,14 @@ const CreateRouteModal: React.FC<CreateRouteModalProps> = ({ feeds, channels, on
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
<div className="fixed inset-0 overflow-y-auto" style={{ zIndex: 9999 }}>
|
||||||
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
<div className="mt-3">
|
<div className="fixed inset-0 transition-opacity" onClick={onClose}></div>
|
||||||
|
|
||||||
|
<span className="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
|
||||||
|
|
||||||
|
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Create New Route</h3>
|
<h3 className="text-lg font-medium text-gray-900 mb-4">Create New Route</h3>
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -360,6 +365,7 @@ const CreateRouteModal: React.FC<CreateRouteModalProps> = ({ feeds, channels, on
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -379,9 +385,12 @@ const EditRouteModal: React.FC<EditRouteModalProps> = ({ route, onClose, onSubmi
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
<div className="fixed inset-0" style={{ zIndex: 9999 }} onClick={onClose}>
|
||||||
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white max-h-[80vh] overflow-y-auto">
|
<div
|
||||||
<div className="mt-3">
|
className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl p-6"
|
||||||
|
style={{ width: '500px', maxHeight: '80vh', overflowY: 'auto' }}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Edit Route</h3>
|
<h3 className="text-lg font-medium text-gray-900 mb-4">Edit Route</h3>
|
||||||
<div className="mb-4 p-3 bg-gray-50 rounded-md">
|
<div className="mb-4 p-3 bg-gray-50 rounded-md">
|
||||||
<p className="text-sm text-gray-600">
|
<p className="text-sm text-gray-600">
|
||||||
|
|
@ -437,7 +446,6 @@ const EditRouteModal: React.FC<EditRouteModalProps> = ({ route, onClose, onSubmi
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue