From a138b6d0ca318292db2229e98a748dfdceeed9f1 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 17 Nov 2023 16:02:08 +0800
Subject: [PATCH] Polish styling and scaling

---
 src/App.tsx    |  1 -
 src/styles.css | 20 --------------------
 src/styles.tsx | 16 +++++++---------
 3 files changed, 7 insertions(+), 30 deletions(-)
 delete mode 100644 src/styles.css

diff --git a/src/App.tsx b/src/App.tsx
index 2f1b2ae..69770e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,6 @@ import store from "./Components/Plugins/Redux/Store/Store";
 const queryClient = new QueryClient();
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import "./styles.css";
 const router = createHashRouter([
   {
     path: "/",
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index b07fb83..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@keyframes anvil {
-  0% {
-    transform: scale(1) translateY(0px);
-    opacity: 0;
-    box-shadow: 0 0 0 rgba(241, 241, 241, 0);
-  }
-  1% {
-    transform: scale(0.96) translateY(10px);
-    opacity: 0;
-    box-shadow: 0 0 0 rgba(241, 241, 241, 0);
-  }
-  100% {
-    transform: scale(1) translateY(0px);
-    opacity: 1;
-    box-shadow: 0 0 500px rgba(241, 241, 241, 0);
-  }
-}
-.popup-content {
-  -webkit-animation: anvil 0.3s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;
-}
diff --git a/src/styles.tsx b/src/styles.tsx
index ba247b3..61d5b75 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -42,19 +42,19 @@ const styles: { [key: string]: React.CSSProperties } = {
     fontWeight: "bold",
   },
   text_XL: {
-    fontSize: "clamp(1vw, 4rem, 2vw)",
+    fontSize: "clamp(2rem, 4rem, 8rem)",
   },
   text_L: {
-    fontSize: "clamp(1vw, 2rem, 2vw)",
+    fontSize: "clamp(1.5rem, 3rem, 6rem)",
   },
   text_M: {
-    fontSize: "clamp(1vw, 1rem, 2vw)",
+    fontSize: "clamp(1rem, 2rem, 4rem)",
   },
   text_S: {
-    fontSize: "clamp(1vw, 0.5rem, 2vw)",
+    fontSize: "clamp(0.5rem, 1rem, 2rem)",
   },
   text_XS: {
-    fontSize: "clamp(1vw, 0.2rem, 2vw)",
+    fontSize: "clamp(0.2rem, 0.5rem, 1rem)",
   },
   flex_row: {
     display: "flex",
@@ -70,10 +70,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     fontSize: "clamp(1vw, 1rem, 2vw)",
     background: "none",
     borderRadius: 8,
-    maxWidth: "30vw",
-    minWidth: "15vw",
-    minHeight: "5vh",
-    maxHeight: "10vh",
+    maxWidth: "128px",
+    minWidth: "100%",
     marginTop: 16,
   },
 };