From 1e726cbf57443822ec2d131d85462e33bd4a3a37 Mon Sep 17 00:00:00 2001
From: Robert Prehn <prehnra@gmail.com>
Date: Tue, 15 Sep 2020 16:19:40 -0500
Subject: [PATCH] fix: Standardize vertical and horizontal spacing

---
 .../templates/phx.gen.html/index.html.eex     | 16 ++---
 .../templates/pow/registration/new.html.eex   |  2 +-
 .../templates/pow/session/new.html.eex        |  4 +-
 .../reset_password/new.html.eex               |  4 +-
 .../posts/static_pages/index.html.eex         | 72 +++++++++----------
 apps/core/assets/.stylelintignore             |  1 +
 apps/core/assets/postcss.config.js            |  7 +-
 .../core_web/templates/layout/_menu.html.eex  |  2 +-
 apps/core/lib/core_web/views/helpers.ex       |  6 +-
 9 files changed, 59 insertions(+), 55 deletions(-)
 create mode 100644 apps/core/assets/.stylelintignore

diff --git a/apps/app/priv/templates/phx.gen.html/index.html.eex b/apps/app/priv/templates/phx.gen.html/index.html.eex
index a5f563d9..6b6eb5ae 100644
--- a/apps/app/priv/templates/phx.gen.html/index.html.eex
+++ b/apps/app/priv/templates/phx.gen.html/index.html.eex
@@ -1,9 +1,9 @@
 <div class="p-6">
   <div class="flex pb-6">
     <div class="w-/12 flex-1 text-4xl">
-      <h1 class="px-5 -mb-2 mt-2"><%= schema.human_plural %></h1>
+      <h1 class="px-4 -mb-2 mt-2"><%= schema.human_plural %></h1>
     </div>
-    <div class="w-/12 text-4xl text-right px-5">
+    <div class="w-/12 text-4xl text-right px-4">
       <%%= styled_button_link "New <%= schema.human_singular %>", to: Routes.<%= schema.route_helper %>_path(@conn, :new) %>
     </div>
   </div>
@@ -12,16 +12,16 @@
     <table class="min-w-full leading-normal">
       <thead>
         <tr>
-    <%= for {k, _} <- schema.attrs do %>      <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"><%= Phoenix.Naming.humanize(Atom.to_string(k)) %></th>
+    <%= for {k, _} <- schema.attrs do %>      <th class="px-4 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"><%= Phoenix.Naming.humanize(Atom.to_string(k)) %></th>
     <% end %>
-          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"></th>
+          <th class="px-4 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"></th>
         </tr>
       </thead>
       <tbody>
     <%%= case @<%= schema.plural %> do %>
       <%%= [] -> %>
         <tr>
-          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" colspan="<%= (schema.attrs |> Enum.count()) + 1 %>">
+          <td class="px-4 py-6 border-b border-gray-200 bg-white text-sm" colspan="<%= (schema.attrs |> Enum.count()) + 1 %>">
             No results.
           </td>
         </tr>
@@ -29,15 +29,15 @@
         <%%= for <%= schema.singular %> <- @<%= schema.plural %> do %>
             <tr>
         <%= for {k, _} <- schema.attrs do %>      
-          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+          <td class="px-4 py-6 border-b border-gray-200 bg-white text-sm">
             <%%= link <%= schema.singular %>.<%= k %>, to: Routes.<%= schema.route_helper %>_path(@conn, :show, <%= schema.singular %>) %>
           </td>
         <% end %>
-              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+              <td class="px-4 py-6 border-b border-gray-200 bg-white text-sm">
                 <label class="relative">
                   ...
                   <input type="checkbox" class="hidden hidden-options-toggle">
-                  <div class="hidden absolute right-0 rounded bg-white border shadow-lg py-4 w-48"> 
+                  <div class="hidden absolute right-0 rounded bg-white border shadow-lg py-6 w-48"> 
                     <%%= link "Edit", to: Routes.<%= schema.route_helper %>_path(@conn, :edit, <%= schema.singular %>), class: "block px-4 py-2 hover:bg-gray-100" %>
                     <%%= link "Delete", to: Routes.<%= schema.route_helper %>_path(@conn, :delete, <%= schema.singular %>), method: :delete, data: [confirm: "Are you sure?"], class: "text-red-600 block px-4 py-2 hover:bg-gray-100" %>
                   </div>
