chore: update ui

argentlabs · Dec 9, 2024 · c54f0fc · c54f0fc
1 parent 1f72402
commit c54f0fc
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 41 deletions.
diff --git a/.gitignore b/.gitignore
@@ -48,4 +48,6 @@ playwright-report*
 artifacts
 argent-x-dist
 
-/e2e/node_modules/
+/e2e/node_modules/
+
+settings.json
diff --git a/src/components/StarknetDapp.tsx b/src/components/StarknetDapp.tsx
@@ -39,50 +39,59 @@ const StarknetDapp = () => {
         </div>
       </div>
 
+      {!section && (
+        <div className="md:hidden w-dvw h-dvh fixed bg-backdrop"></div>
+      )}
+
       <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]">
+          <div className="flex w-full column md:max-w-[362px] z-10">
             <SectionButton
               section="Status"
               setSection={setSection}
               selected={section === "Status"}
-              className={`md:hidden ${!section ? "md:flex" : section === "Status" ? "flex" : "hidden"}`}
+              className={`md:hidden ${!section ? "md:flex mb-3" : section === "Status" ? "flex" : "hidden"}`}
             />
 
-            <SectionButton
-              section="Connection"
-              setSection={setSection}
-              selected={section === "Connection"}
-              className={`${!section ? "md:flex" : section === "Connection" ? "flex" : "md:flex hidden"}`}
-            />
-            <SectionButton
-              section="Transactions"
-              setSection={setSection}
-              selected={section === "Transactions"}
-              disabled={!isConnected}
-              className={`${!section ? "flex" : section === "Transactions" ? "flex" : "md:flex hidden"}`}
-            />
-            <SectionButton
-              section="Signing"
-              setSection={setSection}
-              selected={section === "Signing"}
-              disabled={!isConnected}
-              className={`${!section ? "flex" : section === "Signing" ? "flex" : "md:flex hidden"}`}
-            />
-            <SectionButton
-              section="Network"
-              setSection={setSection}
-              selected={section === "Network"}
-              disabled={!isConnected}
-              className={`${!section ? "flex" : section === "Network" ? "flex" : "md:flex hidden"}`}
-            />
-            <SectionButton
-              section="ERC20"
-              setSection={setSection}
-              selected={section === "ERC20"}
-              disabled={!isConnected}
-              className={`${!section ? "flex" : section === "ERC20" ? "flex" : "md:flex hidden"}`}
-            />
+            <div
+              className={`flex w-full column gap-3 md:max-w-[362px]
+              ${!section ? "rounded-lg border border-black border-solid md:border-0 p-2 md:p-0" : ""}`}
+            >
+              <SectionButton
+                section="Connection"
+                setSection={setSection}
+                selected={section === "Connection"}
+                className={`${!section ? "md:flex" : section === "Connection" ? "flex" : "md:flex hidden"}`}
+              />
+              <SectionButton
+                section="Transactions"
+                setSection={setSection}
+                selected={section === "Transactions"}
+                disabled={!isConnected}
+                className={`${!section ? "flex" : section === "Transactions" ? "flex" : "md:flex hidden"}`}
+              />
+              <SectionButton
+                section="Signing"
+                setSection={setSection}
+                selected={section === "Signing"}
+                disabled={!isConnected}
+                className={`${!section ? "flex" : section === "Signing" ? "flex" : "md:flex hidden"}`}
+              />
+              <SectionButton
+                section="Network"
+                setSection={setSection}
+                selected={section === "Network"}
+                disabled={!isConnected}
+                className={`${!section ? "flex" : section === "Network" ? "flex" : "md:flex hidden"}`}
+              />
+              <SectionButton
+                section="ERC20"
+                setSection={setSection}
+                selected={section === "ERC20"}
+                disabled={!isConnected}
+                className={`${!section ? "flex" : section === "ERC20" ? "flex" : "md:flex hidden"}`}
+              />
+            </div>
           </div>
 
           <div className="flex flex-1 w-full">

diff --git a/src/components/icons/IconStatusIcon.tsx b/src/components/icons/IconStatusIcon.tsx
@@ -9,23 +9,23 @@ const IconStatusIcon = () => {
     >
       <path
         d="M2.45 14.9707C3.52 18.4107 6.4 21.0607 9.98 21.7907"
-        stroke="#A1A1D6"
+        stroke="#AECBFC"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M2.05 10.98C2.56 5.93 6.82 2 12 2C17.18 2 21.44 5.94 21.95 10.98"
-        stroke="#A1A1D6"
+        stroke="#AECBFC"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M14.01 21.7995C17.58 21.0695 20.45 18.4495 21.54 15.0195"
-        stroke="#A1A1D6"
+        stroke="#AECBFC"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -22,7 +22,7 @@ const Button: FC<ButtonProps> = ({
       ...style,
     }}
     {...props}
-    className={`${props.className} ${selected ? "selected" : ""} ${props.disabled ? "disabled" : ""} md:hover:bg-charcoal`}
+    className={`${props.className} ${selected ? "selected" : ""} ${props.disabled ? "disabled" : "md:hover:bg-charcoal md:hover:text-light-grey"}`}
     onClick={onClick}
   >
     <div className="flex items-center gap-2">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -33,6 +33,8 @@ export default {
         "medium-grey": "#6f727c",
         "nebula-from": "#EC796B",
         "nebula-to": "#D672EF",
+        "light-grey": "#F6F6F6",
+        backdrop: "rgba(0, 0, 0, 0.3)",
       },
     },
   },