From c1167159cbb3aee6a30595aaf593b718c68be079 Mon Sep 17 00:00:00 2001 From: Robert Sesek 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 ( - <> -

Hello World

- {formSelector} +
+
+

ustaxlib Federal {props.tr.year}

+ {formSelector} +
} /> - +
); } 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 ( <> -

Form {props.form.name}

+

Form {props.form.name}

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