Tried out some styling

readme.md

@@ -0,0 +1,8 @@
+# todo
+
+- Date selector is crashing on mobile
+- find some ok styling for table
+- style other forms
+- style menu/buttons
+- add remove item button to table (upon pressing row?)
+- edit?!

src/App.tsx

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, useCallback, useMemo, useState } from "react";
+import { ChangeEventHandler, useCallback, useMemo } from "react";
 import translate from "./translate";
 import {
   CompanyInformation,
@@ -164,10 +164,18 @@ const App = () => {
 
   return (
     <>
-      <button onClick={() => setForm(forms.company)}>Redigera företag</button>
-      <button onClick={() => setForm(forms.customer)}>Redigera kund</button>
-      <button onClick={() => setForm(forms.receipt)}>Redigera kvitto</button>
-      <button onClick={() => setForm(forms.rows)}>Redigera rader</button>
+      <button className="button" onClick={() => setForm(forms.company)}>
+        Redigera företag
+      </button>
+      <button className="button" onClick={() => setForm(forms.customer)}>
+        Redigera kund
+      </button>
+      <button className="button" onClick={() => setForm(forms.receipt)}>
+        Redigera kvitto
+      </button>
+      <button className="button" onClick={() => setForm(forms.rows)}>
+        Redigera rader
+      </button>
       <button
         onClick={() =>
           generatePdf(

src/index.scss

@@ -1,9 +1,13 @@
 :root {
+  background-color: azure;
   margin: 0;
   padding: 0;
   width: 100vw;
   overflow: hidden;
   overflow-y: auto;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  font-weight: 600;
+
 }
 
 body { 
@@ -50,12 +54,49 @@ body {
   }
 }
 .receipt-rows-form-container {
-  background-color: burlywood;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
+  background-color: azure;
+  label {
+    text-transform: capitalize;
+  }
   input {
     width: 100%;
-    height: 1.5rem;
-    background-color: lightcyan;
+    height: 3rem;
+    min-height: 2rem;
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+    border-color: rgba($color: #000000, $alpha: 0);
+    text-indent: 1rem;
+    box-shadow: 5px 5px 0rem  lightseagreen;
+    background-color: lightgreen;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: 900;
+    &:focus {
+      outline: none;
+      outline-offset: 0;
+    }
+    &[type=number]::-webkit-inner-spin-button, 
+    &[type=number]::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+}
+  }
+}
+
+.button {
+  width: 100%;
+  height: 2rem;
+  min-height: 2rem;
+  margin-bottom: 1rem;
+  border-radius: 100rem;
+  border-color: rgba($color: #000000, $alpha: 0);
+  text-indent: 1rem;
+  box-shadow: 5px 5px 0rem  lightseagreen;
+  background-color: lightgreen;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  &:focus {
+    outline: none;
   }
 }

src/use-local-storage.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 
 export function parseWithDate(jsonString: string): any {
   const reDateDetect = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})/; // startswith: 2015-04-29T22:06:55
-  const resultObject = JSON.parse(jsonString, (key: any, value: any) => {
+  const resultObject = JSON.parse(jsonString, (_key: any, value: any) => {
     if (typeof value == "string" && reDateDetect.exec(value)) {
       return new Date(value);
     }

src/use-pdf.tsx

@@ -82,24 +82,6 @@ export type ReceiptRow = {
   vat: string;
 };
 
-const createReceiptRow = (
-  date: string,
-  description: string,
-  amount: string,
-  pricePerPiece: string,
-  total: string,
-  vatPercentage: string,
-  vat: string
-): ReceiptRow => ({
-  date,
-  description,
-  amount,
-  pricePerPiece,
-  total,
-  vatPercentage,
-  vat,
-});
-
 const tableHeaders: CellConfig[] = [
   {
     name: "date",