chore: update ui

src/app/globals.css

@@ -97,8 +97,6 @@ textarea {
 }
 
 .get-started-title {
-  font-size: 40px;
-  line-height: 42px;
   color: #6f727c;
 }
 

src/components/HeaderConnectButton.tsx

@@ -6,12 +6,13 @@ const HeaderConnectButton = () => {
 
   const { starknetkitConnectModal } = useStarknetkitConnectModal({
     connectors: connectors as StarknetkitConnector[],
+    modalTheme: "dark",
   })
 
   return (
     <>
       <button
-        className="px-12 bg-gradient-to-r from-nebula-from to-nebula-to text-white rounded-lg"
+        className="px-x md:px-12 bg-gradient-to-r from-nebula-from to-nebula-to text-white rounded-lg"
         onClick={async () => {
           const { connector } = await starknetkitConnectModal()
           if (!connector) {

src/components/StarknetDapp.tsx

@@ -11,6 +11,7 @@ import { Network } from "./sections/Network/Network"
 import { SectionButton } from "./sections/SectionButton"
 import { Section } from "./sections/types"
 import { GithubLogo } from "./icons/GithubLogo"
+import { SectionLayout } from "./sections/SectionLayout"
 
 const StarknetDapp = () => {
   const [section, setSection] = useState<Section | undefined>(undefined)
@@ -41,6 +42,13 @@ const StarknetDapp = () => {
       <div className="flex p-5 gap-3  md:py-[56px] md:px-[116px]  flex-1 h-full">
         <div className="flex flex-col md:flex-row w-full gap-4 md:gap-20 lg:gap-[130px] lg:max-w-[1178px] lg:mx-auto">
           <div className="flex w-full column gap-3 md:max-w-[362px]">
+            <SectionButton
+              section="Status"
+              setSection={setSection}
+              selected={section === "Status"}
+              className={`md:hidden ${!section ? "md:flex" : section === "Status" ? "flex" : "hidden"}`}
+            />
+
             <SectionButton
               section="Connection"
               setSection={setSection}
@@ -78,6 +86,13 @@ const StarknetDapp = () => {
           </div>
 
           <div className="flex flex-1 w-full">
+            {section === "Status" && (
+              <SectionLayout sectionTitle="Status">
+                <div className="w-full grid gap-5 grid-cols-2 ">
+                  <AccountStatus />
+                </div>
+              </SectionLayout>
+            )}
             {section === "Connection" && <Connect />}
             {section === "Transactions" && <Transactions />}
             {section === "Signing" && <SignMessage />}

src/components/connect/Connect.tsx

@@ -27,7 +27,7 @@ const Connect = () => {
         <div className="flex flex-col md:flex-row gap-3">
           <ConnectStarknetkitModal />
           <Button
-            className={`w-full ${!isConnected ? "disabled" : ""} justify-start md:justify-center`}
+            className={`w-full ${!isConnected ? "disabled" : ""} justify-center`}
             onClick={() => disconnect()}
             disabled={!isConnected}
             hideChevron

src/components/connect/ConnectStarknetkitModal.tsx

@@ -12,7 +12,7 @@ const ConnectStarknetkitModal = () => {
 
   return (
     <Button
-      className="w-full justify-start md:justify-center"
+      className="w-full justify-center"
       onClick={async () => {
         const { connector } = await starknetkitConnectModal()
         if (!connector) {

src/components/sections/types.ts

@@ -1,4 +1,5 @@
 export type Section =
+  | "Status"
   | "Connection"
   | "Transactions"
   | "Signing"

src/components/ui/Button.tsx

@@ -22,7 +22,7 @@ const Button: FC<ButtonProps> = ({
       ...style,
     }}
     {...props}
-    className={`${props.className} ${selected ? "selected" : ""} ${props.disabled ? "disabled" : ""} hover:bg-charcoal`}
+    className={`${props.className} ${selected ? "selected" : ""} ${props.disabled ? "disabled" : ""} md:hover:bg-charcoal`}
     onClick={onClick}
   >
     <div className="flex items-center gap-2">