From 8208ab6785aae8c49f78eb9ac8cd53d77ec8e5e5 Mon Sep 17 00:00:00 2001
From: Yassine Doghri <yassine@doghri.fr>
Date: Fri, 22 Oct 2021 13:11:33 +0000
Subject: [PATCH] feat: style file inputs using tailwind's file class

---
 app/Views/Components/Forms/Input.php | 10 ++++++++--
 themes/cp_app/episode/comment.php    |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/Views/Components/Forms/Input.php b/app/Views/Components/Forms/Input.php
index 20738194..31489e1a 100644
--- a/app/Views/Components/Forms/Input.php
+++ b/app/Views/Components/Forms/Input.php
@@ -10,9 +10,15 @@ class Input extends FormComponent
 
     public function render(): string
     {
-        $class = 'px-3 py-2 bg-white border-black rounded-lg focus:border-black border-3 focus:ring-castopod ' . $this->class;
+        $baseClass = 'bg-white border-black rounded-lg focus:border-black border-3 focus:ring-castopod focus-within:ring-castopod ' . $this->class;
 
-        $this->attributes['class'] = $class;
+        $this->attributes['class'] = $baseClass;
+
+        if ($this->type === 'file') {
+            $this->attributes['class'] .= ' file:px-3 file:py-2 file:h-[40px] file:font-semibold file:text-gray-800 file:text-sm file:rounded-none file:border-none file:bg-gray-200 file:hover:bg-gray-300 file:cursor-pointer';
+        } else {
+            $this->attributes['class'] .= ' px-3 py-2';
+        }
 
         if ($this->required) {
             $this->attributes['required'] = 'required';
diff --git a/themes/cp_app/episode/comment.php b/themes/cp_app/episode/comment.php
index 3cad657e..73f08c86 100644
--- a/themes/cp_app/episode/comment.php
+++ b/themes/cp_app/episode/comment.php
@@ -19,7 +19,7 @@
 
 <?= $this->section('content') ?>
 <div class="max-w-2xl px-6 mx-auto">
-    <nav class="py-3">
+    <nav class="mb-2">
         <a href="<?= route_to('episode', $podcast->handle, $episode->slug) ?>"
         class="inline-flex items-center px-4 py-2 text-sm focus:ring-castopod"><?= icon(
         'arrow-left',