From 93e45f79d6bfb35fd398d97f5bdff5f35f76b7c0 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Thu, 18 May 2023 23:37:35 +1000
Subject: [PATCH] Fixed loading gif

---
 src/components/Loading/Loading.css       | 48 ++++++++++++++++++++++++
 src/components/{ => Loading}/Loading.tsx |  2 +
 src/components/Loading/index.ts          |  1 +
 3 files changed, 51 insertions(+)
 create mode 100644 src/components/Loading/Loading.css
 rename src/components/{ => Loading}/Loading.tsx (94%)
 create mode 100644 src/components/Loading/index.ts

diff --git a/src/components/Loading/Loading.css b/src/components/Loading/Loading.css
new file mode 100644
index 0000000..b4cfa17
--- /dev/null
+++ b/src/components/Loading/Loading.css
@@ -0,0 +1,48 @@
+@font-face {
+    font-family: 'Press Start 2P';
+    src: url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');
+}
+
+.app__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.app__container .loading__text{
+    font-family: 'Press Start 2P', cursive;
+    color: var(--colorPrimary);
+}
+
+.app__container .loading__text{
+    font-family: 'Press Start 2P', cursive;
+    color: var(--colorPrimary);
+}
+
+.loading__gif {
+    width: 15%;
+}
+
+@media screen and (max-width: 767px) {
+    .loading__gif {
+        width: 35%;
+    }
+    .poke__logo {
+        width: 35vw;
+    }
+    .filter__container {
+        display: flex;
+        flex-direction: column;
+        width: 100vw;
+        align-items: center;
+        margin: 7vh 0 5vh 0;
+        gap: 2vh 2vw;
+        justify-content: center;
+    }
+    select, .filter__items>input{
+        width: 40vw;
+    }
+
+}
diff --git a/src/components/Loading.tsx b/src/components/Loading/Loading.tsx
similarity index 94%
rename from src/components/Loading.tsx
rename to src/components/Loading/Loading.tsx
index 4a62297..1fc32b7 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading/Loading.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './Loading.css';
+
 const Loading = () => {
   return (
     <div className="loading">
diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts
new file mode 100644
index 0000000..6214136
--- /dev/null
+++ b/src/components/Loading/index.ts
@@ -0,0 +1 @@
+export { default } from './Loading';