change to css modules

2023-06-19 00:42:19 -04:00
parent 87f5d5f6d5
commit d49caf4bde
11 changed files with 163 additions and 545 deletions
@@ -0,0 +1,9 @@
+.app {
+  display:flex;
+  flex-direction: column;
+}
+.app > .picker {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
@@ -3,6 +3,8 @@ import { HistoricalImpliedVolatilityChart } from "./HistoricalImpliedVolatilityC
 import { create$Picker } from './Picker';
 import { atom as $, useAtomValue } from 'jotai';
 //import './index.css';
+//@ts-ignore
+import k from './App.module.css';

 const baseUrl = 'http://127.0.0.1:8234';

@@ -34,13 +36,13 @@ function App() {
  const {Picker:BackMonthPicker} = useAtomValue($backMonthPicker);

  return (
-  <div className='flex flex-column'>
+  <div className={k.app}>
    <Header />
-    <div className='flex'><UnderlyingPicker /></div>
-    <QuoteDatePicker />
-    <StrikePicker />
-    <FrontMonthPicker />
-    <BackMonthPicker />
+    <div className={k.picker}><label>Underlying</label><UnderlyingPicker /></div>
+    <div className={k.picker}><label>Quote Date</label><QuoteDatePicker /></div>
+    <div className={k.picker}><label>Strike</label><StrikePicker /></div>
+    <div className={k.picker}><label>Front Expiration</label><FrontMonthPicker /></div>
+    <div className={k.picker}><label>Back Expiration</label><BackMonthPicker /></div>
    <HistoricalImpliedVolatilityChart />
  </div>
  );
@@ -2,7 +2,7 @@
 <html>
  <head>
    <title>Calendar Optimizer</title>
-    <link rel="stylesheet" src="./index.css"></link>
+    <link rel="stylesheet" href="./App.module.css"></link>
  </head>
  <body>
    <div id="app"></div>