From 0903a24433227f1357dbfce7d62287dc97d5e69a Mon Sep 17 00:00:00 2001
From: Rokas Puzonas <rokas.puz@gmail.com>
Date: Mon, 7 Feb 2022 23:33:25 +0200
Subject: [PATCH] fix: make the website look nice by adjusting css

---
 src/App.css                  | 34 +++++++++++++---------------------
 src/App.tsx                  |  6 +++---
 src/TableDefinitionForm.tsx  | 11 ++++++++---
 src/TableMethodCodeBlock.tsx |  7 +------
 src/TableMethodGenerator.ts  | 14 +++++++-------
 5 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/src/App.css b/src/App.css
index e7f574c..2dd971a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,14 +1,3 @@
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App {
 	padding: 3em;
   background-color: #1E1E1E;
@@ -17,19 +6,22 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  font-size: calc(10px + 1vmin);
+  font-size: 16px;
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+input, select, button {
+	background-color: #131313;
+	color: white;
+	border: 1px solid black;
+	margin: 0.25em 0.5em;
+	padding: 0.5em;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+button:hover {
+	background-color: #1F1F1F;
+}
+
+button:active {
+	background-color: black;
 }
diff --git a/src/App.tsx b/src/App.tsx
index cb0ef67..9daf536 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import './App.css';
 import TableDefinitionForm from './TableDefinitionForm';
 import TableMethodCodeBlock from './TableMethodCodeBlock';
-import { TableDefinition } from './TableMethodGenerator';
+import { TableColumns } from './TableMethodGenerator';
 
 function App() {
 	let [columns, setColumns] = useState<TableColumns>([
@@ -38,7 +38,7 @@ function App() {
 		}
 	])
 
-	let [generatorOptions, setGeneratorOptions] = useState<TableMethodGeneratorOptions>({});
+	// let [generatorOptions, setGeneratorOptions] = useState<TableMethodGeneratorOptions>({});
 
 	const onChange = (e: TableColumns) => {
 		columns = e
@@ -50,7 +50,7 @@ function App() {
 			<main>
 				<TableDefinitionForm value={columns} onChange={onChange} />
 				<hr />
-				<TableMethodCodeBlock columns={columns} options={generatorOptions}/>
+				<TableMethodCodeBlock columns={columns}/>
 			</main>
     </div>
   );
diff --git a/src/TableDefinitionForm.tsx b/src/TableDefinitionForm.tsx
index 54614a5..2027ab8 100644
--- a/src/TableDefinitionForm.tsx
+++ b/src/TableDefinitionForm.tsx
@@ -1,6 +1,5 @@
 import { ChangeEvent, useState } from "react"
-import { Alignment, TableColumn, TableColumns } from "./TableMethodGenerator"
-
+import { Alignment, generate, TableColumn, TableColumns } from "./TableMethodGenerator"
 
 interface TableColumnProps {
 	value: TableColumn
@@ -80,15 +79,21 @@ function TableDefinitionForm(props: TableDefinitionProps) {
 		}
 	}
 
+	const onClickCopy = () => {
+		navigator.clipboard.writeText(generate(columns))
+	}
+
   return (
 		<form onSubmit={(e) => e.preventDefault()}>
-			<label>Column:</label>
+			<label>Column name:</label>
 			<input
 				type="text"
 				value={currentName}
 				onChange={(e) => setCurrentName(e.target.value)}
 				onKeyPress={(e) => e.key === "Enter" && addRow()}
 			/>
+			<button onClick={onClickCopy}>Insert column</button>
+			<button onClick={onClickCopy}>Copy code 📋!</button>
 			<ol>
 				{columns.map((item, i) =>
 					<TableDefinitionRow key={i} value={item} onChange={(e) => updateRow(i, e)}/>
diff --git a/src/TableMethodCodeBlock.tsx b/src/TableMethodCodeBlock.tsx
index ffd27c7..8ba5482 100644
--- a/src/TableMethodCodeBlock.tsx
+++ b/src/TableMethodCodeBlock.tsx
@@ -7,22 +7,17 @@ SyntaxHighlighter.registerLanguage('csharp', csharp);
 
 interface Props {
 	columns: TableColumns
-	options: TableMethodGeneratorOptions
+	options?: TableMethodGeneratorOptions
 }
 
 function TableMethodCodeBlock(props: Props) {
 	let script = generate(props.columns, props.options)
 
-	const onClickCopy = () => {
-		navigator.clipboard.writeText(script)
-	}
-
 	return (
 		<div>
 			<SyntaxHighlighter language="csharp" style={vs2015}>
 				{script}
 			</SyntaxHighlighter>
-			<button onClick={onClickCopy}>Copy code!</button>
 		</div>
 	)
 }
diff --git a/src/TableMethodGenerator.ts b/src/TableMethodGenerator.ts
index f22552d..332e626 100644
--- a/src/TableMethodGenerator.ts
+++ b/src/TableMethodGenerator.ts
@@ -31,17 +31,17 @@ function get_total_width(columns: TableColumns): number {
 	return total_width;
 }
 
-export function generate(columns: TableColumns, options: TableMethodGeneratorOptions): string {
-	const method_name = options.method_name || "PrintTable"
+export function generate(columns: TableColumns, options?: TableMethodGeneratorOptions): string {
+	const method_name = options?.method_name || "PrintTable"
 	if (columns.length === 0) {
 		return `static void ${method_name}()\n{\n}`;
 	}
 
-	const empty_message = options.empty_message || "Empty"
-	const container_name = options.container_name || "container"
-	const container_type = options.container_type || "Container"
-	const entry_name = options.entry_name || "e"
-	const entry_type = options.entry_type || "Entry"
+	const empty_message = options?.empty_message || "Empty"
+	const container_name = options?.container_name || "container"
+	const container_type = options?.container_type || "Container"
+	const entry_name = options?.entry_name || "e"
+	const entry_type = options?.entry_type || "Entry"
 
 	// Total width
 	const total_width = get_total_width(columns)