Finish basic styling for the viewer.

diff --git a/src/App.css b/src/App.css
index 1586cf2440300e0dbda5f33b0d3370be01602dd0..4c1236176b17aafd96d3b3590c2cffd851e324d3 100644 (file)
--- 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 c2269182348e7155e0e9aa4b8997973fac11ed25..97387a38bf3eb65a0ec3318ac9ce7ee8742b9fd4 100644 (file)
--- 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 f9bb23c8efcb95c2ae39936e0ede64931f7d5314..905e61270fed9517d763ff63521f68228a9fecfa 100644 (file)
--- 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 cb3a02109e624d8c97d230266c757ee9879964ac..9205bb362db16874f0ed4b8acf3862aad6909377 100644 (file)
--- 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 671030a3fde820fd8e6d26ae4ebd6f183f01e597..4fcba369826316ec2818853090a787ad39a03a3f 100644 (file)
--- 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]'
               }
             }