From 84e92c366d891cf46c50a7fc00fbaa993bee0a6f Mon Sep 17 00:00:00 2001
From: Tony Messias <tonysm@hey.com>
Date: Mon, 4 Sep 2023 23:41:38 -0300
Subject: [PATCH] Add some basic styles to the workbench app

---
 .../Http/Controllers/ArticlesController.php   |  2 +-
 .../views/articles/_article.blade.php         | 18 +++++++-----
 .../views/articles/_article_card.blade.php    |  8 +++--
 .../articles/_create_article_link.blade.php   | 12 ++++++--
 .../resources/views/articles/_form.blade.php  | 29 +++++++++++++++++++
 .../resources/views/articles/create.blade.php | 28 +++---------------
 .../resources/views/articles/delete.blade.php | 14 ++++-----
 .../resources/views/articles/edit.blade.php   | 25 +---------------
 .../resources/views/articles/index.blade.php  |  4 +--
 .../resources/views/articles/show.blade.php   |  6 ++--
 .../resources/views/components/app.blade.php  |  7 ++++-
 11 files changed, 78 insertions(+), 75 deletions(-)
 create mode 100644 workbench/resources/views/articles/_form.blade.php

diff --git a/workbench/app/Http/Controllers/ArticlesController.php b/workbench/app/Http/Controllers/ArticlesController.php
index 84c4686..b9eae51 100644
--- a/workbench/app/Http/Controllers/ArticlesController.php
+++ b/workbench/app/Http/Controllers/ArticlesController.php
@@ -39,7 +39,7 @@ public function store(Request $request)
                 turbo_stream()->prepend('articles', view('articles._article_card', [
                     'article' => $article,
                 ])),
-                turbo_stream()->replace('create_article', view('articles._create_article_link')),
+                turbo_stream()->replace('create_article_details', view('articles._create_article_link')),
             ]);
         }
 
diff --git a/workbench/resources/views/articles/_article.blade.php b/workbench/resources/views/articles/_article.blade.php
index 8e7f41a..72e23a9 100644
--- a/workbench/resources/views/articles/_article.blade.php
+++ b/workbench/resources/views/articles/_article.blade.php
@@ -1,12 +1,14 @@
-<x-turbo-frame :id="$article">
-    <h2>{{ $article->title }}</h2>
+<x-turbo-frame :id="$article" class="contents">
+    <h2 class="text-4xl font-semibold">{{ $article->title }}</h2>
 
-    <p>{{ $article->content }}</p>
+    <p class="prose">{{ $article->content }}</p>
 
-    <h4>{{ __('Actions') }}</h4>
+    <div class="mt-4 border-t pt-2">
+        <h4 class="text-2xl">{{ __('Actions') }}</h4>
 
-    <ul>
-        <li><a href="{{ route('articles.edit', $article) }}">{{ __('Edit') }}</a></li>
-        <li><a href="{{ route('articles.delete', $article) }}">{{ __('Delete') }}</a></li>
-    </ul>
+        <ul class="flex items-center space-x-2">
+            <li><a class="underline text-indigo-600" href="{{ route('articles.edit', $article) }}">{{ __('Edit') }}</a></li>
+            <li><a class="underline text-red-600" href="{{ route('articles.delete', $article) }}">{{ __('Delete') }}</a></li>
+        </ul>
+    </div>
 </x-turbo-frame>
diff --git a/workbench/resources/views/articles/_article_card.blade.php b/workbench/resources/views/articles/_article_card.blade.php
index e821223..9c06efa 100644
--- a/workbench/resources/views/articles/_article_card.blade.php
+++ b/workbench/resources/views/articles/_article_card.blade.php
@@ -1,3 +1,7 @@
-<div id="@domid($article, 'card')">
-    <p>{{ $article->title }} - <a href="{{ route('articles.show', $article)}}">{{ __('View') }}</a></p>
+<div id="@domid($article, 'card')" class="p-4">
+    <p class="mb-2 flex items-center justify-between">{{ $article->title }}</p>
+
+    <span class="pt-2 border-t text-sm">
+        <a class="underline text-indigo-500" href="{{ route('articles.show', $article)}}">{{ __('View') }}</a>
+    </span>
 </div>
