From 9c5a537b5ff3ed7302b007828e2adae5b4542030 Mon Sep 17 00:00:00 2001
From: bluecco <bluecco@gmail.com>
Date: Fri, 15 Nov 2024 12:08:47 +0100
Subject: [PATCH] chore: refactor css

---
 src/app/globals.css                           | 98 -------------------
 src/app/page.tsx                              |  2 +-
 src/components/Header.tsx                     |  6 +-
 src/components/StarknetDapp.tsx               |  8 +-
 src/components/connect/Connect.tsx            |  2 +-
 src/components/sections/AccountStatus.tsx     |  2 +-
 src/components/sections/ERC20/AddToken.tsx    |  2 +-
 .../sections/Network/AddNetwork.tsx           |  2 +-
 .../sections/Network/ChangeNetwork.tsx        |  2 +-
 src/components/sections/SignMessage.tsx       |  2 +-
 10 files changed, 14 insertions(+), 112 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index a715cc3..d3e793f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -143,43 +143,12 @@ button[type="submit"] {
   text-align: center;
 }
 
-.demo-dapp-container {
-  height: 100vh;
-  flex-direction: column;
-}
-
-.demo-dapp-container > div {
-  height: 100%;
-}
-
-/* Small screens (smartphones) - Portrait and Landscape */
-@media only screen and (max-width: 767px) {
-  .demo-dapp-container {
-    padding: 20px;
-  }
-  /* Your mobile styles here */
-}
-
-/* Extra small screens (smaller smartphones) */
-@media only screen and (max-width: 480px) {
-  /* Your styles for very small devices */
-  .demo-dapp-container {
-    padding: 16px;
-  }
-}
-
 /* Header */
 
 .header-container {
   padding: 32px 116px 16px;
 }
 
