From c1720b90ec25a60c81f99f87c3fe6fcd4b969f29 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 17 Apr 2019 00:01:56 +0100
Subject: [PATCH] Style the comment form

---
 .../twentynineteen-tailwindcss/comments.php   |  4 +--
 .../src/css/components/comment-form.css       | 29 +++++++++++++++++++
 .../src/css/style.css                         |  1 +
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css

diff --git a/wp-content/themes/twentynineteen-tailwindcss/comments.php b/wp-content/themes/twentynineteen-tailwindcss/comments.php
index 0100f71..1e8fb89 100644
--- a/wp-content/themes/twentynineteen-tailwindcss/comments.php
+++ b/wp-content/themes/twentynineteen-tailwindcss/comments.php
@@ -101,10 +101,10 @@ $discussion = twentynineteen_get_discussion_data();
 		// Show comment form at bottom if showing newest comments at the bottom.
 		if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) :
 			?>
-			<div class="comment-form-flex">
+			<div>
 				<span class="screen-reader-text"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></span>
 				<?php twentynineteen_comment_form( 'asc' ); ?>
-				<h2 class="comments-title" aria-hidden="true"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
+				<h2 class="text-3xl font-bold mt-10" aria-hidden="true"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
 			</div>
 			<?php
 		endif;
diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css
new file mode 100644
index 0000000..c0421c7
--- /dev/null
+++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css
@@ -0,0 +1,29 @@
+.comment-form {
+  @apply mt-20;
+
+  > * {
+    @apply mt-4;
+  }
+
+  label {
+    @apply w-full block pb-2;
+    @apply text-sm text-gray-700;
+  }
+
+  input,
+  textarea {
+    @apply w-full p-3 border border-gray-400;
+
+    &:focus {
+      @apply bg-white outline-none border-blue-700;
+    }
+  }
+
+  .form-submit {
+    @apply mt-6;
+  }
+
+  input[type=submit] {
+    @apply w-auto;
+  }
+}
diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css
index 8b8b887..e177b3d 100644
--- a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css
+++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css
@@ -26,6 +26,7 @@ h2:before {
 }
 
 @import 'components/avatars.css';
+@import 'components/comment-form.css';
 @import 'components/comment-list.css';
 @import 'components/content.css';
 @import 'components/discussion-avatar-list.css';