From c731c256e45c4cf2d4613bdd3ccde5dffb2d7d13 Mon Sep 17 00:00:00 2001 From: Anton Lykhoyda Date: Tue, 7 Jan 2025 15:17:18 +0100 Subject: [PATCH] clean styles; update header --- packages/web-wallet/src/App.tsx | 9 +- .../web-wallet/src/assets/icons/check.svg | 3 + .../web-wallet/src/assets/icons/warning.svg | 3 + packages/web-wallet/src/assets/index.ts | 4 + .../src/components/Button/Button.tsx | 34 ++++++-- .../src/components/Header/Header.tsx | 75 ++++++++++------- .../src/components/Layout/Layout.tsx | 2 +- .../TransactionStatusCard.tsx | 38 +++++++++ .../src/context/MetamaskContext.tsx | 22 +++-- packages/web-wallet/src/pages/Dashboard.tsx | 2 +- packages/web-wallet/src/pages/Home.tsx | 2 +- .../src/pages/TransferBalance/Step1.tsx | 6 +- .../src/pages/TransferBalance/Step3.tsx | 82 +++++++++---------- .../pages/TransferBalance/TransferBalance.tsx | 36 ++++---- packages/web-wallet/src/styles/index.css | 6 ++ 15 files changed, 213 insertions(+), 111 deletions(-) create mode 100644 packages/web-wallet/src/assets/icons/check.svg create mode 100644 packages/web-wallet/src/assets/icons/warning.svg create mode 100644 packages/web-wallet/src/components/TransactionStatusCard/TransactionStatusCard.tsx diff --git a/packages/web-wallet/src/App.tsx b/packages/web-wallet/src/App.tsx index 1f014c0..32ff99a 100644 --- a/packages/web-wallet/src/App.tsx +++ b/packages/web-wallet/src/App.tsx @@ -11,9 +11,12 @@ function App() { useEffect(() => { // Add custom background to home page - document.body.classList.remove('home-page-bg'); - if (location.pathname === '/') document.body.classList.add('home-page-bg'); - }, [location]); + if (location.pathname === '/') { + document.body.classList.add('home-page', 'home-page-bg'); + } else { + document.body.classList.remove('home-page', 'home-page-bg'); + } + }, [location.pathname]); useInterval(() => { triggerRescan(); diff --git a/packages/web-wallet/src/assets/icons/check.svg b/packages/web-wallet/src/assets/icons/check.svg new file mode 100644 index 0000000..d0ff43d --- /dev/null +++ b/packages/web-wallet/src/assets/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web-wallet/src/assets/icons/warning.svg b/packages/web-wallet/src/assets/icons/warning.svg new file mode 100644 index 0000000..c58f4fe --- /dev/null +++ b/packages/web-wallet/src/assets/icons/warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web-wallet/src/assets/index.ts b/packages/web-wallet/src/assets/index.ts index 2d67f3c..3a39e33 100644 --- a/packages/web-wallet/src/assets/index.ts +++ b/packages/web-wallet/src/assets/index.ts @@ -14,6 +14,8 @@ import { ReactComponent as ShieldDividedSvg } from './icons/shield-divided.svg'; import { ReactComponent as SummarySvg } from './icons/summary.svg'; import { ReactComponent as CoinsSvg } from './icons/coins.svg'; import { ReactComponent as ChevronSVG } from './icons/chevron.svg'; +import { ReactComponent as CheckSVG } from './icons/check.svg'; +import { ReactComponent as WarningSVG } from './icons/warning.svg'; export { ChainsafeSvg, @@ -30,4 +32,6 @@ export { SummarySvg, CoinsSvg, ChevronSVG, + CheckSVG, + WarningSVG, }; diff --git a/packages/web-wallet/src/components/Button/Button.tsx b/packages/web-wallet/src/components/Button/Button.tsx index 3a02503..dcf5a06 100644 --- a/packages/web-wallet/src/components/Button/Button.tsx +++ b/packages/web-wallet/src/components/Button/Button.tsx @@ -1,16 +1,38 @@ -type ButtonProps = { +import React from 'react'; +type ButtonVariant = 'primary' | 'secondary'; + +interface ButtonProps { onClick: () => void; label: string; -}; + classNames?: string; + variant?: ButtonVariant; + icon?: React.ReactNode; +} + +function Button({ + onClick, + label, + classNames = '', + variant = 'primary', + icon, +}: ButtonProps) { + const baseClasses = + 'min-w-[228px] px-6 py-3 rounded-3xl text-base font-medium leading-normal cursor-pointer transition-all hover:transition-all'; + + const variantClasses = + variant === 'primary' + ? 'bg-[#0e0e0e] text-white border hover:bg-buttonBlackGradientHover' + : 'bg-transparent text-black hover:bg-[#fff7e6] border hover:border-[#ffa940]'; -function Button({ onClick, label }: ButtonProps) { return ( ); } diff --git a/packages/web-wallet/src/components/Header/Header.tsx b/packages/web-wallet/src/components/Header/Header.tsx index 528ceb3..984ce45 100644 --- a/packages/web-wallet/src/components/Header/Header.tsx +++ b/packages/web-wallet/src/components/Header/Header.tsx @@ -1,43 +1,62 @@ import React from 'react'; -import { Link } from 'react-router-dom'; -import { MetaMaskSnapsLogoSvg, ZcashSvg } from '../../assets'; +import { Link, useLocation } from 'react-router-dom'; +import { MetaMaskLogoSvg, MetaMaskSnapsLogoSvg, ZcashSvg } from '../../assets'; +import Button from '@components/Button/Button'; +import { useMetaMask } from '@hooks/snaps/useMetaMask'; const Header = (): React.JSX.Element => { + const { clearState } = useMetaMask(); + const location = useLocation(); + const isHomePage = location.pathname === '/'; + return ( -
+
- +
- + {isHomePage ? ( + + ) : ( + + )}
- + {isHomePage ? ( + + ) : ( +
); }; diff --git a/packages/web-wallet/src/components/Layout/Layout.tsx b/packages/web-wallet/src/components/Layout/Layout.tsx index e1bbebb..4026c41 100644 --- a/packages/web-wallet/src/components/Layout/Layout.tsx +++ b/packages/web-wallet/src/components/Layout/Layout.tsx @@ -7,7 +7,7 @@ const Layout = ({ children }: React.PropsWithChildren): React.JSX.Element => { return (
-
+
{children ? children : }