-.header-logo-container {
-  gap: 12px;
-  align-items: center;
-  width: 100%;
-}
-
 .header-profile-container {
   background-color: #14161c;
   border-radius: 12px;
@@ -187,17 +156,6 @@ button[type="submit"] {
   padding: 16px;
 }
 
-.header-balance {
-  align-items: center;
-  gap: 8px;
-}
-
-.header-address {
-  cursor: pointer;
-  align-items: center;
-  gap: 8px;
-}
-
 .header-title {
   font-weight: 400;
   font-size: 20px;
@@ -250,15 +208,6 @@ button[type="submit"] {
   width: 17px;
 }
 
-.get-started-container {
-  gap: 120px;
-  padding: 56px 116px;
-}
-
-.get-started-container > div {
-  gap: 10px;
-}
-
 .get-started-title {
   font-size: 48px;
   font-weight: 600;
@@ -309,13 +258,6 @@ button[type="submit"] {
   gap: 80px;
 }
 
-.status-grid-item {
-  border-radius: 4px;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-}
-
 .status-grid-item-title {
   font-size: 14px;
   font-weight: 500;
@@ -363,23 +305,10 @@ button[type="submit"] {
   height: 100%;
 }
 
-.sections-list {
-  gap: 12px;
-  flex: 0.5;
-}
-
 /* Section list - End */
 
 /* Connection -- Start */
 
-.available-connector {
-  width: 100%;
-  padding: 12px;
-  background-color: #262933;
-  border-radius: 12px;
-  gap: 20px;
-}
-
 .starknet-react-connectors-title {
   font-size: 16px;
   font-weight: 500;
@@ -389,30 +318,3 @@ button[type="submit"] {
   text-decoration-skip-ink: none;
 }
 /* Connection -- End */
-
-/* Sign message */
-.sign-message-form {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 4;
-  gap: 12px;
-  width: 100%;
-}
-/* Sign message -- End */
-
-.add-token-container {
-  color: 000;
-  border-width: 0px;
-  border-radius: 8px;
-  justify-content: flex-start;
-  width: 50%;
-}
-
-.network-container {
-  color: 000;
-  border-width: 0px;
-  border-radius: 8px;
-  justify-content: flex-start;
-  width: 100%;
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 085525e..9bc0f3b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home() {
   const providers = publicProvider()
 
   return (
-    <div className="flex demo-dapp-container">
+    <div className="flex flex-col h-screen p-4 sm:p-5">
       {/* eslint-disable @typescript-eslint/no-explicit-any */}
       <StarknetConfig
         chains={chains}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index da7a629..901eb8a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -16,14 +16,14 @@ const Header = () => {
 
   return (
     <div className="flex header-container">
-      <div className="flex header-logo-container">
+      <div className="flex gap-3 items-center w-full">
         <LogoIcon />
         <h1 className="header-title">Demo dapp</h1>
         <div className="flex flex-1 w-full" />
 
         {isConnected && (
           <div className="flex header-profile-container">
-            <div className="flex header-balance">
+            <div className="flex items-center gap-2">
               <WalletIcon />
               {balance && balance?.formatted.length > 7
                 ? `${balance.formatted.slice(0, 7)} ETH`
@@ -31,7 +31,7 @@ const Header = () => {
             </div>
             <div className="header-account-separator" />
             <div
-              className="flex header-address"
+              className="flex cursor-pointer items-center gap-2"
               onClick={() =>
                 window.open(
                   isMainnet(hexChainId)
diff --git a/src/components/StarknetDapp.tsx b/src/components/StarknetDapp.tsx
index 6b8d29d..b271ac9 100644
--- a/src/components/StarknetDapp.tsx
+++ b/src/components/StarknetDapp.tsx
@@ -16,11 +16,11 @@ const StarknetDapp = () => {
   const { isConnected } = useAccount()
 
   return (
-    <div className="flex w-full column">
+    <div className="flex w-full h-full column">
       <Header />
 
-      <div className="flex get-started-container">
-        <div className="flex column">
+      <div className="flex gap-[120px] py-[56px] px-[116px]">
+        <div className="flex column gap-2.5">
           <h1 className="get-started-title">your</h1>
           <span className="get-started-subtitle">
             Starknet utilizes the power of STARK technology to ensure
@@ -34,7 +34,7 @@ const StarknetDapp = () => {
       </div>
 
       <div className="flex sections-container">
-        <div className="flex w-full column sections-list">
+        <div className="flex w-full column gap-3 flex-[0.5]">
           <SectionButton
             section="Connection"
             setSection={setSection}
diff --git a/src/components/connect/Connect.tsx b/src/components/connect/Connect.tsx
index 5fe419c..610f295 100644
--- a/src/components/connect/Connect.tsx
+++ b/src/components/connect/Connect.tsx
@@ -36,7 +36,7 @@ const Connect = () => {
             Disconnect
           </Button>
         </div>
-        <div className="flex column available-connector">
+        <div className="flex column w-full p-3 bg-[#262933] gap-5 rounded-xl">
           <span className="starknet-react-connectors-title">
             Starknet-react connectors
           </span>
diff --git a/src/components/sections/AccountStatus.tsx b/src/components/sections/AccountStatus.tsx
index 8a6110c..9f547b2 100644
--- a/src/components/sections/AccountStatus.tsx
+++ b/src/components/sections/AccountStatus.tsx
@@ -18,7 +18,7 @@ interface BoxProps {
 }
 
 const Box: FC<BoxProps> = ({ title, value, copy, truncate }) => (
-  <div className="flex status-grid-item">
+  <div className="flex flex-col rounded gap-2 overflow-hidden">
     <span className="status-grid-item-title">{title}</span>
     <span className={`status-grid-item-value ${truncate ? "truncate" : ""}`}>
       {value || "-"}
diff --git a/src/components/sections/ERC20/AddToken.tsx b/src/components/sections/ERC20/AddToken.tsx
index 52c693b..07c2e17 100644
--- a/src/components/sections/ERC20/AddToken.tsx
+++ b/src/components/sections/ERC20/AddToken.tsx
@@ -25,7 +25,7 @@ const AddToken = () => {
 
   return (
     <SectionLayout sectionTitle="Add Token">
-      <div className="flex add-token-container">
+      <div className="flex w-1/2 justify-start">
         <Button
           className="w-full"
           onClick={async () => {
diff --git a/src/components/sections/Network/AddNetwork.tsx b/src/components/sections/Network/AddNetwork.tsx
index 10f8a14..1b59973 100644
--- a/src/components/sections/Network/AddNetwork.tsx
+++ b/src/components/sections/Network/AddNetwork.tsx
@@ -24,7 +24,7 @@ const AddNetwork = () => {
   })
 
   return (
-    <div className="flex network-container">
+    <div className="flex w-full justify-start">
       <Button
         className="w-full"
         onClick={async () => {
diff --git a/src/components/sections/Network/ChangeNetwork.tsx b/src/components/sections/Network/ChangeNetwork.tsx
index f7ab955..028a034 100644
--- a/src/components/sections/Network/ChangeNetwork.tsx
+++ b/src/components/sections/Network/ChangeNetwork.tsx
@@ -16,7 +16,7 @@ const ChangeNetwork = () => {
   })
 
   return (
-    <div className="flex network-container">
+    <div className="flex w-full justify-start">
       <Button
         className="w-full"
         onClick={async () => {
diff --git a/src/components/sections/SignMessage.tsx b/src/components/sections/SignMessage.tsx
index 8144016..00d6d01 100644
--- a/src/components/sections/SignMessage.tsx
+++ b/src/components/sections/SignMessage.tsx
@@ -54,7 +54,7 @@ const SignMessage = () => {
     <SectionLayout sectionTitle="Signing">
       <div className="flex flex-1 w-full" style={{ marginBottom: "16px" }}>
         <form
-          className="sign-message-form w-full"
+          className="flex flex-1 flex-col  w-full gap-3"
           onSubmit={(e) => {
             e.preventDefault()
             handleSignSubmit()