From 20b48b0003f198ef51eb982735526011f59c511d Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sun, 29 Aug 2021 10:46:06 +0530
Subject: styled SubmitButton and making it disappear when invalid

---
 src/components/Display/Display.scss       |  8 ++++++++
 src/components/Display/SummaryDisplay.tsx |  8 +++++---
 src/components/Pages/BillingPage.scss     | 20 ++++++++++++++++++++
 src/components/Pages/BillingPage.tsx      |  1 +
 src/styles/global.scss                    | 16 ----------------
 5 files changed, 34 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Pages/BillingPage.scss

diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 8be6c4e..214cb18 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -58,10 +58,18 @@
 }
 
 .SummaryDisplay {
+  position: relative;
   width: 30%;
   padding: 0.5rem 2rem;
 }
 
+.SummaryDisplay .SubmitButton {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 0.3rem;
+}
+
 .SummaryDisplay h1 {
   font-size: 3rem;
   margin: 0.5rem -1.5rem;
diff --git a/src/components/Display/SummaryDisplay.tsx b/src/components/Display/SummaryDisplay.tsx
index 5d1589e..37ba077 100644
--- a/src/components/Display/SummaryDisplay.tsx
+++ b/src/components/Display/SummaryDisplay.tsx
@@ -92,9 +92,11 @@ const SummaryDisplay: React.FC<props> = (props) => {
         </tbody>
       </table>
 
-      <button onClick={() => props.setShowSubmitMenu(true)}>
-        Submit
-      </button>
+      {props.items.length > 0 &&
+        <button className={"SubmitButton"} onClick={() => props.setShowSubmitMenu(true)}>
+          Submit (experimental)
+        </button>
+      }
     </div>
   );
 }
diff --git a/src/components/Pages/BillingPage.scss b/src/components/Pages/BillingPage.scss
new file mode 100644
index 0000000..f359df1
--- /dev/null
+++ b/src/components/Pages/BillingPage.scss
@@ -0,0 +1,20 @@
+@import "./../../styles/theme";
+
+.BillingPageFlex div {
+  box-sizing: border-box;
+  border: 1px solid $border1;
+}
+
+.BillingPageFlex {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 27rem;
+}
+
+@media only screen and (max-device-width: 480px) {
+  .BillingPageFlex {
+    flex-direction: column;
+    height: 35rem;
+  }
+}
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index c1d30a5..e065cbc 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -7,6 +7,7 @@
 */
 
 import React, { useState, useEffect } from "react";
+import "./BillingPage.scss";
 import { Item, Person, Transport/*, Invoice*/ } from "../../interfaces";
 import axios from "axios";
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3d077f6..769f07a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -57,18 +57,6 @@ body {
   max-width: 1920px;
 }
 
-.BillingPageFlex {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 27rem;
-}
-
-.BillingPageFlex div {
-  box-sizing: border-box;
-  border: 1px solid $border1;
-}
-
 .floatingMenuBG {
   height: 100%;
   width: 100%;
@@ -100,8 +88,4 @@ body {
   
     padding: 0.5rem;
   }
-  .BillingPageFlex {
-    flex-direction: column;
-    height: 35rem;
-  }
 }
-- 
cgit v1.2.3