From 25eded3e2bb67bac3f05ed8fd724359b20e3d81b Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Sun, 25 Jun 2023 21:35:53 -0700
Subject: loading cover page (hidden)

---
 .../react-app/src/components/LoadingCover.tsx      | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 extension/react-app/src/components/LoadingCover.tsx

(limited to 'extension/react-app/src/components/LoadingCover.tsx')

diff --git a/extension/react-app/src/components/LoadingCover.tsx b/extension/react-app/src/components/LoadingCover.tsx
new file mode 100644
index 00000000..a0f8f7a2
--- /dev/null
+++ b/extension/react-app/src/components/LoadingCover.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledDiv = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(
+    101.79deg,
+    #12887a 0%,
+    #87245c 32%,
+    #e12637 63%,
+    #ffb215 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 10;
+`;
+
+const StyledImg = styled.img`
+  /* add your styles here */
+`;
+
+const StyledDiv2 = styled.div`
+  width: 50%;
+  height: 5px;
+  background: white;
+  margin-top: 20px;
+`;
+
+interface LoadingCoverProps {
+  message: string;
+  hidden?: boolean;
+}
+
+const LoadingCover = (props: LoadingCoverProps) => {
+  return (
+    <StyledDiv style={{ display: props.hidden ? "none" : "inherit" }}>
+      <StyledImg src="continue.gif" alt="centered image" width="50%" />
+      <StyledDiv2></StyledDiv2>
+      <p>{props.message}</p>
+    </StyledDiv>
+  );
+};
+
+export default LoadingCover;
-- 
cgit v1.2.3-70-g09d2

