Started on styling

Wholteza · Jul 1, 2023 · 2bd47ed · 2bd47ed
1 parent 32e70e4
commit 2bd47ed
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 36 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -63,10 +63,10 @@ const testReceiptInformation: ReceiptInformation = {
 
 const testReceiptRow: ReceiptRowFormModel = {
   date: new Date(Date.now()),
-  amount: 1,
   description: "",
   pricePerPieceVatIncluded: 0,
   vatPercentage: 25,
+  amount: 1,
 };
 const forms = {
   company: "company",
@@ -166,8 +166,15 @@ const App = () => {
       <button className="button" onClick={() => setForm(forms.rows)}>
         Redigera rader
       </button>
-      <button onClick={handleOnClickGeneratePdf}>Generera PDF</button>
-      <input type="file" onChange={onFileSelected} name="arst" />
+      <button className="button" onClick={handleOnClickGeneratePdf}>
+        Generera PDF
+      </button>
+      <input
+        className="button "
+        type="file"
+        onChange={onFileSelected}
+        name="arst"
+      />
 
       {form === forms.company ? (
         <div className="company-information-form-container">
@@ -195,8 +202,13 @@ const App = () => {
 
       {form === forms.rows ? (
         <div className="receipt-rows-form-container">
-          {currentReceiptRowForm}
-          <button onClick={handleOnAddRow}>Lägg till</button>
+          <div className="inputs">
+            {currentReceiptRowForm}
+            <button className="button primary" onClick={handleOnAddRow}>
+              Lägg till
+            </button>
+          </div>
+
           {receiptRows.map((row, index) => (
             <div>
               {Intl.DateTimeFormat("sv-SE").format(new Date(row.date))},{" "}

diff --git a/src/index.scss b/src/index.scss
@@ -1,12 +1,13 @@
 :root {
-  background-color: azure;
+  background-color: #F8F7FF;
   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;
+  color: #333
 
 }
 
@@ -57,46 +58,73 @@ body {
   padding: 1rem;
   display: flex;
   flex-direction: column;
-  background-color: azure;
-  label {
-    text-transform: capitalize;
+  align-items: center;
+
+
+  .inputs{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 250px;
+    label {
+      text-transform: capitalize;
+      position: relative;
+      top: 15px;
+      left: 15px;
+      color: #FFD8BE;
+      filter: brightness(50%);
+    }
+    input {
+      flex: 1;
+      height: 3rem;
+      min-height: 2rem;
+      margin-bottom: 0.5rem;
+      border-radius: 0.5rem;
+      border-color: rgba($color: #000000, $alpha: 0);
+      text-indent: 1rem;
+      box-shadow: 5px 5px 0rem  #FFD8BE;
+      background-color: #FFEEDD;
+      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+      font-weight: 900;
+      color: #333;
+      &:focus {
+        outline: none;
+        outline-offset: 0;
+      }
+      &[type=number]::-webkit-inner-spin-button, 
+      &[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
   }
-  input {
-    width: 100%;
-    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;
+  width: 95%;
+  height: 3rem;
   min-height: 2rem;
   margin-bottom: 1rem;
-  border-radius: 100rem;
+  border-radius: 0.5rem;
   border-color: rgba($color: #000000, $alpha: 0);
   text-indent: 1rem;
-  box-shadow: 5px 5px 0rem  lightseagreen;
-  background-color: lightgreen;
+  box-shadow: 5px 5px 0rem  #FFD8BE;
+  color: #333;
+  font-weight: 600;
+  background-color: #FFEEDD;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   &:focus {
     outline: none;
   }
-}
+  &.primary {
+    background-color: #B8B8FF;
+    box-shadow: 5px 5px 0rem  #9381FF;
+  }
+
+}
+// #9381FF
+// #B8B8FF
+// #F8F7FF
+// #FFEEDD
+// #FFD8BE
diff --git a/src/translate.ts b/src/translate.ts
@@ -17,7 +17,8 @@ const dictionary: { [key: string]: { [key: string]: string } } = {
     date: "Datum",
     amount: "Antal",
     description: "Beskrivning",
-    pricePerPiece: "À-pris (exkl. moms)",
+    pricePerPiece: "À-pris (inkl. moms)",
+    pricePerPieceVatIncluded: "À-pris (inkl. moms)",
     vatPercentage: "Moms %",
     vat: "Moms (SEK)",
     total: "Total (inkl. moms)",