From 01d150092f5d01039ac6fc771083b0aba0bd6725 Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <bpumfleet@gmail.com>
Date: Wed, 26 May 2021 20:47:06 +0100
Subject: [PATCH] Mobile UI fixes

---
 components/Shell.tsx                 | 18 +++++++++---------
 pages/auth/login.tsx                 |  2 +-
 pages/availability/event/[type].tsx  |  2 +-
 pages/availability/index.tsx         |  4 ++--
 pages/index.tsx                      | 12 ++++++------
 pages/integrations/[integration].tsx |  4 ++--
 pages/integrations/index.tsx         |  4 ++--
 7 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 164ad3b0..738f89fa 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -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>
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index ace1cbfe..81467d3f 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -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>
diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx
index 80215c99..bb081328 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -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
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 8d682ca2..d79b5072 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -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
diff --git a/pages/index.tsx b/pages/index.tsx
index 2f8d44dd..401d2fd7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -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) => (
diff --git a/pages/integrations/[integration].tsx b/pages/integrations/[integration].tsx
index 97849c39..68df852a 100644
--- a/pages/integrations/[integration].tsx
+++ b/pages/integrations/[integration].tsx
@@ -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
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 8cc36a67..f92ea500 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -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" />