diff --git a/apps/auth_web/lib/auth_web/templates/pow/registration/new.html.eex b/apps/auth_web/lib/auth_web/templates/pow/registration/new.html.eex
index 457582d3..56bf9ef2 100644
--- a/apps/auth_web/lib/auth_web/templates/pow/registration/new.html.eex
+++ b/apps/auth_web/lib/auth_web/templates/pow/registration/new.html.eex
@@ -9,7 +9,7 @@
   <% end %>
 
   <div class="flex flex-wrap mt-6">
-    <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
+    <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
       Already have an account? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span>
     </div>
   </div>
diff --git a/apps/auth_web/lib/auth_web/templates/pow/session/new.html.eex b/apps/auth_web/lib/auth_web/templates/pow/session/new.html.eex
index df4c5396..ccc46fae 100644
--- a/apps/auth_web/lib/auth_web/templates/pow/session/new.html.eex
+++ b/apps/auth_web/lib/auth_web/templates/pow/session/new.html.eex
@@ -10,12 +10,12 @@
     <% end %>
   <% end %>
   <div class="w-full flex flex-wrap mt-6">
-    <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
+    <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
       New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span>
     </div>
 
     <%= if pow_extension_enabled?(PowResetPassword) do %>
-      <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
+      <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
         Forgot your password? <span><%= link("Reset password", to: Routes.pow_reset_password_reset_password_path(@conn, :new), class: "text-blue-100") %></span>
       </div>
     <% end %>
diff --git a/apps/auth_web/lib/auth_web/templates/pow_reset_password/reset_password/new.html.eex b/apps/auth_web/lib/auth_web/templates/pow_reset_password/reset_password/new.html.eex
index db337038..b08b53fa 100644
--- a/apps/auth_web/lib/auth_web/templates/pow_reset_password/reset_password/new.html.eex
+++ b/apps/auth_web/lib/auth_web/templates/pow_reset_password/reset_password/new.html.eex
@@ -6,11 +6,11 @@
     <% end %>
   <% end %>
 
-  <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
+  <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
     Remembered your password? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span>
   </div>
 
-  <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
+  <div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
     New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span>
   </div>
 <% end %>
diff --git a/apps/content/lib/content_web/templates/posts/static_pages/index.html.eex b/apps/content/lib/content_web/templates/posts/static_pages/index.html.eex
index 58c77ef3..79696c26 100644
--- a/apps/content/lib/content_web/templates/posts/static_pages/index.html.eex
+++ b/apps/content/lib/content_web/templates/posts/static_pages/index.html.eex
@@ -18,7 +18,7 @@
             <h1 class="text-white font-semibold text-5xl">
               Your story starts with us.
             </h1>
-            <p class="mt-4 text-lg text-gray-300">
+            <p class="mt-6 text-lg text-gray-300">
               This is a simple example of a Landing Page you can build using
               Tailwind Starter Kit. It features multiple CSS components
               based on the Tailwindcss design system.
@@ -52,16 +52,16 @@
       <div class="flex flex-wrap">
         <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
           <div
-            class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
+            class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
           >
-            <div class="px-4 py-5 flex-auto">
+            <div class="px-4 py-6 flex-auto">
               <div
-                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-400"
+                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-6 shadow-lg rounded-full bg-red-400"
               >
                 <i class="fas fa-award"></i>
               </div>
               <h6 class="text-xl font-semibold">Awarded Agency</h6>
-              <p class="mt-2 mb-4 text-gray-600">
+              <p class="mt-2 mb-6 text-gray-600">
                 Divide details about your product or agency work into parts.
                 A paragraph describing a feature will be enough.
               </p>
@@ -70,16 +70,16 @@
         </div>
         <div class="w-full md:w-4/12 px-4 text-center">
           <div
-            class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
+            class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
           >
-            <div class="px-4 py-5 flex-auto">
+            <div class="px-4 py-6 flex-auto">
               <div
-                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-400"
+                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-6 shadow-lg rounded-full bg-blue-400"
               >
                 <i class="fas fa-retweet"></i>
               </div>
               <h6 class="text-xl font-semibold">Free Revisions</h6>
-              <p class="mt-2 mb-4 text-gray-600">
+              <p class="mt-2 mb-6 text-gray-600">
                 Keep you user engaged by providing meaningful information.
                 Remember that by this time, the user is curious.
               </p>
@@ -88,16 +88,16 @@
         </div>
         <div class="pt-6 w-full md:w-4/12 px-4 text-center">
           <div
-            class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
+            class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
           >
-            <div class="px-4 py-5 flex-auto">
+            <div class="px-4 py-6 flex-auto">
               <div
                 class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400"
               >
                 <i class="fas fa-fingerprint"></i>
               </div>
               <h6 class="text-xl font-semibold">Verified Company</h6>
