From 112ac1b3dd8fdbef2d8dc7f89487809cd1906e01 Mon Sep 17 00:00:00 2001
From: torof <scottpanam@protonmail.com>
Date: Sat, 20 Jul 2024 10:45:42 +0900
Subject: [PATCH 1/3] style(responsive widget): changed of styles of swing
 widget to be responsive, removed tooltip

fix #139
---
 src/app/app/[tab]/AppTabs.tsx       | 10 ----------
 src/components/app/swap/AppSwap.css | 18 ++++++++++++++++++
 src/components/app/swap/AppSwap.tsx |  5 ++++-
 3 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 src/components/app/swap/AppSwap.css

diff --git a/src/app/app/[tab]/AppTabs.tsx b/src/app/app/[tab]/AppTabs.tsx
index 88b84224..ae58292a 100644
--- a/src/app/app/[tab]/AppTabs.tsx
+++ b/src/app/app/[tab]/AppTabs.tsx
@@ -55,16 +55,6 @@ const _AppTabs: FC = () => {
         </TabsTrigger>
         <TabsTrigger value="staking">
           Staking
-          <div
-            className={twMerge(
-              "absolute right-[20%] -top-[2rem] z-20 flex items-center justify-center gap-1 rounded-xl bg-gradient-to-bl from-[#20456c]/50 to-[red] px-[0.47rem] py-[0.04rem] text-center text-[0.8rem] font-bold text-white",
-              currentTab === "staking" && "opacity-50 hover:opacity-100",
-            )}
-          >
-            <i className="ri-fire-fill text-x animate-pulse" />
-            Hot
-            <i className="ri-arrow-down-s-fill absolute -bottom-[1.33rem] left-1.5 -z-10 text-3xl text-[#20456c]/90"></i>
-          </div>
         </TabsTrigger>
         <TabsTrigger
           value="pre-mining"
diff --git a/src/components/app/swap/AppSwap.css b/src/components/app/swap/AppSwap.css
new file mode 100644
index 00000000..63813fe1
--- /dev/null
+++ b/src/components/app/swap/AppSwap.css
@@ -0,0 +1,18 @@
+.app-swap-container {
+  width: 90vw;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .app-swap-container {
+    width: 95vw;
+  }
+}
+
+@media (max-width: 480px) {
+  .app-swap-container {
+    width: 100vw;
+    padding: 0 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/app/swap/AppSwap.tsx b/src/components/app/swap/AppSwap.tsx
index 9262870d..f377e1b0 100644
--- a/src/components/app/swap/AppSwap.tsx
+++ b/src/components/app/swap/AppSwap.tsx
@@ -1,8 +1,11 @@
 import '@swing.xyz/ui/theme.css';
+import "./AppSwap.css";
 import { Swap } from '@swing.xyz/ui';
 
 export function AppSwap() {
-  return <div className="w-[800px]">
+  return (
+    <div className="app-swap-container">
       <Swap projectId="swing-bridge" environment='production' />
     </div>
+  );
 }

From fa96dbaff965dcd780b4f5db45d0fef1ea774dc8 Mon Sep 17 00:00:00 2001
From: torof <scottpanam@protonmail.com>
Date: Sat, 20 Jul 2024 15:28:09 +0900
Subject: [PATCH 2/3] style(tailwind): remove .css and move to tailwind

---
 src/components/app/swap/AppSwap.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/app/swap/AppSwap.tsx b/src/components/app/swap/AppSwap.tsx
index f377e1b0..21c14bc2 100644
--- a/src/components/app/swap/AppSwap.tsx
+++ b/src/components/app/swap/AppSwap.tsx
@@ -1,11 +1,10 @@
 import '@swing.xyz/ui/theme.css';
-import "./AppSwap.css";
 import { Swap } from '@swing.xyz/ui';
 
 export function AppSwap() {
   return (
-    <div className="app-swap-container">
+    <div className="w-[90vw] max-w-[800px] mx-auto sm:w-[95vw] xs:w-screen xs:px-2.5">
       <Swap projectId="swing-bridge" environment='production' />
     </div>
   );
-}
+}
\ No newline at end of file

From 44ffa0b9d3aad95c4572ecee76b582c02fdfc6da Mon Sep 17 00:00:00 2001
From: Torof <dev.solidity@proton.me>
Date: Mon, 22 Jul 2024 13:50:56 +0900
Subject: [PATCH 3/3] Delete src/components/app/swap/AppSwap.css

---
 src/components/app/swap/AppSwap.css | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 src/components/app/swap/AppSwap.css

diff --git a/src/components/app/swap/AppSwap.css b/src/components/app/swap/AppSwap.css
deleted file mode 100644
index 63813fe1..00000000
--- a/src/components/app/swap/AppSwap.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.app-swap-container {
-  width: 90vw;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-@media (max-width: 768px) {
-  .app-swap-container {
-    width: 95vw;
-  }
-}
-
-@media (max-width: 480px) {
-  .app-swap-container {
-    width: 100vw;
-    padding: 0 10px;
-  }
-}
\ No newline at end of file