organised css and rewrote some css for more consistency

4 files changed, 86 insertions, 40 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 0f7ddf9..567a7d2 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -13,7 +13,9 @@ import AddNewItemForm from "./Form/AddNewItemForm";
 import RegisterItemForm from "./Form/RegisterItemForm";
 import MetaInfoForm from "./Form/MetaInfoForm";
 import ItemsDisplay from "./Display/ItemsDisplay";
-import SummaryDisplay from "./Display/SummaryDisplay"; const BillingPage = () => {
+import SummaryDisplay from "./Display/SummaryDisplay"; 
+
+const BillingPage = () => {
   const [savedItems, getSavedItems] = useState([]);
   const [registerFormVisibility, setRegisterFormVisibility] = useState(false);
 
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index eed0189..43aee39 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -23,7 +23,7 @@ input[type=number] {
 @mixin formPane {
   padding: 1.5rem;
   box-sizing: border-box;
-  border: 1px solid pink;
+  border: 1px solid $formPaneBorderColor;
 
   display: flex;
   flex-direction: column;
@@ -39,20 +39,32 @@ input[type=number] {
   font-size: 1.5rem;
 }
 
+@mixin formFlex($justify) {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: $justify;
+}
+
 input {
   box-sizing: border-box;
 }
 
+.wideInputBox, .selectInputBox {
+  width: 12rem;
+}
+
+.smallInputBox {
+  width: 5.5rem;
+}
+
 .formContainer {
   padding: 1rem 0;
   width: 100%;
 }
 
 .threePaneForm {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
+  @include formFlex(space-around);
 
   height: 22rem;
   width: 100%;
@@ -74,11 +86,27 @@ input {
   @include formWideLabel();
 }
 
-.wideInputBox, .selectInputBox {
-  width: 12rem;
+.twoPaneForm {
+  @include formFlex(space-around);
+
+  height: 22rem;
+  width: 100%;
 }
 
-.smallInputBox {
-  width: 6.5rem;
+.twoPaneForm div {
+  @include formPane();
+}
+
+.twoPaneForm .widePane {
+  width: 27rem;
 }
 
+.threePaneForm .smallPane {
+  width: 15rem;
+}
+
+.twoPaneForm label {
+  @include formWideLabel();
+}
+
+
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 357a026..a238d37 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -2,21 +2,7 @@
 
 $defFont: 'Quicksand', sans-serif;
 
-/* Experimental color scheme */
-/* light theme */
-/* 
-$defBG: #FFFFFF;
-$altBG: lightgray;
-$defFG: #000000;
-$altFG: #232627;
-$defLink: brown;
-$altLink: brown;
-
-$defShadow: 0px 0px 4px #232627;
-*/
-
 /* Inspired by Dracula */
-
 $defBG: #282A36;
 $altBG: #383A59;
 
@@ -28,14 +14,25 @@ $altFG: #FF79C6;
 
 $defLink: $defFG;
 $altLink: $altFG;
+
+$paneBorderColor: pink;
+$formPaneBorderColor: $paneBorderColor;
+
 $defBorderColor: lightgreen;
 $altBorderColor: pink;
 
-$tableDefBorderColor: lightblue;
-$tableAltBorderColor: #FF79C6;
-$tableDisabledBorderColor: gray;
+$underline0: gray;
+$underline1: lightblue;
+$underline2: #FF79C6;
+
+$labelUnderlineColor: $underline1;
+
+$tableDefBorderColor: $underline1;
+$tableAltBorderColor: $underline2;
+$tableDisabledBorderColor: $underline0;
+
+
 
-$labelUnderlineColor: lightblue;
 
 $warningColor: red;
 $warningBorderColor: $warningColor;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 6b1c244..8605e07 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -8,8 +8,22 @@
 
 @import "theme";
 
+/* 
+  TODO: check if full width elements show properly on other browsers
+  also style scrollbars
+*/
+
+/* scrollbar styling */
+::-webkit-scrollbar {
+  width: 1vw;
+}
 * {
-  font-family: $defFont
+  scrollbar-width: 0.1vw;  /* Firefox */
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
 }
 
 body {
@@ -18,6 +32,10 @@ body {
   margin: 0;
 }
 
+* {
+  font-family: $defFont
+}
+
 .root-content {
   width: 95%;
   margin: auto;
@@ -30,43 +48,44 @@ body {
   justify-content: space-between;
   height: 70vh;
 }
+
 .BillingPageFlex div {
   box-sizing: border-box;
-  border: 1px solid pink;
+  border: 1px solid $altBorderColor;
 }
 
-.FloatingMenuBG {
-  height: 100vh;
-  width: 100vw;
+.floatingMenuBG {
+  height: 100%;
+  width: 100%;
   position: fixed;
-  top: 0;
-  left: 0;
+  top: 0; left: 0;
   background-color: $floatingContainerBG;
 }
 
-.FloatingMenu {
-  position: fixed;
+.floatingMenu {
+  position: absolute;
 
   width: 95%;
   height: 70vh;
   box-sizing: border-box;
 
-
   left: 0; right: 0;
-  margin: auto;
+  margin: 0 auto;
   top: 15vh;
 
   background-color: $floatingBG;
   box-shadow: $floatingShadow;
   border: 1px solid $defBorderColor;
 
-
   padding: 1.5rem;
 }
 
 
+/*
+idk if im going that way
 @media only screen and (max-device-width: 480px) {
   .root-content {
     width: 95%;
   }
 }
+*/