-              <p class="mt-2 mb-4 text-gray-600">
+              <p class="mt-2 mb-6 text-gray-600">
                 Write a few lines about each one. A paragraph describing a
                 feature will be enough. Keep you user engaged!
               </p>
@@ -116,14 +116,14 @@
             Working with us is a pleasure
           </h3>
           <p
-            class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700"
+            class="text-lg font-light leading-relaxed mt-6 mb-6 text-gray-700"
           >
             Don't let your uses guess by attaching tooltips and popoves to
             any element. Just make sure you enable them first via
             JavaScript.
           </p>
           <p
-            class="text-lg font-light leading-relaxed mt-0 mb-4 text-gray-700"
+            class="text-lg font-light leading-relaxed mt-0 mb-6 text-gray-700"
           >
             The kit comes with three pre-built pages to help you get started
             faster. You can change the text and images and you're good to
@@ -131,7 +131,7 @@
           </p>
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation"
-            class="font-bold text-gray-800 mt-8"
+            class="font-bold text-gray-800 mt-6"
             >Check Tailwind Starter Kit!</a
           >
         </div>
@@ -144,7 +144,7 @@
               src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80"
               class="w-full align-middle rounded-t-lg"
             />
-            <blockquote class="relative p-8 mb-4">
+            <blockquote class="relative p-8 mb-6">
               <svg
                 preserveAspectRatio="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -208,7 +208,7 @@
               <i class="fas fa-rocket text-xl"></i>
             </div>
             <h3 class="text-3xl font-semibold">A growing company</h3>
-            <p class="mt-4 text-lg leading-relaxed text-gray-600">
+            <p class="mt-6 text-lg leading-relaxed text-gray-600">
               The extension comes with three pre-built pages to help you get
               started faster. You can change the text and images and you're
               good to go.
@@ -266,7 +266,7 @@
       <div class="flex flex-wrap justify-center text-center mb-24">
         <div class="w-full lg:w-6/12 px-4">
           <h2 class="text-4xl font-semibold">Here are our heroes</h2>
-          <p class="text-lg leading-relaxed m-4 text-gray-600">
+          <p class="text-lg leading-relaxed mx-4 my-6 text-gray-600">
             According to the National Oceanic and Atmospheric
             Administration, Ted, Scambos, NSIDClead scentist, puts the
             potentially record maximum.
@@ -275,7 +275,7 @@
       </div>
       <div class="flex flex-wrap">
         <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-          <div class="px-6">
+          <div class="px-4">
             <img
               alt="..."
               src="./assets/img/team-1-800x800.jpg"
@@ -309,7 +309,7 @@
           </div>
         </div>
         <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-          <div class="px-6">
+          <div class="px-4">
             <img
               alt="..."
               src="./assets/img/team-2-800x800.jpg"
@@ -338,7 +338,7 @@
           </div>
         </div>
         <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-          <div class="px-6">
+          <div class="px-4">
             <img
               alt="..."
               src="./assets/img/team-3-800x800.jpg"
@@ -372,7 +372,7 @@
           </div>
         </div>
         <div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-          <div class="px-6">
+          <div class="px-4">
             <img
               alt="..."
               src="./assets/img/team-4-470x470.png"
@@ -437,7 +437,7 @@
       <div class="flex flex-wrap text-center justify-center">
         <div class="w-full lg:w-6/12 px-4">
           <h2 class="text-4xl font-semibold text-white">Build something</h2>
-          <p class="text-lg leading-relaxed mt-4 mb-4 text-gray-500">
+          <p class="text-lg leading-relaxed mt-6 mb-6 text-gray-500">
             Put the potentially record low maximum sea ice extent tihs year
             down to low ice. According to the National Oceanic and
             Atmospheric Administration, Ted, Scambos.
@@ -451,7 +451,7 @@
           >
             <i class="fas fa-medal text-xl"></i>
           </div>
-          <h6 class="text-xl mt-5 font-semibold text-white">
+          <h6 class="text-xl mt-6 font-semibold text-white">
             Excelent Services
           </h6>
           <p class="mt-2 mb-4 text-gray-500">
@@ -465,10 +465,10 @@
           >
             <i class="fas fa-poll text-xl"></i>
           </div>
-          <h5 class="text-xl mt-5 font-semibold text-white">
+          <h5 class="text-xl mt-6 font-semibold text-white">
             Grow your market
           </h5>
-          <p class="mt-2 mb-4 text-gray-500">
+          <p class="mt-2 mb-6 text-gray-500">
             Some quick example text to build on the card title and make up
             the bulk of the card's content.
           </p>
