From 1f9d75c272e3e5e92636bd4e9966f48ad58c685d Mon Sep 17 00:00:00 2001 From: turbocrime <134443988+turbocrime@users.noreply.github.com> Date: Tue, 23 Apr 2024 06:20:49 -0700 Subject: [PATCH] Ibc base design layout (#850) Co-authored-by: Gabe Rodriguez --- apps/extension/package.json | 2 +- apps/minifront/package.json | 2 +- .../src/components/header/constants.tsx | 18 ++++---------- .../src/components/ibc/ibc-in-form.tsx | 21 +++++++++++++++- .../src/components/ibc/ibc-out-form.tsx | 6 +++-- apps/minifront/src/components/ibc/layout.tsx | 24 ++++++++++++------- packages/tailwind-config/index.ts | 3 --- packages/ui/components/ui/button.tsx | 7 +++--- packages/ui/components/ui/card.tsx | 11 ++++++--- pnpm-lock.yaml | 12 +++++----- 10 files changed, 64 insertions(+), 42 deletions(-) diff --git a/apps/extension/package.json b/apps/extension/package.json index 81b8a26c35..a20aa601af 100644 --- a/apps/extension/package.json +++ b/apps/extension/package.json @@ -20,7 +20,7 @@ "@bufbuild/protobuf": "^1.8.0", "@connectrpc/connect": "^1.4.0", "@connectrpc/connect-web": "^1.4.0", - "@penumbra-labs/registry": "4.0.0", + "@penumbra-labs/registry": "4.1.0", "@penumbra-zone/bech32": "workspace:*", "@penumbra-zone/client": "workspace:*", "@penumbra-zone/constants": "workspace:*", diff --git a/apps/minifront/package.json b/apps/minifront/package.json index 55e087ade3..ef3de1f946 100644 --- a/apps/minifront/package.json +++ b/apps/minifront/package.json @@ -18,7 +18,7 @@ "@buf/penumbra-zone_penumbra.bufbuild_es": "1.8.0-20240331004851-c3b058e666bc.2", "@buf/penumbra-zone_penumbra.connectrpc_es": "1.4.0-20240331004851-c3b058e666bc.2", "@bufbuild/protobuf": "^1.8.0", - "@penumbra-labs/registry": "4.0.0", + "@penumbra-labs/registry": "4.1.0", "@penumbra-zone/bech32": "workspace:*", "@penumbra-zone/client": "workspace:*", "@penumbra-zone/constants": "workspace:*", diff --git a/apps/minifront/src/components/header/constants.tsx b/apps/minifront/src/components/header/constants.tsx index d0783a5e10..8420069f26 100644 --- a/apps/minifront/src/components/header/constants.tsx +++ b/apps/minifront/src/components/header/constants.tsx @@ -1,5 +1,4 @@ import { PagePath } from '../metadata/paths'; -import { BoxIcon } from '../../icons/box'; import { SwapIcon } from '../../icons/swap'; import { ReactElement } from 'react'; import { ArrowTopRightIcon, MixerHorizontalIcon, TextAlignLeftIcon } from '@radix-ui/react-icons'; @@ -14,11 +13,10 @@ export interface HeaderLink { export const headerLinks: HeaderLink[] = [ { - href: PagePath.DASHBOARD, - label: 'Dashboard', - active: true, - subLinks: [PagePath.TRANSACTIONS, PagePath.NFTS], - mobileIcon: , + href: PagePath.IBC, + label: 'Shield Funds', + active: false, + mobileIcon: , }, { href: PagePath.SEND, @@ -35,16 +33,10 @@ export const headerLinks: HeaderLink[] = [ }, { href: PagePath.STAKING, - label: 'Staking', + label: 'Stake', active: true, mobileIcon: , }, - { - href: PagePath.IBC, - label: 'IBC', - active: false, - mobileIcon: , - }, ]; export const transactionLink = { diff --git a/apps/minifront/src/components/ibc/ibc-in-form.tsx b/apps/minifront/src/components/ibc/ibc-in-form.tsx index 00b4535c47..d4698d85b0 100644 --- a/apps/minifront/src/components/ibc/ibc-in-form.tsx +++ b/apps/minifront/src/components/ibc/ibc-in-form.tsx @@ -1,3 +1,22 @@ +import { Button } from '@penumbra-zone/ui/components/ui/button'; +import { LockClosedIcon } from '@radix-ui/react-icons'; + export const IbcInForm = () => { - return
To come...
; + return ( +
{ + e.preventDefault(); + }} + > +

Stuff to go here..

+ + +
+ ); }; diff --git a/apps/minifront/src/components/ibc/ibc-out-form.tsx b/apps/minifront/src/components/ibc/ibc-out-form.tsx index 65e295c266..d965571f8d 100644 --- a/apps/minifront/src/components/ibc/ibc-out-form.tsx +++ b/apps/minifront/src/components/ibc/ibc-out-form.tsx @@ -7,6 +7,7 @@ import { filterBalancesPerChain, ibcSelector, ibcValidationErrors } from '../../ import InputToken from '../shared/input-token'; import { InputBlock } from '../shared/input-block'; import { IbcLoaderResponse } from './ibc-loader'; +import { LockOpen2Icon } from '@radix-ui/react-icons'; export const IbcOutForm = () => { const { balances } = useLoaderData() as IbcLoaderResponse; @@ -74,15 +75,16 @@ export const IbcOutForm = () => { ); diff --git a/apps/minifront/src/components/ibc/layout.tsx b/apps/minifront/src/components/ibc/layout.tsx index 4443737a33..4d497fcf94 100644 --- a/apps/minifront/src/components/ibc/layout.tsx +++ b/apps/minifront/src/components/ibc/layout.tsx @@ -1,16 +1,22 @@ import { Card } from '@penumbra-zone/ui/components/ui/card'; -import { IbcInForm } from './ibc-in-form'; import { IbcOutForm } from './ibc-out-form'; +import { IbcInForm } from './ibc-in-form'; +import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons'; export const IbcLayout = () => { return ( -
- - - - - - -
+ <> +
+
+ + + + + + + + +
+ ); }; diff --git a/packages/tailwind-config/index.ts b/packages/tailwind-config/index.ts index 2b4bc31f97..3fd08316b3 100644 --- a/packages/tailwind-config/index.ts +++ b/packages/tailwind-config/index.ts @@ -154,9 +154,6 @@ export default { url('penumbra-logo.svg') `, }, - backgroundPosition: { - 'right-center': 'right center', - }, }, }, plugins: [tailwindCssAnimatePlugin], diff --git a/packages/ui/components/ui/button.tsx b/packages/ui/components/ui/button.tsx index b73d1863ce..928e3b3270 100644 --- a/packages/ui/components/ui/button.tsx +++ b/packages/ui/components/ui/button.tsx @@ -10,16 +10,17 @@ const buttonVariants = cva( variant: { default: 'hover:bg-teal/80 bg-teal', gradient: - 'background-size-200 bg-button-gradient transition-all duration-500 hover:bg-right-center', + 'background-size-200 bg-button-gradient transition-all duration-500 hover:bg-right', secondary: - 'before:border-mask before:background-size-200 relative before:absolute before:inset-0 before:rounded-lg before:bg-button-gradient before:p-px before:transition-all before:duration-500 before:content-[""] before:hover:bg-right-center', + 'before:border-mask before:background-size-200 relative before:absolute before:inset-0 before:rounded-lg before:bg-button-gradient before:p-px before:transition-all before:duration-500 before:content-[""] before:hover:bg-right', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', destructiveSecondary: - 'before:border-mask before:background-size-200 relative text-destructive before:absolute before:inset-0 before:rounded-lg before:bg-destructive before:p-px before:transition-all before:duration-500 before:content-[""] hover:text-white before:hover:bg-right-center', + 'before:border-mask before:background-size-200 relative text-destructive before:absolute before:inset-0 before:rounded-lg before:bg-destructive before:p-px before:transition-all before:duration-500 before:content-[""] hover:text-white before:hover:bg-right', outline: 'rounded-none border-b border-border-secondary bg-background font-body font-bold text-muted-foreground hover:opacity-50', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-muted-foreground underline-offset-4 hover:underline', + onLight: 'bg-stone-700 text-white hover:bg-stone-600 focus:ring-2 focus:ring-gray-400', }, size: { default: 'h-9 md:h-11', diff --git a/packages/ui/components/ui/card.tsx b/packages/ui/components/ui/card.tsx index a6327cfd89..e50d1a3380 100644 --- a/packages/ui/components/ui/card.tsx +++ b/packages/ui/components/ui/card.tsx @@ -3,15 +3,20 @@ import { cn } from '../../lib/utils'; export interface CardProps extends React.HTMLAttributes { gradient?: boolean; + light?: boolean; } const Card = React.forwardRef( - ({ className, gradient, children, ...props }, ref) => { - const baseClasses = 'bg-charcoal rounded-lg shadow-sm p-[30px] overflow-hidden'; + ({ className, gradient, light, children, ...props }, ref) => { + const baseClasses = 'rounded-lg shadow-sm p-[30px] overflow-hidden'; return (
{children} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 78f8e1ac41..e3edc69a95 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -181,8 +181,8 @@ importers: specifier: ^1.4.0 version: 1.4.0(@bufbuild/protobuf@1.8.0)(@connectrpc/connect@1.4.0) '@penumbra-labs/registry': - specifier: 4.0.0 - version: 4.0.0 + specifier: 4.1.0 + version: 4.1.0 '@penumbra-zone/bech32': specifier: workspace:* version: link:../../packages/bech32 @@ -365,8 +365,8 @@ importers: specifier: ^1.8.0 version: 1.8.0 '@penumbra-labs/registry': - specifier: 4.0.0 - version: 4.0.0 + specifier: 4.1.0 + version: 4.1.0 '@penumbra-zone/bech32': specifier: workspace:* version: link:../../packages/bech32 @@ -3895,8 +3895,8 @@ packages: engines: {node: '>=8.12.0'} dev: true - /@penumbra-labs/registry@4.0.0: - resolution: {integrity: sha512-r4YxviA0RFFw6bCbh6CPks2HWi3d865nkviNEcPQa5NxevKlxwIOlX6fIWZhrRDPS09PYD1AsElal6uQYHpH6w==} + /@penumbra-labs/registry@4.1.0: + resolution: {integrity: sha512-PoM0viPsEqkBNSiVIElqo0n93lCCEwzKrtdiK5JLzsHeSZNlEX/q8k0m0pR+/oM13RiF9GRcPY65jIu2TwZ6AQ==} dev: false /@pkgjs/parseargs@0.11.0: