From 0aaccf69665dac428d5ce380537b4e35d7f842f1 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Sun, 28 Feb 2021 23:28:05 +0100
Subject: [PATCH] more styling

---
 components/App.tsx           | 20 +++++++-------------
 components/Button.tsx        |  2 +-
 components/Input.tsx         |  6 +++---
 components/LatestList.tsx    | 25 +++++++++++++++++--------
 components/Select.tsx        |  9 ++-------
 components/TextAreaInput.tsx |  4 ++--
 styles/index.css             | 21 +++++++++++++++++++++
 7 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/components/App.tsx b/components/App.tsx
index b3b305f..c7425b2 100644
--- a/components/App.tsx
+++ b/components/App.tsx
@@ -7,8 +7,6 @@ import { generatePdf, getLatest, removeLatest } from './apiHelper'
 import { ILatest } from '../interfaces/ILatest'
 import { IDocProps } from '../interfaces/IDocProps'
 
-//import './App.css';
-
 export default function App() {
   const [options, setOptions] = useState<IDocProps>({
     address: 'Max Mustermann\nMusterstrasse\n12345 Musterstadt',
@@ -79,20 +77,16 @@ export default function App() {
   }
 
   return (
-    <div className="flex flex-col space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100">
-      <div className="flex space-x-5">
-        <div className=" flex-grow flex flex-col shadow sm:rounded-md sm:overflow-hidden">
-          <LetterOptions onChange={_onChange} {...options} />
-          <div className="flex space-x-3 p-3">
-            <Button onClick={_onGenerate}>PDF Erstellen</Button>
-            <Button onClick={_onClear}>Alles Löschen</Button>
-          </div>
+    <div className="flex space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100">
+      <div className=" flex-grow flex flex-col shadow sm:rounded-md sm:overflow-hidden">
+        <LetterOptions onChange={_onChange} {...options} />
+        <div className="flex space-x-3 p-3">
+          <Button onClick={_onGenerate}>PDF Erstellen</Button>
+          <Button onClick={_onClear}>Alles Löschen</Button>
         </div>
-        <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
-      </div>
-      <div className="flex flex-col space-y-5">
         <Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
       </div>
+      <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
     </div>
   )
 }
diff --git a/components/Button.tsx b/components/Button.tsx
index 465bfff..8411a9c 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -11,7 +11,7 @@ export default function Button({
     <button
       type="button"
       onClick={onClick}
-      className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+      className="inline-flex items-center px-2 py-1 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
     >
       {children}
     </button>
diff --git a/components/Input.tsx b/components/Input.tsx
index fb6c0e9..daf63f4 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -15,14 +15,14 @@ export default function Input({
 }) {
   return (
     <>
-      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+      <label htmlFor={name} className="pb-label">
         {text}
       </label>
-      <div className="mt-1 flex rounded-md shadow-sm">
+      <div className="pb-input_wrapper">
         <input
           type="text"
           name={name}
-          className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
+          className="pb-input"
           placeholder={placeholder}
           value={value}
           onChange={onchange.bind(null, name)}
diff --git a/components/LatestList.tsx b/components/LatestList.tsx
index 723b9d5..d2b5f5d 100644
--- a/components/LatestList.tsx
+++ b/components/LatestList.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { ILatest } from '../interfaces/ILatest'
-import Button from './Button'
 
 export default function LatestList({
   latest,
@@ -19,19 +18,29 @@ export default function LatestList({
     const subject = item.subject
     const hrefId = `#item-${item.id}`
     return (
-      <li key={item.id}>
-        <a href={hrefId} onClick={() => onSelect(item)}>
-          <div>{subject}</div>
-          <div>{created.toLocaleDateString()}</div>
-        </a>
-        <Button onClick={() => onRemove(item)}>Remove</Button>
+      <li key={item.id} className="flex flex-col">
+        <hr className="border-gray-200 mt-3 mb-4" />
+        <div className="flex flex-row items-center">
+          <a href={hrefId} onClick={() => onSelect(item)}>
+            <div className="text-base">{subject}</div>
+            <div className="text-sm">{created.toLocaleString()}</div>
+          </a>
+          <a
+            className="m-2 text-gray-400 hover:text-gray-600 cursor-pointer"
+            onClick={() => onRemove(item)}
+            href="#"
+            title="Löschen"
+          >
+            ❌
+          </a>
+        </div>
       </li>
     )
   })
 
   return (
     <div>
-      <h4>Vergangene Briefe:</h4>
+      <h4 className="text-lg mb-4">Vergangene Briefe:</h4>
       <ul>{latestElements}</ul>
     </div>
   )
diff --git a/components/Select.tsx b/components/Select.tsx
index 8b4f8db..9025552 100644
--- a/components/Select.tsx
+++ b/components/Select.tsx
@@ -15,15 +15,10 @@ export default function Select({
 }) {
   return (
     <>
-      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+      <label htmlFor={name} className="pb-label">
         {text}
       </label>
-      <select
-        name={name}
-        className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-        onChange={onchange.bind(null, name)}
-        value={value}
-      >
+      <select name={name} className="pb-select" onChange={onchange.bind(null, name)} value={value}>
         {options.map((option) => (
           <option value={option.value} key={option.value}>
             {option.name}
diff --git a/components/TextAreaInput.tsx b/components/TextAreaInput.tsx
index ae1bd72..50237c8 100644
--- a/components/TextAreaInput.tsx
+++ b/components/TextAreaInput.tsx
@@ -17,7 +17,7 @@ export default function TextAreaInput({
 }) {
   return (
     <>
-      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+      <label htmlFor={name} className="pb-label">
         {text}
       </label>
       <div className="mt-1">
@@ -25,7 +25,7 @@ export default function TextAreaInput({
           id="about"
           name="about"
           rows={10}
-          className={`shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md ${styles}`}
+          className={`pb-textarea ${styles}`}
           placeholder={placeholder}
           onChange={onchange.bind(null, name)}
           value={value}
diff --git a/styles/index.css b/styles/index.css
index fae772b..6d06988 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -2,6 +2,26 @@
 @tailwind components;
 @tailwind utilities;
 
+.pb-label {
+  @apply block text-sm font-medium text-gray-700;
+}
+
+.pb-textarea {
+  @apply shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md;
+}
+
+.pb-select {
+  @apply mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
+}
+
+.pb-input_wrapper {
+  @apply mt-1 flex rounded-md shadow-sm;
+}
+
+.pb-input {
+  @apply focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300;
+}
+
 .Collapsible {
   background-color: #ddd;
   border-radius: 2px;
@@ -31,4 +51,5 @@
   background-color: #fff;
   padding-top: 12px;
   padding-left: 12px;
+  padding-right: 2px;
 }