@@ -479,8 +479,8 @@
           >
             <i class="fas fa-lightbulb text-xl"></i>
           </div>
-          <h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5>
-          <p class="mt-2 mb-4 text-gray-500">
+          <h5 class="text-xl mt-6 font-semibold text-white">Launch time</h5>
+          <p class="mt-2 mb-6 text-gray-500">
             Some quick example text to build on the card title and make up
             the bulk of the card's content.
           </p>
@@ -497,34 +497,34 @@
           >
             <div class="flex-auto p-5 lg:p-10">
               <h4 class="text-2xl font-semibold">Want to work with us?</h4>
-              <p class="leading-relaxed mt-1 mb-4 text-gray-600">
+              <p class="leading-relaxed mt-1 mb-6 text-gray-600">
                 Complete this form and we will get back to you in 24 hours.
               </p>
-              <div class="relative w-full mb-3 mt-8">
+              <div class="relative w-full mb-6 mt-6">
                 <label
                   class="block uppercase text-gray-700 text-xs font-bold mb-2"
                   for="full-name"
                   >Full Name</label
                 ><input
                   type="text"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
+                  class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
                   placeholder="Full Name"
                   style="transition: all 0.15s ease 0s;"
                 />
               </div>
-              <div class="relative w-full mb-3">
+              <div class="relative w-full mb-6">
                 <label
                   class="block uppercase text-gray-700 text-xs font-bold mb-2"
                   for="email"
                   >Email</label
                 ><input
                   type="email"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
+                  class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
                   placeholder="Email"
                   style="transition: all 0.15s ease 0s;"
                 />
               </div>
-              <div class="relative w-full mb-3">
+              <div class="relative w-full mb-6">
                 <label
                   class="block uppercase text-gray-700 text-xs font-bold mb-2"
                   for="message"
@@ -532,13 +532,13 @@
                 ><textarea
                   rows="4"
                   cols="80"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
+                  class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
                   placeholder="Type a message..."
                 ></textarea>
               </div>
               <div class="text-center mt-6">
                 <button
-                  class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                   style="transition: all 0.15s ease 0s;"
                 >
diff --git a/apps/core/assets/.stylelintignore b/apps/core/assets/.stylelintignore
new file mode 100644
index 00000000..3c3629e6
--- /dev/null
+++ b/apps/core/assets/.stylelintignore
@@ -0,0 +1 @@
+node_modules
diff --git a/apps/core/assets/postcss.config.js b/apps/core/assets/postcss.config.js
index 35ab5890..41cdbcff 100644
--- a/apps/core/assets/postcss.config.js
+++ b/apps/core/assets/postcss.config.js
@@ -1,7 +1,10 @@
 module.exports = {
   plugins: [
-    require('postcss-import')(),
-    require('stylelint')(),
+    require('postcss-import')({
+      plugins: [
+        require('stylelint')(),
+      ]
+    }),
     require('tailwindcss'),
     require('autoprefixer'),
     require('csswring')(),
diff --git a/apps/core/lib/core_web/templates/layout/_menu.html.eex b/apps/core/lib/core_web/templates/layout/_menu.html.eex
index b9b6a50a..1c6340bb 100644
--- a/apps/core/lib/core_web/templates/layout/_menu.html.eex
+++ b/apps/core/lib/core_web/templates/layout/_menu.html.eex
@@ -6,7 +6,7 @@
   </div>
 
   <div class="block lg:hidden">
-    <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white">
+    <button id="nav-toggle" class="flex items-center px-4 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white">
       <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
     </button>
   </div>
diff --git a/apps/core/lib/core_web/views/helpers.ex b/apps/core/lib/core_web/views/helpers.ex
index b9886f6d..daeba427 100644
--- a/apps/core/lib/core_web/views/helpers.ex
+++ b/apps/core/lib/core_web/views/helpers.ex
@@ -125,17 +125,17 @@ defmodule CoreWeb.Helpers do
     "bg-white shadow rounded p-3"
   end
   defp default_classes_for_type(:checkbox), do: "appearance-none h-10 w-10 bg-white checked:bg-gray-500 rounded shadow focus:outline-none focus:shadow-outline text-white text-xl font-bold mb-2"
-  defp default_classes_for_type(_), do: "px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
+  defp default_classes_for_type(_), do: "px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
 
   def styled_button(text) do
     ~E"""
-    <%= submit text, class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %>
+    <%= submit text, class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %>
     """
   end
 
   def styled_button_link(text, opts) do
     ~E"""
-    <%= link text, opts ++ [class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"] %>
+    <%= link text, opts ++ [class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"] %>
     """
   end