chore: update ui

argentlabs · Nov 15, 2024 · 484296d · 484296d
1 parent f900fb5
commit 484296d
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 13 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -9,7 +9,7 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
-  background-color: #14161c;
+  background-color: #000;
   color: #fff;
 }
 
@@ -242,7 +242,6 @@ button[type="submit"] {
 /* Sections list */
 .sections-container {
   gap: 180px;
-  background-color: #090e12;
   padding: 76px 116px;
   flex: 1;
   height: 100%;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -18,11 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <main
-          style={{ height: "100dvh", display: "flex", flexDirection: "column" }}
-        >
-          {children}
-        </main>
+        <main className="flex flex-col h-dvh">{children}</main>
       </body>
     </html>
   )

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -16,7 +16,7 @@ const Header = () => {
   const hexChainId = toHexChainid(chainId)
 
   return (
-    <div className="flex header-container">
+    <div className="flex header-container bg-heading-bg">
       <div className="flex gap-3 items-center w-full">
         <LogoIcon />
         <h1 className="header-title">Demo dapp</h1>

diff --git a/src/components/StarknetDapp.tsx b/src/components/StarknetDapp.tsx
@@ -10,6 +10,7 @@ import { AddToken } from "./sections/ERC20/AddToken"
 import { Network } from "./sections/Network/Network"
 import { SectionButton } from "./sections/SectionButton"
 import { Section } from "./sections/types"
+import { GithubLogo } from "./icons/GithubLogo"
 
 const StarknetDapp = () => {
   const [section, setSection] = useState<Section | undefined>(undefined)
@@ -19,7 +20,7 @@ const StarknetDapp = () => {
     <div className="flex w-full h-full column">
       <Header />
 
-      <div className="flex gap-[120px] py-[56px] px-[116px]">
+      <div className="flex gap-[120px] py-[56px] px-[116px] bg-heading-bg">
         <div className="flex column gap-2.5">
           <h1 className="get-started-title">your</h1>
           <span className="get-started-subtitle">
@@ -33,7 +34,7 @@ const StarknetDapp = () => {
         </div>
       </div>
 
-      <div className="flex sections-container">
+      <div className="flex gap-[180px] py-[76px] px-[116px] flex-1 h-full">
         <div className="flex w-full column gap-3 flex-[0.5]">
           <SectionButton
             section="Connection"
@@ -74,6 +75,16 @@ const StarknetDapp = () => {
           {section === "ERC20" && <AddToken />}
         </div>
       </div>
+      <a
+        href="https://github.com/argentlabs/demo-dapp-starknet"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <div className="flex items-center cursor-pointer w-full justify-end px-[116px] py-10 text-lavander-sky gap-2">
+          <GithubLogo />
+          Github
+        </div>
+      </a>
     </div>
   )
 }

diff --git a/src/components/icons/GithubLogo.tsx b/src/components/icons/GithubLogo.tsx
@@ -0,0 +1,18 @@
+const GithubLogo = () => (
+  <svg
+    width="19"
+    height="18"
+    viewBox="0 0 19 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.79953 0C4.7035 0 0.583862 4.12498 0.583862 9.22815C0.583862 13.3074 3.22346 16.7604 6.88528 17.9825C7.3431 18.0744 7.5108 17.7839 7.5108 17.5396C7.5108 17.3257 7.4957 16.5924 7.4957 15.8283C4.93213 16.3784 4.39829 14.7283 4.39829 14.7283C3.9863 13.6588 3.37588 13.3839 3.37588 13.3839C2.53682 12.8186 3.43699 12.8186 3.43699 12.8186C4.36773 12.8797 4.85611 13.7658 4.85611 13.7658C5.67989 15.1713 7.00732 14.7742 7.54135 14.5297C7.61756 13.9338 7.86185 13.5213 8.12122 13.2922C6.07659 13.0783 3.92538 12.2838 3.92538 8.73915C3.92538 7.73078 4.29133 6.90578 4.8712 6.26416C4.77971 6.03504 4.45922 5.0876 4.96288 3.81955C4.96288 3.81955 5.741 3.57505 7.49552 4.76679C8.24668 4.56479 9.02135 4.46203 9.79953 4.46117C10.5777 4.46117 11.3709 4.56823 12.1033 4.76679C13.858 3.57505 14.6362 3.81955 14.6362 3.81955C15.1398 5.0876 14.8192 6.03504 14.7277 6.26416C15.3228 6.90578 15.6737 7.73078 15.6737 8.73915C15.6737 12.2838 13.5225 13.0629 11.4625 13.2922C11.7983 13.5824 12.0881 14.1324 12.0881 15.0033C12.0881 16.2408 12.073 17.234 12.073 17.5394C12.073 17.7839 12.2409 18.0744 12.6985 17.9827C16.3603 16.7602 18.9999 13.3074 18.9999 9.22815C19.015 4.12498 14.8803 0 9.79953 0Z"
+      fill="white"
+    />
+  </svg>
+)
+
+export { GithubLogo }
diff --git a/src/components/sections/AccountStatus.tsx b/src/components/sections/AccountStatus.tsx
@@ -21,7 +21,7 @@ const Box: FC<BoxProps> = ({ title, value, copy, truncate }) => (
   <div className="flex flex-col rounded gap-2 overflow-hidden">
     <span className="status-grid-item-title text-color-[#646876]">{title}</span>
     <span
-      className={`status-grid-item-value ${truncate ? "truncate" : ""} font-size-[16px] ${!value ? "text-not-connected" : "text-color-white"}`}
+      className={`status-grid-item-value ${truncate ? "truncate" : ""} font-size-[16px] ${!value ? "text-lavander-sky" : "text-color-white"}`}
     >
       {value || "-"}
       {value && copy && <CopyIcon />}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,10 +11,11 @@ export default {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
-        "not-connected": "#A1A1D6",
+        "heading-bg": "#14161C",
+        "lavander-sky": "#A1A1D6",
         "default-color": "#464C5E",
         "color-inner-section": "#262933",
-        "chevron-default": "#aecbfc",
+        "light-blue": "#aecbfc",
         "section-list-button-text": "#6f727c",
         "section-list-button-background": "#14161c",
       },