From c1167159cbb3aee6a30595aaf593b718c68be079 Mon Sep 17 00:00:00 2001
From: Robert Sesek <rsesek@bluestatic.org>
Date: Sun, 8 Mar 2020 19:03:43 -0400
Subject: [PATCH] Finish basic styling for the viewer.

---
 src/App.css       | 22 ++++++++++++++++++++++
 src/App.tsx       | 12 +++++++-----
 src/FormView.css  | 13 +++++++++++++
 src/FormView.tsx  |  2 +-
 webpack.config.js |  2 +-
 5 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index 1586cf2..4c12361 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,25 @@
 body {
   font-family: Helvetica, Arial, sans-serif;
 }
+
+.container {
+  width: 750px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.header h1 {
+  flex: 2;
+  font-size: 24pt;
+  margin: 10px 0;
+  color: #555;
+}
+
+.header select {
+  font-size: 14pt;
+  height: 24pt;
+}
diff --git a/src/App.tsx b/src/App.tsx
index c226918..97387a3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,7 @@ import { TaxReturn, Form } from 'ustaxlib';
 
 import FormView from './FormView';
 
-import './App.css';
+const S = require('./App.css');
 
 interface AppProps {
   tr: TaxReturn;
@@ -28,11 +28,13 @@ export default function App(props: AppProps) {
   );
 
   return (
-    <>
-      <h1>Hello World</h1>
-      {formSelector}
+    <div class={S.container}>
+      <div class={S.header}>
+        <h1>ustaxlib Federal {props.tr.year}</h1>
+        {formSelector}
+      </div>
 
       <FormView tr={props.tr} form={state.form as Form<any>} />
-    </>
+    </div>
   );
 }
diff --git a/src/FormView.css b/src/FormView.css
index f9bb23c..905e612 100644
--- a/src/FormView.css
+++ b/src/FormView.css
@@ -1,17 +1,30 @@
+.form-name {
+  margin: 0;
+  border: 3px solid black;
+  border-bottom-width: 2px;
+  padding: 5px;
+}
+
 .table {
   border: 1px solid black;
   border-collapse: collapse;
+  width: 100%;
 }
 
 .line {
   border: 1px solid black;
 }
 
+.line:hover {
+  background-color: #dfdfdf;
+}
+
 .id {
   background-color: black;
   color: white;
   font-weight: bold;
   padding: 0 5px;
+  text-align: center;
 }
 
 .description {
diff --git a/src/FormView.tsx b/src/FormView.tsx
index cb3a021..9205bb3 100644
--- a/src/FormView.tsx
+++ b/src/FormView.tsx
@@ -14,7 +14,7 @@ export default function FormView(props: FormProps) {
 
   return (
     <>
-      <h1>Form {props.form.name}</h1>
+      <h2 class={S.formName}>Form {props.form.name}</h2>
 
       <table class={S.table}>
         <For each={lineKeys()}>
diff --git a/webpack.config.js b/webpack.config.js
index 671030a..4fcba36 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -36,8 +36,8 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
+              localsConvention: 'camelCaseOnly',
               modules: {
-                mode: 'local',
                 localIdentName: '[path][name]_[local]_[hash:base64:2]'
               }
             }
-- 
2.43.5