refactor: reomve unnecessary stylesheet

infra/staff/src/App.css

@@ -1,36 +1,14 @@
 .container {
-    position: relative; /* Ensure the parent is relatively positioned */
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  max-width: 1200px;
+  height: auto;
+  align-items: center;
+  margin: 0 auto;
 }
 
 .center-table {
     display: table;
 }
 
-.input-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.horizontal-group {
-    position: absolute; /* Use absolute positioning */
-    top: 32px; /* 32px below the top of the page */
-    left: 32px; /* 32px from the leftmost edge of the page */
-    right: 32px;
-    display: flex;
-    align-items: center; /* Align items vertically centered */
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
-    height: 104px;
-    width: 1375px;
-    border-radius: 10px;
-}
-
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
@@ -85,30 +63,23 @@
     justify-content: center;
     align-items: center;
 }
-.container {
-    position: relative; /* Ensure the parent is relatively positioned */
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    display: flex;
-    flex-direction: column; /* Add this */
-    justify-content: center; /* Center vertically */
-    align-items: center; /* Center horizontally */
-}
 
 .input-form {
     display: flex;
     flex-direction: column;
     align-items: center;
-    z-index: 1; /* Ensure form is on top */
+    justify-content: space-around;
 }
 
 .horizontal-group {
     display: flex;
     align-items: center;
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
+    background-color: #fcfcfc;
     padding: 20px; /* Add padding around content */
     border-radius: 10px;
+    margin-top: 90px;
+    width: 1200px;
+    justify-content: center;
 }
 
 .fetch-button-container button {
@@ -124,21 +95,10 @@
 }
 
 .link-text {
-    display: flex;
-    align-items: center;
-    padding: 0 16px; /* Add padding for better appearance */
     text-decoration: none; /* Remove underline */
     color: inherit; /* Inherit color from parent */
     font-weight: bold; /* Make the text bold */
-    font-size: 40px;
-}
-
-.text-field-token {
-    margin-left: 70px !important; /* Adjust margin for Token field */
-}
-
-.text-field-email {
-    margin-left: 50px !important; /* Adjust margin for Email field */
+    font-size: 30px;
 }
 
 .center-content {
@@ -181,20 +141,11 @@
     margin-bottom: 20px; /* Add space between form and tabs */
 }
 
-.horizontal-group {
-    display: flex;
-    align-items: center;
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
-    padding: 20px; /* Add padding around content */
-    border-radius: 10px;
-}
-
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
     border: none;
-    width: 199px;
+    width: 150px;
     height: 56px;
 }
 
@@ -313,10 +264,6 @@
     min-height: 100vh;
 }
 
-.input-form {
-    margin-bottom: 16px;
-}
-
 .content-container {
     display: flex;
     flex-direction: column;
@@ -325,11 +272,6 @@
     margin-top: 150px;
 }
 
-.horizontal-group {
-    display: flex;
-    align-items: center;
-}
-
 .fetch-button-container {
     margin-right: 10px;
     margin-left: 10px;
@@ -345,3 +287,36 @@
     font-weight: bold;
     margin-top: 16px;
 }
+
+/* Mobile */
+@media screen and (max-width: 475px) {
+  .link-text {
+    font-size: 25px;
+    text-align: center;
+  }
+  .input-form {
+    max-width: 400px;
+    align-items: center;
+    gap: 20px;
+    flex-direction: row;
+  }
+  .text-field-token {
+
+  }
+  .horizontal-group {
+    width: 500px;
+    flex-direction: column;
+  }
+}
+
+@media screen and (max-width: 576px) {
+
+}
+
+@media screen and (max-width: 900px) {
+
+}
+
+@media screen and (max-width: 1200px) {
+
+}

infra/staff/src/App.tsx

@@ -234,6 +234,7 @@ const App: React.FC = () => {
 
     return (
         <div className="container">
+        <div>
             <form className="input-form" onKeyPress={handleKeyPress}>
                 <div className="horizontal-group">
                     <a
@@ -254,7 +255,7 @@ const App: React.FC = () => {
                         }}
                         size="medium"
                         className="text-field-token"
-                        style={{ width: "350px" }}
+                        style={{ maxWidth: "parent"  }} 
                     />
                     <TextField
                         label="Email"
@@ -265,7 +266,7 @@ const App: React.FC = () => {
                         }}
                         size="medium"
                         className="text-field-email"
-                        style={{ width: "350px" }}
+                        style={{ width: "parent" }}
                     />
                     <div className="fetch-button-container">
                         <Button
@@ -285,10 +286,15 @@ const App: React.FC = () => {
                     </div>
                 </div>
             </form>
+            </div>
             <div className="content-container">
                 {loading ? (
                     <CircularProgress
-                        sx={{ color: "black", marginTop: "200px" }}
+                        sx={{ 
+                          color: "black", 
+                          top: "200px",
+                          position: "fixed"
+                        }}
                     />
                 ) : error ? (
                     <div className="error-message">{error}</div>