some styling

lightning/src/components/AccordionTest.tsx

@@ -27,19 +27,33 @@ export default function AccordionTest() {
     const [stations, { setStationsRequest }] = useStationsContext();
 
     return (
-        <Show when={stations()}>
-            <h1>Find Stations</h1>
-
+        <Show when={stations()} fallback="<p>Loading Stations...</p>">
             <ErrorBoundary fallback={<p>pretty list broke</p>}>
-                <div class="w-full max-w-md p-2 mx-auto bg-black/90 rounded-2xl shadow-2xl max-h-screen overflow-scroll">
                 <Accordion class="space-y-2" defaultValue={stations()[0]} toggleable>
                     <For each={stations()} fallback={<div>Loading...</div>}>
                         {(station) => (<AccordionItem value={station}>
                             <AccordionHeader>
                                 <AccordionButton
                                     as="div"
-                                        class="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-yellow-700 bg-gray-900 rounded-lg hover:bg-gray-800 focus:outline-none focus-visible:ring focus-visible:yellow-600 focus-visible:ring-opacity-75 shadow-2xl"
-                                    >
+                                    class="
+                                        flex
+                                        justify-between
+                                        w-full
+                                        px-4
+                                        py-2
+                                        text-sm
+                                        font-medium
+                                        text-left
+                                        text-yellow-700
+                                        bg-gray-900
+                                        rounded-lg
+                                        hover:bg-gray-800
+                                        focus:outline-none
+                                        focus-visible:ring
+                                        focus-visible:yellow-600
+                                        focus-visible:ring-opacity-75
+                                        shadow-2xl
+                                        ">
                                     {({ isSelected }) => (<>
                                         <span>{station.Loc.Stations[0].Name}</span>
                                         <div>
@@ -50,7 +64,13 @@ export default function AccordionTest() {
                                     </>)}
                                 </AccordionButton>
                             </AccordionHeader>
-                                <AccordionPanel class="px-4 pt-4 pb-2 text-sm text-gray-500">
+                            <AccordionPanel class="
+                                    px-4
+                                    pt-4
+                                    pb-2
+                                    text-sm
+                                    text-gray-500
+                                    ">
                                 <ul>
                                     <li>Distance: {station.Dist}</li>
                                     <li>{station.Loc.StreetAddress}</li>
@@ -61,7 +81,6 @@ export default function AccordionTest() {
                         </AccordionItem>)}
                     </For>
                 </Accordion>
-                </div>
             </ErrorBoundary>
         </Show>
     ) as JSX.Element;

lightning/src/components/map/MapScatLayer.tsx

@@ -17,7 +17,7 @@ export default function MapScatLayer(props: any) {
 
     const [scats, setScats] = createSignal([]);
 
-    function getCoords(stations) {
+    async function getCoords(stations) {
         if (stations() === undefined) { 
             return
         } else if (stations.loading) {
@@ -27,6 +27,7 @@ export default function MapScatLayer(props: any) {
         } else {
             let buf: ScatData[] = [];
             for (const station of stations()) {
+                // long lat
                 buf.push({ coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]] })
             };
             return buf;

lightning/src/root.css

@@ -16,3 +16,34 @@ a {
     margin-right: 1rem;
 }
 
+main {
+    max-height: 90vh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    background-color: rgba(0,0,0,0.9);
+    border-radius: 20px;
+    padding: 10px;
+    margin-top: 1rem;
+    box-shadow: 5px 5px 15px 10px black;
+}
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px #333; 
+  border-radius: 10px;
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #666; 
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #999; 
+}

lightning/src/routes/stations.tsx

@@ -19,9 +19,9 @@ export default function Stations() {
     setStationsRequest(TEST_PACKET);
 
     return (
-        <>
+        <main>
             <Title>Ride the Lightning</Title>
             <AccordionTest />
-        </>
+        </main>
     ) as JSX.Element;
 };