maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile UI fixes

This commit is contained in:
Bailey Pumfleet 2021-05-26 20:47:06 +01:00
parent efa443a912
commit 01d150092f
7 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/Shell.tsx
View File

@ -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>

2
pages/auth/login.tsx
View File

@ -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>

2
pages/availability/event/[type].tsx
View File

@ -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

4
pages/availability/index.tsx
View File

@ -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

12
pages/index.tsx
View File

@ -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) => (

4
pages/integrations/[integration].tsx
View File

@ -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

4
pages/integrations/index.tsx
View File

@ -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" />