chore: refactor css

argentlabs · Nov 15, 2024 · 9c5a537 · 9c5a537
1 parent e01b8e0
commit 9c5a537
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 112 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -143,61 +143,19 @@ 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;
   gap: 12px;
   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
@@ -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
@@ -16,22 +16,22 @@ 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`
                 : `${balance?.formatted} ETH`}
             </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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()