chore: update ui

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

Hide file tree

Showing 19 changed files with 238 additions and 101 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: #000;
+  background-color: #14161c;
   color: #fff;
 }
 
@@ -49,19 +49,14 @@ button {
   padding: 12px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   cursor: pointer;
   gap: 4px;
   position: relative;
 }
 
-button.sections-list-button {
-  background-color: #14161c;
-  color: #6f727c;
-}
-
 button:not(.selected, :disabled):hover {
-  background-color: #464c5e;
+  background-color: #262933;
 }
 
 button.disabled {
@@ -70,23 +65,9 @@ button.disabled {
 }
 
 button.selected {
-  background-color: #aecbfc;
-  color: #090e12;
-}
-
-button.connector {
-  background-color: #464c5e;
-  height: 40px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 500;
-  gap: 8px;
-  justify-content: center;
-}
-
-button.connector > div {
-  gap: 8px;
-  align-items: center;
+  border: solid 1px #aecbfc;
+  color: #aecbfc;
+  background-color: #262933;
 }
 
 .connectors-grid {
@@ -97,37 +78,6 @@ button.connector > div {
 
 /* Button -- END */
 
-.chevron-right {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  transform: rotate(-90deg);
-  color: #090e12;
-}
-
-.chevron-down {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  color: #6f727c;
-}
-
-.chevron-up {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  color: #6f727c;
-  transform: rotate(-180deg);
-}
-
-.chevron-left {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  color: #6f727c;
-  transform: rotate(-270deg);
-}
-
 input,
 textarea {
   padding: 8px;
@@ -149,13 +99,6 @@ button[type="submit"] {
   padding: 32px 116px 16px;
 }
 
-.header-profile-container {
-  background-color: #14161c;
-  border-radius: 12px;
-  gap: 12px;
-  padding: 16px;
-}
-
 .header-title {
   font-weight: 400;
   font-size: 20px;

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 flex-col h-screen p-4 sm:p-5">
+    <div className="flex flex-col h-screen">
       {/* eslint-disable @typescript-eslint/no-explicit-any */}
       <StarknetConfig
         chains={chains}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -4,6 +4,7 @@ import { useAccount, useBalance } from "@starknet-react/core"
 import { AvatarIcon } from "./icons/AvatarIcon"
 import { LogoIcon } from "./icons/LogoIcon"
 import { WalletIcon } from "./icons/WalletIcon"
+import { ExternalIcon } from "./icons/ExternalIcon"
 
 const Header = () => {
   const { address, isConnected, chainId } = useAccount()
@@ -22,12 +23,14 @@ const Header = () => {
         <div className="flex flex-1 w-full" />
 
         {isConnected && (
-          <div className="flex header-profile-container">
+          <div className="flex  border-col rounded-lg gap-3 p-3 border-2 border-solid border-default-color font-medium">
             <div className="flex items-center gap-2">
               <WalletIcon />
-              {balance && balance?.formatted.length > 7
-                ? `${balance.formatted.slice(0, 7)} ETH`
-                : `${balance?.formatted} ETH`}
+              {balance
+                ? balance?.formatted.length > 7
+                  ? `${balance.formatted.slice(0, 7)} ETH`
+                  : `${balance?.formatted} ETH`
+                : "0 ETH"}
             </div>
             <div className="header-account-separator" />
             <div
@@ -43,6 +46,7 @@ const Header = () => {
             >
               <AvatarIcon />
               {formatTruncatedAddress(address || "")}
+              <ExternalIcon />
             </div>
           </div>
         )}

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 w-full p-3 bg-[#262933] gap-5 rounded-xl">
+        <div className="flex column w-full p-3 border border-solid border-color-inner-section gap-5 rounded-xl">
           <span className="starknet-react-connectors-title">
             Starknet-react connectors
           </span>

diff --git a/src/components/connect/ConnectorButton.tsx b/src/components/connect/ConnectorButton.tsx
@@ -17,7 +17,7 @@ const ConnectorButton: FC<{ connector: Connector; icon: ReactNode }> = ({
       onClick={async () => {
         await connectAsync({ connector })
       }}
-      className="connector"
+      className="bg-default-color h-10 text-sm leading-4 font-medium gap-2 justify-center"
       hideChevron
     >
       <div className="flex items-center gap-2">

diff --git a/src/components/icons/AddTokenIcon.tsx b/src/components/icons/AddTokenIcon.tsx
@@ -0,0 +1,33 @@
+const AddTokenIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15.75 9H8.25"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15.75 15H8.25"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export { AddTokenIcon }
diff --git a/src/components/icons/Chevron.tsx b/src/components/icons/Chevron.tsx
@@ -1,6 +1,6 @@
 const ChevronRight = () => (
   <svg
-    className="chevron-right"
+    className="w-4 h-4 transition-transform duration-[200] -rotate-90"
     fill="none"
     stroke="currentColor"
     viewBox="0 0 24 24"
@@ -16,7 +16,7 @@ const ChevronRight = () => (
 
 const ChevronLeft = () => (
   <svg
-    className="chevron-left"
+    className="w-4 h-4transition-transform duration-[200] -rotate-270"
     fill="none"
     stroke="currentColor"
     viewBox="0 0 24 24"
@@ -32,7 +32,7 @@ const ChevronLeft = () => (
 
 const ChevronUp = () => (
   <svg
-    className="chevron-up"
+    className="w-4 h-4 transition-transform duration-[200] -rotate-180"
     fill="none"
     stroke="currentColor"
     viewBox="0 0 24 24"
@@ -48,7 +48,7 @@ const ChevronUp = () => (
 
 const ChevronDown = () => (
   <svg
-    className="chevron-down"
+    className="w-4 h-4 transition-transform duration-[200]"
     fill="none"
     stroke="currentColor"
     viewBox="0 0 24 24"

diff --git a/src/components/icons/ExternalIcon.tsx b/src/components/icons/ExternalIcon.tsx
@@ -0,0 +1,24 @@
+const ExternalIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.6855 4.8521C15.8027 4.96931 15.8685 5.12828 15.8685 5.29404L15.8685 12.4476C15.8685 12.7928 15.5887 13.0726 15.2435 13.0726C14.8984 13.0726 14.6185 12.7928 14.6185 12.4476V5.91904L8.08997 5.91904C7.74479 5.91904 7.46497 5.63922 7.46497 5.29404C7.46497 4.94886 7.74479 4.66904 8.08997 4.66904L15.2435 4.66904C15.4093 4.66904 15.5683 4.73489 15.6855 4.8521Z"
+      fill="white"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.5853 4.95207C15.8293 5.19615 15.8293 5.59188 15.5853 5.83596L5.66808 15.7531C5.424 15.9972 5.02827 15.9972 4.7842 15.7531C4.54012 15.5091 4.54012 15.1133 4.7842 14.8692L14.7014 4.95207C14.9454 4.708 15.3412 4.708 15.5853 4.95207Z"
+      fill="white"
+    />
+  </svg>
+)
+
+export { ExternalIcon }
diff --git a/src/components/icons/NetworkIcon.tsx b/src/components/icons/NetworkIcon.tsx
@@ -0,0 +1,40 @@
+const NetworkIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.81213 11.8396C9.11213 8.51961 14.7021 8.51961 19.0021 11.8396"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1.9021 8.35961C7.9621 3.67961 15.8421 3.67961 21.9021 8.35961"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.69214 15.4897C9.84214 13.0497 13.9521 13.0497 17.1021 15.4897"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.30212 19.1496C10.8821 17.9296 12.9321 17.9296 14.5121 19.1496"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export { NetworkIcon }
diff --git a/src/components/icons/SigningIcon.tsx b/src/components/icons/SigningIcon.tsx
@@ -0,0 +1,23 @@
+const SigningIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_812_3445)">
+      <path
+        d="M23.8059 14.4966C23.6822 14.3597 21.5475 12.0384 18.0872 10.6941C17.9259 8.96719 17.2941 7.39688 16.2675 6.20156C14.8941 4.59375 12.8981 3.75 10.5 3.75C5.67 3.75 2.52094 8.07938 2.38969 8.26406C2.28225 8.42595 2.24184 8.62321 2.27694 8.81431C2.31205 9.0054 2.41995 9.17541 2.57792 9.28854C2.73588 9.40167 2.93158 9.44908 3.1238 9.42079C3.31602 9.3925 3.48977 9.29071 3.60844 9.13688C3.6375 9.09844 6.45094 5.25 10.5 5.25C12.4472 5.25 14.0494 5.91656 15.1322 7.17844C15.8278 7.98844 16.2984 9.02437 16.5075 10.1784C15.4215 9.89485 14.3037 9.75088 13.1813 9.75C10.7381 9.75 8.68781 10.3884 7.25063 11.5959C5.97938 12.6647 5.25 14.1562 5.25 15.6797C5.24421 16.2714 5.3562 16.8584 5.57944 17.4064C5.80268 17.9545 6.13271 18.4526 6.55031 18.8719C7.45594 19.7738 8.71219 20.25 10.1813 20.25C15.0384 20.25 17.7919 16.3003 18.1022 12.3356C19.8166 13.0977 21.3743 14.1719 22.6959 15.5034C22.7621 15.5764 22.8419 15.6357 22.9309 15.6779C23.0199 15.72 23.1164 15.7442 23.2148 15.7491C23.3131 15.754 23.4115 15.7394 23.5042 15.7063C23.597 15.6731 23.6823 15.622 23.7553 15.5559C23.8283 15.4898 23.8876 15.41 23.9297 15.321C23.9719 15.2319 23.9961 15.1355 24.001 15.0371C24.0058 14.9388 23.9913 14.8404 23.9582 14.7476C23.925 14.6549 23.8739 14.5696 23.8078 14.4966H23.8059ZM14.9503 16.5253C14.1225 17.5397 12.6244 18.75 10.1813 18.75C7.81125 18.75 6.75 17.2078 6.75 15.6797C6.75 13.5459 8.76281 11.25 13.1813 11.25C14.3508 11.2535 15.5132 11.433 16.6294 11.7825C16.5872 13.5413 15.9806 15.2606 14.9503 16.5253Z"
+        fill="#AECBFC"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_812_3445">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export { SigningIcon }
diff --git a/src/components/icons/TransactionsIcon.tsx b/src/components/icons/TransactionsIcon.tsx
@@ -0,0 +1,44 @@
+const TransactionsIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20.4023 14.99L15.3923 20.01"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.40234 14.99H20.4023"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.40234 9.00999L8.41234 3.98999"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20.4023 9.01001H3.40234"
+      stroke="#AECBFC"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export { TransactionsIcon }
diff --git a/src/components/sections/AccountStatus.tsx b/src/components/sections/AccountStatus.tsx
@@ -19,8 +19,10 @@ interface BoxProps {
 
 const Box: FC<BoxProps> = ({ title, value, copy, truncate }) => (
   <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" : ""}`}>
+    <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"}`}
+    >
       {value || "-"}
       {value && copy && <CopyIcon />}
     </span>
@@ -69,7 +71,7 @@ const AccountStatus = () => {
             ? balance?.formatted.length > 7
               ? `${balance.formatted.slice(0, 7)} ETH`
               : `${balance?.formatted} ETH`
-            : "-"
+            : undefined
         }
       />
       <Box title="ID" value={starknetId} />