From ec98dd65df921c3097d5f9fda0468db46d1fffed Mon Sep 17 00:00:00 2001
From: Aaron Pepper <pepdog@gmail.com>
Date: Mon, 9 Dec 2024 16:57:59 +0700
Subject: [PATCH] improved responsiveness

---
 .../SoSMainSidebar/MainTimer/styles.ts        | 40 +++++++++++++++++++
 .../SoSMainSidebar/SuperCharger/styles.ts     | 22 +++++++++-
 .../sections/SoSMainSidebar/styles.ts         |  5 ---
 .../ShellOfSecrets/SoSMainModal/styles.ts     |  3 +-
 4 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/MainTimer/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/MainTimer/styles.ts
index b275ba079..276a61622 100644
--- a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/MainTimer/styles.ts
+++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/MainTimer/styles.ts
@@ -7,6 +7,22 @@ export const SectionLabel = styled('div')`
     font-weight: 700;
     line-height: 129.623%;
     text-transform: uppercase;
+
+    @media (max-height: 1024px) {
+        font-size: 18px;
+    }
+
+    @media (max-height: 900px) {
+        font-size: 15px;
+    }
+
+    @media (max-width: 1350px) {
+        font-size: 18px;
+    }
+
+    @media (max-width: 1200px) {
+        font-size: 15px;
+    }
 `;
 
 export const TopBar = styled('div')`
@@ -68,10 +84,34 @@ export const Number = styled('div')`
     @media (max-height: 900px) {
         font-size: 100px;
     }
+
+    @media (max-width: 1350px) {
+        font-size: 120px;
+    }
+
+    @media (max-width: 1200px) {
+        font-size: 100px;
+    }
 `;
 
 export const Label = styled('div')`
     font-size: 38px;
     line-height: 100%;
     text-transform: uppercase;
+
+    @media (max-height: 1024px) {
+        font-size: 30px;
+    }
+
+    @media (max-height: 900px) {
+        font-size: 25px;
+    }
+
+    @media (max-width: 1350px) {
+        font-size: 30px;
+    }
+
+    @media (max-width: 1200px) {
+        font-size: 25px;
+    }
 `;
diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/SuperCharger/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/SuperCharger/styles.ts
index b20519980..d9b809502 100644
--- a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/SuperCharger/styles.ts
+++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/SuperCharger/styles.ts
@@ -30,6 +30,10 @@ export const SectionLabel = styled('div')`
     line-height: 129.623%;
     text-transform: uppercase;
     white-space: nowrap;
+
+    @media (max-width: 1300px) {
+        font-size: 18px;
+    }
 `;
 
 export const LineRight = styled('div')`
@@ -46,15 +50,29 @@ export const FormWrapper = styled('form')`
     background-image: url(${backgroundImage});
     background-size: cover;
 
-    padding: 0 30px 0 10px;
+    padding: 0 30px 0px 10px;
+
     display: flex;
-    gap: 20px;
     justify-content: space-between;
     align-items: center;
+    gap: 20px;
 
     svg {
         flex-shrink: 0;
     }
+
+    @media (max-width: 1300px) {
+        padding: 0 30px;
+
+        svg {
+            display: none;
+        }
+    }
+
+    @media (max-width: 1220px) {
+        padding: 20px;
+        flex-wrap: wrap;
+    }
 `;
 
 export const InputField = styled('input')`
diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/styles.ts
index 7c6652e8d..d474bfba3 100644
--- a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/styles.ts
+++ b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/styles.ts
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled('div')`
-    max-width: 532px;
     width: 100%;
     height: 100%;
 
@@ -12,10 +11,6 @@ export const Wrapper = styled('div')`
     position: relative;
 
     overflow-y: auto;
-
-    @media (max-width: 1500px) {
-        max-width: 480px;
-    }
 `;
 
 export const BGImage1 = styled('img')`
diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/styles.ts
index 2401a71ef..8b69feb14 100644
--- a/src/containers/main/ShellOfSecrets/SoSMainModal/styles.ts
+++ b/src/containers/main/ShellOfSecrets/SoSMainModal/styles.ts
@@ -95,7 +95,8 @@ export const ContentLayer = styled('div')`
     position: relative;
     z-index: 3;
 
-    display: flex;
+    display: grid;
+    grid-template-columns: minmax(350px, 532px) minmax(643px, 1fr);
     gap: 40px;
 
     width: 100%;