restyle all the things

components/App.tsx

@@ -79,17 +79,19 @@ export default function App() {
   }
 
   return (
-    <div className="flex flex-col space-x-5 max-w-7xl mx-auto py-3 sm:px-2 lg:px-3 bg-gray-100">
+    <div className="flex flex-col space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100">
-      <div className="flex flex-col space-y-5 shadow sm:rounded-md sm:overflow-hidden">
+      <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">
+          <div className="flex space-x-3 p-3">
-          <Button onClick={_onGenerate}>Backe PDF</Button>
+            <Button onClick={_onGenerate}>PDF Erstellen</Button>
             <Button onClick={_onClear}>Alles Löschen</Button>
           </div>
         </div>
+        <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
+      </div>
       <div className="flex flex-col space-y-5">
         <Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
-        <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
       </div>
     </div>
   )

components/Button.tsx

@@ -1,11 +1,17 @@
-import React from 'react'
+import React, { PointerEvent } from 'react'
 
-export default function Button({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
+export default function Button({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode
+  onClick: (event: PointerEvent<HTMLButtonElement>) => void
+}) {
   return (
     <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-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      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"
     >
       {children}
     </button>

components/Header.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 export default function Header() {
   return (
-    <header className="my-3">
+    <header>
-      <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">PDFer</h1>
+      <h1 className="pl-3 py-3 text-3xl font-extrabold text-gray-900 bg-gray-200 tracking-tight">PDFer</h1>
     </header>
   )
 }

components/Input.tsx

@@ -14,7 +14,7 @@ export default function Input({
   onchange: (name: string, event: ChangeEvent<{ value: string }>) => void
 }) {
   return (
-    <div>
+    <>
       <label htmlFor={name} className="block text-sm font-medium text-gray-700">
         {text}
       </label>
@@ -28,6 +28,6 @@ export default function Input({
           onChange={onchange.bind(null, name)}
         />
       </div>
-    </div>
+    </>
   )
 }

components/Layout.tsx

@@ -4,9 +4,9 @@ import Header from './Header'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div>
+    <>
       <Header />
       <main>{children}</main>
-    </div>
+    </>
   )
 }

components/LetterOptions.tsx

@@ -35,7 +35,8 @@ export default function LetterOptions(props: IProps) {
   ]
 
   return (
-    <div className="px-4 py-5 bg-white space-y-6 sm:p-6">
+    <div className="grid grid-cols-6 gap-6 px-4 py-5 bg-white sm:p-6">
+      <div className="col-span-3">
         <Select
           name="template"
           text="Vorlage"
@@ -43,16 +44,27 @@ export default function LetterOptions(props: IProps) {
           value={props.template}
           options={templateTypeOptions}
         />
-
+      </div>
+      <div className="col-span-3">
         <TextAreaInput
           name="address"
           text="Adresse"
           placeholder={EXAMPLE_ADDRESS}
           onchange={props.onChange}
           value={props.address}
-        styles="h-20"
+          styles="h-20 col-span-2"
         />
-      <Input name="subject" text="Betreff" placeholder="Betreffzeile" onchange={props.onChange} value={props.subject} />
+      </div>
+      <div className="col-span-3">
+        <Input
+          name="subject"
+          text="Betreff"
+          placeholder="Betreffzeile"
+          onchange={props.onChange}
+          value={props.subject}
+        />
+      </div>
+      <div className="col-span-6">
         <TextAreaInput
           name="body"
           text="Brieftext"
@@ -60,6 +72,8 @@ export default function LetterOptions(props: IProps) {
           placeholder="Inhalt des Briefes"
           value={props.body}
         />
+      </div>
+      <div className="col-span-3">
         <Collapsible trigger="Bezugszeichenzeile">
           <Input name="yourRef" text="Ihr Zeichen" onchange={props.onChange} value={props.yourRef} />
           <Input name="yourMail" text="Ihr Schreiben vom" onchange={props.onChange} value={props.yourMail} />
@@ -67,6 +81,8 @@ export default function LetterOptions(props: IProps) {
           <Input name="customer" text="Kundernummer" onchange={props.onChange} value={props.customer} />
           <Input name="invoice" text="Rechnung" onchange={props.onChange} value={props.invoice} />
         </Collapsible>
+      </div>
+      <div className="col-span-3">
         <Collapsible trigger="Sonstige Einstellungen">
           <Input name="date" text="Datum" placeholder="Heute" onchange={props.onChange} value={props.date} />
           <Input
@@ -86,5 +102,6 @@ export default function LetterOptions(props: IProps) {
           <Input name="specialMail" text="Versandhinweis" onchange={props.onChange} value={props.specialMail} />
         </Collapsible>
       </div>
+    </div>
   )
 }

components/Preview.tsx

@@ -6,16 +6,9 @@ export default function Preview({ pdfIsLoading, pdfError, pdfUrl }: IPdfProps) {
     return <div>Lade&hellip;</div>
   }
 
-  const errorStyles = {
-    padding: '6px 12px',
-    color: 'white',
-    backgroundColor: '#d81e1e',
-    borderRadius: '3px',
-  }
-
   if (pdfError) {
     return (
-      <div style={errorStyles}>
+      <div className="flex items-center bg-red-100 border-solid border border-red-700 rounded text-red-700 py-2 px-3">
         <span role="img" aria-label="Crying Man">
           😢
         </span>{' '}
@@ -25,13 +18,8 @@ export default function Preview({ pdfIsLoading, pdfError, pdfUrl }: IPdfProps) {
   }
 
   if (!pdfUrl) {
-    return <div>Knopf drücken dann gibts hier was zu sehen!</div>
+    return null
   }
 
-  const styles = {
+  return <embed src={pdfUrl} className="h-screen w-auto" type="application/pdf" />
-    width: '700px',
-    height: '1050px',
-  }
-
-  return <embed src={pdfUrl} style={styles} type="application/pdf" />
 }

components/Select.tsx

@@ -14,7 +14,7 @@ export default function Select({
   options: { name: string; value: string }[]
 }) {
   return (
-    <div className="">
+    <>
       <label htmlFor={name} className="block text-sm font-medium text-gray-700">
         {text}
       </label>
@@ -30,6 +30,6 @@ export default function Select({
           </option>
         ))}
       </select>
-    </div>
+    </>
   )
 }

components/TextAreaInput.tsx

@@ -16,7 +16,7 @@ export default function TextAreaInput({
   styles?: string
 }) {
   return (
-    <div>
+    <>
       <label htmlFor={name} className="block text-sm font-medium text-gray-700">
         {text}
       </label>
@@ -31,6 +31,6 @@ export default function TextAreaInput({
           value={value}
         ></textarea>
       </div>
-    </div>
+    </>
   )
 }