From 26b1c004f089c91177b9d0d047564941721a923b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20=C5=A0tancl?= <samuel.stancl@gmail.com>
Date: Fri, 11 Oct 2019 15:48:41 +0200
Subject: [PATCH] Design improvements

---
 dist/index.html    | 20 ++++++++++++--------
 tailwind.config.js |  3 ++-
 tailwind.css       |  8 ++++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index e023323..4a385b5 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -38,14 +38,17 @@
                 <div class="mt-8">
                     <a href="https://tenancy.samuelstancl.me/docs/v2/getting-started/">
                         <button
-                            class="text-indigo-100 shadow-primary font-semibold text-xl w-64 text-center py-2 bg-indigo-dark border-indigo-dark border-2 rounded-10 hover:bg-indigo-900 hover:border-indigo-900 both-transition">View
+                            class="text-indigo-100 shadow-primary font-semibold text-xl w-64 text-center py-2
+                            bg-indigo-dark border-indigo-dark border-2 rounded-10 hover:bg-indigo-900
+                            hover:border-indigo-900 focus:outline-none both-transition">View
                             Documentation</button>
                     </a>
                     <a
                         href="https://samuelstancl.me/blog/make-your-laravel-app-multi-tenant-without-changing-a-line-of-code/">
                         <button
                             class="mt-2 xl:mt-0 xl:ml-6 text-indigo-100 font-semibold text-xl w-64 text-center py-2
-                            rounded-10 border-indigo-500 border-2 hover:border-indigo-300 border-transition">Beginners
+                            rounded-10 border-indigo-500 border-2 hover:border-indigo-300 border-transition
+                            focus:outline-none">Beginners
                             Tutorial</button>
                     </a>
                 </div>
@@ -72,11 +75,11 @@ dispatch(new SendOrderCreatedMail);
 
             <div class="flex flex-col xl:flex-row justify-between mx-auto mt-24">
                 <div class="xl:w-1/3 w-full">
-                    <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
+                    <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between shadow-card">
                         <div>
                             <h3 class="font-bold text-3xl text-center my-1">Easy Installation</h3>
                             <p class="mt-5">Two commands is all you need to get started.</p>
-<pre class="text-xl mt-5 whitespace-pre-wrap">
+<pre class="text-lg mt-5 whitespace-pre-wrap">
 composer require stancl/tenancy
 php artisan tenancy:install
 </pre>
@@ -94,7 +97,7 @@ php artisan tenancy:install
                     </div>
                 </div>
                 <div class="ml-24 w-1/3 hidden xl:block">
-                    <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
+                    <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between shadow-card">
                         <div>
                             <h3 class="font-bold text-3xl text-center my-1">Automatic & Flexible</h3>
                             <p class="mt-5">Multi-tenancy is something that can be handled in the background.</p>
@@ -115,7 +118,8 @@ php artisan tenancy:install
                     </div>
                 </div>
                 <div class="mt-6 xl:mt-0 xl:ml-24 xl:w-1/3 w-full">
-                    <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
+                    <div
+                        class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between shadow-card">
                         <div>
                             <h3 class="font-bold text-3xl text-center my-1">Awesome Integration</h3>
                             <p class="mt-5">By switching things in the background, the package doesn’t stand in your way.
@@ -276,7 +280,7 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
             <div class="flex justify-center">
                 <a href="https://tenancy.samuelstancl.me/docs/v2/installation">
                     <button class="rounded-10 bg-indigo-700 px-8 py-2 tracking-wide text-indigo-100 font-semibold
-                    focus:outline-none focus:border-indigo-600 border-transparent border hover:bg-indigo-600">INSTALLATION</button>
+                    focus:outline-none focus:border-indigo-600 border-transparent border hover:bg-indigo-600 bg-transition">INSTALLATION</button>
                 </a>
             </div>
         </div>
@@ -332,7 +336,7 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
                             <button
                                 class="mt-4 rounded-10 bg-indigo-700 px-8 py-2 tracking-wide text-indigo-100 font-semibold
                                         rounded-10 focus:outline-none focus:border-blue-400 border-transparent border
-                                        hover:bg-indigo-600 px-2 py-1" type="submit">
+                                        hover:bg-indigo-600 px-2 py-1 bg-transition" type="submit">
                                 <span class="align-middle">SUBSCRIBE</span>
                             </button>
                         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 431dd42..9cff89e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -193,7 +193,8 @@ module.exports = {
       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
       outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
-      primary: '2px 3px 10px rgba(67, 65, 144, 0.1)',
+      primary: '2px 2px 7px rgba(67, 65, 144, 0.2)',
+      card: '2px 4px 10px 3px rgba(0, 0, 0, 0.1)',
       none: 'none',
     },
     container: {},
diff --git a/tailwind.css b/tailwind.css
index 4204123..fd0fe9f 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -2,10 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
-.both-transition {
-    transition: background 200ms ease, border 200ms ease;
+.bg-transition {
+    transition: background 200ms ease;
 }
 
 .border-transition {
     transition: border 200ms ease;
+}
+
+.both-transition {
+    transition: background 200ms ease, border 200ms ease;
 }
\ No newline at end of file