Update accounts page

interledger · Jun 19, 2024 · 6d9521f · 6d9521f
1 parent 9dfed9d
commit 6d9521f
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 156 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -7,5 +7,7 @@ module.exports = {
   singleQuote: true,
   quoteProps: 'consistent',
   jsxSingleQuote: false,
-  trailingComma: 'none'
+  trailingComma: 'none',
+  plugins: ['prettier-plugin-tailwindcss'],
+  tailwindConfig: './packages/wallet/frontend/tailwind.config.js'
 }
diff --git a/packages/wallet/frontend/src/components/BackButton.tsx b/packages/wallet/frontend/src/components/BackButton.tsx
@@ -12,7 +12,7 @@ export const BackButton = () => {
         router.back()
       }}
     >
-      <Back className="mr-5 mt-1 h-5 w-5 text-turqoise" />
+      <Back className="text-green h-4 w-4" />
     </button>
   )
 }
diff --git a/packages/wallet/frontend/src/components/PageHeader.tsx b/packages/wallet/frontend/src/components/PageHeader.tsx
@@ -1,5 +1,4 @@
 import { ReactNode } from 'react'
-import { usePathname } from 'next/navigation'
 import { BackButton } from './BackButton'
 
 type PageHeaderProps = {
@@ -8,14 +7,13 @@ type PageHeaderProps = {
 }
 
 export const PageHeader = ({ title, message }: PageHeaderProps) => {
-  const pathname = usePathname()
   return (
-    <div className="flex items-center">
-      {pathname !== '/' && <BackButton />}
-      <div className="text-turqoise">
-        <h1 className="text-2xl font-semibold md:text-4xl">{title}</h1>
-        <p className="text-lg font-light md:text-lg">{message}</p>
+    <header className="mb-8">
+      <div className="flex items-center gap-4">
+        <BackButton />
+        <h1 className="text-2xl font-bold md:text-4xl">{title}</h1>
       </div>
-    </div>
+      <p className="leading-[1.39]">{message}</p>
+    </header>
   )
 }
diff --git a/packages/wallet/frontend/src/components/cards/AccountCard.tsx b/packages/wallet/frontend/src/components/cards/AccountCard.tsx
@@ -28,33 +28,31 @@ export const AccountCard = ({ account, idOnboarding }: AccountCardProps) => {
 
   return (
     <Link
+        id={idOnboarding}
       href={`account/${account.id}`}
-      className={`
-        rounded-lg shadow-sm transition-transform hover:scale-105 hover:shadow-md
-        [&:nth-child(4n+1)]:bg-gradient-primary 
-        [&:nth-child(4n+2)]:bg-gradient-violet 
-        [&:nth-child(4n+3)]:bg-gradient-pink
-        [&:nth-child(4n+4)]:bg-gradient-orange`}
+      // prettier-ignore
+      className={`text-right ease-in-out transition-[box-shadow,transform,] duration-200 aspect-[5/3] rounded-lg flex flex-col p-3 border-2
+          hover:scale-105 focus:scale-105
+          hover:dark:shadow-glow-link focus:dark:shadow-glow-link
+          [&:nth-child(4n+2)]:border-green-dark [&:nth-child(4n+3)]:border-pink-dark [&:nth-child(4n+4)]:border-orange-dark [&:nth-child(4n+5)]:border-purple-bright 
+          dark:[&:nth-child(4n+2)]:border-pink-neon dark:[&:nth-child(4n+3)]:border-teal-neon dark:[&:nth-child(4n+4)]:border-yellow-neon dark:[&:nth-child(4n+5)]:border-green-neon
+          dark:[&:nth-child(4n+2)]:[--tw-shadow:0_0_.2rem_rgb(var(--white)),_0_0_.2rem_rgb(var(--white)),_0_0_1rem_rgb(var(--pink-neon)),_0_0_.4rem_rgb(var(--pink-neon)),_inset_0_0_.6rem_rgb(var(--pink-neon))]
+          dark:[&:nth-child(4n+3)]:[--tw-shadow:0_0_.2rem_rgb(var(--white)),_0_0_.2rem_rgb(var(--white)),_0_0_1rem_rgb(var(--teal-neon)),_0_0_.4rem_rgb(var(--teal-neon)),_inset_0_0_.6rem_rgb(var(--teal-neon))]
+          dark:[&:nth-child(4n+4)]:[--tw-shadow:0_0_.2rem_rgb(var(--white)),_0_0_.2rem_rgb(var(--white)),_0_0_1rem_rgb(var(--yellow-neon)),_0_0_.4rem_rgb(var(--yellow-neon)),_inset_0_0_.6rem_rgb(var(--yellow-neon))]
+          dark:[&:nth-child(4n+5)]:[--tw-shadow:0_0_.2rem_rgb(var(--white)),_0_0_.2rem_rgb(var(--white)),_0_0_1rem_rgb(var(--green-neon)),_0_0_.4rem_rgb(var(--green-neon)),_inset_0_0_.6rem_rgb(var(--green-neon))]
+          hover:dark:[&:nth-child(4n+2)]:border-white hover:dark:[&:nth-child(4n+3)]:border-white hover:dark:[&:nth-child(4n+4)]:border-white hover:dark:[&:nth-child(4n+5)]:border-white
+          focus:dark:[&:nth-child(4n+2)]:border-white focus:dark:[&:nth-child(4n+3)]:border-white focus:dark:[&:nth-child(4n+4)]:border-white focus:dark:[&:nth-child(4n+5)]:border-white
+          [&:nth-child(4n+2)]:[--accent:rgb(var(--green-dark))] [&:nth-child(4n+3)]:[--accent:rgb(var(--pink-dark))] [&:nth-child(4n+4)]:[--accent:rgb(var(--orange-dark))] [&:nth-child(4n+5)]:[--accent:rgb(var(--purple-bright))]
+          dark:[&:nth-child(4n+2)]:[--accent:rgb(var(--pink-light))] dark:[&:nth-child(4n+3)]:[--accent:rgb(var(--teal-light))] dark:[&:nth-child(4n+4)]:[--accent:rgb(var(--yellow-light))] dark:[&:nth-child(4n+5)]:[--accent:rgb(var(--green-bright))]`}
       onClick={() => {
         if (isUserFirstTime) {
           setRunOnboarding(false)
         }
       }}
     >
-      <div className="flex aspect-square flex-1 flex-col p-2" id={idOnboarding}>
-        <span className="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white text-xl font-semibold mix-blend-screen">
-          {formattedAmount.symbol}
-        </span>
-        <div className="mt-auto text-white">
-          <p className="overflow-hidden text-ellipsis whitespace-nowrap font-light">
-            {account.name}
-          </p>
-
-          <p className="text-2xl font-semibold tracking-tighter">
-            {formattedAmount.amount}
-          </p>
-        </div>
-      </div>
+      <span className="flex h-9 w-9 items-center justify-center rounded-md bg-[--accent] text-white dark:text-purple text-xl">{formattedAmount.symbol}</span>
+      <span className="leading-4 mt-auto text-[--accent] text-ellipsis whitespace-nowrap overflow-hidden">{account.name}</span>
+      <span className="text-[--accent] text-2xl font-semibold -tracking-wider">{formattedAmount.amount}</span>
     </Link>
   )
 }
diff --git a/packages/wallet/frontend/src/components/icons/Back.tsx b/packages/wallet/frontend/src/components/icons/Back.tsx
@@ -2,17 +2,12 @@ import { SVGProps } from 'react'
 
 export const Back = (props: SVGProps<SVGSVGElement>) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 78 98"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      {...props}
-    >
+    <svg fill="none" viewBox="0 0 79 79" {...props}>
+      <title>Back</title>
       <path
-        fill="#56c1bf"
-        d="M0,39.208c0,21.654,17.554,39.208,39.208,39.208c21.653,0,39.207-17.554,39.207-39.208S60.861,0,39.208,0    C17.554,0,0,17.554,0,39.208z M24.924,36.816l18.511-18.512c0.66-0.66,1.525-0.99,2.391-0.99s1.731,0.33,2.391,0.99    c1.316,1.319,1.32,3.458,0,4.777L32.088,39.209l16.128,16.125c1.316,1.32,1.316,3.459,0,4.777c-1.32,1.32-3.461,1.32-4.775,0    L24.924,41.598C23.604,40.278,23.604,38.136,24.924,36.816z"
-      />
+        fill="currentColor"
+        d="M0 39.208c0 21.654 17.554 39.208 39.208 39.208 21.653 0 39.207-17.554 39.207-39.208S60.861 0 39.208 0C17.554 0 0 17.554 0 39.208Zm24.924-2.392 18.511-18.512a3.37 3.37 0 0 1 2.391-.99 3.38 3.38 0 0 1 2.391 5.767L32.088 39.209l16.128 16.125a3.384 3.384 0 0 1 0 4.777 3.374 3.374 0 0 1-4.775 0L24.924 41.598a3.382 3.382 0 0 1 0-4.782Z"
+      ></path>
     </svg>
   )
 }
