fix: stats, layout defect from merge (#367)

This commit is contained in:
Femi Odugbesan 2021-07-15 09:48:02 -05:00 committed by GitHub
parent f7a9c077b0
commit b27ba5123c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -80,6 +80,19 @@ export default function Home(props) {
<div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between"> <div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Your stats</h3> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Your stats</h3>
</div> </div>
<dl className="grid grid-cols-1 overflow-hidden divide-y divide-gray-200 dark:divide-gray-900 md:grid-cols-3 md:divide-y-0 md:divide-x">
{stats.map((item) => (
<div key={item.name} className="px-4 py-5 sm:p-6">
<dt className="text-base font-normal dark:text-white text-gray-900">{item.name}</dt>
<dd className="mt-1 flex justify-between items-baseline md:block lg:flex">
<div className="flex items-baseline text-2xl font-semibold text-blue-600">
{item.stat}
</div>
</dd>
</div>
))}
</dl>
</div>
<div className="mt-8 bg-white shadow dark:bg-gray-800 overflow-hidden rounded-md"> <div className="mt-8 bg-white shadow dark:bg-gray-800 overflow-hidden rounded-md">
<div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between"> <div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white"> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
@ -94,9 +107,7 @@ export default function Home(props) {
<div className="truncate"> <div className="truncate">
<div className="flex text-sm"> <div className="flex text-sm">
<p className="flex-shrink-0 font-medium text-blue-600 truncate">{type.title}</p> <p className="flex-shrink-0 font-medium text-blue-600 truncate">{type.title}</p>
<p className="ml-1 font-normal text-gray-500 truncate"> <p className="ml-1 font-normal text-gray-500 truncate">in {type.description}</p>
in {type.description}
</p>
</div> </div>
<div className="mt-2 flex"> <div className="mt-2 flex">
<div className="flex items-center text-sm text-gray-500"> <div className="flex items-center text-sm text-gray-500">
@ -120,12 +131,11 @@ export default function Home(props) {
</a> </a>
</Link> </Link>
</div> </div>
</div>
</li> </li>
))} ))}
{props.eventTypes.length == 0 && ( {props.eventTypes.length == 0 && (
<div className="text-center text-gray-400 py-12"> <div className="text-center text-gray-400 py-12">
<p>You haven't created any event types.</p> <p>You haven&apos;t created any event types.</p>
</div> </div>
)} )}
</ul> </ul>
@ -213,7 +223,7 @@ export default function Home(props) {
</div> </div>
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200">
{props.credentials.map((integration) => ( {props.credentials.map((integration) => (
<li className="pb-4 flex"> <li key={integration.type} className="pb-4 flex">
{integration.type == "google_calendar" && ( {integration.type == "google_calendar" && (
<img <img
className="h-10 w-10 mr-2" className="h-10 w-10 mr-2"
@ -252,7 +262,7 @@ export default function Home(props) {
))} ))}
{props.credentials.length == 0 && ( {props.credentials.length == 0 && (
<div className="text-center text-gray-400 py-2"> <div className="text-center text-gray-400 py-2">
<p>You haven't added any integrations.</p> <p>You haven&apos;t added any integrations.</p>
</div> </div>
)} )}
</ul> </ul>
@ -291,14 +301,13 @@ export default function Home(props) {
))} ))}
{props.eventTypes.length == 0 && ( {props.eventTypes.length == 0 && (
<div className="text-center text-gray-400 py-2"> <div className="text-center text-gray-400 py-2">
<p>You haven't created any event types.</p> <p>You haven&apos;t created any event types.</p>
</div> </div>
)} )}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<DonateBanner /> <DonateBanner />
</Shell> </Shell>
</div> </div>