diff --git a/workbench/resources/views/articles/_create_article_link.blade.php b/workbench/resources/views/articles/_create_article_link.blade.php
index 641cadc..cc13018 100644
--- a/workbench/resources/views/articles/_create_article_link.blade.php
+++ b/workbench/resources/views/articles/_create_article_link.blade.php
@@ -1,3 +1,9 @@
-<x-turbo-frame id="create_article">
-    <a href="{{ route('articles.create') }}">{{ __('New Article') }}</a>
-</x-turbo-frame>
+<details id="create_article_details" class="open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6">
+    <summary class="list-none cursor-pointer">
+        <span class="underline text-indigo-500">{{ __('New Article') }}</span>
+    </summary>
+
+    <x-turbo-frame class="mt-2" id="create_article" src="{{ route('articles.create') }}" loading="lazy">
+        <p class="text-gray-600">{{ __('Loading...') }}</p>
+    </x-turbo-frame>
+</details>
diff --git a/workbench/resources/views/articles/_form.blade.php b/workbench/resources/views/articles/_form.blade.php
new file mode 100644
index 0000000..5761c3a
--- /dev/null
+++ b/workbench/resources/views/articles/_form.blade.php
@@ -0,0 +1,29 @@
+<form action="{{ ($article->exists ?? false) ? route('articles.update', $article) : route('articles.store') }}" method="post">
+    @if ($article->exists ?? false)
+        @method('PUT')
+    @endif
+
+    <div>
+        <label class="block font-medium text-sm text-gray-700 dark:text-gray-300" for="title">{{ __('Title') }}</label>
+        <input class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" type="text" name="title" placeholder="{{ __('Title') }}" value="{{ old('title', $article?->title) }}" />
+        @error('title')
+        <span class="mt-1 block text-sm text-red-600 dark:text-red-400">{{ $message }}</span>
+        @enderror
+    </div>
+
+    <div class="mt-2">
+        <label class="block font-medium text-sm text-gray-700 dark:text-gray-300" for="content">{{ __('Content') }}</label>
+        <textarea class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" name="content" id="content" cols="30" rows="10" placeholder="{{ __('Say something...') }}">{{ old('content', $article?->content) }}</textarea>
+        @error('content')
+        <span class="mt-1 block text-sm text-red-600 dark:text-red-400">{{ $message }}</span>
+        @enderror
+    </div>
+
+    <div class="mt-4 flex items-center space-x-2 justify-end">
+        @if ($article?->exists)
+        <a class="underline text-indigo-600" href="{{ route('articles.show', $article) }}">{{ __('Cancel') }}</a>
+        @endif
+
+        <button class="px-4 py-2 text-lg rounded bg-indigo-600 text-white" type="submit">{{ $article?->exists ? __('Save') : __('Create') }}</button>
+    </div>
+</form>
diff --git a/workbench/resources/views/articles/create.blade.php b/workbench/resources/views/articles/create.blade.php
index 330dc73..d040431 100644
--- a/workbench/resources/views/articles/create.blade.php
+++ b/workbench/resources/views/articles/create.blade.php
@@ -1,35 +1,15 @@
 <x-app-layout>
     <x-slot name="title">{{ __('New Article') }}</x-slot>
 
-    <h1>{{ __('New Article') }}</h1>
+    <h1 class="mb-4 text-4xl font-semibold font-cursive">{{ __('New Article') }}</h1>
 
-    <div>
-        <a href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
+    <div class="p-6">
+        <a class="underline text-indigo-600" href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
     </div>
 
     <br>
 
     <x-turbo-frame id="create_article">
-        <form action="{{ route('articles.store') }}" method="post">
-            <div>
-                <label for="title">{{ __('Title') }}</label>
-                <input type="text" name="title" />
-                @error('title')
-                <span>{{ $message }}</span>
-                @enderror
-            </div>
-
-            <div>
-                <label for="content">{{ __('Content') }}</label>
-                <textarea name="content" id="content" cols="30" rows="10"></textarea>
-                @error('content')
-                <span>{{ $message }}</span>
-                @enderror
-            </div>
-
-            <div>
-                <button type="submit">{{ __('Create') }}</button>
-            </div>
-        </form>
+        @include('articles._form', ['article' => null])
     </x-turbo-frame>
 </x-app-layout>
diff --git a/workbench/resources/views/articles/delete.blade.php b/workbench/resources/views/articles/delete.blade.php
index b5088c1..f376619 100644
--- a/workbench/resources/views/articles/delete.blade.php
+++ b/workbench/resources/views/articles/delete.blade.php
@@ -1,10 +1,10 @@
 <x-app-layout>
     <x-slot name="title">{{ __('Delete Article') }}</x-slot>
 
-    <h1>{{ __('Delete Article') }}</h1>
+    <h1 class="mb-4 text-4xl font-semibold font-sans">{{ __('Delete Article') }}</h1>
 
-    <div>
-        <a href="{{ route('articles.show', $article) }}">{{ __('Back to Article') }}</a>
+    <div class="p-6">
+        <a class="underline text-indigo-600" href="{{ route('articles.show', $article) }}">{{ __('Back to Article') }}</a>
 
         <p>{{ __('My cookie: :value.', ['value' => request()->cookie('my-cookie', 'no-cookie')]) }}</p>
         <p>{{ __('Response cookie: :value.', ['value' => request()->cookie('response-cookie', 'no-cookie')]) }}</p>