diff --git a/packages/wallet/frontend/src/components/icons/New.tsx b/packages/wallet/frontend/src/components/icons/New.tsx
@@ -2,46 +2,15 @@ import { SVGProps } from 'react'
 
 export const New = (props: SVGProps<SVGSVGElement>) => {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
       <path
         d="M10.0597 2.77945C9.88969 2.77945 9.7597 2.77945 9.6297 2.77945C7.8197 2.77945 5.9997 2.77945 4.1897 2.77945C3.2497 2.77945 2.79968 3.22939 2.79968 4.15939C2.79968 9.51939 2.79968 14.8794 2.79968 20.2394C2.79968 21.1394 3.25971 21.5994 4.16971 21.5994C8.01971 21.5994 11.8797 21.5994 15.7297 21.5994C16.4897 21.5994 16.9997 22.0194 17.0497 22.6594C17.1097 23.3794 16.5797 23.9394 15.8197 23.9494C14.5597 23.9594 13.2897 23.9494 12.0297 23.9494C9.40969 23.9494 6.78971 23.9494 4.16971 23.9494C1.92971 23.9494 0.429688 22.4494 0.429688 20.2094C0.429688 14.8494 0.429688 9.48943 0.429688 4.12943C0.429688 1.90943 1.91971 0.409424 4.13971 0.409424C6.68971 0.409424 9.23968 0.409414 11.7997 0.399414C12.2397 0.399414 12.5997 0.529417 12.9197 0.839417C14.9097 2.75942 16.9097 4.67944 18.9097 6.57944C19.2897 6.93944 19.4697 7.33941 19.4497 7.85941C19.4297 8.45941 19.4497 9.0694 19.4397 9.6694C19.4397 10.4694 18.9997 10.9894 18.3097 11.0294C17.6197 11.0694 17.1397 10.5994 17.0397 9.80942C17.0397 9.76942 17.0197 9.7294 17.0097 9.6694C15.6997 9.6694 14.3797 9.6694 13.0697 9.6694C12.3597 9.6694 11.7197 9.45944 11.1697 9.01944C10.4197 8.40944 10.0697 7.61939 10.0597 6.65939C10.0597 5.51939 10.0597 4.37941 10.0597 3.23941C10.0797 3.10941 10.0697 2.96945 10.0597 2.77945ZM12.4397 3.6694C12.4397 4.7894 12.4297 5.77944 12.4497 6.76944C12.4597 7.15944 12.7197 7.32945 13.0997 7.33945C13.4997 7.34945 13.8997 7.33945 14.3097 7.33945C14.9197 7.33945 15.5297 7.33945 16.2597 7.33945C14.9397 6.07945 13.7297 4.9194 12.4397 3.6694Z"
-        fill="url(#paint0_linear_473_2109)"
-      />
+        fill="currentColor"
+      ></path>
       <path
         d="M19.4696 18.0896C19.4696 18.9596 19.4796 19.8195 19.4696 20.6695C19.4596 21.5695 18.6796 22.1395 17.8796 21.8495C17.3996 21.6795 17.1196 21.2696 17.1096 20.6896C17.0996 19.9796 17.1096 19.2696 17.1096 18.5596C17.1096 18.4096 17.1096 18.2696 17.1096 18.0596C16.8496 18.0596 16.6296 18.0596 16.4096 18.0596C15.7796 18.0596 15.1496 18.0696 14.5196 18.0596C13.7496 18.0496 13.2096 17.5696 13.2096 16.8796C13.1996 16.1996 13.7396 15.6996 14.5096 15.6896C15.2196 15.6796 15.9296 15.6896 16.6396 15.6896C16.7796 15.6896 16.9296 15.6896 17.1196 15.6896C17.1196 14.8296 17.1196 14.0295 17.1196 13.2295C17.1196 13.0195 17.1296 12.7995 17.1896 12.5995C17.3296 12.1295 17.8096 11.8096 18.2996 11.8196C18.7896 11.8296 19.2596 12.1496 19.3996 12.6196C19.4596 12.8096 19.4696 13.0196 19.4696 13.2096C19.4796 14.0096 19.4696 14.8196 19.4696 15.6896C19.8696 15.6896 20.2296 15.6896 20.5996 15.6896C21.0296 15.6896 21.4596 15.6796 21.8896 15.6896C22.6796 15.6996 23.1896 16.1595 23.1996 16.8595C23.1996 17.5695 22.6796 18.0495 21.8696 18.0495C21.1196 18.0595 20.3696 18.0496 19.6096 18.0596C19.5796 18.0596 19.5596 18.0696 19.4696 18.0896Z"
-        fill="url(#paint1_linear_473_2109)"
-      />
-      <defs>
-        <linearGradient
-          id="paint0_linear_473_2109"
-          x1="0.449188"
-          y1="12.1839"
-          x2="19.4714"
-          y2="12.1839"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.0016121" stopColor="#92DBCA" />
-          <stop offset="1" stopColor="#56B1AF" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_473_2109"
-          x1="13.1985"
-          y1="16.8686"
-          x2="23.1931"
-          y2="16.8686"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.0016121" stopColor="#92DBCA" />
-          <stop offset="1" stopColor="#56B1AF" />
-        </linearGradient>
-      </defs>
+        fill="currentColor"
+      ></path>
     </svg>
   )
 }
diff --git a/packages/wallet/frontend/src/components/layouts/AppLayout.tsx b/packages/wallet/frontend/src/components/layouts/AppLayout.tsx
@@ -26,8 +26,7 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
     <>
       <Menu />
       {isUserFirstTime && <Onboarding />}
-
-      <main className="mt-20 md:mt-0 px-8 py-6 md:px-16 md:py-12 md:[grid-column:2/3]">
+      <main className="mt-[84px] md:mt-0 px-8 py-7 md:px-16 md:py-12 md:[grid-column:2/3]">
         {children}
         <Toaster />
         <Bubbles className="fixed inset-y-0 right-0 hidden h-full lg:block" />