From 7be33250e1babeb6e5da5a66634b08a1751a1779 Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Sun, 22 Dec 2019 22:43:19 -0600
Subject: [PATCH] Focus styles

---
 app/components/header-nav-link.hbs | 2 +-
 app/components/header-nav.hbs      | 4 ++--
 app/components/recipe-add.hbs      | 2 +-
 app/components/recipe-preview.hbs  | 4 ++--
 app/tailwind/config.js             | 4 +++-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/components/header-nav-link.hbs b/app/components/header-nav-link.hbs
index b12f06b..e1b5138 100644
--- a/app/components/header-nav-link.hbs
+++ b/app/components/header-nav-link.hbs
@@ -1,3 +1,3 @@
-<a href={{@href}} class="block mt-4 md:inline-block md:mt-0 text-teal-200 hover:text-white mr-4">
+<a href={{@href}} class="block mt-4 md:inline-block md:mt-0 text-teal-200 hover:text-white focus:text-white mr-4">
   {{yield}}
 </a>
diff --git a/app/components/header-nav.hbs b/app/components/header-nav.hbs
index 244b33e..ba5a0fc 100644
--- a/app/components/header-nav.hbs
+++ b/app/components/header-nav.hbs
@@ -1,6 +1,6 @@
 <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
   <div class="flex items-center flex-shrink-0 text-white mr-6">
-    <LinkTo @route="index" class="flex border border-transparent hover:border-white rounded px-4 py-2">
+    <LinkTo @route="index" class="flex border border-transparent hover:border-white focus:border-white rounded px-4 py-2">
       <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm6.997 20.486c2.444-2.019 4.003-5.072 4.003-8.486 0-6.071-4.929-11-11-11s-11 4.929-11 11c0 4.27 2.439 7.975 5.998 9.798v-3.228c0-.691-.441-.917-1.384-1.673-.698-.56-1.177-1.433-1.089-2.322.252-2.537.862-7.575.862-7.575l.909.003-.597 5.997h1.291l.005-6h1l-.002 6h1.003l-.001-6h1l.004 6 1.34.002-.675-6.002h.887c.002.011.675 5.008.951 7.55.098.902-.409 1.792-1.121 2.356-.95.751-1.382.967-1.382 1.669v4.243c.649.12 1.318.182 2.001.182 1.409 0 2.756-.265 3.994-.749l.001-3.251h-2.467c.802-6.996 3.103-12 4.66-12 .447 0 .804.357.807.851.008 1.164.004 6.814.002 12.635zm-7.563-6.486h-5.845c-.067.642-.26 1.387.651 2.117.938.754 1.758 1.231 1.758 2.453v3.678c.326.128.66.24 1.001.337v-4.01c0-1.237.811-1.7 1.761-2.453.944-.747.75-1.464.674-2.122zm6.561 7.222l.002-13.029c-1.14 1.352-2.563 4.206-3.31 9.809h2.308l-.001 3.8c.345-.176.679-.37 1.001-.58z"/>
       </svg>
@@ -29,7 +29,7 @@
       </HeaderNavLink>
     </div>
     <div>
-      <a href="https://gitlab.com/gaiety/sortable-recipes" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 md:mt-0">
+      <a href="https://gitlab.com/gaiety/sortable-recipes" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white hover:border-transparent focus:text-teal-500 focus:bg-white mt-4 md:mt-0">
         <svg class="fill-current h-8 w-8 inline-block" width="54" height="54" viewBox="0 0 586 559" xmlns="http://www.w3.org/2000/svg">
           <path d="M461.48,298.35,443.7,243.72a7.72,7.72,0,0,0-.43-1.47L407.6,132.45a14.18,14.18,0,0,0-13.54-9.67,13.94,13.94,0,0,0-13.38,9.75l-34,104.63H239.37L205.32,132.53A13.94,13.94,0,0,0,192,122.78h-.08a14.22,14.22,0,0,0-13.5,9.76L142.72,242.47c0,.1-.08.18-.11.28l-18.1,55.61a20.29,20.29,0,0,0,7.37,22.71L288.26,434.7a8,8,0,0,0,9.45-.05l0,0L454.12,321.07A20.28,20.28,0,0,0,461.48,298.35ZM227.73,253.22l43.59,134.16L166.68,253.22Zm87,134.19,41.8-128.62,1.8-5.57h61.1L324.76,374.5Zm79.47-244.58,30.63,94.33H363.52ZM341.49,253.16l-30.37,93.46L293,402.28,244.58,253.16ZM191.85,142.83l30.69,94.33H161.27Zm-50.56,165.3a4.31,4.31,0,0,1-1.56-4.83L153.17,262l98.57,126.37Zm303.43,0L334.26,388.34l.37-.48L432.83,262l13.44,41.28A4.31,4.31,0,0,1,444.72,308.12Z"/>
         </svg>
diff --git a/app/components/recipe-add.hbs b/app/components/recipe-add.hbs
index 4913441..f47ffc8 100644
--- a/app/components/recipe-add.hbs
+++ b/app/components/recipe-add.hbs
@@ -4,6 +4,6 @@
 
 <button
   {{on "click" this.addRecipe}}
-  class="w-full bg-teal-500 hover:bg-teal-400 text-white font-bold mt-4 py-2 px-4 border-b-4 border-teal-700 hover:border-teal-500 rounded">
+  class="w-full bg-teal-500 hover:bg-teal-400 focus:bg-teal-400 text-white font-bold mt-4 py-2 px-4 border-b-4 border-teal-700 hover:border-teal-500 focus:border-teal-500 rounded">
   Add Another Recipe
 </button>
diff --git a/app/components/recipe-preview.hbs b/app/components/recipe-preview.hbs
index 7a32291..d48ad70 100644
--- a/app/components/recipe-preview.hbs
+++ b/app/components/recipe-preview.hbs
@@ -1,9 +1,9 @@
-<LinkTo @route="meal" @model={{@meal}}>
+<LinkTo @route="meal" @model={{@meal}} class="block bg-white border border-gray-400 focus:border-teal-500 focus:shadow-sm focus:bg-teal-100 outline-none">
   <div class="max-w-sm w-full lg:max-w-full lg:flex">
     <div class="h-48 lg:h-auto lg:w-48 flex-none">
       <img src={{@meal.mealThumb}} alt="" class="h-full w-full object-cover">
     </div>
-    <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white p-4 flex flex-col justify-between leading-normal">
+    <div class="p-4 flex flex-col justify-between leading-normal">
       <div class="mb-8">
         <div class="text-gray-900 font-bold text-xl mb-2">
           {{@meal.name}}
diff --git a/app/tailwind/config.js b/app/tailwind/config.js
index 0f66e6c..c1e5dbf 100644
--- a/app/tailwind/config.js
+++ b/app/tailwind/config.js
@@ -4,6 +4,8 @@ module.exports = {
   theme: {
     extend: {}
   },
-  variants: {},
+  variants: {
+    borderWidth: ['responsive', 'hover', 'focus'],
+  },
   plugins: []
 }