From fbe8ceb408d0b95bca6359bd934fa5746489745b Mon Sep 17 00:00:00 2001
From: love98 <liaoliaocaicai@163.com>
Date: Fri, 1 Dec 2023 12:29:05 +0800
Subject: [PATCH] feat: Add styling to HistoryEvents and ScanningPage

---
 src/pages/HistoryEvents.scss |  3 +++
 src/pages/HistoryEvents.tsx  |  4 +++-
 src/pages/ScanningPage.scss  | 32 ++++++++++++++++++++++++++------
 src/pages/ScanningPage.tsx   | 18 ++++++++++++++----
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/pages/HistoryEvents.scss b/src/pages/HistoryEvents.scss
index e69de29..9a66071 100644
--- a/src/pages/HistoryEvents.scss
+++ b/src/pages/HistoryEvents.scss
@@ -0,0 +1,3 @@
+.HistoryEventsContainer {
+  --ion-item-background: 0;
+}
\ No newline at end of file
diff --git a/src/pages/HistoryEvents.tsx b/src/pages/HistoryEvents.tsx
index 5161206..ee4d005 100644
--- a/src/pages/HistoryEvents.tsx
+++ b/src/pages/HistoryEvents.tsx
@@ -3,6 +3,8 @@ import { Event } from "../context";
 import { getHistoryEvents } from "../apis/user";
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/react";
 import EventCardList from "../components/EventCardList";
+import "./HistoryEvents.scss";
+
 const HistoryEvents = () => {
   const [historyEvents, setHistoryEvents] = useState<Event[] | null>(null);
   useEffect(() => {
@@ -23,7 +25,7 @@ const HistoryEvents = () => {
           <IonTitle>历史活动</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent className="HistoryEventsContainer">
         <IonHeader translucent={false} collapse="condense">
           <IonToolbar>
             <IonTitle size="large">历史活动</IonTitle>
diff --git a/src/pages/ScanningPage.scss b/src/pages/ScanningPage.scss
index 3e3df2c..1e20618 100644
--- a/src/pages/ScanningPage.scss
+++ b/src/pages/ScanningPage.scss
@@ -2,14 +2,14 @@
   .goBackButton {
     width: 30px;
     height: 30px;
-    border-radius: 50%;
-    background-color: white;
+    // border-radius: 50%;
+    // background-color: #fff, 0.8;
     position: fixed;
-    top: 8%;
-    left: 15px;
+    top: 2%;
+    left: 5%;
     z-index: 10;
     .goBackButtonTop {
-      background-color: grey;
+      background-color: rgb(83, 83, 83);
       height: 3px;
       width: 20px;
       position: relative;
@@ -19,7 +19,7 @@
       transform: rotate(-0.1turn);
     }
     .goBackButtonBottom {
-      background-color: grey;
+      background-color: rgb(83, 83, 83);
       height: 3px;
       width: 20px;
       position: relative;
@@ -33,6 +33,17 @@
 .scannerContainer {
   display: flex;
   align-items: center;
+  .scanningAnimaionContainer {
+    .scanningAnimation {
+      position: fixed;
+      width: 100%;
+      height: 70px;
+      z-index: 12;
+      // top: -70px;
+      animation: scanningAnimation 5s linear infinite normal;
+      background: linear-gradient(#3ee49100, 60%, #3ee491);
+    }
+  }
   video {
     width: 100%;
     height: calc(100vh);
@@ -40,4 +51,13 @@
     // height: calc(100vh - 50px);
     object-fit: cover;
   }
+}
+
+@keyframes scanningAnimation {
+  0% {
+    top: -70px;
+  }
+  100% {
+    top: calc(100% + 100px);
+  }
 }
\ No newline at end of file
diff --git a/src/pages/ScanningPage.tsx b/src/pages/ScanningPage.tsx
index cfc8b68..11e4889 100644
--- a/src/pages/ScanningPage.tsx
+++ b/src/pages/ScanningPage.tsx
@@ -5,13 +5,20 @@ import { useEffect, useState } from "react"
 import { eventCheckIn } from "../apis/user";
 import { useZxing } from "react-zxing";
 import { Toast } from "@capacitor/toast";
+import { StatusBar } from "@capacitor/status-bar";
 
 const ScanningPage = () => {
 	const [result, setResult] = useState("");
 	const router = useIonRouter();
+	
+	// Hide status bar and tab bar to fit full screen
 	useEffect(() => {
+		StatusBar.hide();
 		document.getElementById("app-tab-bar")?.style.setProperty("opacity", "0");
-		return () => {document.getElementById("app-tab-bar")?.style.removeProperty("opacity")};
+		return () => {
+			document.getElementById("app-tab-bar")?.style.removeProperty("opacity");
+			StatusBar.show();
+		};
 	}, [])
 	const { ref } = useZxing({
 		onDecodeResult(result) {
@@ -46,9 +53,12 @@ const ScanningPage = () => {
 						<div className="goBackButtonTop"></div>
 						<div className="goBackButtonBottom"></div>
 					</div>
-					<div className="scannerContainer">
-						<video ref={ref} />
-					</div>
+				</div>
+				<div className="scanningAnimaionContainer">
+					<div className="scanningAnimation" />
+				</div>
+				<div className="scannerContainer">
+					<video ref={ref} />
 				</div>
 			</IonContent>
 		</IonPage>