@@ -14,12 +14,12 @@
         <form action="{{ route('articles.destroy', $article) }}" method="post" data-turbo-frame="_top">
             @method('DELETE')
 
-            <p>{{ __('Are you sure you wanna delete this article?') }}</p>
+            <p class="text-lg">{{ __('Are you sure you wanna delete this article?') }}</p>
 
-            <div>
-                <a href="{{ route('articles.show', $article) }}">{{ __('No, cancel.') }}</a>
+            <div class="mt-4 flex items-center justify-end space-x-2">
+                <a class="text-gray-600 underline" href="{{ route('articles.show', $article) }}">{{ __('No, cancel.') }}</a>
 
-                <button type="submit">{{ __('Yes, delete it.') }}</button>
+                <button class="px-4 py-2 border border-red-600 rounded bg-red-600 text-white" type="submit">{{ __('Yes, delete it.') }}</button>
             </div>
         </form>
     </x-turbo-frame>
diff --git a/workbench/resources/views/articles/edit.blade.php b/workbench/resources/views/articles/edit.blade.php
index fd12696..18bccb6 100644
--- a/workbench/resources/views/articles/edit.blade.php
+++ b/workbench/resources/views/articles/edit.blade.php
@@ -14,29 +14,6 @@
     <br>
 
     <x-turbo-frame :id="$article" target="_top">
-        <form action="{{ route('articles.update', $article) }}" method="post">
-            @method('PUT')
-
-            <div>
-                <label for="title">{{ __('Title') }}</label>
-                <input type="text" name="title" value="{{ old('title', $article->title) }}" />
-                @error('title')
-                <span>{{ $message }}</span>
-                @enderror
-            </div>
-
-            <div>
-                <label for="content">{{ __('Content') }}</label>
-                <textarea name="content" id="content" cols="30" rows="10">{{ old('content', $article->content) }}</textarea>
-                @error('content')
-                <span>{{ $message }}</span>
-                @enderror
-            </div>
-
-            <div>
-                <a href="{{ route('articles.show', $article) }}">{{ __('Cancel') }}</a>
-                <button type="submit">{{ __('Save') }}</button>
-            </div>
-        </form>
+        @include('articles._form', ['article' => $article])
     </x-turbo-frame>
 </x-app-layout>
diff --git a/workbench/resources/views/articles/index.blade.php b/workbench/resources/views/articles/index.blade.php
index 309e830..35d1bad 100644
--- a/workbench/resources/views/articles/index.blade.php
+++ b/workbench/resources/views/articles/index.blade.php
@@ -1,11 +1,11 @@
 <x-app-layout>
     <x-slot name="title">{{ __('Articles') }}</x-slot>
 
-    <h1>{{ __('Articles Index') }}</h1>
+    <h1 class="mb-4 text-4xl font-semibold font-sans">{{ __('Articles Index') }}</h1>
 
     @include('articles._create_article_link')
 
-    <div id="articles">
+    <div id="articles" class="mt-4 flex flex-col space-y-2 divide-y border rounded">
         @each('articles._article_card', $articles, 'article')
     </div>
 </x-app-layout>
diff --git a/workbench/resources/views/articles/show.blade.php b/workbench/resources/views/articles/show.blade.php
index 081778e..3f83bf2 100644
--- a/workbench/resources/views/articles/show.blade.php
+++ b/workbench/resources/views/articles/show.blade.php
@@ -1,11 +1,11 @@
 <x-app-layout>
     <x-slot name="title">{{ $article->title }}</x-slot>
 
-    <h1>{{ __('View Article') }}</h1>
+    <h1 class="mb-4 text-4xl font-semibold font-cursive">{{ __('View Article') }}</h1>
 
-    <div>
+    <div class="p-6">
         @unlessturbonative
-        <a href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
+        <a class="underline text-indigo-600" href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
         @endturbonative
 
         @turbonative
diff --git a/workbench/resources/views/components/app.blade.php b/workbench/resources/views/components/app.blade.php
index 3931285..17a074a 100644
--- a/workbench/resources/views/components/app.blade.php
+++ b/workbench/resources/views/components/app.blade.php
@@ -9,12 +9,17 @@
 
     {{ $head ?? null }}
 
+    {{-- Use Tailwind CDN --}}
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+
     {{-- Install Turbo via CDN --}}
     <script type="module">
         import * as Turbo from 'https://cdn.skypack.dev/@hotwired/turbo';
     </script>
 </head>
 <body>
-    {{ $slot }}
+    <main class="max-w-lg mx-auto">
+        {{ $slot }}
+    </main>
 </body>
 </html>