Mobile UI fixes
This commit is contained in:
Bailey Pumfleet
parent
efa443a912
commit
01d150092f
7 changed files with 23 additions and 23 deletions
|
|
@ -98,36 +98,36 @@ export default function Shell(props) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{ mobileMenuExpanded && <div className="border-b border-gray-700 md:hidden bg-gray-700" id="mobile-menu">
|
||||
{ mobileMenuExpanded && <div className="border-b border-blue-500 md:hidden bg-blue-600" id="mobile-menu">
|
||||
<div className="px-2 py-3 space-y-1 sm:px-3">
|
||||
<Link href="/">
|
||||
<a className={router.pathname == "/" ? "bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Dashboard</a>
|
||||
<a className={router.pathname == "/" ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Dashboard</a>
|
||||
</Link>
|
||||
<Link href="/availability">
|
||||
<a className={router.pathname.startsWith("/availability") ? "bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Availability</a>
|
||||
<a className={router.pathname.startsWith("/availability") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Availability</a>
|
||||
</Link>
|
||||
<Link href="/integrations">
|
||||
<a className={router.pathname.startsWith("/integrations") ? "bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Integrations</a>
|
||||
<a className={router.pathname.startsWith("/integrations") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Integrations</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pt-4 pb-3 border-t border-gray-800">
|
||||
<div className="pt-4 pb-3 border-t border-blue-500">
|
||||
<div className="flex items-center px-5">
|
||||
<div className="flex-shrink-0">
|
||||
<img className="h-10 w-10 rounded-full" src={"https://eu.ui-avatars.com/api/?background=039be5&color=fff&name=" + encodeURIComponent(session.user.name || session.user.username)} alt="" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<div className="text-base font-medium leading-none text-white">{session.user.name || session.user.username}</div>
|
||||
<div className="text-sm font-medium leading-none text-gray-400">{session.user.email}</div>
|
||||
<div className="text-sm font-medium leading-none text-gray-200">{session.user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 px-2 space-y-1">
|
||||
<Link href="/settings/profile">
|
||||
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
|
||||
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">Your Profile</a>
|
||||
</Link>
|
||||
<Link href="/settings">
|
||||
<a className={router.pathname.startsWith("/settings") ? "bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Settings</a>
|
||||
<a className={router.pathname.startsWith("/settings") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Settings</a>
|
||||
</Link>
|
||||
<button onClick={logoutHandler} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</button>
|
||||
<button onClick={logoutHandler} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">Sign out</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default function Login({ csrfToken }) {
|
|||
</div>
|
||||
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
|
||||
<div className="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
|
||||
<form className="space-y-6" method="post" action="/api/auth/callback/credentials">
|
||||
<input name='csrfToken' type='hidden' defaultValue={csrfToken} hidden/>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@ export default function EventType(props) {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-white shadow sm:rounded-lg">
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Delete this event type
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ export default function Availability(props) {
|
|||
<div className="flex flex-col mb-8">
|
||||
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||
<div className="shadow overflow-hidden border-b border-gray-200 rounded-lg">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
|
|
@ -165,7 +165,7 @@ export default function Availability(props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white shadow sm:rounded-lg">
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Change the start and end times of your day
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default function Home(props) {
|
|||
</Head>
|
||||
|
||||
<Shell heading="Dashboard">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="md:grid grid-cols-3 gap-4">
|
||||
<div className="col-span-2">
|
||||
<div className="rounded-lg bg-white shadow">
|
||||
<div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
|
||||
|
|
@ -92,7 +92,7 @@ export default function Home(props) {
|
|||
))}
|
||||
</dl>
|
||||
</div>
|
||||
<div className="mt-8 bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<div className="mt-8 bg-white shadow overflow-hidden rounded-md">
|
||||
<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">
|
||||
Your event types
|
||||
|
|
@ -126,13 +126,13 @@ export default function Home(props) {
|
|||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="mt-8 bg-white shadow overflow-hidden sm:rounded-md p-6">
|
||||
<div className="flex">
|
||||
<div className="w-1/2 self-center">
|
||||
<div className="mt-8 bg-white shadow overflow-hidden rounded-md p-6 mb-8 md:mb-0">
|
||||
<div className="md:flex">
|
||||
<div className="md:w-1/2 self-center mb-8 md:mb-0">
|
||||
<h2 className="text-2xl font-semibold">Getting started</h2>
|
||||
<p className="text-gray-600 text-sm">Steps you should take to get started with Calendso.</p>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<div className="md:w-1/2">
|
||||
<div className="flow-root">
|
||||
<ul className="-mb-8">
|
||||
{timeline.map((event, eventIdx) => (
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default function integration(props) {
|
|||
|
||||
<Shell heading={getIntegrationName(props.integration.type)}>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="col-span-2 bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="col-span-2 bg-white shadow overflow-hidden rounded-lg">
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Integration Details
|
||||
|
|
@ -87,7 +87,7 @@ export default function integration(props) {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-white shadow sm:rounded-lg">
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Delete this integration
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default function Home({ integrations }) {
|
|||
</Head>
|
||||
|
||||
<Shell heading="Integrations">
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="bg-white shadow overflow-hidden rounded-lg">
|
||||
{integrations.filter( (ig) => ig.credential ).length !== 0 ? <ul className="divide-y divide-gray-200">
|
||||
{integrations.filter(ig => ig.credential).map( (ig) => (<li>
|
||||
<Link href={"/integrations/" + ig.credential.id}>
|
||||
|
|
@ -71,7 +71,7 @@ export default function Home({ integrations }) {
|
|||
</li>))}
|
||||
</ul>
|
||||
:
|
||||
<div className="bg-white shadow sm:rounded-lg">
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="flex">
|
||||
<div className="py-9 pl-8">
|
||||
<InformationCircleIcon className="text-blue-600 w-16" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue